src/lib/components/asp-panel/asp-panel.component.ts
Angular Component for the DropdownList Control.
PanelComponent
changeDetection | ChangeDetectionStrategy.OnPush |
providers |
ContainerTabOrderService
DefaultButtonService
|
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 | ||||||
getgroupingText()
|
||||||
setgroupingText(groupingText: string)
|
||||||
Optional input parameter to specify groupingText property setter and getter.
Parameters :
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);
}
}