File

src/lib/components/asp-panel/asp-panel.component.ts

Description

Angular Component for the DropdownList Control.

Extends

PanelComponent

Metadata

Index

Properties
Methods
Inputs
Accessors

Constructor

constructor(serviceRef: WebMapService, changeDetectorRef: ChangeDetectorRef, render2: Renderer2, elem: ElementRef, webComponents: WebComponentsService, bringTopServ1: BringTopService, defaultButtonService: DefaultButtonService)

Creates an instance of AspPanelComponent.

Parameters :
Name Type Optional
serviceRef WebMapService No
changeDetectorRef ChangeDetectorRef No
render2 Renderer2 No
elem ElementRef No
webComponents WebComponentsService No
bringTopServ1 BringTopService No
defaultButtonService DefaultButtonService No

Inputs

groupingText
Type : string

Optional input parameter to specify groupingText property setter and getter.

Methods

onKeydownEnter
onKeydownEnter(event: any)

Key down handler

Parameters :
Name Type Optional
event any No
Returns : void

Properties

groupingTextInternal
Type : string
Default value : ''

default variable to set groupingTextInternal in empty in case GroupingText doesn't exists in model

Accessors

groupingText
getgroupingText()
setgroupingText(groupingText: string)

Optional input parameter to specify groupingText property setter and getter.

Parameters :
Name Type Optional
groupingText string No
Returns : void
enableGroupingText
getenableGroupingText()

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);   
    }
}

Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""