src/lib/components/asp-panel/asp-panel.component.ts
Angular Component for the DropdownList Control.
            PanelComponent
    
| changeDetection | ChangeDetectionStrategy.OnPush | 
| providers | ContainerTabOrderServiceDefaultButtonService | 
| selector | wm-asp-panel | 
| styleUrls | ./asp-panel.component.scss | 
| templateUrl | ./asp-panel.component.html | 
| Properties | 
| Methods | 
| Inputs | 
| Accessors | 
| constructor(serviceRef: WebMapService, changeDetectorRef: ChangeDetectorRef, render2: Renderer2, elem: ElementRef, webComponents: WebComponentsService, bringTopServ1: BringTopService, defaultButtonService: DefaultButtonService) | ||||||||||||||||||||||||
| Creates an instance of AspPanelComponent. 
                                    Parameters :
                                     
 | 
| groupingText | |
| Type : string | |
| Optional input parameter to specify groupingText property setter and getter. | |
| onKeydownEnter | ||||||
| onKeydownEnter(event: any) | ||||||
| Key down handler 
                        Parameters :
                        
                         
 
                        Returns :          void | 
| groupingTextInternal | 
| Type : string | 
| Default value : '' | 
| default variable to set groupingTextInternal in empty in case GroupingText doesn't exists in model | 
| groupingText | ||||||
| get groupingText() | ||||||
| set groupingText(groupingText: string) | ||||||
| Optional input parameter to specify groupingText property setter and getter. 
                                        Parameters :
                                         
 
                                    Returns :          void | 
| enableGroupingText | 
| get enableGroupingText() | 
| get property to indicate if enable grouping text function. 
                                    Returns :          boolean | 
import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  ElementRef,
  Input,
  Optional,
  Renderer2
} from '@angular/core';
import {
  ContainerTabOrderService,
  PanelComponent,
  WebComponentsService
} from '@mobilize/winforms-components';
import { BringTopService, dataTransfer } from '@mobilize/base-components';
import { ErrorCodes, ExceptionHandlerClass } from '@mobilize/webmap-core';
import { WebMapService } from '@mobilize/angularclient';
import { DefaultButtonService } from '../../services';
/**
 * Angular Component for the DropdownList Control.
 *
 * @export
 * @class AspPanelComponent
 * @extends {PanelComponent}
 */
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'wm-asp-panel',
  templateUrl: './asp-panel.component.html',
  styleUrls: ['./asp-panel.component.scss'],
  inputs: ['model'],
  providers: [ContainerTabOrderService, DefaultButtonService]
})
@dataTransfer(['pnl'])
@ExceptionHandlerClass(ErrorCodes.Winforms)
export class AspPanelComponent extends PanelComponent {
  /**
   * Creates an instance of AspPanelComponent.
   * @param {WebMapService} serviceRef
   * @param {ChangeDetectorRef} changeDetectorRef
   * @param {Renderer2} render2
   * @param {ElementRef} elem
   * @param {WebComponentsService} webComponents
   * @param {BringTopService} bringTopServ1
   * @param {DefaultButtonService} defaultButtonService
   * @memberof AspPanelComponent
   */
  constructor(
    serviceRef: WebMapService,
    private changeDetectorRef: ChangeDetectorRef,
    private render2: Renderer2,
    private elem: ElementRef,
    webComponents: WebComponentsService,
    @Optional() private bringTopServ1: BringTopService,
    private defaultButtonService: DefaultButtonService
  ) {
    super(
      changeDetectorRef,
      render2,
      elem,
      serviceRef,
      webComponents,
      bringTopServ1
    );
  }
  /**
   *default variable to set groupingTextInternal in empty in case GroupingText doesn't exists in model
   *
   * @type {string}
   * @memberof AspPanelComponent
   */
  groupingTextInternal = '';
  /**
   * Optional input parameter to specify groupingText property setter and getter.
   *
   * @memberof AspPanelComponent
   */
  @Input()
  set groupingText(groupingText: string) {
    this.groupingTextInternal = groupingText;
  }
  get groupingText() {
    return this.model.GroupingText ?? this.groupingTextInternal;
  }
  /**
   * get property to indicate if enable grouping text function.
   *
   * @memberof AspPanelComponent
   */
  get enableGroupingText(): boolean {
    return this.groupingText.length > 0;
  }
  /**
   * Key down handler
   * @param event
   */
  onKeydownEnter(event: any): void {
    /* c8 ignore start */
    if (this.model.DefaultButton) {
      event.args = this.model.DefaultButton;
      this.defaultButtonService.notifyClick(event);
      event.stopPropagation();
      event.preventDefault();
    } /* c8 ignore stop */
  }
}
<fieldset [ngStyle]="setMyStyle()" #displayElement *ngIf="model && visible" [disabled]="disabled"  class="wm-asp-panel"
  [ngClass]="class" wmControls [hostComponent]="this" (keydown.enter)="onKeydownEnter($event)">
  <wm-formscontainer [parentId]="id"></wm-formscontainer>
  <div id="grouping" *ngIf="enableGroupingText;else nogrouping">
    <fieldset>
      <legend>{{groupingText}}</legend>
        <ng-content *ngTemplateOutlet="nogrouping">
        </ng-content>
      </fieldset>
  </div>
  <ng-template #nogrouping>
    <ng-content>
    </ng-content>
  </ng-template>
  <wm-custom-control-container [windowModel]="windowModel" (RemoveControl)="removeControlHandler($event)"
  [controls]="getControlObjects(model)">
  </wm-custom-control-container>
</fieldset>
                    ./asp-panel.component.scss
                
wm-formscontainer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    overflow: hidden;
}
fieldset {
    border-style: none;
    > div > fieldset {
        margin: 15px;
        border-width: 2px;
        border-style: solid;
        border-color: rgb(175, 173, 173);   
    }
}