{"__symbolic":"module","version":4,"exports":[{"from":"./lib/badge.utility"},{"from":"./lib/button.utility"},{"from":"./lib/collection.utility"},{"from":"./lib/dependent.utility"},{"from":"./lib/field.utility"},{"from":"./lib/form.utility"},{"from":"./lib/form-custom.utility"},{"from":"./lib/list.utility"},{"from":"./lib/master-data.utility"},{"from":"./lib/object.utility"},{"from":"./lib/property.utility"},{"from":"./lib/security.utility"},{"from":"./lib/string.utility"},{"from":"./lib/dropdown.utility"},{"from":"./lib/keymap.utility"},{"from":"./lib/crud.utility"},{"from":"./lib/ability.utility"},{"from":"./lib/field/radio.model"},{"from":"./lib/field/slider.model"},{"from":"./lib/field/toggle.model"},{"from":"./lib/field/key-map.model"},{"from":"./lib/field/toolbar.model"}],"metadata":{"MaterialWidgetModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":89,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ButtonComponent"},{"__symbolic":"reference","name":"ButtonGroupComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"CrudFormComponent"},{"__symbolic":"reference","name":"CrudListComponent"},{"__symbolic":"reference","name":"CrudListComponentInterface"},{"__symbolic":"reference","name":"BottomSearchSheet"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"AdminLayoutComponent"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"StaticListComponent"},{"__symbolic":"reference","name":"DynamicListComponent"},{"__symbolic":"reference","name":"ModalComponent"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","name":"ɵk"},{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"ɵn"},{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵp"},{"__symbolic":"reference","name":"ɵq"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":133,"character":4},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule","line":137,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":138,"character":4},{"__symbolic":"reference","module":"@material-extended/mde","name":"MdePopoverModule","line":140,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":141,"character":4},{"__symbolic":"reference","module":"ng2-tooltip-directive","name":"TooltipModule","line":142,"character":4},{"__symbolic":"reference","module":"@angular/cdk/layout","name":"LayoutModule","line":143,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":144,"character":4},{"__symbolic":"reference","module":"@angular/material/button-toggle","name":"MatButtonToggleModule","line":145,"character":4},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":146,"character":4},{"__symbolic":"reference","module":"@angular/material/chips","name":"MatChipsModule","line":147,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":148,"character":4},{"__symbolic":"reference","module":"@angular/material/badge","name":"MatBadgeModule","line":149,"character":4},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":150,"character":4},{"__symbolic":"reference","module":"@angular/material/card","name":"MatCardModule","line":151,"character":4},{"__symbolic":"reference","module":"@angular/material/tabs","name":"MatTabsModule","line":152,"character":4},{"__symbolic":"reference","module":"@angular/material/expansion","name":"MatExpansionModule","line":153,"character":4},{"__symbolic":"reference","module":"@angular/material/sidenav","name":"MatSidenavModule","line":154,"character":4},{"__symbolic":"reference","module":"@angular/material/bottom-sheet","name":"MatBottomSheetModule","line":155,"character":4},{"__symbolic":"reference","module":"@angular/material/divider","name":"MatDividerModule","line":156,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":157,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":158,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":159,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":160,"character":4},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":161,"character":4},{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MatAutocompleteModule","line":162,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":163,"character":4},{"__symbolic":"reference","module":"@angular/material/radio","name":"MatRadioModule","line":164,"character":4},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":165,"character":4},{"__symbolic":"reference","module":"@angular/material-moment-adapter","name":"MatMomentDateModule","line":166,"character":4},{"__symbolic":"reference","module":"@angular/material/slider","name":"MatSliderModule","line":167,"character":4},{"__symbolic":"reference","module":"@angular/material/slide-toggle","name":"MatSlideToggleModule","line":168,"character":4},{"__symbolic":"reference","module":"@angular/material/list","name":"MatListModule","line":169,"character":4},{"__symbolic":"reference","module":"@angular/material/table","name":"MatTableModule","line":170,"character":4},{"__symbolic":"reference","module":"@angular/material/sort","name":"MatSortModule","line":171,"character":4},{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginatorModule","line":172,"character":4},{"__symbolic":"reference","module":"@angular/material/grid-list","name":"MatGridListModule","line":173,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-bar","name":"MatProgressBarModule","line":174,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":175,"character":4},{"__symbolic":"reference","module":"@angular/cdk/drag-drop","name":"DragDropModule","line":176,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":183,"character":4},{"__symbolic":"reference","module":"@angular/material/divider","name":"MatDividerModule","line":184,"character":4},{"__symbolic":"reference","module":"@angular/material/sidenav","name":"MatSidenavModule","line":185,"character":4},{"__symbolic":"reference","module":"@angular/material/expansion","name":"MatExpansionModule","line":186,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":187,"character":4},{"__symbolic":"reference","module":"@angular/material/card","name":"MatCardModule","line":188,"character":4},{"__symbolic":"reference","module":"@angular/material/divider","name":"MatDividerModule","line":189,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":190,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":191,"character":4},{"__symbolic":"reference","module":"@angular/material/card","name":"MatCardModule","line":192,"character":4},{"__symbolic":"reference","module":"@angular/material/divider","name":"MatDividerModule","line":193,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":194,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":195,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":196,"character":4},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":197,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"ngx-quill","name":"QuillModule","line":198,"character":4},"member":"forRoot"}},{"__symbolic":"reference","module":"@casl/angular","name":"AbilityModule","line":199,"character":4},{"__symbolic":"reference","module":"@angular/flex-layout","name":"FlexLayoutModule","line":200,"character":4},{"__symbolic":"reference","module":"@angular/material/toolbar","name":"MatToolbarModule","line":201,"character":4},{"__symbolic":"reference","module":"ngx-infinite-scroll","name":"InfiniteScrollModule","line":202,"character":4}],"exports":[{"__symbolic":"reference","name":"ButtonComponent"},{"__symbolic":"reference","name":"ButtonGroupComponent"},{"__symbolic":"reference","name":"CrudListComponentInterface"},{"__symbolic":"reference","name":"CrudFormComponent"},{"__symbolic":"reference","name":"CrudListComponent"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"StaticListComponent"},{"__symbolic":"reference","name":"DynamicListComponent"},{"__symbolic":"reference","name":"ModalComponent"},{"__symbolic":"reference","module":"@material-extended/mde","name":"MdePopoverModule","line":222,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":223,"character":4},{"__symbolic":"reference","module":"@angular/material/button-toggle","name":"MatButtonToggleModule","line":224,"character":4},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":225,"character":4},{"__symbolic":"reference","module":"@angular/material/chips","name":"MatChipsModule","line":226,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":227,"character":4},{"__symbolic":"reference","module":"@angular/material/badge","name":"MatBadgeModule","line":228,"character":4},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":229,"character":4},{"__symbolic":"reference","module":"@angular/material/card","name":"MatCardModule","line":230,"character":4},{"__symbolic":"reference","module":"@angular/material/tabs","name":"MatTabsModule","line":231,"character":4},{"__symbolic":"reference","module":"@angular/material/expansion","name":"MatExpansionModule","line":232,"character":4},{"__symbolic":"reference","module":"@angular/material/sidenav","name":"MatSidenavModule","line":233,"character":4},{"__symbolic":"reference","module":"@angular/material/bottom-sheet","name":"MatBottomSheetModule","line":234,"character":4},{"__symbolic":"reference","module":"@angular/material/divider","name":"MatDividerModule","line":235,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":236,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":237,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":238,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":239,"character":4},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":240,"character":4},{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MatAutocompleteModule","line":241,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":242,"character":4},{"__symbolic":"reference","module":"@angular/material/radio","name":"MatRadioModule","line":243,"character":4},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":244,"character":4},{"__symbolic":"reference","module":"@angular/material-moment-adapter","name":"MatMomentDateModule","line":245,"character":4},{"__symbolic":"reference","module":"@angular/material/slider","name":"MatSliderModule","line":246,"character":4},{"__symbolic":"reference","module":"@angular/material/slide-toggle","name":"MatSlideToggleModule","line":247,"character":4},{"__symbolic":"reference","module":"@angular/material/list","name":"MatListModule","line":248,"character":4},{"__symbolic":"reference","module":"@angular/material/table","name":"MatTableModule","line":249,"character":4},{"__symbolic":"reference","module":"@angular/material/sort","name":"MatSortModule","line":250,"character":4},{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginatorModule","line":251,"character":4},{"__symbolic":"reference","module":"@angular/material/grid-list","name":"MatGridListModule","line":252,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-bar","name":"MatProgressBarModule","line":253,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":254,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":262,"character":4},{"__symbolic":"reference","module":"@angular/material/divider","name":"MatDividerModule","line":263,"character":4},{"__symbolic":"reference","module":"@angular/material/sidenav","name":"MatSidenavModule","line":264,"character":4},{"__symbolic":"reference","module":"@angular/material/expansion","name":"MatExpansionModule","line":265,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":266,"character":4},{"__symbolic":"reference","module":"@angular/material/card","name":"MatCardModule","line":267,"character":4},{"__symbolic":"reference","module":"@angular/material/divider","name":"MatDividerModule","line":268,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":269,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":270,"character":4},{"__symbolic":"reference","module":"@angular/material/card","name":"MatCardModule","line":271,"character":4},{"__symbolic":"reference","module":"@angular/material/divider","name":"MatDividerModule","line":272,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":273,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":274,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":275,"character":4},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":276,"character":4},{"__symbolic":"reference","module":"ngx-infinite-scroll","name":"InfiniteScrollModule","line":277,"character":4},{"__symbolic":"reference","name":"ɵn"},{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵp"},{"__symbolic":"reference","name":"ɵq"}],"providers":[{"provide":{"__symbolic":"reference","module":"@casl/ability","name":"Ability","line":285,"character":15},"useValue":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@casl/ability","name":"Ability","line":285,"character":38}}},{"provide":{"__symbolic":"reference","module":"@casl/ability","name":"PureAbility","line":286,"character":15},"useExisting":{"__symbolic":"reference","module":"@casl/ability","name":"Ability","line":286,"character":41}}]}]}],"members":{}},"ButtonComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":15,"character":1},"arguments":[{"selector":"mx-button","template":"<!-- <pre>{{ displayButton | json }}</pre> -->\n<span \n    [style.width]=\"_button.width\"\n    class=\"mx-button-wrapper\" \n    *ngIf=\"_button && displayButton && (_button.permission == null || (_button.permission && (_button.permission['subject'] | can: _button.permission['action'])))\">\n    <button \n        mat-menu-item  \n        *ngIf=\"isMenuButton\"\n        [disabled]=\"isButtonDisabled\" \n        [ngClass]=\"{'mx-small-btn': _button.size == 'small', 'mx-tiny-btn': _button.size == 'tiny', 'mx-micro-btn': _button.size == 'micro', 'mx-default-btn': _button.size == 'default'}\" \n        class=\"mx-menu-button mx-menu-button-{{_button.identifier}}\"\n        [ngStyle]=\"{'width': 'calc(' + _button.width + ' - 8px)'}\"\n        [attr.color]=\"_button.color\"  \n        (click)=\"click($event)\" \n    >\n        <ng-container *ngTemplateOutlet=\"cfButtonIcon\"></ng-container>\n    </button>\n\n    <button \n        mat-flat-button\n        *ngIf=\"isFlatButton\"\n        [color]=\"_button.color\" \n        [disabled]=\"isButtonDisabled\" \n        [ngClass]=\"{'mx-small-btn': _button.size == 'small', 'mx-tiny-btn': _button.size == 'tiny', 'mx-micro-btn': _button.size == 'micro', 'mx-default-btn': _button.size == 'default'}\" \n        class=\"mx-flat-button mx-flat-button-{{_button.identifier}}\"\n        [ngStyle]=\"{'width': _button.width == '' || _button.width == '100%' ? _button.width : 'calc(' + _button.width + ' - 8px)'}\"\n        (click)=\"click($event)\" \n        [matBadge]=\"_button.badge ? _button.badge.content : ''\" \n        [matBadgeColor]=\"_button.badge ? _button.badge.color : ''\" \n        [matBadgePosition]=\"_button.badge ? _button.badge.position : ''\" \n        [matBadgeSize]=\"_button.badge ? _button.badge.size : ''\"  \n        [matBadgeHidden]=\"_button.badge ? _button.badge.hide : false\"\n    >\n        <ng-container *ngTemplateOutlet=\"cfButtonIcon\"></ng-container>\n    </button> \n\n    <button \n        mat-button \n        *ngIf=\"isGhostButton\"\n        [color]=\"_button.color\" \n        [disabled]=\"isButtonDisabled\" \n        [ngClass]=\"{'mx-small-btn': _button.size == 'small', 'mx-tiny-btn': _button.size == 'tiny', 'mx-micro-btn': _button.size == 'micro', 'mx-default-btn': _button.size == 'default', 'mx-button-wt-padding': buttonWithoutPadding == true}\" \n        class=\"mx-ghost-button mx-ghost-button-{{_button.identifier}}\"\n        [ngStyle]=\"{'width': _button.width == '' || _button.width == '100%' ? _button.width : 'calc(' + _button.width + ' - 8px)'}\"\n        (click)=\"click($event)\" \n        [matBadge]=\"_button.badge ? _button.badge.content : ''\" \n        [matBadgeColor]=\"_button.badge ? _button.badge.color : ''\" \n        [matBadgePosition]=\"_button.badge ? _button.badge.position : ''\" \n        [matBadgeSize]=\"_button.badge ? _button.badge.size : ''\" \n        [matBadgeHidden]=\"_button.badge ? _button.badge.hide : false\"\n    >\n        <ng-container *ngTemplateOutlet=\"cfButtonIcon\"></ng-container>    \n    </button>\n    \n    <button \n        mat-raised-button \n        *ngIf=\"isRaisedButton\"\n        [color]=\"_button.color\" \n        [ngClass]=\"{'mx-small-btn': _button.size == 'small', 'mx-tiny-btn': _button.size == 'tiny', 'mx-micro-btn': _button.size == 'micro', 'mx-default-btn': _button.size == 'default'}\" \n        class=\"mx-raised-button mx-raised-button-{{_button.identifier}}\"\n        [ngStyle]=\"{'width': _button.width == '' || _button.width == '100%' ? _button.width : 'calc(' + _button.width + ' - 8px)'}\"\n        [disabled]=\"isButtonDisabled\" \n        (click)=\"click($event)\" \n        [matBadge]=\"_button.badge ? _button.badge.content : ''\" \n        [matBadgeColor]=\"_button.badge ? _button.badge.color : ''\" \n        [matBadgePosition]=\"_button.badge ? _button.badge.position : ''\" \n        [matBadgeSize]=\"_button.badge ? _button.badge.size : ''\" \n        [matBadgeHidden]=\"_button.badge ? _button.badge.hide : false\"\n    >\n        <ng-container *ngTemplateOutlet=\"cfButtonIcon\"></ng-container>\n    </button>\n\n    <button \n        mat-stroked-button \n        *ngIf=\"isStrokedButton\"\n        [color]=\"_button.color\" \n        [disabled]=\"isButtonDisabled\" \n        [ngClass]=\"{'mx-small-btn': _button.size == 'small', 'mx-tiny-btn': _button.size == 'tiny', 'mx-micro-btn': _button.size == 'micro', 'mx-default-btn': _button.size == 'default'}\" \n        class=\"mx-stroked-button mx-stroked-button-{{_button.identifier}}\"\n        [ngStyle]=\"{'width': _button.width == '' || _button.width == '100%' ? _button.width : 'calc(' + _button.width + ' - 8px)'}\"\n        (click)=\"click($event)\" \n        [matBadge]=\"_button.badge ? _button.badge.content : ''\" \n        [matBadgeColor]=\"_button.badge ? _button.badge.color : ''\" \n        [matBadgePosition]=\"_button.badge ? _button.badge.position : ''\" \n        [matBadgeSize]=\"_button.badge ? _button.badge.size : ''\" \n        [matBadgeHidden]=\"_button.badge ? _button.badge.hide : false\"\n    >\n        <ng-container *ngTemplateOutlet=\"cfButtonIcon\"></ng-container>\n    </button>\n\n    <button \n        mat-fab \n        *ngIf=\"isFabButton\"\n        [color]=\"_button.color\" \n        [disabled]=\"isButtonDisabled\"  \n        [ngClass]=\"{'mx-small-btn': _button.size == 'small', 'mx-tiny-btn': _button.size == 'tiny', 'mx-micro-btn': _button.size == 'micro', 'mx-default-btn': _button.size == 'default'}\" \n        class=\"mx-fab-button mx-fab-button-{{_button.identifier}}\"\n        [ngStyle]=\"{'width': _button.width == '' || _button.width == '100%' ? _button.width : 'calc(' + _button.width + ' - 8px)'}\"\n        (click)=\"click($event)\" \n        [matBadge]=\"_button.badge ? _button.badge.content : ''\" \n        [matBadgeColor]=\"_button.badge ? _button.badge.color : ''\" \n        [matBadgePosition]=\"_button.badge ? _button.badge.position : ''\" \n        [matBadgeSize]=\"_button.badge ? _button.badge.size : ''\" \n        [matBadgeHidden]=\"_button.badge ? _button.badge.hide : false\"\n    >\n        <ng-container *ngTemplateOutlet=\"cfButtonIcon\"></ng-container>\n    </button>\n \n    <mat-chip \n        [selected]=\"state\" \n        *ngIf=\"isChip\" \n        [ngClass]=\"{'mx-small-btn': _button.size == 'small', 'mx-tiny-btn': _button.size == 'tiny', 'mx-micro-btn': _button.size == 'micro', 'mx-default-btn': _button.size == 'default'}\" \n        class=\"mx-chip-button mx-chip-button-{{_button.identifier}}\"\n        [ngStyle]=\"{'width': _button.width == '' || _button.width == '100%' ? _button.width : 'calc(' + _button.width + ' - 8px)'}\"\n        [color]=\"_button.color\" \n        [disabled]=\"isButtonDisabled\" \n        (click)=\"click($event)\" \n        [matBadge]=\"_button.badge ? _button.badge.content : ''\" \n        [matBadgeColor]=\"_button.badge ? _button.badge.color : ''\" \n        [matBadgePosition]=\"_button.badge ? _button.badge.position : ''\" \n        [matBadgeSize]=\"_button.badge ? _button.badge.size : ''\" \n        [matBadgeHidden]=\"_button.badge ? _button.badge.hide : false\"\n    >\n        <ng-container *ngTemplateOutlet=\"cfButtonIcon\"></ng-container>\n    </mat-chip>\n    <!-- {{_button | json}} -->\n    <a \n        mat-button \n        *ngIf=\"isLink\"\n        [color]=\"_button.color\" \n        [disabled]=\"isButtonDisabled\"  \n        [ngClass]=\"{'mx-small-btn': _button.size == 'small', 'mx-tiny-btn': _button.size == 'tiny', 'mx-micro-btn': _button.size == 'micro', 'mx-default-btn': _button.size == 'default', 'mx-button-wt-padding': buttonWithoutPadding == true}\" \n        class=\"mx-link mx-link-{{_button.identifier}}\"\n        [ngStyle]=\"{'width': _button.width == '' || _button.width == '100%' ? _button.width : 'calc(' + _button.width + ' - 8px)'}\"\n        [routerLink]=\"routerLink\" \n        [matTooltip]=\"_button.label\"\n        [matBadge]=\"_button.badge ? _button.badge.content : ''\" \n        [matBadgeColor]=\"_button.badge ? _button.badge.color : ''\" \n        [matBadgePosition]=\"_button.badge ? _button.badge.position : ''\" \n        [matBadgeSize]=\"_button.badge ? _button.badge.size : ''\" \n        [matBadgeHidden]=\"_button.badge ? _button.badge.hide : false\"\n    >\n        <ng-container *ngTemplateOutlet=\"cfButtonIcon\"></ng-container>\n    </a>\n\n    <!-- appearance=\"legacy\"  -->\n    <mat-button-toggle \n        *ngIf=\"isGroupButton\" \n        [value]=\"_button.identifier\" \n        [disabled]=\"isButtonDisabled\" \n        [attr.aria-label]=\"label\" \n        [ngClass]=\"{'mx-small-btn': _button.size == 'small', 'mx-tiny-btn': _button.size == 'tiny', 'mx-micro-btn': _button.size == 'micro', 'mx-toggle-default-btn': _button.size == 'default'}\" \n        class=\"mx-toggle-button mx-button-{{_button.identifier}}\"\n        [ngStyle]=\"{'width': _button.width == '' || _button.width == '100%' ? _button.width : 'calc(' + _button.width + ' - 8px)'}\"\n        (change)=\"click($event)\" \n        [matBadge]=\"_button.badge ? _button.badge.content : ''\" \n        [matBadgeColor]=\"_button.badge ? _button.badge.color : ''\" \n        [matBadgePosition]=\"_button.badge ? _button.badge.position : ''\"  \n        [matBadgeSize]=\"_button.badge ? _button.badge.size : ''\" \n        [matBadgeHidden]=\"_button.badge ? _button.badge.hide : false\"\n    >\n        <ng-container *ngTemplateOutlet=\"cfButtonIcon\"></ng-container>\n    </mat-button-toggle>\n</span>\n\n<ng-template #cfButtonIcon>\n    <mat-icon \n        (click)=\"iconClick($event)\" \n        aria-hidden=\"true\" \n        [attr.aria-label]=\"label\" \n        [ngClass]=\"{'mx-small-icon': _button.size == 'small', 'mx-tiny-icon': _button.size == 'tiny', 'mx-micro-icon': _button.size == 'micro'}\"  \n        class=\"mx-button-icon mx-button-icon-{{_button.identifier}}\"\n        [style.padding-right.px]=\"!isDisplayOnlyIcon ? 5 : 0\"\n        *ngIf=\"hasIconDisplay && (_button.iconPosition == 'LEFT' || _button.iconPosition == 'TOP')\">\n            {{_button.icon}}\n    </mat-icon>\n    <br *ngIf=\"hasIconDisplay && _button.iconPosition == 'TOP' && !isDisplayOnlyIcon\"/>\n    <span class=\"mx-button-label mx-button-label-{{_button.identifier}}\" *ngIf=\"!isDisplayOnlyIcon\">{{ label }}</span>\n    <br *ngIf=\"hasIconDisplay && _button.iconPosition == 'BOTTOM' && !isDisplayOnlyIcon\"/>\n    <mat-icon \n        (click)=\"iconClick($event)\" \n        aria-hidden=\"true\" \n        [attr.aria-label]=\"label\" \n        [ngClass]=\"{'mx-small-icon': _button.size == 'small', 'mx-tiny-icon': _button.size == 'tiny', 'mx-micro-icon': _button.size == 'micro'}\"  \n        class=\"mx-button-icon mx-button-icon-{{_button.identifier}}\"\n        [style.padding-left.px]=\"!isDisplayOnlyIcon ? 5 : 0\"\n        *ngIf=\"hasIconDisplay && (_button.iconPosition == 'RIGHT' || _button.iconPosition == 'BOTTOM')\">\n            {{_button.icon}}\n    </mat-icon>\n</ng-template>","styles":[".mx-small-btn{box-sizing:border-box;line-height:30px;min-width:unset}.mx-small-icon{font-size:12px;height:12px;width:12px}.mx-small-btn ::ng-deep .mat-button-toggle-label-content,.mx-small-btn ::ng-deep .mx-button-label{line-height:30px}.mx-small-btn.mat-standard-chip{min-height:30px}.mx-tiny-btn{box-sizing:border-box;font-size:10px;line-height:24px;min-width:unset}.mx-tiny-icon{font-size:10px;height:10px;width:10px}.mx-tiny-btn ::ng-deep .mat-button-toggle-label-content,.mx-tiny-btn ::ng-deep .mx-button-label{line-height:24px}.mx-tiny-btn.mat-standard-chip{min-height:26px}.mx-micro-btn{box-sizing:border-box;font-size:8px;line-height:18px;min-width:unset}.mx-micro-icon{font-size:8px;height:8px;width:8px}.mx-micro-btn ::ng-deep .mat-button-toggle-label-content,.mx-micro-btn ::ng-deep .mx-button-label{line-height:18px}.mx-micro-btn.mat-standard-chip{min-height:20px}.mx-toggle-default-btn ::ng-deep .mat-button-toggle-label-content,.mx-toggle-default-btn ::ng-deep .mx-button-label{line-height:36px}.mx-chip-button{justify-content:center}.mx-chip-button .mat-standard-chip{margin:unset}.mx-button-wt-padding,.mx-button-wt-padding .mat-button{min-width:0!important;padding:0!important}.mat-button,.mat-flat-button,.mat-icon-button,.mat-stroked-button{padding:0 5px!important}"]}]}],"members":{"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"formDisplayMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"sourceIdentifier":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"sourceIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"widgetArrayIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"identifier":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"context":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"originalData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"buttonRoute":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"parentHierarchy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"onClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":34,"character":3}}]}],"onIconClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":35,"character":3}}]}],"_button":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"button":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialog","line":79,"character":19},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":80,"character":20},{"__symbolic":"reference","module":"@angular/router","name":"ActivatedRoute","line":81,"character":19},{"__symbolic":"reference","module":"@casl/ability","name":"Ability","line":82,"character":21}]}],"ngOnInit":[{"__symbolic":"method"}],"setButtonDisplay":[{"__symbolic":"method"}],"setButtonWithoutPadding":[{"__symbolic":"method"}],"setLabel":[{"__symbolic":"method"}],"click":[{"__symbolic":"method"}],"openDialog":[{"__symbolic":"method"}],"invokeAction":[{"__symbolic":"method"}],"iconClick":[{"__symbolic":"method"}],"addSearchParamsInUrl":[{"__symbolic":"method"}],"setButtonEnable":[{"__symbolic":"method"}],"setOnlyIconDisplay":[{"__symbolic":"method"}],"setIconDisplay":[{"__symbolic":"method"}],"setFlatButton":[{"__symbolic":"method"}],"setGhostButton":[{"__symbolic":"method"}],"setRaisedButton":[{"__symbolic":"method"}],"setStrokedButton":[{"__symbolic":"method"}],"setFabButton":[{"__symbolic":"method"}],"setChip":[{"__symbolic":"method"}],"setLink":[{"__symbolic":"method"}],"setGroupButton":[{"__symbolic":"method"}],"setMenuButton":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ButtonGroupComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"mx-button-group","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":15,"character":17},"member":"None"},"template":"<!-- <pre>{{formDisplayMode | json}}</pre> -->\n<span class=\"mx-button-group\" *ngFor=\"let buttonList of buttonLists; let bIndex = index;\">\n    <mat-chip-list \n        *ngIf=\"buttonListsType[bIndex] == 'ChipGroup'\"\n        [style.width.%]=\"buttonList.width\" \n        [ngClass]=\"{'mx-button': bIndex < buttonLists.length - 1 }\"\n        class=\"mx-chip-group mx-chip-group-{{buttonList.groupIdentifier}}\"\n        aria-label=\"Chip Selection\">\n        <mx-button *ngFor=\"let button of buttonList.groupButtons\"\n            [form]=\"form\"\n            [ngClass]=\"{'mx-button': (bIndex + 1) != buttonList.length}\"\n            [style.width]=\"'calc(' + buttonList.buttonWidth + '% - 8px)'\"\n            [formDisplayMode]=\"formDisplayMode\"\n            [sourceIdentifier]=\"sourceIdentifier\"\n            [sourceIndex]=\"sourceIndex\"\n            [widgetArrayIndex]=\"widgetArrayIndex\"\n            [button]=\"button\"\n            [context]=\"context\" \n            [originalData]=\"originalData\"\n            [buttonRoute]=\"buttonRoute\"\n            [parentHierarchy]=\"parentHierarchy\"\n            [disabled]=\"disabled\"\n            (onClick)=\"click($event)\"\n            (onIconClick)=\"iconClick($event)\"\n        ></mx-button>\n    </mat-chip-list>\n    \n    <!-- appearance=\"legacy\" -->\n    <mat-button-toggle-group \n        *ngIf=\"buttonListsType[bIndex] == 'ButtonGroup'\"\n        [name]=\"buttonList.groupIdentifier\" \n        multiple=\"false\" \n        [ngClass]=\"{'mx-button': bIndex < buttonLists.length - 1 }\"\n        class=\"mx-toggle-group mx-toggle-group-{{buttonList.groupIdentifier}}\" \n        [style.width.%]=\"buttonList.width\"\n        #group=\"matButtonToggleGroup\">\n        <mx-button *ngFor=\"let button of buttonList.groupButtons\"\n            [form]=\"form\"\n            [style.width.%]=\"buttonList.buttonWidth\"\n            [formDisplayMode]=\"formDisplayMode\"\n            [sourceIdentifier]=\"sourceIdentifier\"\n            [sourceIndex]=\"sourceIndex\"\n            [widgetArrayIndex]=\"widgetArrayIndex\"\n            [button]=\"button\"\n            [context]=\"context\"\n            [originalData]=\"originalData\"\n            [buttonRoute]=\"buttonRoute\"\n            [parentHierarchy]=\"parentHierarchy\"\n            [disabled]=\"disabled\"\n            (onClick)=\"click($event)\"\n            (onIconClick)=\"iconClick($event)\"\n        ></mx-button>\n    </mat-button-toggle-group>\n\n    <span \n        *ngIf=\"buttonListsType[bIndex] == 'ButtonHover'\"\n        [ngClass]=\"{'mx-button': bIndex < buttonLists.length - 1}\"\n        class=\"mx-hover-group mx-hover-group-{{buttonList.groupIdentifier}}\"\n        [style.width.%]=\"100\">\n        <button \n            mat-raised-button \n            [matMenuTriggerFor]=\"menu\" \n            [ngClass]=\"{'mx-small-btn': buttonList.hoverButtons[0].size == 'small', 'mx-tiny-btn': buttonList.hoverButtons[0].size == 'tiny', 'mx-micro-btn': buttonList.hoverButtons[0].size == 'micro', 'mx-default-btn': buttonList.hoverButtons[0].size == 'default'}\"\n            [style.width.%]=\"buttonList.width\"\n            [attr.aria-label]=\"buttonList.groupLabel\"\n            [matBadge]=\"buttonList.badge ? buttonList.badge.content : ''\" \n            [matBadgeColor]=\"buttonList.badge ? buttonList.badge.color : ''\" \n            [matBadgePosition]=\"buttonList.badge ? buttonList.badge.position : ''\" \n            [matBadgeSize]=\"buttonList.badge ? buttonList.badge.size : ''\" \n            [matBadgeHidden]=\"buttonList.badge ? buttonList.badge.hide : false\">\n            <span class=\"mx-button-label mx-button-label-{{buttonList.groupIdentifier}}\" *ngIf=\"buttonList.groupLabel\">{{ buttonList.groupLabel }}</span>\n            <mat-icon\n                [ngClass]=\"{'mx-small-icon': buttonList.hoverButtons[0].size == 'small', 'mx-tiny-icon': buttonList.hoverButtons[0].size == 'tiny', 'mx-micro-icon': buttonList.hoverButtons[0].size == 'micro', 'mx-default-icon': buttonList.hoverButtons[0].size == 'default'}\"\n                class=\"mx-button-icon\"\n            >{{buttonList.groupIcon}}</mat-icon>\n        </button> \n        <mat-menu #menu=\"matMenu\">\n            <mx-button *ngFor=\"let button of buttonList.hoverButtons\"\n                [form]=\"form\" \n                [formDisplayMode]=\"formDisplayMode\"\n                [sourceIdentifier]=\"sourceIdentifier\"\n                [sourceIndex]=\"sourceIndex\"\n                [widgetArrayIndex]=\"widgetArrayIndex\"\n                [button]=\"button\"\n                [context]=\"context\"\n                [originalData]=\"originalData\"\n                [buttonRoute]=\"buttonRoute\"\n                [parentHierarchy]=\"parentHierarchy\"\n                [disabled]=\"disabled\"\n                (onClick)=\"click($event)\"\n                (onIconClick)=\"iconClick($event)\"\n                ></mx-button> \n        </mat-menu>\n    </span>\n    <span \n        [ngClass]=\"{'mx-button': bIndex < buttonLists.length - 1 }\"\n        class=\"mx-buttons-group\" \n        *ngIf=\"buttonListsType[bIndex] == 'ButtonArray'\">\n        <mx-button *ngFor=\"let button of buttonList; let index = index;\"\n            [form]=\"form\"\n            [formDisplayMode]=\"formDisplayMode\"\n            [sourceIdentifier]=\"sourceIdentifier\"\n            [sourceIndex]=\"sourceIndex\"\n            [widgetArrayIndex]=\"widgetArrayIndex\"\n            [button]=\"button\"\n            [context]=\"context\"\n            [originalData]=\"originalData\"\n            [buttonRoute]=\"buttonRoute\"\n            [parentHierarchy]=\"parentHierarchy\"\n            [disabled]=\"disabled\"\n            [ngClass]=\"{'mx-button': (index + 1) != buttonList.length}\"\n            (onClick)=\"click($event)\"\n            (onIconClick)=\"iconClick($event)\"\n            [fxShow]=\"button.showOnDesktop\" \n            [fxShow.xs]=\"button.showOnMobile\" \n            [fxShow.sm]=\"button.showOnTablet\"\n        ></mx-button> \n        <button \n            mat-icon-button \n            [matMenuTriggerFor]=\"dropMenu\" \n            [fxShow]=\"!displayDesktopDD\"\n            [fxShow.sm]=\"!displayTabletDD\"\n            [fxShow.xs]=\"!displayMobileDD\">\n            <mat-icon>more_vert</mat-icon>\n        </button>\n        <mat-menu class=\"mx-button-tooltip\" #dropMenu=\"matMenu\">\n            <ng-container *ngFor=\"let button of hoverButtonLists[bIndex]; let index = index;let last = last;\">\n                <div [fxShow]=\"!button.showOnDesktop\" \n                    [fxShow.sm]=\"!button.showOnTablet\" \n                    [fxShow.xs]=\"!button.showOnMobile\">\n                    <!-- <button mat-menu-item (onClick)=\"click($event)\">\n                        <mat-icon class=\"mr\">{{item.icon}}</mat-icon>\n                        {{item.label}}\n                    </button> -->\n                    <mx-button\n                        [form]=\"form\"\n                        [formDisplayMode]=\"formDisplayMode\"\n                        [sourceIdentifier]=\"sourceIdentifier\"\n                        [sourceIndex]=\"sourceIndex\"\n                        [widgetArrayIndex]=\"widgetArrayIndex\"\n                        [button]=\"button\"\n                        [context]=\"context\"\n                        [originalData]=\"originalData\"\n                        [buttonRoute]=\"buttonRoute\"\n                        [disabled]=\"disabled\"\n                        (onClick)=\"click($event)\"\n                        (onIconClick)=\"iconClick($event)\"\n                    ></mx-button>\n                    <mat-divider *ngIf=\"!last\"></mat-divider>\n                </div>\n            </ng-container>\n        </mat-menu>\n    </span>\n</span>","styles":[".mx-button-group{vertical-align:middle}.mx-chip-group{display:inline-flex}.mx-button{margin-right:8px}.mx-chip-group .mat-chip-list-wrapper .mat-standard-chip{margin:unset}.mx-chip-group .mat-chip-list-wrapper{width:inherit}.mx-button-tooltip.mat-menu-panel{min-height:auto}",".mx-small-btn{box-sizing:border-box;line-height:30px;min-width:unset}.mx-small-icon{font-size:12px;height:12px;width:12px}.mx-small-btn ::ng-deep .mat-button-toggle-label-content,.mx-small-btn ::ng-deep .mx-button-label{line-height:30px}.mx-small-btn.mat-standard-chip{min-height:30px}.mx-tiny-btn{box-sizing:border-box;font-size:10px;line-height:24px;min-width:unset}.mx-tiny-icon{font-size:10px;height:10px;width:10px}.mx-tiny-btn ::ng-deep .mat-button-toggle-label-content,.mx-tiny-btn ::ng-deep .mx-button-label{line-height:24px}.mx-tiny-btn.mat-standard-chip{min-height:26px}.mx-micro-btn{box-sizing:border-box;font-size:8px;line-height:18px;min-width:unset}.mx-micro-icon{font-size:8px;height:8px;width:8px}.mx-micro-btn ::ng-deep .mat-button-toggle-label-content,.mx-micro-btn ::ng-deep .mx-button-label{line-height:18px}.mx-micro-btn.mat-standard-chip{min-height:20px}.mx-toggle-default-btn ::ng-deep .mat-button-toggle-label-content,.mx-toggle-default-btn ::ng-deep .mx-button-label{line-height:36px}.mx-chip-button{justify-content:center}.mx-chip-button .mat-standard-chip{margin:unset}.mx-button-wt-padding,.mx-button-wt-padding .mat-button{min-width:0!important;padding:0!important}.mat-button,.mat-flat-button,.mat-icon-button,.mat-stroked-button{padding:0 5px!important}"]}]}],"members":{"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"formDisplayMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"sourceIdentifier":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"sourceIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"widgetArrayIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"_buttons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"buttons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"context":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"originalData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":3}}]}],"buttonRoute":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"parentHierarchy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3}}]}],"onClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":3}}]}],"onIconClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@casl/ability","name":"Ability","line":66,"character":31}]}],"ngOnInit":[{"__symbolic":"method"}],"hasMobileButton":[{"__symbolic":"method"}],"changeButtonTypeToGhost":[{"__symbolic":"method"}],"getButtonList":[{"__symbolic":"method"}],"isGroupAdded":[{"__symbolic":"method"}],"getGroupButton":[{"__symbolic":"method"}],"getHoverButtons":[{"__symbolic":"method"}],"getButtonType":[{"__symbolic":"method"}],"isButtonGroup":[{"__symbolic":"method"}],"isChipGroup":[{"__symbolic":"method"}],"isButtonHover":[{"__symbolic":"method"}],"isButtonArray":[{"__symbolic":"method"}],"click":[{"__symbolic":"method"}],"iconClick":[{"__symbolic":"method"}]}},"CrudFormComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"mx-crud-form","template":"<mat-card class=\"mx-crud-card\">\n    <!-- {{configData | json}} -->\n    <mat-card-header class=\"mx-list-header\">\n        <mx-crud-header\n            [identifier]=\"identifier\"\n            [title]=\"title\"\n            [subtitle]=\"header.subtitle\"\n            [description]=\"header.description\"\n            [badges]=\"badges\"\n            [icon]=\"header.icon\"\n            [pageBackRoute]=\"pageBackRoute\"\n            [formDisplayMode]=\"'CRUD_FORM'\"\n            [actions]=\"actions\"\n            [originalData]=\"configData.originalData\"   \n            [context]=\"record\"\n            [style.width.%]=\"100\"\n            (onButtonClick)=\"buttonClick($event)\"\n        ></mx-crud-header>\n    </mat-card-header> \n  \n    <mat-card-content class=\"mx-crud-content\">\n        <div class=\"mdc-layout-grid mx-crud-header\" *ngIf=\"header.description && header.description.text && header.description.bgColor\">\n            <div class=\"mdc-layout-grid__inner\">\n                <div class=\"mdc-layout-grid__cell--span-12\">\n                    <div \n                        class=\"mx-crud-header-desc\"\n                        [style.background-color]=\"header.description.bgColor\"\n                        [style.color]=\"header.description.textColor\"\n                    >\n                        <mat-icon class=\"mx-crud-header-desc-icon\" aria-hidden=\"true\" [attr.aria-label]=\"header.description.icon\" *ngIf=\"header.description.icon\">{{header.description.icon}}</mat-icon>\n                        <span>{{ header.description.text }}</span>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <!-- <mx-error></mx-error> -->\n\n        <span *ngIf=\"form && form.displayType == 'TAB' && filteredTabs && formTabLength > 1\">\n            <mat-tab-group (selectedTabChange)=\"onTabChange($event)\">\n              <mat-tab \n                *ngFor=\"let tab of filteredTabs; let tIndex=index\"\n                [label]=\"tab.label\">\n                <ng-container *ngTemplateOutlet=\"cfTab; context: {tab: tab, record: record, formRows: rowsInTab[tIndex], tIndex: tIndex}\"></ng-container>\n              </mat-tab>\n            </mat-tab-group>\n        </span>\n        <span *ngIf=\"form && form.displayType == 'ACCORDIAN' && filteredTabs && formTabLength > 1\">\n            <mat-accordion>\n                <mat-expansion-panel\n                  *ngFor=\"let tab of filteredTabs; let tIndex=index\"\n                  [expanded]=\"tIndex === 0\"\n                  (opened)=\"onAccordianChange(tIndex)\">\n                  <mat-expansion-panel-header>\n                    <mat-panel-title>\n                      {{tab.label}}\n                    </mat-panel-title>\n                  </mat-expansion-panel-header>\n                  <ng-container *ngTemplateOutlet=\"cfTab; context: {tab: tab, record: record, formRows: rowsInTab[tIndex], tIndex: tIndex}\"></ng-container>\n                </mat-expansion-panel>\n            </mat-accordion>\n        </span>\n        <span *ngIf=\"form && filteredTabs && formTabLength == 1\">\n            <span \n                *ngFor=\"let tab of filteredTabs; let tIndex=index\">\n                <ng-container *ngTemplateOutlet=\"cfTab; context: {tab: tab, record: record, formRows: rowsInTab[tIndex], tIndex: tIndex}\"></ng-container>\n            </span>\n        </span>\n    </mat-card-content>\n</mat-card>\n  \n<ng-template #cfTab let-tab=\"tab\" let-record=\"record\" let-formRows=\"formRows\" let-tIndex=\"tIndex\">\n    <!-- {{record | json}} -->\n    <div \n        class=\"mdc-layout-grid mx-crud-tab\"\n        *ngIf=\"tab && (tab.permission == null || (tab.permission && (tab.permission['subject'] | can: tab.permission['action'])))\"\n    >\n        <div class=\"mdc-layout-grid__inner mx-crud-tab-header\" *ngIf=\"tab.description && tab.description.text\">\n            <div class=\"mdc-layout-grid__cell--span-12\">\n                {{tab.description.text}} \n            </div>\n        </div>\n\n        <div class=\"mdc-layout-grid__inner\" *ngIf=\"tab.customPlugin && tab.customPlugin.component\">\n            <div class=\"mdc-layout-grid__cell--span-12\">\n                <!-- <ndc-dynamic\n                    [ndcDynamicComponent]=\"tab.customPlugin.component\"\n                ></ndc-dynamic> -->\n            </div>\n        </div>\n\n        <div \n            *ngFor=\"let row of formRows; let rIndex = index;\" \n            class=\"mdc-layout-grid__inner mx-crud-tab-form\"> \n            <div\n                *ngFor=\"let cell of row\" \n                class=\"mdc-layout-grid__cell--span-{{cell.colSpan * 6}} mx-crud-form\">\n                <!-- <pre>--{{configData.record[cell.widget.identifier] | json}}--</pre> -->\n\n                <span *ngIf=\"cell.multiple && cell.multiple.addMore; else singleCell\">\n                    <mat-card  *ngIf=\"displayWidget(cell, record, record[cell.widget.identifier] && record[cell.widget.identifier][0] ? record[cell.widget.identifier][0] : {})\" class=\"mx-crud-child-widgets\">\n                        <!-- {{configData | json}} -->\n                        <mat-card-header class=\"mx-list-header\"> \n                            <mat-card-title>{{ cell.multiple.sectionTitle }}</mat-card-title>\n                            <mx-button \n                                class=\"mx-crud-widget-addmore\"\n                                [sourceIdentifier]=\"cell.widget.identifier\"\n                                [sourceIndex]=\"rIndex\" \n                                [context]=\"record\"\n                                [originalData]=\"configData.record[cell.widget.identifier]\"\n                                [button]=\"addWidget\"\n                                (onClick)=\"buttonClick($event);$event.event.stopPropagation()\"\n                            ></mx-button> \n                        </mat-card-header> \n                        <mat-divider class=\"mx-crud-form-header-divider\"></mat-divider>\n                        <mat-card-content class=\"mx-crud-child-widgets-content\">\n                            <span *ngIf=\"record[cell.widget.identifier] && record[cell.widget.identifier].length > 0; else newCellAtIndex;\">\n                                <span *ngFor=\"let cellAtIndex of record[cell.widget.identifier]; let cellArrayIndex = index;\">\n                                    <ng-container *ngTemplateOutlet=\"cfWidget; context: {\n                                        cell: cell, \n                                        supportingRecord: record,\n                                        record: record[cell.widget.identifier][cellArrayIndex], \n                                        configData: configData.record[cell.widget.identifier][cellArrayIndex], \n                                        multiple: true,\n                                        cellArrayIndex: cellArrayIndex,\n                                        tIndex: tIndex\n                                    }\"></ng-container>\n                                </span>\n                            </span>\n                            <ng-template #newCellAtIndex>\n                                <ng-container *ngTemplateOutlet=\"cfWidget; context: {\n                                    cell: cell, \n                                    supportingRecord: {},\n                                    record: {}, \n                                    configData: {}, \n                                    multiple: true,\n                                    cellArrayIndex: 0,\n                                    tIndex: tIndex\n                                }\"></ng-container>\n                            </ng-template>\n                        </mat-card-content>\n                    </mat-card>\n                </span>\n                <ng-template #singleCell>\n                    <span *ngIf=\"displayWidget(cell, record, record[cell.widget.identifier])\">\n                        <ng-container *ngTemplateOutlet=\"cfWidget; context: {\n                            cell: cell, \n                            supportingRecord: record,\n                            record: record[cell.widget.identifier], \n                            configData: configData.record[cell.widget.identifier], \n                            multiple: false,\n                            cellArrayIndex: null,\n                            tIndex: tIndex\n                        }\"></ng-container>\n                    </span>\n                </ng-template>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #cfWidget let-cell=\"cell\" let-supportingRecord=\"supportingRecord\" let-record=\"record\" let-configData=\"configData\" let-multiple=\"multiple\" let-cellArrayIndex=\"cellArrayIndex\" let-tIndex=\"tIndex\">\n    <mx-form \n        *ngIf=\"cell.widgetType == 'FORM'\"\n        [formConfig]=\"cell.widget\"\n        [sourceIndex]=\"tIndex\"\n        [widgetArrayIndex]=\"cellArrayIndex\"\n        [record]=\"record\"\n        [originalData]=\"configData\"  \n        [keyMap]=\"keyMap\"\n        [reset]=\"reset\" \n        (onFieldChange)=\"fieldChange($event)\"\n        (onFormChange)=\"formChange($event)\"\n        (onButtonClick)=\"buttonClick($event)\"\n    ></mx-form>\n\n    <mx-static-list\n        *ngIf=\"cell.widgetType == 'LIST' && cell.widget.listType == 'STATIC'\"\n        [listConfig]=\"cell.widget\"\n        [sourceIdentifier]=\"identifier\"\n        [sourceIndex]=\"tIndex\"\n        [widgetArrayIndex]=\"cellArrayIndex\"\n        [record]=\"record\"\n        [originalData]=\"configData\"  \n        [keyMap]=\"keyMap\"\n        (onFormChange)=\"formChange($event)\"\n        (onFieldChange)=\"fieldChange($event)\"\n        (onButtonClick)=\"buttonClick($event)\"\n        (onPageChange)=\"onPage($event)\"\n        (onSortChange)=\"onSort($event)\"  \n    ></mx-static-list>\n    <!-- [expanded]=\"_expanded\" -->\n\n    <mx-dynamic-list\n        *ngIf=\"cell.widgetType == 'LIST' && cell.widget.listType == 'DYNAMIC'\"\n        [listConfig]=\"cell.widget\"\n        [sourceIdentifier]=\"identifier\"\n        [sourceIndex]=\"tIndex\"\n        [widgetArrayIndex]=\"cellArrayIndex\"\n        [record]=\"record\"\n        [originalData]=\"configData\"  \n        [keyMap]=\"keyMap\"\n        (onFormChange)=\"formChange($event)\"\n        (onFieldChange)=\"fieldChange($event)\"\n        (onButtonClick)=\"buttonClick($event)\"\n        (onPageChange)=\"onPage($event)\"\n        (onSortChange)=\"onSort($event)\"  \n    ></mx-dynamic-list>\n</ng-template>","styles":[":root{--mdc-layout-grid-column-width-desktop:72px;--mdc-layout-grid-column-width-phone:72px;--mdc-layout-grid-column-width-tablet:72px;--mdc-layout-grid-gutter-desktop:24px;--mdc-layout-grid-gutter-phone:16px;--mdc-layout-grid-gutter-tablet:16px;--mdc-layout-grid-margin-desktop:24px;--mdc-layout-grid-margin-phone:16px;--mdc-layout-grid-margin-tablet:16px}@media (min-width:840px){.mdc-layout-grid{box-sizing:border-box;margin:0 auto;padding:24px;padding:var(--mdc-layout-grid-margin-desktop,24px)}}@media (min-width:600px) and (max-width:839px){.mdc-layout-grid{box-sizing:border-box;margin:0 auto;padding:16px;padding:var(--mdc-layout-grid-margin-tablet,16px)}}@media (max-width:599px){.mdc-layout-grid{box-sizing:border-box;margin:0 auto;padding:16px;padding:var(--mdc-layout-grid-margin-phone,16px)}}@media (min-width:840px){.mdc-layout-grid__inner{align-items:stretch;display:flex;flex-flow:row wrap;margin:-12px;margin:calc(var(--mdc-layout-grid-gutter-desktop, 24px)/2*-1)}@supports (display:grid){.mdc-layout-grid__inner{-ms-grid-columns:(minmax(0,1fr))[12];display:-ms-grid;display:grid;grid-gap:24px;grid-gap:var(--mdc-layout-grid-gutter-desktop,24px);grid-template-columns:repeat(12,minmax(0,1fr));margin:0}}}@media (min-width:600px) and (max-width:839px){.mdc-layout-grid__inner{align-items:stretch;display:flex;flex-flow:row wrap;margin:-8px;margin:calc(var(--mdc-layout-grid-gutter-tablet, 16px)/2*-1)}@supports (display:grid){.mdc-layout-grid__inner{-ms-grid-columns:(minmax(0,1fr))[8];display:-ms-grid;display:grid;grid-gap:16px;grid-gap:var(--mdc-layout-grid-gutter-tablet,16px);grid-template-columns:repeat(8,minmax(0,1fr));margin:0}}}@media (max-width:599px){.mdc-layout-grid__inner{align-items:stretch;display:flex;flex-flow:row wrap;margin:-8px;margin:calc(var(--mdc-layout-grid-gutter-phone, 16px)/2*-1)}@supports (display:grid){.mdc-layout-grid__inner{-ms-grid-columns:(minmax(0,1fr))[4];display:-ms-grid;display:grid;grid-gap:16px;grid-gap:var(--mdc-layout-grid-gutter-phone,16px);grid-template-columns:repeat(4,minmax(0,1fr));margin:0}}}@media (min-width:840px){.mdc-layout-grid__cell{box-sizing:border-box;margin:12px;margin:calc(var(--mdc-layout-grid-gutter-desktop, 24px)/2);width:calc(33.33333% - 24px);width:calc(33.33333% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell{-ms-grid-column-span:4;grid-column-end:span 4;margin:0;width:auto}}.mdc-layout-grid__cell--span-1,.mdc-layout-grid__cell--span-1-desktop{width:calc(8.33333% - 24px);width:calc(8.33333% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-1,.mdc-layout-grid__cell--span-1-desktop{-ms-grid-column-span:1;grid-column-end:span 1;width:auto}}.mdc-layout-grid__cell--span-2,.mdc-layout-grid__cell--span-2-desktop{width:calc(16.66667% - 24px);width:calc(16.66667% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-2,.mdc-layout-grid__cell--span-2-desktop{-ms-grid-column-span:2;grid-column-end:span 2;width:auto}}.mdc-layout-grid__cell--span-3,.mdc-layout-grid__cell--span-3-desktop{width:calc(25% - 24px);width:calc(25% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-3,.mdc-layout-grid__cell--span-3-desktop{-ms-grid-column-span:3;grid-column-end:span 3;width:auto}}.mdc-layout-grid__cell--span-4,.mdc-layout-grid__cell--span-4-desktop{width:calc(33.33333% - 24px);width:calc(33.33333% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-4,.mdc-layout-grid__cell--span-4-desktop{-ms-grid-column-span:4;grid-column-end:span 4;width:auto}}.mdc-layout-grid__cell--span-5,.mdc-layout-grid__cell--span-5-desktop{width:calc(41.66667% - 24px);width:calc(41.66667% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-5,.mdc-layout-grid__cell--span-5-desktop{-ms-grid-column-span:5;grid-column-end:span 5;width:auto}}.mdc-layout-grid__cell--span-6,.mdc-layout-grid__cell--span-6-desktop{width:calc(50% - 24px);width:calc(50% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-6,.mdc-layout-grid__cell--span-6-desktop{-ms-grid-column-span:6;grid-column-end:span 6;width:auto}}.mdc-layout-grid__cell--span-7,.mdc-layout-grid__cell--span-7-desktop{width:calc(58.33333% - 24px);width:calc(58.33333% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-7,.mdc-layout-grid__cell--span-7-desktop{-ms-grid-column-span:7;grid-column-end:span 7;width:auto}}.mdc-layout-grid__cell--span-8,.mdc-layout-grid__cell--span-8-desktop{width:calc(66.66667% - 24px);width:calc(66.66667% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-8,.mdc-layout-grid__cell--span-8-desktop{-ms-grid-column-span:8;grid-column-end:span 8;width:auto}}.mdc-layout-grid__cell--span-9,.mdc-layout-grid__cell--span-9-desktop{width:calc(75% - 24px);width:calc(75% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-9,.mdc-layout-grid__cell--span-9-desktop{-ms-grid-column-span:9;grid-column-end:span 9;width:auto}}.mdc-layout-grid__cell--span-10,.mdc-layout-grid__cell--span-10-desktop{width:calc(83.33333% - 24px);width:calc(83.33333% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-10,.mdc-layout-grid__cell--span-10-desktop{-ms-grid-column-span:10;grid-column-end:span 10;width:auto}}.mdc-layout-grid__cell--span-11,.mdc-layout-grid__cell--span-11-desktop{width:calc(91.66667% - 24px);width:calc(91.66667% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-11,.mdc-layout-grid__cell--span-11-desktop{-ms-grid-column-span:11;grid-column-end:span 11;width:auto}}.mdc-layout-grid__cell--span-12,.mdc-layout-grid__cell--span-12-desktop{width:calc(100% - 24px);width:calc(100% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-12,.mdc-layout-grid__cell--span-12-desktop{-ms-grid-column-span:12;grid-column-end:span 12;width:auto}}}@media (min-width:600px) and (max-width:839px){.mdc-layout-grid__cell{box-sizing:border-box;margin:8px;margin:calc(var(--mdc-layout-grid-gutter-tablet, 16px)/2);width:calc(50% - 16px);width:calc(50% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell{-ms-grid-column-span:4;grid-column-end:span 4;margin:0;width:auto}}.mdc-layout-grid__cell--span-1,.mdc-layout-grid__cell--span-1-tablet{width:calc(12.5% - 16px);width:calc(12.5% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-1,.mdc-layout-grid__cell--span-1-tablet{-ms-grid-column-span:1;grid-column-end:span 1;width:auto}}.mdc-layout-grid__cell--span-2,.mdc-layout-grid__cell--span-2-tablet{width:calc(25% - 16px);width:calc(25% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-2,.mdc-layout-grid__cell--span-2-tablet{-ms-grid-column-span:2;grid-column-end:span 2;width:auto}}.mdc-layout-grid__cell--span-3,.mdc-layout-grid__cell--span-3-tablet{width:calc(37.5% - 16px);width:calc(37.5% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-3,.mdc-layout-grid__cell--span-3-tablet{-ms-grid-column-span:3;grid-column-end:span 3;width:auto}}.mdc-layout-grid__cell--span-4,.mdc-layout-grid__cell--span-4-tablet{width:calc(50% - 16px);width:calc(50% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-4,.mdc-layout-grid__cell--span-4-tablet{-ms-grid-column-span:4;grid-column-end:span 4;width:auto}}.mdc-layout-grid__cell--span-5,.mdc-layout-grid__cell--span-5-tablet{width:calc(62.5% - 16px);width:calc(62.5% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-5,.mdc-layout-grid__cell--span-5-tablet{-ms-grid-column-span:5;grid-column-end:span 5;width:auto}}.mdc-layout-grid__cell--span-6,.mdc-layout-grid__cell--span-6-tablet{width:calc(75% - 16px);width:calc(75% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-6,.mdc-layout-grid__cell--span-6-tablet{-ms-grid-column-span:6;grid-column-end:span 6;width:auto}}.mdc-layout-grid__cell--span-7,.mdc-layout-grid__cell--span-7-tablet{width:calc(87.5% - 16px);width:calc(87.5% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-7,.mdc-layout-grid__cell--span-7-tablet{-ms-grid-column-span:7;grid-column-end:span 7;width:auto}}.mdc-layout-grid__cell--span-8,.mdc-layout-grid__cell--span-8-tablet{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-8,.mdc-layout-grid__cell--span-8-tablet{-ms-grid-column-span:8;grid-column-end:span 8;width:auto}}.mdc-layout-grid__cell--span-9,.mdc-layout-grid__cell--span-9-tablet{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-9,.mdc-layout-grid__cell--span-9-tablet{-ms-grid-column-span:8;grid-column-end:span 8;width:auto}}.mdc-layout-grid__cell--span-10,.mdc-layout-grid__cell--span-10-tablet{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-10,.mdc-layout-grid__cell--span-10-tablet{-ms-grid-column-span:8;grid-column-end:span 8;width:auto}}.mdc-layout-grid__cell--span-11,.mdc-layout-grid__cell--span-11-tablet{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-11,.mdc-layout-grid__cell--span-11-tablet{-ms-grid-column-span:8;grid-column-end:span 8;width:auto}}.mdc-layout-grid__cell--span-12,.mdc-layout-grid__cell--span-12-tablet{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-12,.mdc-layout-grid__cell--span-12-tablet{-ms-grid-column-span:8;grid-column-end:span 8;width:auto}}}@media (max-width:599px){.mdc-layout-grid__cell{box-sizing:border-box;margin:8px;margin:calc(var(--mdc-layout-grid-gutter-phone, 16px)/2);width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell{-ms-grid-column-span:4;grid-column-end:span 4;margin:0;width:auto}}.mdc-layout-grid__cell--span-1,.mdc-layout-grid__cell--span-1-phone{width:calc(25% - 16px);width:calc(25% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-1,.mdc-layout-grid__cell--span-1-phone{-ms-grid-column-span:1;grid-column-end:span 1;width:auto}}.mdc-layout-grid__cell--span-2,.mdc-layout-grid__cell--span-2-phone{width:calc(50% - 16px);width:calc(50% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-2,.mdc-layout-grid__cell--span-2-phone{-ms-grid-column-span:2;grid-column-end:span 2;width:auto}}.mdc-layout-grid__cell--span-3,.mdc-layout-grid__cell--span-3-phone{width:calc(75% - 16px);width:calc(75% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-3,.mdc-layout-grid__cell--span-3-phone{-ms-grid-column-span:3;grid-column-end:span 3;width:auto}}.mdc-layout-grid__cell--span-4,.mdc-layout-grid__cell--span-4-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-4,.mdc-layout-grid__cell--span-4-phone{-ms-grid-column-span:4;grid-column-end:span 4;width:auto}}.mdc-layout-grid__cell--span-5,.mdc-layout-grid__cell--span-5-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-5,.mdc-layout-grid__cell--span-5-phone{-ms-grid-column-span:4;grid-column-end:span 4;width:auto}}.mdc-layout-grid__cell--span-6,.mdc-layout-grid__cell--span-6-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-6,.mdc-layout-grid__cell--span-6-phone{-ms-grid-column-span:4;grid-column-end:span 4;width:auto}}.mdc-layout-grid__cell--span-7,.mdc-layout-grid__cell--span-7-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-7,.mdc-layout-grid__cell--span-7-phone{-ms-grid-column-span:4;grid-column-end:span 4;width:auto}}.mdc-layout-grid__cell--span-8,.mdc-layout-grid__cell--span-8-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-8,.mdc-layout-grid__cell--span-8-phone{-ms-grid-column-span:4;grid-column-end:span 4;width:auto}}.mdc-layout-grid__cell--span-9,.mdc-layout-grid__cell--span-9-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-9,.mdc-layout-grid__cell--span-9-phone{-ms-grid-column-span:4;grid-column-end:span 4;width:auto}}.mdc-layout-grid__cell--span-10,.mdc-layout-grid__cell--span-10-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-10,.mdc-layout-grid__cell--span-10-phone{-ms-grid-column-span:4;grid-column-end:span 4;width:auto}}.mdc-layout-grid__cell--span-11,.mdc-layout-grid__cell--span-11-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-11,.mdc-layout-grid__cell--span-11-phone{-ms-grid-column-span:4;grid-column-end:span 4;width:auto}}.mdc-layout-grid__cell--span-12,.mdc-layout-grid__cell--span-12-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-12,.mdc-layout-grid__cell--span-12-phone{-ms-grid-column-span:4;grid-column-end:span 4;width:auto}}}.mdc-layout-grid__cell--order-1{order:1}.mdc-layout-grid__cell--order-2{order:2}.mdc-layout-grid__cell--order-3{order:3}.mdc-layout-grid__cell--order-4{order:4}.mdc-layout-grid__cell--order-5{order:5}.mdc-layout-grid__cell--order-6{order:6}.mdc-layout-grid__cell--order-7{order:7}.mdc-layout-grid__cell--order-8{order:8}.mdc-layout-grid__cell--order-9{order:9}.mdc-layout-grid__cell--order-10{order:10}.mdc-layout-grid__cell--order-11{order:11}.mdc-layout-grid__cell--order-12{order:12}.mdc-layout-grid__cell--align-top{align-self:flex-start}@supports (display:grid){.mdc-layout-grid__cell--align-top{-ms-grid-row-align:start;align-self:start}}.mdc-layout-grid__cell--align-middle{-ms-grid-row-align:center;align-self:center}.mdc-layout-grid__cell--align-bottom{align-self:flex-end}@supports (display:grid){.mdc-layout-grid__cell--align-bottom{-ms-grid-row-align:end;align-self:end}}@media (min-width:840px){.mdc-layout-grid--fixed-column-width{width:1176px;width:calc(var(--mdc-layout-grid-column-width-desktop, 72px)*12 + var(--mdc-layout-grid-gutter-desktop, 24px)*11 + var(--mdc-layout-grid-margin-desktop, 24px)*2)}}@media (min-width:600px) and (max-width:839px){.mdc-layout-grid--fixed-column-width{width:720px;width:calc(var(--mdc-layout-grid-column-width-tablet, 72px)*8 + var(--mdc-layout-grid-gutter-tablet, 16px)*7 + var(--mdc-layout-grid-margin-tablet, 16px)*2)}}@media (max-width:599px){.mdc-layout-grid--fixed-column-width{width:368px;width:calc(var(--mdc-layout-grid-column-width-phone, 72px)*4 + var(--mdc-layout-grid-gutter-phone, 16px)*3 + var(--mdc-layout-grid-margin-phone, 16px)*2)}}.mdc-layout-grid--align-left{margin-left:0;margin-right:auto}.mdc-layout-grid--align-right{margin-left:auto;margin-right:0}.mx-crud-card{background-color:transparent}.mx-crud-form{padding-bottom:20px}.mx-crud-tab{padding:0!important}.mx-crud-tab-header{padding:20px 0!important}.mx-crud-tab-form{margin:1px}.mx-crud-header{padding:0}.mx-crud-header-desc{padding:5px 10px;width:auto}.mx-crud-header-desc-icon{font-size:15px;height:15px!important;margin-top:0;padding:0 5px 0 0;width:15px!important}.mx-crud-child-widgets{background-color:#f5f5f5}.mx-crud-child-widgets-content{padding-top:20px}.mx-crud-widget-addmore{margin-top:-8px}.mx-crud-content{padding-top:16px}"]}]}],"members":{"identifier":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"actions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"actionPages":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"onAction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"displayMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"reset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"configData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"keyMap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"onFormChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":30,"character":3}}]}],"onFieldChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":31,"character":3}}]}],"onButtonClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":32,"character":3}}]}],"onSortClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":33,"character":3}}]}],"onPageClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":34,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@casl/ability","name":"Ability","line":49,"character":31}]}],"ngOnInit":[{"__symbolic":"method"}],"setFormTitle":[{"__symbolic":"method"}],"setFormHeader":[{"__symbolic":"method"}],"setConfigAsPerTab":[{"__symbolic":"method"}],"getTabIdentifier":[{"__symbolic":"method"}],"drawTabs":[{"__symbolic":"method"}],"drawTab":[{"__symbolic":"method"}],"displayWidget":[{"__symbolic":"method"}],"addWidgetButton":[{"__symbolic":"method"}],"fieldChange":[{"__symbolic":"method"}],"formChange":[{"__symbolic":"method"}],"buttonClick":[{"__symbolic":"method"}],"onTabChange":[{"__symbolic":"method"}],"onAccordianChange":[{"__symbolic":"method"}],"onSort":[{"__symbolic":"method"}],"onPage":[{"__symbolic":"method"}]}},"CrudListComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"mx-crud-list","template":"<mat-card \n  [style.padding.px]=\"listConfig && listConfig.style && listConfig.style.hideCard ? 0 : 'auto'\"\n  class=\"mx-crud-card\"\n  *ngIf=\"listConfig && (listConfig.permission == null || (listConfig.permission && (listConfig.permission['subject'] | can: listConfig.permission['action'])))\">\n  <mx-crud-header\n    [identifier]=\"identifier\"\n    [title]=\"title\"\n    [subtitle]=\"header.subtitle\"\n    [description]=\"header.description\"\n    [style]=\"listConfig.style\"\n    [badges]=\"badges\"\n    [icon]=\"header.icon\"\n    [pageBackRoute]=\"pageBackRoute\"\n    [formDisplayMode]=\"'CRUD_LIST'\"\n    [actions]=\"actions\" \n    [context]=\"records\"\n    [originalData]=\"_configData.originalData\"  \n    [style.width.%]=\"100\"\n    (onButtonClick)=\"buttonClick($event)\"\n  ></mx-crud-header>\n\n  <mat-card-content>  \n    <div \n      [style.margin]=\"listConfig && listConfig.style && listConfig.style.hideCard ? '0px 16px' : 'auto'\"\n      class=\"mdc-layout-grid mx-crud-header-desc\" \n      *ngIf=\"header.description && header.description.text\">\n      <div class=\"mdc-layout-grid__inner\">\n          <div class=\"mdc-layout-grid__cell--span-12\">\n              <div \n              [ngClass]=\"{'mx-crud-header-desc-without-bg': !header.description.bgColor, 'mx-crud-header-desc-with-bg': header.description.bgColor}\"\n              [style.background-color]=\"header.description.bgColor\"\n              [style.color]=\"header.description.textColor\"\n                  >\n                  <mat-icon class=\"mx-crud-header-desc-icon\" aria-hidden=\"true\" [attr.aria-label]=\"header.description.icon\" *ngIf=\"header.description.icon\">{{header.description.icon}}</mat-icon>\n                  <span>{{ header.description.text }}</span>\n              </div>\n          </div>\n      </div>\n    </div>\n    <!-- <mx-error></mx-error> -->\n    <div class=\"mdc-layout-grid mx-crud-body\">\n      <div class=\"mdc-layout-grid__inner\">\n        <div class=\"mdc-layout-grid__cell--span-12\" *ngIf=\"quickLinks && quickLinks.length > 0\">\n          <span class=\"mx-quicklinks\">\n            <mx-button-group\n              [buttons]=\"quickLinks\"\n              [sourceIdentifier]=\"identifier\"\n              [sourceIndex]=\"'0'\"\n              [context]=\"records\"\n              [originalData]=\"configData.originalData\"  \n              (onClick)=\"buttonClick($event)\"\n            ></mx-button-group>\n          </span>  \n        </div>\n      </div>\n      <div class=\"mdc-layout-grid__inner mx-crud-search-inline\" *ngIf=\"showSearchForm\">\n        <div class=\"mdc-layout-grid__cell--span-12\">\n          <ng-container *ngTemplateOutlet=\"cfsearchlayout\"></ng-container>\n        </div>\n      </div>\n\n      <div class=\"mdc-layout-grid__inner mx-crud-list\" *ngIf=\"listConfig.customPlugin && listConfig.customPlugin.placement == 'ABOVE' && listConfig.customPlugin.component\">\n        <div class=\"mdc-layout-grid__cell--span-12\">\n          <!-- <ndc-dynamic\n            [ndcDynamicComponent]=\"listConfig.customPlugin.component\"\n          ></ndc-dynamic> -->\n        </div>\n      </div>\n\n      <div class=\"mdc-layout-grid__inner mx-crud-list\">\n        <div class=\"mdc-layout-grid__cell--span-12\">\n          <ng-container *ngTemplateOutlet=\"cftablegroup\"></ng-container>\n        </div>\n      </div>\n      \n      <div class=\"mdc-layout-grid__inner mx-crud-list\" *ngIf=\"listConfig.customPlugin && listConfig.customPlugin.placement == 'BELOW' && listConfig.customPlugin.component\">\n        <div class=\"mdc-layout-grid__cell--span-12\">\n          <!-- <ndc-dynamic\n            [ndcDynamicComponent]=\"listConfig.customPlugin.component\"\n          ></ndc-dynamic> -->\n        </div>\n      </div>\n    </div>\n  </mat-card-content>\n</mat-card>\n\n<ng-template #cfsearchlayout>\n  <span *ngIf=\"searchConfig.displayType == 'ABOVE_LIST'\">\n    <ng-container *ngTemplateOutlet=\"cfsearch\"></ng-container>\n  </span>\n  <span class=\"\" *ngIf=\"searchConfig.displayType == 'LEFT_MODAL' || searchConfig.displayType == 'RIGHT_MODAL'\">\n    <!-- <mat-sidenav-container (backdropClick)=\"close('backdrop')\"> -->\n    <!-- <span class=\"mx-crud-search-strip-modal\"> -->\n      1<span class=\"mx-crud-search-modal\">\n        <mat-sidenav-content #searchSideNav>\n          <mx-button\n            [sourceIdentifier]=\"identifier\"\n            [sourceIndex]=\"'0'\"\n            [button]=\"searchButton\"\n            [context]=\"records\"\n            [originalData]=\"configData.originalData\"  \n            (onClick)=\"sidenav.open()\"\n          ></mx-button>\n\n          <span class=\"mx-crud-search-applied\">\n            <span class=\"mx-crud-search-label\" *ngIf=\"searchOnFieldsCount == null || searchOnFieldsCount == 0\">Apply Filter</span>\n            <span class=\"mx-crud-search-label\" *ngIf=\"searchOnFieldsCount && searchOnFieldsCount > 0\">Filters (<strong>{{ searchOnFieldsCount }}</strong>)</span>\n            <!-- {{searchOnFieldsButtons | json}} -->\n            <mx-button-group \n              [buttons]=\"searchOnFieldsButtons\" \n              [formDisplayMode]=\"'ADD'\"\n              [sourceIdentifier]=\"'searchFields'\"\n              [sourceIndex]=\"0\" \n              [widgetArrayIndex]=\"0\"\n              [originalData]=\"searchData\"\n              (onIconClick)=\"buttonIconClick\"\n            >\n            </mx-button-group>\n            <!-- <span *ngFor=\"let fButton of searchOnFieldsButtons\">\n              <mx-button\n                [sourceIdentifier]=\"fButton.identifier\"\n                [sourceIndex]=\"'0'\"\n                [button]=\"fButton\"\n              ></mx-button>\n            </span> -->\n          </span>\n        </mat-sidenav-content>\n      </span>\n    <!-- </span> -->\n\n    <mat-sidenav #sidenav [position]=\"searchConfig.displayType == 'LEFT_MODAL' ? 'start': 'end'\" (keydown.escape)=\"close()\" (backdropClick)=\"close()\" [disableClose]=\"false\">\n      <div class=\"mdc-layout-grid mx-crud-search-modal\">\n        <!-- <div class=\"mdc-layout-grid__inner\">\n          <div class=\"mdc-layout-grid__cell--span-12 mdc-layout-grid--align-right\">\n            <mx-button\n              [sourceIdentifier]=\"identifier\"\n              [sourceIndex]=\"'0'\"\n              [button]=\"searchModalButton\"\n              align = \"right\"\n              (onClick)=\"close()\"\n            ></mx-button>\n          </div>\n        </div> -->\n        <div class=\"mdc-layout-grid__inner\">\n          <div class=\"mdc-layout-grid__cell--span-12\">\n            <ng-container *ngTemplateOutlet=\"cfsearch\"></ng-container>\n          </div>\n        </div>\n      </div>\n    </mat-sidenav>\n  </span>\n  <span *ngIf=\"searchConfig.displayType == 'BOTTOM_MODAL'\">\n    <mx-button\n      [sourceIdentifier]=\"identifier\"\n      [sourceIndex]=\"'0'\"\n      [button]=\"searchButton\"\n      (onClick)=\"openBottomSheet()\"\n    ></mx-button>\n  </span>\n</ng-template>\n\n<ng-template #cfsearch>\n  <span>\n    <!-- {{searchData | json}}-- -->\n    <mx-form\n      [formConfig]=\"searchConfig.form\"\n      [sourceIndex]=\"'0'\"\n      [reset]=\"formReset\"\n      [record]=\"searchData\"\n      [keyMap]=\"keyMap\"\n      class=\"mx-crud-search\"\n      (onFieldChange)=\"fieldChange($event)\"\n      (onFormChange)=\"formChange($event)\"\n      (onButtonClick)=\"buttonClick($event)\"\n    ></mx-form>\n  </span>\n</ng-template>\n\n<ng-template #cftablegroup>\n  <span *ngIf=\"(listConfig.lists.length == 1) || (listConfig.lists.length > 1 && listConfig.displayType == 'LIST')\">\n    <span *ngFor=\"let lConfig of listConfig.lists\">\n      <ng-container *ngTemplateOutlet=\"cftable; context: {lConfig: lConfig, rIndex: 0}\"></ng-container>\n    </span>\n  </span>\n\n  <span *ngIf=\"listConfig.lists.length > 1 && listConfig.displayType == 'TAB'\">\n    <mat-tab-group (selectedTabChange)=\"onTabChange($event)\">\n      <mat-tab \n        *ngFor=\"let lConfig of listConfig.lists; let rIndex=index\"\n        [label]=\"listHeaders[rIndex].title\">\n        <ng-container *ngTemplateOutlet=\"cftable; context: {lConfig: lConfig, rIndex: rIndex}\"></ng-container>\n      </mat-tab>\n    </mat-tab-group>\n  </span>\n\n  <span class=\"mx-crud-list-accordian\" *ngIf=\"listConfig.lists.length > 1 && listConfig.displayType == 'ACCORDIAN'\">\n    <mat-accordion>\n      <mat-expansion-panel\n        *ngFor=\"let lConfig of listConfig.lists; let rIndex=index\"\n        [expanded]=\"rIndex === 0\"\n        (opened)=\"onAccordianChange(rIndex)\"> \n        <mat-expansion-panel-header>\n          <mat-panel-title>\n            {{listHeaders[rIndex].title}}\n          </mat-panel-title>\n        </mat-expansion-panel-header>\n        <ng-container *ngTemplateOutlet=\"cftable; context: {lConfig: lConfig, rIndex: rIndex}\"></ng-container>\n      </mat-expansion-panel>\n    </mat-accordion>\n  </span>\n</ng-template>\n\n<ng-template #cftable let-lConfig=\"lConfig\" let-rIndex=\"rIndex\">\n  <!-- <pre>\n    {{records | json}}\n    {{lConfig | json}}\n    CRUD _listReset: {{listReset}}<br/>\n  </pre> -->\n  <mx-static-list\n    *ngIf=\"lConfig.listType == 'STATIC'\"\n    [listConfig]=\"lConfig\"\n    [sourceIdentifier]=\"identifier\"\n    [sourceIndex]=\"rIndex\"\n    [record]=\"records && records[rIndex] ? records[rIndex] : []\"\n    [originalData]=\"configData.originalData\"  \n    [listReset]=\"listReset\"\n    [expanded]=\"_expanded\"\n    [expandRowIndex]=\"expandRowIndex\"\n    [keyMap]=\"keyMap\"\n    (onFormChange)=\"formChange($event)\"\n    (onFieldChange)=\"fieldChange($event)\"\n    (onButtonClick)=\"buttonClick($event)\"\n    (onPageChange)=\"onPage($event)\"\n    (onSortChange)=\"onSort($event)\"  \n  ></mx-static-list>  \n\n  <mx-dynamic-list\n    *ngIf=\"lConfig.listType == 'DYNAMIC'\"\n    [listConfig]=\"lConfig\"\n    [sourceIdentifier]=\"identifier\"\n    [sourceIndex]=\"rIndex\"\n    [record]=\"records && records[rIndex] ? records[rIndex] : []\"\n    [originalData]=\"configData.originalData\"  \n    [listReset]=\"listReset\"\n    [expanded]=\"_expanded\"\n    [expandRowIndex]=\"expandRowIndex\"\n    [keyMap]=\"keyMap\"\n    (onFormChange)=\"formChange($event)\"\n    (onFieldChange)=\"fieldChange($event)\"\n    (onButtonClick)=\"buttonClick($event)\"\n    (onPageChange)=\"onPage($event)\"\n    (onSortChange)=\"onSort($event)\"  \n  ></mx-dynamic-list>\n</ng-template>","styles":[".mx-crud-card{background-color:transparent}.mx-crud-search-strip-modal{padding:0 0 0 8px}.mx-list-search-btn{text-align:right}.mx-crud-search-applied{color:rgba(0,0,0,.54);font-size:12px}.mx-crud-search-applied .mx-crud-search-label{padding-right:8px}.mdc-layout-grid{padding-left:0!important;padding-right:0!important}.mx-crud-search-modal{padding-bottom:0!important;padding-right:8px;padding-top:0!important}.mx-crud-search-modal mat-sidenav-content{margin-left:0!important}.mx-crud-list{padding-bottom:20px!important;padding-top:10px!important}::ng-deep .mat-expansion-panel-header{padding:0 16px!important}::ng-deep .mat-expansion-panel-body{padding:0!important}.mx-crud-header-desc{margin-left:5px;padding:0}.mx-crud-header-desc-without-bg{padding:10px 0;width:auto}.mx-crud-header-desc-with-bg{padding:10px;width:auto}.mx-crud-header-desc-icon{font-size:15px;height:15px!important;margin-top:0;padding:0 5px 0 0;width:15px!important}.mx-crud-body{padding:0}"]}]}],"members":{"identifier":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"actions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"actionPages":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"quickLinks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"searchConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"listConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"formReset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"originalData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"_configData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"configData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"keyMap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"listReset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"expanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3}}]}],"expandRowIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"onFormChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":3}}]}],"onFieldChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":3}}]}],"onButtonClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":57,"character":3}}]}],"onButtonIconClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":58,"character":3}}]}],"onSortClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":60,"character":3}}]}],"onPageClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":61,"character":3}}]}],"onTabClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":62,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material/bottom-sheet","name":"MatBottomSheet","line":82,"character":36},{"__symbolic":"reference","module":"@casl/ability","name":"Ability","line":82,"character":69}]}],"ngOnInit":[{"__symbolic":"method"}],"setConfigAsPerTab":[{"__symbolic":"method"}],"getTabIdentifier":[{"__symbolic":"method"}],"setListHeaders":[{"__symbolic":"method"}],"setCrudHeader":[{"__symbolic":"method"}],"displaySearchForm":[{"__symbolic":"method"}],"setSearchButton":[{"__symbolic":"method"}],"setSelectedFilterButton":[{"__symbolic":"method"}],"sidenav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":216,"character":3},"arguments":["sidenav"]}]}],"close":[{"__symbolic":"method"}],"fieldChange":[{"__symbolic":"method"}],"formChange":[{"__symbolic":"method"}],"buttonClick":[{"__symbolic":"method"}],"buttonIconClick":[{"__symbolic":"method"}],"onSort":[{"__symbolic":"method"}],"onPage":[{"__symbolic":"method"}],"onAccordianChange":[{"__symbolic":"method"}],"onTabChange":[{"__symbolic":"method"}],"openBottomSheet":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"bottomUnsubscribe":[{"__symbolic":"method"}]}},"BottomSearchSheet":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":294,"character":1},"arguments":[{"selector":"bottom-search-sheet","template":"<span class=\"mx-crud-bottom-search\" *ngIf=\"data\">\n  <mx-form\n    [formConfig]=\"data.searchConfig.form\"\n    [sourceIndex]=\"'0'\"\n    [record]=\"data.searchData\"\n    [reset]=\"data.reset\"\n    (onFieldChange)=\"fieldChange($event)\"\n    (onFormChange)=\"formChange($event)\"\n    (onButtonClick)=\"buttonClick($event)\"\n  ></mx-form>\n</span>","styles":[".mx-crud-bottom-search>.mat-bottom-sheet-container{padding:0!important}mat-sidenav-content{margin-left:16px}"]}]}],"members":{"onFieldChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":301,"character":3}}]}],"onButtonClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":302,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":304,"character":78},"arguments":[{"__symbolic":"reference","module":"@angular/material/bottom-sheet","name":"MAT_BOTTOM_SHEET_DATA","line":304,"character":85}]}]],"parameters":[{"__symbolic":"reference","name":"MatBottomSheetRef","module":"@angular/material/bottom-sheet","arguments":[{"__symbolic":"reference","name":"BottomSearchSheet"}]},{"__symbolic":"reference","name":"any"}]}],"openLink":[{"__symbolic":"method"}],"fieldChange":[{"__symbolic":"method"}],"formChange":[{"__symbolic":"method"}],"buttonClick":[{"__symbolic":"method"}]}},"CrudListComponentInterface":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"mx-crud-list-interface","template":"<p>crud-list works!</p>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"setCommonConfig":[{"__symbolic":"method"}],"setListConfig":[{"__symbolic":"method"}],"setBadges":[{"__symbolic":"method"}],"setCommonConfigUsingCrud":[{"__symbolic":"method"}],"setListConfigUsingCrud":[{"__symbolic":"method"}],"loadFilterParams":[{"__symbolic":"method"}],"setConfigListData":[{"__symbolic":"method"}],"getRowKey":[{"__symbolic":"method"}],"getChildRowKey":[{"__symbolic":"method"}],"getChildRecordIdentifier":[{"__symbolic":"method"}],"beforeChangeMerge":[{"__symbolic":"method"}],"addRow":[{"__symbolic":"method"}],"afterChangeMerge":[{"__symbolic":"method"}],"beforeChildChangeMerge":[{"__symbolic":"method"}],"addChildRow":[{"__symbolic":"method"}],"setTabDisplayMode":[{"__symbolic":"method"}],"afterChildChangeMerge":[{"__symbolic":"method"}],"setHeaderTitle":[{"__symbolic":"method"}],"setHeaderDescription":[{"__symbolic":"method"}]}},"FieldErrorStateMatcher":{"__symbolic":"class","members":{"isErrorState":[{"__symbolic":"method"}]}},"FieldComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":28,"character":1},"arguments":[{"selector":"mx-field","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":32,"character":17},"member":"None"},"template":"<!-- {{field.fieldDisplayType}} -->\n<div \n  class=\"mdc-layout-grid mx-field-horizontal-container\" \n  *ngIf=\"(!(hideLabel == true) && field.fieldDisplayType == 'HORIZONTAL') && (field && (field.permission == null || (field.permission && (field.permission['subject'] | can: field.permission['action']))))\"\n> \n  <div class=\"mdc-layout-grid__inner\">\n    <div class=\"mdc-layout-grid__cell--span-3\">\n      <span \n        *ngIf=\"!isAddMore || (isAddMore && (fieldIndex == 0  || fieldIndex == null)) && field.label\"\n        class=\"mx-field-lbl mx-field-lbl-{{field.key}}\" \n        [ngClass]=\"{'mx-field-lbl-horizontal': (field.type != 'CHECKBOX' && field.type != 'RADIO' && field.type != 'SLIDER' && field.type != 'TOGGLE_OPTION' && field.type != 'UPLOAD' && field.type != 'IMAGE' && field.type != 'BOOLEAN' && field.type != 'JSON'), 'mx-field-lbl-horizontal-premitive': !(field.type != 'CHECKBOX' && field.type != 'RADIO' && field.type != 'SLIDER' && field.type != 'TOGGLE_OPTION' && field.type != 'UPLOAD' && field.type != 'IMAGE' && field.type != 'BOOLEAN' && field.type != 'JSON')}\">\n        <strong>{{field.label}}</strong>\n        <span class=\"mx-field-lbl-req\" *ngIf=\"isRequired\">*</span>\n        <!-- <span   \n          *ngIf=\"field.help && field.help.message && hasFieldNavigate && field.help.displayType == 'TOOLTIP'\" \n          matTooltip=\"{{field.help.message}}\"\n          matTooltipPosition=\"above\"\n          class=\"mx-field-hint mx-field-hint-{{field.key}}\">  \n          <mat-icon   \n            aria-hidden=\"true\" \n            [attr.aria-label]=\"field.help.message\" \n            class=\"mx-field-hint-icon mx-field-hint-icon-{{field.key}}\" \n          >{{field.help.icon ? field.help.icon : 'live_help'}}</mat-icon>\n        </span>   -->\n        <span *ngIf=\"field.help && field.help.message && field.help.displayType == 'RIGHT_MODAL'\">\n          <ng-container \n            *ngTemplateOutlet=\"cfhelpmodal\" \n          ></ng-container>\n        </span>  \n        <span *ngIf=\"field.help && field.help.message && field.help.displayType == 'PLAIN_TEXT' && field.help.withLabel\">\n          {{field.help.message}}\n        </span>\n      </span>\n    </div> \n    <div class=\"mdc-layout-grid__cell--span-9 mdc-layout-grid--align-right\" [style.width.%]=\"100\">\n      <ng-container *ngTemplateOutlet=\"cffield\"></ng-container>\n    </div>\n  </div>\n</div>\n<span \n  *ngIf=\"(field.fieldDisplayType != 'HORIZONTAL') && (field && (field.permission == null || (field.permission && (field.permission['subject'] | can: field.permission['action']))))\"\n>\n  <ng-container *ngTemplateOutlet=\"cffield\"></ng-container>\n</span>\n\n<ng-template #cffield>\n  <!-- {{field.type}} -->\n  <span *ngIf=\"(!form && !fieldControl) || field.displayMode == 'LABEL'\" [ngSwitch]=\"field.type\" class=\"mx-field mx-field-key-{{field.key}}\" [ngClass]=\"{'mx-field-lbl-horizontal': (field.type == 'LABEL' || field.type == 'BOOLEAN') && field.fieldDisplayType == 'HORIZONTAL', 'mx-field-lbl': (field.type == 'LABEL' || field.type == 'BOOLEAN') && sourceType == 'FORM'}\">\n    <mat-label class=\"mx-field-lbl mx-field-lbl-{{field.key}} mx-field-lbl-inline\" \n      *ngIf=\"field.fieldDisplayType != 'HORIZONTAL' && field.type != 'PARAGRAPH' && field.type != 'TOGGLE_OPTION' && !hideLabel && field.label\">\n      <strong>{{field.label}}</strong>\n      <span class=\"mx-field-lbl-req\" *ngIf=\"isRequired\">*</span>\n      <mx-tooltip matSuffix [field]=\"field\"></mx-tooltip>\n      <!-- <span  \n        *ngIf=\"field.help && field.help.message && hasFieldNavigate && field.help.displayType == 'TOOLTIP'\" \n        matTooltip=\"{{field.help.message}}\"\n        matTooltipPosition=\"above\"\n        class=\"mx-field-hint mx-field-hint-{{field.key}}\">  \n        <mat-icon  \n          aria-hidden=\"true\" \n          [attr.aria-label]=\"field.help.message\" \n          class=\"mx-field-hint-icon mx-field-hint-icon-{{field.key}}\" \n        >{{field.help.icon ? field.help.icon : 'live_help'}}</mat-icon>\n      </span>   -->\n      <span *ngIf=\"field.help && field.help.message && field.help.displayType == 'RIGHT_MODAL'\">\n        <ng-container \n          *ngTemplateOutlet=\"cfhelpmodal\" \n        ></ng-container>\n      </span>  \n      <span *ngIf=\"field.help && field.help.message && field.help.displayType == 'PLAIN_TEXT' && field.help.withLabel\">\n        {{field.help.message}}\n      </span>\n    </mat-label>\n\n    <span *ngSwitchCase=\"'IMAGE'\"\n      [ngClass]=\"{'mx-field-value-wrapper-horizontal': field.fieldDisplayType != 'HORIZONTAL', 'mx-field-value-wrapper-vertical': field.fieldDisplayType == 'HORIZONTAL'}\">\n      <img \n        class=\"mx-field-image mx-field-image-{{field.key}}\" \n        [src]=\"imagePath\"\n        [style.width.px]=\"field['width'] ? field['width'] : 'auto'\">\n    </span>\n    <span *ngSwitchCase=\"'BOOLEAN'\" \n      [ngClass]=\"{'mx-field-value-wrapper-horizontal': field.fieldDisplayType != 'HORIZONTAL', 'mx-field-value-wrapper-vertical': field.fieldDisplayType == 'HORIZONTAL'}\"\n      class=\"mat-input-element mx-field-boolean mx-field-boolean-{{field.key}}\">\n      <mat-icon class=\"mx-field-boolean-success\" *ngIf=\"resolvedValue == true\" aria-hidden=\"true\">done</mat-icon>\n      <mat-icon class=\"mx-field-boolean-failure\" *ngIf=\"resolvedValue == false\" aria-hidden=\"true\">close</mat-icon>\n    </span>\n    <span *ngSwitchCase=\"'DROPDOWN'\"\n      [ngClass]=\"{'mx-field-value-wrapper-horizontal': field.fieldDisplayType != 'HORIZONTAL', 'mx-field-value-wrapper-vertical': field.fieldDisplayType == 'HORIZONTAL'}\"> \n      <span *ngIf=\"value == true || value == false\" class=\"mat-input-element  mx-field-boolean mx-field-boolean-{{field.key}}\">\n        <mat-icon class=\"mx-field-boolean-success\" *ngIf=\"resolvedValue == true\" aria-hidden=\"true\">done</mat-icon>\n        <mat-icon class=\"mx-field-boolean-failure\" *ngIf=\"resolvedValue == false\" aria-hidden=\"true\">close</mat-icon>\n      </span>\n      <span *ngIf=\"value != true && value != false\" class=\"mx-field-value mx-field-value-{{field.key}}\">\n        {{getDropdownValue(field, value)}}\n      </span>\n    </span>  \n    <span *ngSwitchCase=\"'CHECKBOX'\"\n      [ngClass]=\"{'mx-field-value-wrapper-horizontal': field.fieldDisplayType != 'HORIZONTAL', 'mx-field-value-wrapper-vertical': field.fieldDisplayType == 'HORIZONTAL'}\"> \n      <span *ngIf=\"value == true || value == false\" class=\"mat-input-element  mx-field-boolean mx-field-boolean-{{field.key}}\">\n        <mat-icon class=\"mx-field-boolean-success\" *ngIf=\"resolvedValue == true\" aria-hidden=\"true\">done</mat-icon>\n        <mat-icon class=\"mx-field-boolean-failure\" *ngIf=\"resolvedValue == false\" aria-hidden=\"true\">close</mat-icon>\n      </span>\n      <span *ngIf=\"value != true && value != false\" class=\"mx-field-value mx-field-value-{{field.key}}\">\n        {{getDropdownValue(field, value)}}\n      </span>\n    </span>  \n    <span *ngSwitchCase=\"'RADIO'\"\n      [ngClass]=\"{'mx-field-value-wrapper-horizontal': field.fieldDisplayType != 'HORIZONTAL', 'mx-field-value-wrapper-vertical': field.fieldDisplayType == 'HORIZONTAL'}\"> \n      <span *ngIf=\"value == true || value == false\" class=\"mat-input-element  mx-field-boolean mx-field-boolean-{{field.key}}\">\n        <mat-icon class=\"mx-field-boolean-success\" *ngIf=\"resolvedValue == true\" aria-hidden=\"true\">done</mat-icon>\n        <mat-icon class=\"mx-field-boolean-failure\" *ngIf=\"resolvedValue == false\" aria-hidden=\"true\">close</mat-icon>\n      </span>\n      <span *ngIf=\"value != true && value != false\" class=\"mx-field-value mx-field-value-{{field.key}}\">\n        {{getDropdownValue(field, value)}}\n      </span>\n    </span>  \n    <span *ngSwitchCase=\"'AUTOCOMPLETE'\" \n      [ngClass]=\"{'mx-field-value-wrapper-horizontal': field.fieldDisplayType != 'HORIZONTAL', 'mx-field-value-wrapper-vertical': field.fieldDisplayType == 'HORIZONTAL'}\"\n      class=\"mat-form-field mx-field-value mx-field-value-{{field.key}}\">\n      {{field['resolveTextWithKey'] ? getResolveTextWithKey(field) : resolvedValue}}\n    </span>\n    <span *ngSwitchCase=\"'JSON'\">\n      <div class=\"mx-field-nm mdc-layout-grid mx-field-showmore-pannel mx-field-showmore-pannel-{{field.key}}\">\n        <div class=\"mdc-layout-grid__inner mx-field-showmore-pannel-content\">\n          <div class=\"mdc-layout-grid__cell--span-12\">\n            <div *ngIf=\"displayEllipsis(); else elseValue\" (click)=\"displayFullText()\" class=\"mx-field-short-value\">\n              {{getValue(field, value)}}...\n            </div>\n            <ng-template #elseValue> \n              <span (click)=\"displayShortText()\" class=\"mx-field-value\">\n                <pre>{{getValue(field, value) | json}}</pre>\n              </span>\n            </ng-template>\n          </div>\n        </div>\n        <div class=\"mdc-layout-grid__inner mx-field-showmore-pannel-action\" (click)=\"displayFullText()\" *ngIf=\"displayEllipsis() && ellipsisRequired\">\n          <div class=\"mdc-layout-grid__cell--span-12\">\n            Show More\n            <mat-icon>expand_more</mat-icon>\n          </div>\n        </div>\n        <div class=\"mdc-layout-grid__inner mx-field-showmore-pannel-action\" (click)=\"displayShortText()\" *ngIf=\"!displayEllipsis() && ellipsisRequired\">\n          <div class=\"mdc-layout-grid__cell--span-12\">\n            Show Less\n            <mat-icon>expand_less</mat-icon>\n          </div>\n        </div>\n      </div>\n    </span>\n    <span *ngSwitchCase=\"'PARAGRAPH'\" class=\"mx-field-paragraph\">\n      <!-- <span class=\"mx-field\"> -->\n        <mx-paragraph [field]=\"field\"\n          [sourceType]=\"sourceType\"\n          [sourceIdentifier]=\"sourceIdentifier\"\n          [sourceIndex]=\"sourceIndex\" \n          [widgetArrayIndex]=\"widgetArrayIndex\" \n          [form]=\"form\" \n          [keyMap]=\"keyMap\"\n          [field]=\"field\"\n          [displayMode]=\"displayMode\"\n          [originalData]=\"originalData\"\n          [fieldControl]=\"fieldControl\"\n          [dependencies]=\"dependencies\"\n          (onFieldChange)=\"onParagraphChange($event)\"\n          (onButtonClick)=\"buttonClick($event)\"\n          ></mx-paragraph>\n        <!-- </span> -->\n    </span>\n    <span *ngSwitchCase=\"'MULTI_IMAGE'\">\n      <mx-multi-image [field]=\"field\" [disabled]=\"isFieldDisabled\"></mx-multi-image>\n      <ng-container *ngTemplateOutlet=\"cfhelplaintext\"></ng-container>\n    </span>\n    <span *ngSwitchCase=\"'UPLOAD'\">\n      <mx-file-uploader [field]=\"field\" [disabled]=\"isFieldDisabled\"></mx-file-uploader>\n    </span>\n    <span *ngSwitchCase=\"'EMAIL'\">\n      <a href=\"mailto:{{getValue(field, value)}}\">{{getValue(field, value)}}</a>\n    </span>\n    <span *ngSwitchDefault>\n      <!-- displayFullText(value) -->\n      <span [ngClass]=\"{'mx-field-value-wrapper-horizontal': field.fieldDisplayType != 'HORIZONTAL', 'mx-field-value-wrapper-vertical': field.fieldDisplayType == 'HORIZONTAL'}\" [style.text-align]=\"textAlign\" *ngIf=\"!asBubble; else elseAsBubble\">\n        <span *ngIf=\"displayEllipsis(); else elseValue\" (click)=\"displayFullText()\" class=\"mx-field-short-value\" [innerHtml]=\"getValue(field, value)\">\n          ...\n        </span>\n        <ng-template #elseValue>\n          <span (click)=\"displayShortText()\" class=\"mx-field-value\" [innerHtml]=\"getValue(field, value)\">\n          </span>\n        </ng-template> \n      </span>\n      <ng-template #elseAsBubble>\n        <mat-chip-list [attr.aria-label]=\"getValue(field, value)\">\n          <mat-chip class=\"mx-small-bubble\" [color]=\"bubbleColor\" selected>{{getValue(field, value)}}</mat-chip>\n        </mat-chip-list>\n      </ng-template>\n    </span>\n  </span>\n\n  <span *ngIf=\"form && fieldControl && matcher && field.displayMode != 'LABEL' && !isAddMore\" class=\"mx-field\" [ngClass]=\"{'mx-field-lbl-horizontal': (field.type == 'LABEL' || field.type == 'BOOLEAN') && field.fieldDisplayType == 'HORIZONTAL', 'mx-field-lbl-for-label': (field.type == 'LABEL' || field.type == 'BOOLEAN') && sourceType == 'FORM'}\">\n    <ng-container *ngTemplateOutlet=\"cffieldeditable\"></ng-container>\n  </span>\n\n  <span *ngIf=\"form && fieldControl && matcher && field.displayMode != 'LABEL' && isAddMore\" class=\"mx-field\">\n    <div class=\"mdc-layout-grid mx-form-add-more-row\">\n      <div class=\"mdc-layout-grid__inner\">\n        <div class=\"mdc-layout-grid__cell--span-{{isAddMore ? addMoreFieldDisplayInColumns : (addMoreFieldDisplayInColumns + addMoreButtonDisplayInColumns)}} mdc-layout-grid__cell--align-middle\">\n          <ng-container *ngTemplateOutlet=\"cffieldeditable\"></ng-container>\n        </div>\n        <div class=\"mdc-layout-grid__cell--span-{{addMoreButtonDisplayInColumns}} mdc-layout-grid__cell--align-middle\" *ngIf=\"isAddMore\">\n          <mx-button\n            *ngIf=\"fieldIndex != form.controls[field.key]['controls'].length - 1\"\n            [disabled]=\"!(addMorePermission == null || (addMorePermission && (addMorePermission['subject'] | can: addMorePermission['action'])))\"\n            [form]=\"form\"\n            [sourceIdentifier]=\"sourceIdentifier\"\n            [sourceIndex]=\"sourceIndex\"\n            [widgetArrayIndex]=\"widgetArrayIndex\"\n            [button]=\"minusButton\"\n            class=\"mx-field-addmore mx-field-addmore-{{field.key}}\"\n            (onClick)=\"removeField(field, fieldIndex)\"\n          ></mx-button>\n          <mx-button\n            *ngIf=\"fieldIndex == form.controls[field.key]['controls'].length - 1\"\n            [form]=\"form\"\n            [sourceIdentifier]=\"sourceIdentifier\"\n            [sourceIndex]=\"sourceIndex\"\n            [widgetArrayIndex]=\"widgetArrayIndex\"\n            [button]=\"plusButton\"\n            class=\"mx-field-addmore mx-field-addmore-{{field.key}}\"\n            (onClick)=\"addField(field)\"\n          ></mx-button>\n        </div>\n      </div>\n    </div>\n  </span>\n</ng-template>\n\n<ng-template #cffieldeditable>\n  <span [ngSwitch]=\"field.type\">\n    <!-- [appearance]=\"appearance | lowercase\"  -->\n    <!-- [appearance]=\"appearance | lowercase\" -->\n    <mat-form-field \n      class=\"mx-field\"\n      [ngClass]=\"{'mx-inbuild-type': (field.type== 'TIME' || field.type== 'COLOR' || field.type== 'WEEK' || field.type== 'MONTH'|| field.type== 'NUMBER'), 'mx-field-horizontal': field.fieldDisplayType == 'HORIZONTAL'}\" \n      *ngIf=\"field.type != 'PARAGRAPH' && field.type != 'MULTI_IMAGE' && field.type != 'CHECKBOX' && field.type != 'TOOLBAR' && field.type != 'CHIPS' && field.type != 'HTML_EDITOR' && field.type != 'RADIO' && field.type != 'SLIDER' && field.type != 'TOGGLE_OPTION' && field.type != 'UPLOAD' && field.type != 'IMAGE' && field.type != 'BOOLEAN' && field.type != 'CALENDAR' && field.type != 'JSON' && field.type != 'LABEL'\">\n      <mat-label class=\"mx-field-lbl mx-field-lbl-{{field.key}}\" *ngIf=\"!(hideLabel == true) && field.fieldDisplayType != 'HORIZONTAL' && field.label\">\n        <strong>{{field.label}}</strong>\n        <span class=\"mx-field-lbl-req\" *ngIf=\"isRequired\">*</span>\n        <span *ngIf=\"field.help && field.help.message && field.help.displayType == 'PLAIN_TEXT' && field.help.withLabel\">\n          {{field.help.message}}\n        </span>\n      </mat-label>\n      <!-- <mat-label class=\"mx-field-lbl\" *ngIf=\"(hideLabel == true)\"> \n      </mat-label> -->\n\n      <mat-icon \n        *ngIf=\"field.icon\" \n        matPrefix\n        aria-hidden=\"true\" \n        [attr.aria-label]=\"field.icon\" \n        class=\"mx-field-icon\" \n      >{{field.icon}}</mat-icon>\n\n      <span *ngSwitchCase=\"'TEXT'\">\n        <input  \n          matInput \n          [id]=\"field.key\" \n          [formControl]=\"fieldControl\" \n          [errorStateMatcher]=\"matcher\" \n          [maxLength]=\"maxLength\"\n          [placeholder]=\"field.placeholder\"\n          [disabled]=\"isFieldDisabled\"\n          class=\"mat-input-element mx-field-text mx-field-text-{{field.key}}\"\n          (input)=\"onInputChange($event)\"/>\n      </span>\n      <!-- <input  \n        *ngSwitchCase=\"'HIDDEN'\" \n        matInput \n        type=\"hidden\"\n        [formControl]=\"fieldControl\" \n        [errorStateMatcher]=\"matcher\"\n        [placeholder]=\"field.placeholder\"\n        [disabled]=\"isFieldDisabled\"\n      > -->\n\n      <!-- [mat-autosize]=\"'true'\" -->\n      <textarea\n        *ngSwitchCase=\"'TEXTAREA'\" \n        matInput \n        [id]=\"field.key\" \n        [formControl]=\"fieldControl\" \n        [errorStateMatcher]=\"matcher\"\n        [maxLength]=\"maxLength\"\n        rows=\"{{rows}}\"\n        [placeholder]=\"field.placeholder\"\n        [disabled]=\"isFieldDisabled\"\n        class=\"mat-input-element mx-field-textarea mx-field-textarea-{{field.key}}\"\n        (input)=\"onInputChange($event)\"> \n      </textarea>\n      <!-- <br/> -->  \n      <mat-hint hintLabel=\"end\" *ngIf=\"field.type == 'TEXTAREA' && maxLength && maxLength > 0 && maxLength != 1000000\"><strong>{{fieldControl.value.length}}</strong> / {{maxLength}} characters</mat-hint>\n\n      <input \n        *ngSwitchCase=\"'COLOR'\" \n        matInput \n        type=\"color\"\n        [id]=\"field.key\" \n        [formControl]=\"fieldControl\" \n        [errorStateMatcher]=\"matcher\"\n        [placeholder]=\"field.placeholder\"\n        [disabled]=\"isFieldDisabled\"\n        class=\"mat-input-element mx-field-color mx-field-color-{{field.key}}\"\n        (input)=\"onInputChange($event)\"/>\n      <input \n        *ngSwitchCase=\"'EMAIL'\" \n        matInput \n        type=\"email\"\n        [id]=\"field.key\" \n        [formControl]=\"fieldControl\" \n        [errorStateMatcher]=\"matcher\"\n        [maxLength]=\"maxLength\"\n        [placeholder]=\"field.placeholder\"\n        [disabled]=\"isFieldDisabled\"\n        class=\"mat-input-element mx-field-email mx-field-email-{{field.key}}\"\n        (input)=\"onInputChange($event)\"/>\n      <input \n        *ngSwitchCase=\"'MONTH'\" \n        matInput \n        type=\"month\"\n        [id]=\"field.key\" \n        [formControl]=\"fieldControl\" \n        [errorStateMatcher]=\"matcher\"\n        [maxLength]=\"maxLength\"\n        [placeholder]=\"field.placeholder\"\n        [disabled]=\"isFieldDisabled\"\n        class=\"mat-input-element mx-field-month mx-field-month-{{field.key}}\"\n        (input)=\"onInputChange($event)\"/>\n      <input \n        *ngSwitchCase=\"'NUMBER'\" \n        matInput \n        type=\"number\"\n        [id]=\"field.key\" \n        [formControl]=\"fieldControl\" \n        [errorStateMatcher]=\"matcher\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [placeholder]=\"field.placeholder\"\n        [disabled]=\"isFieldDisabled\"\n        class=\"mat-input-element mx-field-number mx-field-number-{{field.key}}\"\n        (input)=\"onInputChange($event)\"/>\n      <input \n        *ngSwitchCase=\"'PASSWORD'\" \n        matInput \n        type=\"password\"\n        [id]=\"field.key\" \n        [formControl]=\"fieldControl\" \n        [errorStateMatcher]=\"matcher\"\n        [maxLength]=\"maxLength\"\n        [placeholder]=\"field.placeholder\"\n        [disabled]=\"isFieldDisabled\"\n        class=\"mat-input-element mx-field-password mx-field-password-{{field.key}}\"\n        (input)=\"onInputChange($event)\"/>\n      <input \n        *ngSwitchCase=\"'TIME'\" \n        matInput \n        type=\"time\"\n        [id]=\"field.key\" \n        [formControl]=\"fieldControl\" \n        [errorStateMatcher]=\"matcher\"\n        [placeholder]=\"field.placeholder\"\n        [disabled]=\"isFieldDisabled\"\n        class=\"mat-input-element mx-field-time mx-field-time-{{field.key}}\"\n        (input)=\"onInputChange($event)\"/>\n      <input \n        *ngSwitchCase=\"'WEEK'\" \n        matInput \n        type=\"week\"\n        [id]=\"field.key\" \n        [formControl]=\"fieldControl\" \n        [errorStateMatcher]=\"matcher\"\n        [placeholder]=\"field.placeholder\"\n        [disabled]=\"isFieldDisabled\"\n        class=\"mat-input-element mx-field-week mx-field-week-{{field.key}}\"\n        (input)=\"onInputChange($event)\"/>\n      <span *ngSwitchCase=\"'DROPDOWN'\">\n        <mat-select\n          [id]=\"field.key\" \n          [formControl]=\"fieldControl\"\n          [errorStateMatcher]=\"matcher\"\n          [multiple]=\"field['multiselect']\"\n          [placeholder]=\"field.placeholder\"\n          [disabled]=\"isFieldDisabled\"\n          class=\"mat-input-element mx-field-dropdown mx-field-dropdown-{{field.key}}\"\n          (selectionChange)=\"onChange($event)\">\n          <mat-option class=\"mat-option\" *ngIf=\"field['defaultOption']\">{{field['defaultOption']}}</mat-option>\n          <mat-option class=\"mat-option\" *ngFor=\"let option of field['options']\" [value]=\"option.key\" [disabled]=\"option.disabled\" >{{option.value}}</mat-option>\n        </mat-select>\n      </span>\n      <span *ngSwitchCase=\"'AUTOCOMPLETE'\"> \n        <input \n          matInput \n          [id]=\"field.key\"  \n          [formControl]=\"fieldControl\" \n          [errorStateMatcher]=\"matcher\"\n          [attr.aria-label]=\"field.label\" \n          [placeholder]=\"field.placeholder\"\n          [matAutocomplete]=\"auto\"\n          class=\"mat-input-element mx-field-autocomplete mx-field-autocomplete-{{field.key}}\"\n          [disabled]=\"isFieldDisabled\"\n          (input)=\"onInputChange($event)\"/>\n        <mat-autocomplete \n          #auto=\"matAutocomplete\"\n          [displayWith]=\"autocompleteDisplayFn\"\n          (optionSelected)=\"onAutocompleteChange($event)\">\n          <mat-option \n            class=\"mat-option mx-field-autocomplete-option mx-field-autocomplete-option-{{field.key}}\" \n            *ngIf=\"field['defaultOption']\">\n            {{field['defaultOption']}}\n          </mat-option>\n          <mat-option \n            class=\"mat-option mx-field-autocomplete-option mx-field-autocomplete-option-{{field.key}}\" \n            *ngFor=\"let option of field['options']\" \n            [value]=\"option\" \n            [disabled]=\"option.disabled\" >\n            <span [innerHTML]=\"option.value | highlight: highlightAutoCompleteText\"></span>\n          </mat-option>\n          <mat-option *ngIf=\"(field['options'])?.length==0 && autoCompleteInputHasValue\">\n            {{field['noRecordFound'] ? field['noRecordFound'] : 'No Result Found'}}\n          </mat-option>\n        </mat-autocomplete>\n      </span> \n      <!-- <mx-button\n        matSuffix\n        *ngIf=\"hasClear && !hasFieldNavigate && !(field.help && field.help.displayType == 'TOOLTIP' && field.help.message)\"\n        [button]=\"textClearButton\"\n        class=\"mx-field-clr-btn mx-field-clr-btn-{{field.key}}\"\n        (onClick)=\"cleanValue()\"\n      ></mx-button> -->\n      <mx-button\n        matSuffix\n        *ngIf=\"hasFieldNavigate\"\n        [button]=\"routeToButton\"\n        class=\"mx-field-clr-btn mx-field-clr-btn-{{field.key}}\"\n        (onClick)=\"resolvedValue = ''\"\n      ></mx-button> \n      <mx-tooltip matSuffix [field]=\"field\"></mx-tooltip>\n\n      <!-- <ng-container *ngTemplateOutlet=\"cfHelp;\"></ng-container> -->\n      <mat-hint *ngIf=\"field.help && field.help.message && field.help.displayType == 'PLAIN_TEXT' && !field.help.withLabel\" class=\"mx-field-hint\">\n        <mat-icon \n          aria-hidden=\"true\" \n          [attr.aria-label]=\"field.help.message\" \n          class=\"mx-field-hint-icon\">\n          {{field.help.icon ? field.help.icon : 'live_help'}}\n        </mat-icon>\n        <span>{{field.help.message}}</span>\n      </mat-hint>\n\n      <mat-error aria-hidden=\"true\" [attr.aria-label]=\"error.message\" *ngFor=\"let error of errors()\" [innerHtml]=\"error.message\"></mat-error>\n    </mat-form-field>\n\n    <span *ngSwitchCase=\"'CALENDAR'\">\n      <!-- [appearance]=\"appearance | lowercase\" -->\n      <mat-form-field \n        class=\"mx-field\" \n        *ngIf=\"dateRange\">\n        <mat-label class=\"mx-field-lbl mx-field-lbl-{{field.key}}\" *ngIf=\"!(hideLabel == true) && field.fieldDisplayType != 'HORIZONTAL' && field.label\" class=\"mx-field-label\">\n          <strong>{{field.label}}</strong>\n          <span class=\"mx-field-lbl-req\" *ngIf=\"isRequired\">*</span>\n          <span *ngIf=\"field.help && field.help.message && field.help.displayType == 'PLAIN_TEXT' && field.help.withLabel\">\n            {{field.help.message}}\n          </span>\n        </mat-label>\n        <mat-date-range-input [formGroup]=\"fieldControl\" [rangePicker]=\"datePicker\" >\n          <input \n            matStartDate\n            matInput\n            [id]=\"field.key\" \n            formControlName=\"startDate\" \n            [min]=\"field['minDate']\"\n            [disabled]=\"isFieldDisabled\"\n            [errorStateMatcher]=\"matcher\"\n            placeholder=\"Start date\"\n            (dateChange)=\"onDateChange($event, 'startDate')\">\n          <input \n            matEndDate\n            matInput\n            [id]=\"field.key\" \n            [max]=\"field['maxDate']\"\n            [disabled]=\"isFieldDisabled\"\n            [errorStateMatcher]=\"matcher\"\n            formControlName=\"endDate\" \n            placeholder=\"End date\"\n            (dateChange)=\"onDateChange($event, 'endDate')\">\n        </mat-date-range-input>\n        <mat-datepicker-toggle matSuffix [for]=\"datePicker\" ></mat-datepicker-toggle>\n        <mat-date-range-picker #datePicker ></mat-date-range-picker>\n\n        <!-- <mx-button\n          matSuffix\n          *ngIf=\"hasClear && !hasFieldNavigate && !(field.help && field.help.displayType == 'TOOLTIP' && field.help.message)\"\n          [button]=\"textClearButton\"\n          class=\"mx-field-clr-btn mx-field-clr-btn-{{field.key}}\"\n          (onClick)=\"cleanValue()\"\n        ></mx-button> -->\n        <mx-button\n          matSuffix\n          *ngIf=\"hasFieldNavigate\"\n          [button]=\"routeToButton\"\n          class=\"mx-field-clr-btn mx-field-clr-btn-{{field.key}}\"\n          (onClick)=\"resolvedValue = ''\"\n        ></mx-button> \n        <mx-tooltip matSuffix [field]=\"field\"></mx-tooltip>\n\n        <!-- <ng-container *ngTemplateOutlet=\"cfHelp;\"></ng-container> -->\n        <mat-hint *ngIf=\"field.help && field.help.message && field.help.displayType == 'PLAIN_TEXT' && !field.help.withLabel\" class=\"mx-field-hint\">\n          <mat-icon \n            aria-hidden=\"true\" \n            [attr.aria-label]=\"field.help.message\" \n            class=\"mx-field-hint-icon\">\n            {{field.help.icon ? field.help.icon : 'live_help'}}\n          </mat-icon>\n          <span>{{field.help.message}}</span>\n        </mat-hint>\n        <mat-error aria-hidden=\"true\" [attr.aria-label]=\"error.message\" *ngFor=\"let error of errors()\" [innerHtml]=\"error.message\"></mat-error>\n      </mat-form-field>\n      <!-- [appearance]=\"appearance | lowercase\" -->\n      <mat-form-field \n        class=\"mx-field\" \n        *ngIf=\"!dateRange\">\n        <mat-label class=\"mx-field-lbl mx-field-lbl-{{field.key}}\" *ngIf=\"!(hideLabel == true) && field.fieldDisplayType != 'HORIZONTAL' && field.label\" class=\"mx-field-label\">\n          <strong>{{field.label}}</strong>\n          <span class=\"mx-field-lbl-req\" *ngIf=\"isRequired\">*</span>\n          <span *ngIf=\"field.help && field.help.message && field.help.displayType == 'PLAIN_TEXT' && field.help.withLabel\">\n            {{field.help.message}}\n          </span>  \n        </mat-label>      \n        <input \n            matInput \n            [matDatepicker]=\"picker\"\n            [id]=\"field.key\" \n            [formControl]=\"fieldControl\" \n            [matDatepickerFilter]=\"field['filter']\"\n            [min]=\"field['minDate']\"\n            [max]=\"field['maxDate']\"\n            [errorStateMatcher]=\"matcher\"\n            [disabled]=\"isFieldDisabled\"\n            class=\"mat-input-element mx-field-datepicker mx-field-datepicker-{{field.key}}\" \n            (dateChange)=\"onDateChange($event, '')\" />\n        <mat-datepicker-toggle   matSuffix [for]=\"picker\" ></mat-datepicker-toggle>\n        <mat-datepicker #picker ></mat-datepicker>\n        <!-- <mx-button\n          matSuffix\n          *ngIf=\"hasClear && !hasFieldNavigate && !(field.help && field.help.displayType == 'TOOLTIP' && field.help.message)\"\n          [button]=\"textClearButton\"\n          class=\"mx-field-clr-btn mx-field-clr-btn-{{field.key}}\"\n          (onClick)=\"cleanValue()\"\n        ></mx-button> -->\n        <mx-button\n          matSuffix\n          *ngIf=\"hasFieldNavigate\"\n          [button]=\"routeToButton\"\n          class=\"mx-field-clr-btn mx-field-clr-btn-{{field.key}}\"\n          (onClick)=\"resolvedValue = ''\"\n        ></mx-button>\n\n        <!-- <ng-container *ngTemplateOutlet=\"cfHelp;\"></ng-container> -->\n        <mat-hint *ngIf=\"field.help && field.help.message && field.help.displayType == 'PLAIN_TEXT' && !field.help.withLabel\" class=\"mx-field-hint\">\n          <mat-icon \n            aria-hidden=\"true\" \n            [attr.aria-label]=\"field.help.message\" \n            class=\"mx-field-hint-icon\">\n            {{field.help.icon ? field.help.icon : 'live_help'}}\n          </mat-icon>\n          <span>{{field.help.message}}</span>\n        </mat-hint>\n        <mx-tooltip matSuffix [field]=\"field\"></mx-tooltip>\n        <mat-error aria-hidden=\"true\" [attr.aria-label]=\"error.message\" *ngFor=\"let error of errors()\" [innerHtml]=\"error.message\"></mat-error>\n      </mat-form-field>\n    </span>\n\n    <mat-label class=\"mx-field-lbl mx-field-lbl-{{field.key}} mx-field-lbl-inline\" \n      *ngIf=\"!(field.type != 'MULTI_IMAGE' && field.type != 'TOOLBAR' && field.type != 'CHECKBOX' && field.type != 'HTML_EDITOR' && field.type != 'RADIO' && field.type != 'SLIDER' && field.type != 'UPLOAD' && field.type != 'IMAGE' && field.type != 'BOOLEAN' && field.type != 'JSON' && field.type != 'LABEL') && !(hideLabel == true) && field.fieldDisplayType != 'HORIZONTAL' && field.label\">\n      <strong>{{field.label}}</strong>\n      <span class=\"mx-field-lbl-req\" *ngIf=\"isRequired\">*</span>\n      <mx-tooltip matSuffix [field]=\"field\"></mx-tooltip>\n      <!-- <span  \n        *ngIf=\"field.help && field.help.message && hasFieldNavigate && field.help.displayType == 'TOOLTIP'\" \n        matTooltip=\"{{field.help.message}}\"\n        matTooltipPosition=\"above\"\n        class=\"mx-field-hint mx-field-hint-{{field.key}}\">  \n        <mat-icon  \n          aria-hidden=\"true\" \n          [attr.aria-label]=\"field.help.message\" \n          class=\"mx-field-hint-icon mx-field-hint-icon-{{field.key}}\" \n        >{{field.help.icon ? field.help.icon : 'live_help'}}</mat-icon>\n      </span>   -->\n      <span *ngIf=\"field.help && field.help.message && field.help.displayType == 'RIGHT_MODAL'\">\n        <ng-container \n          *ngTemplateOutlet=\"cfhelpmodal\" \n        ></ng-container>\n      </span>  \n      <span *ngIf=\"field.help && field.help.message && field.help.displayType == 'PLAIN_TEXT' && field.help.withLabel\">\n        {{field.help.message}}\n      </span>\n    </mat-label>\n    <span *ngSwitchCase=\"'HTML_EDITOR'\" >\n      <div class=\"mx-field-nm\">\n        <quill-editor \n          [ngClass]=\"{'mx-editor-invalid': isEditorErrorState(), 'mx-disable': isFieldDisabled}\"  \n          class=\"mx-field-nm\"\n          [styles]=\"{height: height + 'px','margin-bottom': isEditorErrorState() ? 0 : '1.25em'}\"\n          (onEditorChanged)=\"onHtmlEditorChange($event)\"\n          [id]=\"field.key\" \n          [formControl]=\"fieldControl\" \n          [disabled]=\"isFieldDisabled\"\n          [placeholder]=\"field.placeholder\"\n          [readOnly]=\"isFieldDisabled\"\n          [modules]=\"editorOptions\" \n        >\n        </quill-editor>\n        <span *ngIf=\"isEditorErrorState()\" class=\"mx-field-editor-error\">\n          <mat-error aria-hidden=\"true\" [attr.aria-label]=\"error.message\" *ngFor=\"let error of errors()\" [innerHtml]=\"error.message\"></mat-error>\n        </span> \n        <ng-container *ngTemplateOutlet=\"cfhelplaintext\"></ng-container>\n      </div>\n    </span>\n\n    <span *ngSwitchCase=\"'CHECKBOX'\" class=\"mat-input-element mx-field-chk-group\">\n      <div \n        [ngClass]=\"{'mx-field-checkbox-horizontal': field['displayType'] == 'INLINE'}\"\n        class=\"mx-field-nm\"\n        *ngIf=\"field['displayTemplate'] == 'CLASSIC'; else elseValue\">\n        <span \n          *ngFor=\"let option of field['options']\" \n          class=\"mx-field-chk\">\n          <mat-checkbox \n              class=\"mat-checkbox mat-accent mx-field-chk-inner mx-field-chk-inner-{{field.key}}\"\n              [ngClass]=\"{'mx-field-checkbox-horizontal': field['displayType'] == 'INLINE'}\"\n              [formControl]=\"fieldControl['controls'][option.key]\" \n              [disabled]=\"option.disabled || isFieldDisabled\"\n              (change)=\"onCheckboxChange(option, $event)\">\n            {{option.value}}\n          </mat-checkbox>\n          <i *ngIf=\"option.description\" class=\"mx-field-chk-desc mx-field-chk-desc-{{field.key}}\" [ngClass]=\"{'mx-disabled': option.disabled || isFieldDisabled}\">{{option.description}}</i>\n        </span>\n        <ng-container *ngTemplateOutlet=\"cfhelplaintext\"></ng-container>\n      </div>\n      <ng-template #elseValue>\n        <ng-container *ngTemplateOutlet=\"cfoptiontemplate\"></ng-container>\n      </ng-template>\n    </span>\n    <span *ngSwitchCase=\"'RADIO'\">\n      <!-- =={{field | json}} -->\n      <mat-radio-group \n        *ngIf=\"field['displayTemplate'] == 'CLASSIC'; else elseValue\"\n        [id]=\"field.key\" \n        [formControl]=\"fieldControl\" \n        class=\"mx-field-nm mx-field-radio-group mx-field-radio-group-{{field.key}}\"\n        [ngClass]=\"{'mx-field-radio-horizontal': field['displayType'] == 'INLINE'}\"\n        (change)=\"onRadioChange($event)\"> \n          <span \n          [ngClass]=\"{'mx-field-radio-horizontal-padding': field['displayType'] == 'INLINE'}\"\n          *ngFor=\"let option of field['options']\">\n            <mat-radio-button \n              class=\"mat-radio-button mat-accent mx-field-radio mx-field-radio-{{field.key}}\"\n              [value]=\"option.key\" \n              [disabled]=\"option.disabled || isFieldDisabled\">\n              {{option.value}}\n            </mat-radio-button>\n            <br *ngIf=\"option.description\"/><i *ngIf=\"option.description\" class=\"mx-field-radio-desc\" [ngClass]=\"{'mx-disabled': option.disabled || isFieldDisabled}\">{{option.description}}</i>\n          </span>\n          <ng-container *ngTemplateOutlet=\"cfhelplaintext\"></ng-container>\n        </mat-radio-group>\n      <ng-template #elseValue>\n        <ng-container *ngTemplateOutlet=\"cfoptiontemplate\"></ng-container>\n      </ng-template>\n    </span>\n    <span *ngSwitchCase=\"'SLIDER'\">\n      <mat-slider\n        [id]=\"field.key\" \n        [formControl]=\"fieldControl\"\n        [invert]=\"field['invert']\"\n        [max]=\"field['max']\"\n        [min]=\"field['min']\"\n        [step]=\"field['step']\"\n        [thumbLabel]=\"field['thumbLabel']\"\n        [tickInterval]=\"field['tickInterval']\"\n        [vertical]=\"field['vertical']\"\n        class=\"mat-slider mx-field-slider mx-field-slider-{{field.key}}\"\n        [disabled]=\"isFieldDisabled\"\n        (change)=\"onSliderChange($event)\">\n      </mat-slider>\n      <ng-container *ngTemplateOutlet=\"cfhelplaintext\"></ng-container>\n    </span>\n    <span *ngSwitchCase=\"'TOGGLE_OPTION'\">\n      <mat-slide-toggle \n        [formControl]=\"fieldControl\"\n        [color]=\"field['color']\" \n        [checked]=\"field['checked']\"\n        [disabled]=\"isFieldDisabled\"\n        class=\"mat-slide-toggle mx-field-toggle mx-field-toggle-{{field.key}}\"\n        (change)=\"onToggleChange($event)\">\n        {{field['label']}}\n        <span *ngIf=\"field['description']\">{{field['description']}}</span>\n      </mat-slide-toggle>\n    </span>\n    <span *ngSwitchCase=\"'UPLOAD'\">\n      <mx-file-uploader [field]=\"field\" [disabled]=\"isFieldDisabled\"></mx-file-uploader>\n      <ng-container *ngTemplateOutlet=\"cfhelplaintext\"></ng-container>\n    </span>\n    <span *ngSwitchCase=\"'MULTI_IMAGE'\">\n      <mx-multi-image [field]=\"field\" [disabled]=\"isFieldDisabled\"></mx-multi-image>\n      <ng-container *ngTemplateOutlet=\"cfhelplaintext\"></ng-container>\n    </span>\n    <span *ngSwitchCase=\"'IMAGE'\"\n      [ngClass]=\"{'mx-field-value-wrapper-horizontal': field.fieldDisplayType != 'HORIZONTAL', 'mx-field-value-wrapper-vertical': field.fieldDisplayType == 'HORIZONTAL'}\">\n      <img class=\"mx-field-image mx-field-image-{{field.key}}\" [src]=\"imagePath\" \n        [style.width.px]=\"field['width'] ? field['width'] : 'auto'\">\n    </span>\n    <span *ngSwitchCase=\"'BOOLEAN'\" \n      [ngClass]=\"{'mx-field-value-wrapper-horizontal': field.fieldDisplayType != 'HORIZONTAL', 'mx-field-value-wrapper-vertical': field.fieldDisplayType == 'HORIZONTAL'}\"\n      class=\"mat-input-element mx-field-boolean mx-field-boolean-{{field.key}}\">\n      <mat-icon class=\"mx-field-boolean-success\" *ngIf=\"resolvedValue == true\" aria-hidden=\"true\">done</mat-icon>\n      <mat-icon class=\"mx-field-boolean-failure\" *ngIf=\"resolvedValue == false\" aria-hidden=\"true\">close</mat-icon>\n    </span>\n    <span *ngSwitchCase=\"'JSON'\" class=\"mx-field-json mx-field-json-{{field.key}}\">\n      <div class=\"mx-field-nm mdc-layout-grid mx-field-showmore-pannel mx-field-showmore-pannel-{{field.key}}\">\n        <div class=\"mdc-layout-grid__inner mx-field-showmore-pannel-content\">\n          <div class=\"mdc-layout-grid__cell--span-12\">\n            <div *ngIf=\"displayEllipsis(); else elseValue\" (click)=\"displayFullText()\" class=\"mx-field-short-value\">\n              {{getValue(field, value)}}...\n            </div>\n            <ng-template #elseValue>\n              <span (click)=\"displayShortText()\" class=\"mx-field-value\">\n                <pre>{{getValue(field, value) | json}}</pre>\n              </span>\n            </ng-template>\n          </div>\n        </div>\n        <div class=\"mdc-layout-grid__inner mx-field-showmore-pannel-action\" (click)=\"displayFullText()\" *ngIf=\"displayEllipsis() && ellipsisRequired\">\n          <div class=\"mdc-layout-grid__cell--span-12\">\n            Show More\n            <mat-icon>expand_more</mat-icon>\n          </div>\n        </div>\n        <div class=\"mdc-layout-grid__inner mx-field-showmore-pannel-action\" (click)=\"displayShortText()\" *ngIf=\"!displayEllipsis() && ellipsisRequired\">\n          <div class=\"mdc-layout-grid__cell--span-12\">\n            Show Less\n            <mat-icon>expand_less</mat-icon>\n          </div>\n        </div>\n      </div>\n    </span>  \n    <span *ngSwitchCase=\"'CHIPS'\">\n      <mx-chips [field]=\"field\"  \n        [formControl]=\"fieldControl\"\n        [disabled]=\"isFieldDisabled\"\n        [errorMatcher]=\"matcher\"\n        (onListChange)=\"onChipsListChange($event)\"\n      ></mx-chips>\n    </span>\n    <span *ngSwitchCase=\"'PARAGRAPH'\" class=\"mx-field-paragraph\">\n      <!-- [sourceType]=\"'FORM'\" -->\n      <mx-paragraph [field]=\"field\"\n        [sourceType]=\"sourceType\"\n        [sourceIdentifier]=\"sourceIdentifier\"\n        [sourceIndex]=\"sourceIndex\" \n        [widgetArrayIndex]=\"widgetArrayIndex\"\n        [form]=\"form\" \n        [keyMap]=\"keyMap\"\n        [field]=\"field\"\n        [displayMode]=\"displayMode\"\n        [originalData]=\"originalData\"\n        [fieldControl]=\"fieldControl\"\n        [dependencies]=\"dependencies\"\n        (onFieldChange)=\"onParagraphChange($event)\"\n        (onButtonClick)=\"buttonClick($event)\"\n        ></mx-paragraph>\n      <ng-container *ngTemplateOutlet=\"cfhelplaintext\"></ng-container>\n    </span>\n    <span *ngSwitchCase=\"'TOOLBAR'\">\n      <mx-toolbar [field]=\"field\"></mx-toolbar>\n    </span>\n    <span *ngSwitchDefault>\n      <!-- displayFullText(value) -->\n      <span [ngClass]=\"{'mx-field-value-wrapper-horizontal': field.fieldDisplayType != 'HORIZONTAL', 'mx-field-value-wrapper-vertical': field.fieldDisplayType == 'HORIZONTAL'}\" [style.text-align]=\"textAlign\" *ngIf=\"!asBubble; else elseAsBubble\">\n        <span class=\"mx-field-short-value\" [innerHtml]=\"resolvedValue\">\n          ...\n        </span>\n      </span>\n      <ng-template #elseAsBubble>\n        <mat-chip-list [attr.aria-label]=\"resolvedValue\">\n          <mat-chip class=\"mx-small-bubble\" [color]=\"bubbleColor\" selected>{{resolvedValue}}</mat-chip>\n        </mat-chip-list>\n      </ng-template>\n    </span>    \n  </span>\n</ng-template>\n\n<ng-template #cfhelplaintext>\n  <mat-hint *ngIf=\"field.help && field.help.message && field.help.displayType == 'PLAIN_TEXT' && !field.help.withLabel\" class=\"mx-field-hint mx-field-hint-nm\">\n    <mat-icon \n      aria-hidden=\"true\" \n      [attr.aria-label]=\"field.help && field.help.message\" \n      class=\"mx-field-hint-icon\">{{field.help && field.help.icon ? field.help.icon : 'live_help'}}</mat-icon>\n    {{field.help.message}}\n  </mat-hint>\n</ng-template>\n\n<ng-template #cfhelpmodal>\n    <mat-sidenav #sidenav [position]=\"'end'\" (keydown.escape)=\"close()\" disableClose>\n      <div class=\"mdc-layout-grid mx-crud-search-modal mx-crud-search-modal-{{field.key}}\">\n        <div class=\"mdc-layout-grid__inner\">\n          <div class=\"mdc-layout-grid__cell--span-9 mx-field-help-modal-header\">\n            <strong>{{field.help.title}}</strong>\n          </div>\n          <div class=\"mdc-layout-grid__cell--span-3 mdc-layout-grid--align-right\">\n            <mx-button\n              [sourceIdentifier]=\"field.key\"\n              [sourceIndex]=\"'0'\"\n              [widgetArrayIndex]=\"'0'\"\n              [button]=\"helpModalButton\"\n              align = \"right\"\n              (onClick)=\"close()\"\n            ></mx-button>\n          </div>\n        </div>\n        <div class=\"mdc-layout-grid__inner mx-field-help-modal-divider\">\n          <div class=\"mdc-layout-grid__cell--span-12\">\n            <mat-divider class=\"mx-field-help-divider\"></mat-divider>\n          </div>\n        </div>\n        <div class=\"mdc-layout-grid__inner mx-field-help-modal-description\">\n          <div class=\"mdc-layout-grid__cell--span-12\">\n            {{field.help.message}}\n          </div>\n        </div>\n      </div>\n    </mat-sidenav>\n    <br/>\n    <mat-sidenav-content #helpSideNav class=\"mx-field-help-modal\">\n      <span \n        matTooltip=\"Click for help\"\n        matTooltipPosition=\"above\"\n        class=\"mx-field-hint mx-field-hint-{{field.key}}\"\n        (click)=\"open()\"\n        >\n        <mat-icon \n          aria-hidden=\"true\"  \n          [attr.aria-label]=\"field.help.message\" \n          class=\"mx-field-hint-icon mx-field-hint-icon-{{field.key}}\" \n          (click)=\"open()\"\n        >{{field.help.icon ? field.help.icon : 'live_help'}}</mat-icon>\n      </span>  \n    </mat-sidenav-content>\n</ng-template>\n\n<ng-template #cfoptiontemplate> \n  <mat-selection-list \n    #listView \n    [multiple]=\"field.type == 'CHECKBOX'\" \n    (selectionChange)=\"onOptionChange($event)\"\n    class=\"mx-field-list mx-field-nm\">\n    <ng-container \n      *ngFor=\"let option of field['options']; let index=index,let last = last\">\n      <mat-list-option \n        *ngIf=\"index < showLess\" \n        [value]=\"option.key\" \n        [selected]=\"field.type == 'CHECKBOX' ? option.checked : option.key == fieldControl.value\"\n        [disabled]=\"option.disabled || isFieldDisabled\"\n        class=\"mx-field-list-option\">\n        <img \n          *ngIf=\"option.image || field['defaultImageUrl']\" \n          matListAvatar \n          [src]=\"option.image\" \n          (error)=\"onListImageLoadError($event)\"  \n          alt=\"\" \n          class=\"mx-field-list-image\"/>\n          <h3 matLine class=\"primary\">\n            {{option.value}}\n          </h3>\n          <p matLine class=\"secondary\">\n            <span>{{option.description}}</span>\n          </p>\n        <mat-divider *ngIf=\"!last\"></mat-divider>\n      </mat-list-option>\n    </ng-container>\n  </mat-selection-list>\n  <span class=\"mx-show-all-btn\">\n    <button  mat-button (click)=\"onShowAllOptions()\" *ngIf=\"showLess < field['options'].length\">\n      {{field['showAllLabel'] ? field['showAllLabel'] : 'Show All'}}\n      <mat-icon aria-hidden=\"true\">keyboard_arrow_down</mat-icon>\n    </button>\n  </span>\n  <ng-container *ngTemplateOutlet=\"cfhelplaintext\"></ng-container>\n</ng-template>","styles":[".mx-field-lbl,.mx-field-lbl-for-label{display:block}.mx-field-lbl-horizontal{padding-top:20px}.mx-field-lbl-horizontal-premitive{padding-top:13px}.mx-field-hint-inline{text-align:right}.mx-field-hint-nm{font-size:75%}.mx-field-hint-nm .mx-field-hint-icon{height:1em;width:1em}.mx-field-hint-icon{font-size:100%!important}.mx-field-hint .mat-icon{margin-right:4px!important;vertical-align:middle!important}.mx-field{width:100%}.mx-field-chk-group{padding-top:24px}.mx-field-chk{display:flex;flex-direction:column;margin:0}.mx-field-chk-inner{margin:5px 0}.mx-field-chk-desc{padding-left:22px}.mx-field-radio-group{display:flex;flex-direction:column;margin:0}.mx-field-radio{margin:5px 0}.mx-field-radio-desc{padding-left:26px}.mx-disabled{color:rgba(0,0,0,.54)}.mx-field-slider{width:100%}.mx-field-slider .mat-slider-wrapper{top:16px!important}.mx-field-toggle{height:48px!important}.mx-field-help-modal{margin-left:0!important;width:20px}.mx-field-help-modal-header{font-size:20px;font-weight:500;padding:16px 16px 8px}.mx-field-help-modal-divider{padding:12px 16px 0}.mx-field-help-modal-description{padding:16px 16px 8px}.mx-form-add-more-row{padding:0!important}.mx-field-upload{vertical-align:middle}.mx-field-upload .file-input-text{display:none!important}.mx-field-img{padding-top:5px}.mx-field-showmore-pannel{background-color:#eff0f1;border-radius:3px;margin-bottom:1em!important;overflow:auto;padding:0 8px!important;width:auto}.mx-field-showmore-pannel-content{padding-bottom:5px}.mx-field-showmore-pannel-action{border-top:1px solid #d3d3d3;color:grey;padding-top:5px;text-align:center}.mx-field-horizontal-container{padding:0!important}.mx-field-horizontal-container label#mat-form-field-label-1{color:transparent}.mx-field-horizontal-container .mx-field-nm{margin-top:6px}.mx-field-boolean-success,.mx-success{color:green}.mx-failure,.mx-field-boolean-failure{color:red}.mx-field-boolean{margin-bottom:1.25em!important}.mat-flat-button,.mat-icon-button,.mat-stroked-button,.mx-field-addmore .mat-button{min-width:30px!important}.mx-small-bubble{box-sizing:border-box!important;font-size:10px;line-height:24px;margin-top:12px!important;min-height:24px!important;min-width:unset;padding:0 8px!important}.mx-field-value-wrapper-horizontal{padding-top:8px}.mx-field-value-wrapper-vertical{display:block;padding-bottom:12px}.mx-field-list{padding-bottom:8px}.mx-field-list>div{margin-bottom:1.25em;text-align:center}.mx-field-list .mx-field-list-option[aria-selected=true]{background:rgba(203,197,197,.2)!important}.mx-field-list .mx-field-list-option .mx-field-list-image{border:1px solid #4d4d4d;height:30px!important;width:30px!important}.mx-field-list .mx-field-list-option .primary{margin:5px 0}.mx-field-list .mx-field-list-option .secondary{font-style:italic}.mx-field-list .mx-field-list-option:not(:last-child){border-bottom:1px solid #ebebeb}.mx-field-list .mx-field-list-option:nth-last-child(2){border-bottom:none}.highlight{font-weight:700}.mx-show-all-btn{display:block}.mx-field-paragraph .mx-field{width:auto!important}.mx-field-paragraph .mx-field .mx-field-lbl,.mx-field-paragraph .mx-field .mx-field-value-wrapper-horizontal{display:inline;width:auto!important}.mx-field-lbl-inline{color:rgba(0,0,0,.54);font-size:10px;height:10px;line-height:10px;margin-bottom:8px}.mx-field-lbl-inline .mat-icon-button{color:rgba(0,0,0,.54);height:10px;line-height:8px;width:30px}.mat-slide-toggle{line-height:unset;margin-top:4px}.ql-toolbar.ql-snow{border:none;border-radius:4px 4px 0 0;box-shadow:0 0 1px -1px rgba(0,0,0,.2),0 0 1px 0 rgba(0,0,0,.14),0 0 3px 0 rgba(0,0,0,.12)}.ql-container.ql-snow{border:none;border-radius:0 0 4px 4px;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)!important}.mx-field-editor-error{font-size:75%}.mx-field-editor-error .mat-error{margin-bottom:1.25em;margin-top:.5416666667em}.mx-editor-invalid .ql-toolbar.ql-snow{border:1px solid #f44336;border-bottom:none}.mx-editor-invalid .ql-container.ql-snow{border:1px solid #f44336}.mx-field-chk-group .mx-field-chk:last-child,.mx-field-radio-group{margin-bottom:1.25em!important}.mx-field-radio-horizontal{display:inline-block}.mx-field-radio-horizontal-padding{padding-right:10px}.mx-field-checkbox-horizontal{display:flex;padding-right:10px}.mx-disable,.mx-disable .ql-container,.mx-disable .ql-toolbar{opacity:.38}.mx-disable .mat-list-item-disabled{background:none}.mx-disable.mx-field-list:hover{outline:none}input[type=color],input[type=month],input[type=number],input[type=time],input[type=week]{-webkit-appearance:none;border:none;height:16px}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none}"]}]}],"members":{"sourceType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"sourceIdentifier":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"sourceIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"widgetArrayIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"fieldControl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"fieldIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"originalData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"_displayMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"displayMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3}}]}],"hideLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":3}}]}],"isAddMore":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":3}}]}],"addMorePermission":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":3}}]}],"device":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3}}]}],"displayInColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":3}}]}],"dependencies":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":3}}]}],"row":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":3}}]}],"keyMap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":3}}]}],"onDependentFieldChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":67,"character":3}}]}],"onFieldChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":68,"character":3}}]}],"onFormChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":69,"character":3}}]}],"onButtonClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":70,"character":3}}]}],"isEditorErrorState":[{"__symbolic":"method"}],"listView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":118,"character":3},"arguments":["listView"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"Router","line":120,"character":29},{"__symbolic":"reference","module":"@casl/ability","name":"Ability","line":120,"character":53}]}],"ngOnInit":[{"__symbolic":"method"}],"setDisplayTemplate":[{"__symbolic":"method"}],"setAddMoreDisplayInColumn":[{"__symbolic":"method"}],"setMinLengthForTrigger":[{"__symbolic":"method"}],"setRows":[{"__symbolic":"method"}],"setHeight":[{"__symbolic":"method"}],"setAppearance":[{"__symbolic":"method"}],"setAsBubble":[{"__symbolic":"method"}],"setTextAlign":[{"__symbolic":"method"}],"setMaxLength":[{"__symbolic":"method"}],"setNumberMinMax":[{"__symbolic":"method"}],"displayHintIcon":[{"__symbolic":"method"}],"sidenav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":243,"character":3},"arguments":["sidenav"]}]}],"close":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"setHelpButton":[{"__symbolic":"method"}],"required":[{"__symbolic":"method"}],"fieldNavigate":[{"__symbolic":"method"}],"fieldDisabled":[{"__symbolic":"method"}],"getValue":[{"__symbolic":"method"}],"displayFullText":[{"__symbolic":"method"}],"displayShortText":[{"__symbolic":"method"}],"displayEllipsis":[{"__symbolic":"method"}],"setCalendar":[{"__symbolic":"method"}],"invokeOnChangeOnField":[{"__symbolic":"method"}],"autocompleteDisplayFn":[{"__symbolic":"method"}],"_filter":[{"__symbolic":"method"}],"setOptionInDisplay":[{"__symbolic":"method"}],"setClear":[{"__symbolic":"method"}],"cleanValue":[{"__symbolic":"method"}],"getResolveTextWithKey":[{"__symbolic":"method"}],"getDropdownValue":[{"__symbolic":"method"}],"getImagePath":[{"__symbolic":"method"}],"onAutocompleteChange":[{"__symbolic":"method"}],"onToggleChange":[{"__symbolic":"method"}],"onSliderChange":[{"__symbolic":"method"}],"onRadioChange":[{"__symbolic":"method"}],"onCheckboxChange":[{"__symbolic":"method"}],"setShowLess":[{"__symbolic":"method"}],"onOptionChange":[{"__symbolic":"method"}],"onHtmlEditorChange":[{"__symbolic":"method"}],"onChipsListChange":[{"__symbolic":"method"}],"onInputChange":[{"__symbolic":"method"}],"onDateChange":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"onFileChange":[{"__symbolic":"method"}],"onParagraphChange":[{"__symbolic":"method"}],"buttonClick":[{"__symbolic":"method"}],"onChangeEvent":[{"__symbolic":"method"}],"errors":[{"__symbolic":"method"}],"setTextClearButton":[{"__symbolic":"method"}],"addField":[{"__symbolic":"method"}],"removeField":[{"__symbolic":"method"}],"addRemoveButton":[{"__symbolic":"method"}],"onFileComplete":[{"__symbolic":"method"}]}},"FormComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"mx-form","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":17,"character":17},"member":"None"},"template":"<mat-card *ngIf=\"(isMobile || isTablet || isDesktop) && formConfig && (formConfig.permission == null || (formConfig.permission && (formConfig.permission['subject'] | can: formConfig.permission['action'])))\" class=\"mx-form-container\">\n  <!-- <mat-card *ngIf=\"formConfig && (formConfig.permission == null || (formConfig.permission && (formConfig.permission['subject'] | can: formConfig.permission['action'])))\"> -->\n  <!-- --{{formConfig.displayMode}}=== -->\n  <mx-form-header \n    *ngIf=\"formConfig.header && formConfig.header.title\"\n    class=\"mx-form-header\"\n    [formHeaderConfig]=\"formConfig.header\"  \n    [description]=\"formConfig.description\"\n    [help]=\"formConfig.help\"\n    [sourceIndex]=\"sourceIndex\"\n    [widgetArrayIndex]=\"widgetArrayIndex\"\n    [formIdentifier]=\"formConfig.identifier\"\n    [form]=\"form\"\n    [originalData]=\"originalData\"\n    [context]=\"getFormValue()\"\n    [formActions]=\"formConfig.header.actions\"\n    (onFieldChange)=\"fieldChange($event)\"\n    (onButtonClick)=\"buttonClick($event)\"\n    [formDisplayMode]=\"formConfig.displayMode\" \n  ></mx-form-header>  \n\n  <mat-card-content *ngIf=\"!formConfig.showCustomLayout\">\n    <div class=\"mdc-layout-grid mx-table\" *ngIf=\"formConfig.description && formConfig.description.text && formConfig.description.bgColor\">\n      <div class=\"mdc-layout-grid__inner\">\n        <div class=\"mdc-layout-grid__cell--span-{{cellCount}}\">\n          <div \n            class=\"mx-form-header-desc\"\n            [style.background-color]=\"formConfig.description.bgColor\"\n            [style.color]=\"formConfig.description.textColor\"\n          >\n            <mat-icon class=\"mx-form-header-desc-icon\" aria-hidden=\"true\" [attr.aria-label]=\"formConfig.description.icon\" *ngIf=\"formConfig.description.icon\">{{formConfig.description.icon}}</mat-icon>\n            <span>{{ formConfig.description.text }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <mat-divider class=\"mx-form-header-divider\" *ngIf=\"formConfig.formFields && formConfig.formFields.length > 0 && (formConfig.header && formConfig.header.title) && (!formConfig.description || !formConfig.description.bgColor)\"></mat-divider>\n    <mat-card-subtitle *ngIf=\"formConfig.description && formConfig.description.text && !formConfig.description.bgColor\">{{ formConfig.description.text }}</mat-card-subtitle>\n\n    <div class=\"fields-container\">\n      <mat-list *ngFor=\"let formLayout of formLayouts\">\n        <mat-list-item \n          *ngIf=\"formLayout.sectionLabel\" \n          class=\"mx-form-separator\" \n          (click)=\"toggleList(formLayout)\">\n          <mat-icon *ngIf=\"formLayout.sectionIcon\" matListIcon>{{ formLayout.sectionIcon }}</mat-icon>\n          <span>\n            <span [ngClass]=\"{'mx-form-separator-expandable': formLayout.sectionExpandable && formLayout.sectionExpandable.allowed}\">\n              {{formLayout.sectionLabel}}\n            </span>\n            <mat-icon class=\"mx-form-section-showhide\" *ngIf=\"formLayout.sectionExpandable && formLayout.sectionExpandable.allowed && formLayout.sectionExpandable.default == 'COLLAPSE'\" matListIcon>keyboard_arrow_down</mat-icon>\n            <mat-icon class=\"mx-form-section-showhide\" *ngIf=\"formLayout.sectionExpandable && formLayout.sectionExpandable.allowed && formLayout.sectionExpandable.default == 'EXPAND'\" matListIcon>keyboard_arrow_up</mat-icon>\n          </span>\n          \n        </mat-list-item>\n        <mat-divider class=\"mx-form-section-divider\" *ngIf=\"formLayout.sectionLabel && ((!formLayout.sectionExpandable || !formLayout.sectionExpandable.allowed) || (formLayout.sectionExpandable && formLayout.sectionExpandable.allowed && formLayout.sectionExpandable.default == 'EXPAND'))\"></mat-divider>\n        <div class=\"mdc-layout-grid mx-form-field-container\" [hidden]=\"formLayout.sectionExpandable && formLayout.sectionExpandable.allowed && formLayout.sectionExpandable.default == 'COLLAPSE'\">\n          <!-- <pre>{{formLayout | json}}</pre> -->\n          <div class=\"mdc-layout-grid__inner\" *ngFor=\"let row of formLayout.rows; let rIndex = index;\">\n            <div class=\"mdc-layout-grid__cell--span-{{cellCount / formConfig.displayInColumns * (column.displayInColumns ? column.displayInColumns : 1)}} mdc-layout-grid__cell--align-top\" *ngFor=\"let column of row.columns\">\n              <!-- <pre>\n                {{column | json}}\n                {{form.controls[column.field.key]}}\n              </pre> -->\n              <ng-container \n                [ngTemplateOutlet]=\"cfControl\"\n                [ngTemplateOutletContext]=\"{formField: column}\"\n              ></ng-container>\n            </div>\n          </div>\n        </div> \n      </mat-list>\n    </div>\n  </mat-card-content>\n  <!-- <pre>{{originalData | json}}</pre> -->\n\n  <mat-card-content class=\"mx-card-mobile\" *ngIf=\"formConfig.showCustomLayout\">\n    <mat-grid-list \n      [cols]=\"formConfig.layout.cellCount\"  \n      [rowHeight]=\"formConfig.layout.rowHeight\">\n      <mat-grid-tile\n        *ngFor=\"let cell of formConfig.layout.cells\"\n        [colspan]=\"cell.cols\"\n        [rowspan]=\"cell.rows\">\n        <span class=\"mx-card-mobile-cell-container\" *ngIf=\"cell.controls && cell.controls.length > 0; else elseValue;\">\n          <div class=\"mx-card-mobile-cell-inline\" *ngIf=\"cell.displayInline && cell.displayInline.separator; else elseValue;\"> \n            <ng-container \n              [ngTemplateOutlet]=\"cfCustomCell\"\n              [ngTemplateOutletContext]=\"{cell:cell}\"\n            ></ng-container>\n          </div>\n          <ng-template #elseValue>\n            <div class=\"mx-card-mobile-cell\">\n              <ng-container  \n                [ngTemplateOutlet]=\"cfCustomCell\"\n                [ngTemplateOutletContext]=\"{cell:cell}\"\n              ></ng-container>\n            </div>\n          </ng-template>\n        </span>\n        <ng-template #elseValue>\n          <span\n            *ngIf=\"cell.separator && (cell.separator.label || cell.separator.icon)\" \n            class=\"mx-form-separator\" \n          >\n            <mat-icon *ngIf=\"cell.separator.icon\" matListIcon>{{ cell.separator.icon }}</mat-icon>\n            <span>{{cell.separator.label}}</span>\n          </span>\n        </ng-template>\n    </mat-grid-tile>\n    </mat-grid-list>   \n  </mat-card-content>\n\n  <mat-card-actions \n    class=\"mx-form-action\"  \n    [style.text-align]=\"formButton.align\"\n    *ngIf=\"formButton && showButtons\">\n    <mx-button-group \n      [buttons]=\"formButton.buttons\" \n      [form]=\"form\" \n      [formDisplayMode]=\"formConfig.displayMode\"\n      [sourceIdentifier]=\"formConfig.identifier\"\n      [sourceIndex]=\"sourceIndex\" \n      [widgetArrayIndex]=\"widgetArrayIndex\"\n      [originalData]=\"originalData\"\n      [context]=\"getFormValue()\" \n      (onClick)=\"buttonClick($event)\"> \n    </mx-button-group>\n  </mat-card-actions> \n\n  <mat-card-actions  \n    class=\"mx-form-action\"  \n    *ngIf=\"formButtonLayout && showButtons\">\n    <mat-grid-list \n      [cols]=\"cellCount\"  \n      [rowHeight]=\"formButtonLayout.rowHeight\">\n      <mat-grid-tile\n        *ngFor=\"let cell of formButtonLayout.cells\"\n        [colspan]=\"cell.cols\"\n        [rowspan]=\"cell.rows\"> \n        <div \n          [ngClass]=\"{'mx-form-button-grid-cell-left': cell.buttons.align == 'left', 'mx-form-button-grid-cell-right': cell.buttons.align == 'right', 'mx-form-button-grid-cell-center': cell.buttons.align == 'center'}\">\n          <mx-button-group \n            *ngIf=\"cell && cell.buttons && cell.buttons.buttons\"\n            [buttons]=\"cell.buttons.buttons\" \n            [form]=\"form\" \n            [formDisplayMode]=\"formConfig.displayMode\"\n            [sourceIdentifier]=\"formConfig.identifier\"\n            [sourceIndex]=\"sourceIndex\" \n            [widgetArrayIndex]=\"widgetArrayIndex\"\n            [originalData]=\"originalData\"\n            [context]=\"getFormValue()\" \n            (onClick)=\"buttonClick($event)\">\n          </mx-button-group>\n        </div>\n      </mat-grid-tile>\n    </mat-grid-list>\n  </mat-card-actions> \n</mat-card>\n\n<ng-template #cfCustomCell let-cell=\"cell\"> \n  <span \n    [ngClass]=\"{'fullwidth': control.fullWidth}\"\n    *ngFor=\"let control of cell.controls; let cControlIndex = index;\">\n    <!-- {{control.control.key}} --> \n    <span \n      class=\"mx-card-mobile-control-separator\"\n      *ngIf=\"cell.displayInline && cell.displayInline.separator && cControlIndex > 0\" \n      [innerHtml]=\"cell.displayInline.separator\"></span>\n\n      <!-- =={{cell.link | json}}--{{cell.linkKey}}--=={{control.control.key}}=={{control.type}}== -->\n      <!-- //{{control.colIndex}}-{{control.cControlIndex}} -->\n      <ng-container \n        *ngIf=\"control.type == 'FIELD'\"\n        [ngTemplateOutlet]=\"cfControl\"\n        [ngTemplateOutletContext]=\"{formField: control.control}\"\n      ></ng-container>\n  </span>\n</ng-template>\n\n<ng-template #cfControl let-formField=\"formField\">\n  <mx-field \n    *ngIf=\"formField && !formField.addMore\"\n    [sourceType]=\"'FORM'\"\n    [sourceIdentifier]=\"formConfig.identifier\" \n    [sourceIndex]=\"sourceIndex\" \n    [widgetArrayIndex]=\"widgetArrayIndex\"\n    [form]=\"form\" \n    [keyMap]=\"keyMap\"\n    [fieldControl]=\"form.controls[formField.field.key]\"\n    [field]=\"formField.field\"\n    [originalData]=\"originalData\"\n    [displayMode]=\"formConfig.displayMode\" \n    [value]=\"\" \n    [dependencies]=\"dependencies\"\n    (onDependentFieldChange)=\"dependentFieldChange($event)\"\n    (onFieldChange)=\"fieldChange($event)\"\n    (onButtonClick)=\"buttonClick($event)\"\n    class=\"mx-form-field\">\n  </mx-field>\n  <ng-template [ngIf]=\"formField && formField.addMore\">\n    <span *ngFor=\"let fieldControl of form.controls[formField.field.key]['controls']; let i=index;\">\n      <mx-field\n        [sourceType]=\"'FORM'\"\n        [sourceIdentifier]=\"formConfig.identifier\" \n        [sourceIndex]=\"sourceIndex\" \n        [widgetArrayIndex]=\"widgetArrayIndex\"\n        [fieldIndex]=\"i\"\n        [form]=\"form\" \n        [keyMap]=\"keyMap\"\n        [fieldControl]=\"fieldControl\"\n        [field]=\"formField.field\"\n        [originalData]=\"originalData\"\n        [displayMode]=\"formConfig.displayMode\" \n        [value]=\"\" \n        [isAddMore]=\"formField.addMore\"\n        [addMorePermission]=\"formField.addMorePermission\"\n        [device]=\"isDesktop ? 'desktop' : (isTablet ? 'tablet' : 'mobile')\"\n        [displayInColumns]=\"cellCount / formConfig.displayInColumns * (formField.displayInColumns ? formField.displayInColumns : 1)\"\n        [dependencies]=\"dependencies\"\n        (onDependentFieldChange)=\"dependentFieldChange($event)\"\n        (onFieldChange)=\"fieldChange($event)\"\n        (onButtonClick)=\"buttonClick($event)\"\n        class=\"mx-form-field\">\n      </mx-field>\n    </span>\n  </ng-template>\n</ng-template>\n\n","styles":[":root{--mdc-layout-grid-column-width-desktop:72px;--mdc-layout-grid-column-width-phone:72px;--mdc-layout-grid-column-width-tablet:72px;--mdc-layout-grid-gutter-desktop:24px;--mdc-layout-grid-gutter-phone:16px;--mdc-layout-grid-gutter-tablet:16px;--mdc-layout-grid-margin-desktop:24px;--mdc-layout-grid-margin-phone:16px;--mdc-layout-grid-margin-tablet:16px}@media (min-width:840px){.mdc-layout-grid{box-sizing:border-box;margin:0 auto;padding:24px;padding:var(--mdc-layout-grid-margin-desktop,24px)}}@media (min-width:600px) and (max-width:839px){.mdc-layout-grid{box-sizing:border-box;margin:0 auto;padding:16px;padding:var(--mdc-layout-grid-margin-tablet,16px)}}@media (max-width:599px){.mdc-layout-grid{box-sizing:border-box;margin:0 auto;padding:16px;padding:var(--mdc-layout-grid-margin-phone,16px)}}@media (min-width:840px){.mdc-layout-grid__inner{align-items:stretch;display:flex;flex-flow:row wrap;margin:-12px;margin:calc(var(--mdc-layout-grid-gutter-desktop, 24px)/2*-1)}@supports (display:grid){.mdc-layout-grid__inner{-ms-grid-columns:(minmax(0,1fr))[12];display:-ms-grid;display:grid;grid-gap:24px;grid-gap:var(--mdc-layout-grid-gutter-desktop,24px);grid-template-columns:repeat(12,minmax(0,1fr));margin:0}}}@media (min-width:600px) and (max-width:839px){.mdc-layout-grid__inner{align-items:stretch;display:flex;flex-flow:row wrap;margin:-8px;margin:calc(var(--mdc-layout-grid-gutter-tablet, 16px)/2*-1)}@supports (display:grid){.mdc-layout-grid__inner{-ms-grid-columns:(minmax(0,1fr))[8];display:-ms-grid;display:grid;grid-gap:16px;grid-gap:var(--mdc-layout-grid-gutter-tablet,16px);grid-template-columns:repeat(8,minmax(0,1fr));margin:0}}}@media (max-width:599px){.mdc-layout-grid__inner{align-items:stretch;display:flex;flex-flow:row wrap;margin:-8px;margin:calc(var(--mdc-layout-grid-gutter-phone, 16px)/2*-1)}@supports (display:grid){.mdc-layout-grid__inner{-ms-grid-columns:(minmax(0,1fr))[4];display:-ms-grid;display:grid;grid-gap:16px;grid-gap:var(--mdc-layout-grid-gutter-phone,16px);grid-template-columns:repeat(4,minmax(0,1fr));margin:0}}}@media (min-width:840px){.mdc-layout-grid__cell{box-sizing:border-box;margin:12px;margin:calc(var(--mdc-layout-grid-gutter-desktop, 24px)/2);width:calc(33.33333% - 24px);width:calc(33.33333% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell{-ms-grid-column-span:4;grid-column-end:span 4;margin:0;width:auto}}.mdc-layout-grid__cell--span-1,.mdc-layout-grid__cell--span-1-desktop{width:calc(8.33333% - 24px);width:calc(8.33333% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-1,.mdc-layout-grid__cell--span-1-desktop{-ms-grid-column-span:1;grid-column-end:span 1;width:auto}}.mdc-layout-grid__cell--span-2,.mdc-layout-grid__cell--span-2-desktop{width:calc(16.66667% - 24px);width:calc(16.66667% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-2,.mdc-layout-grid__cell--span-2-desktop{-ms-grid-column-span:2;grid-column-end:span 2;width:auto}}.mdc-layout-grid__cell--span-3,.mdc-layout-grid__cell--span-3-desktop{width:calc(25% - 24px);width:calc(25% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-3,.mdc-layout-grid__cell--span-3-desktop{-ms-grid-column-span:3;grid-column-end:span 3;width:auto}}.mdc-layout-grid__cell--span-4,.mdc-layout-grid__cell--span-4-desktop{width:calc(33.33333% - 24px);width:calc(33.33333% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-4,.mdc-layout-grid__cell--span-4-desktop{-ms-grid-column-span:4;grid-column-end:span 4;width:auto}}.mdc-layout-grid__cell--span-5,.mdc-layout-grid__cell--span-5-desktop{width:calc(41.66667% - 24px);width:calc(41.66667% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-5,.mdc-layout-grid__cell--span-5-desktop{-ms-grid-column-span:5;grid-column-end:span 5;width:auto}}.mdc-layout-grid__cell--span-6,.mdc-layout-grid__cell--span-6-desktop{width:calc(50% - 24px);width:calc(50% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-6,.mdc-layout-grid__cell--span-6-desktop{-ms-grid-column-span:6;grid-column-end:span 6;width:auto}}.mdc-layout-grid__cell--span-7,.mdc-layout-grid__cell--span-7-desktop{width:calc(58.33333% - 24px);width:calc(58.33333% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-7,.mdc-layout-grid__cell--span-7-desktop{-ms-grid-column-span:7;grid-column-end:span 7;width:auto}}.mdc-layout-grid__cell--span-8,.mdc-layout-grid__cell--span-8-desktop{width:calc(66.66667% - 24px);width:calc(66.66667% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-8,.mdc-layout-grid__cell--span-8-desktop{-ms-grid-column-span:8;grid-column-end:span 8;width:auto}}.mdc-layout-grid__cell--span-9,.mdc-layout-grid__cell--span-9-desktop{width:calc(75% - 24px);width:calc(75% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-9,.mdc-layout-grid__cell--span-9-desktop{-ms-grid-column-span:9;grid-column-end:span 9;width:auto}}.mdc-layout-grid__cell--span-10,.mdc-layout-grid__cell--span-10-desktop{width:calc(83.33333% - 24px);width:calc(83.33333% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-10,.mdc-layout-grid__cell--span-10-desktop{-ms-grid-column-span:10;grid-column-end:span 10;width:auto}}.mdc-layout-grid__cell--span-11,.mdc-layout-grid__cell--span-11-desktop{width:calc(91.66667% - 24px);width:calc(91.66667% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-11,.mdc-layout-grid__cell--span-11-desktop{-ms-grid-column-span:11;grid-column-end:span 11;width:auto}}.mdc-layout-grid__cell--span-12,.mdc-layout-grid__cell--span-12-desktop{width:calc(100% - 24px);width:calc(100% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-12,.mdc-layout-grid__cell--span-12-desktop{-ms-grid-column-span:12;grid-column-end:span 12;width:auto}}}@media (min-width:600px) and (max-width:839px){.mdc-layout-grid__cell{box-sizing:border-box;margin:8px;margin:calc(var(--mdc-layout-grid-gutter-tablet, 16px)/2);width:calc(50% - 16px);width:calc(50% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell{-ms-grid-column-span:4;grid-column-end:span 4;margin:0;width:auto}}.mdc-layout-grid__cell--span-1,.mdc-layout-grid__cell--span-1-tablet{width:calc(12.5% - 16px);width:calc(12.5% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-1,.mdc-layout-grid__cell--span-1-tablet{-ms-grid-column-span:1;grid-column-end:span 1;width:auto}}.mdc-layout-grid__cell--span-2,.mdc-layout-grid__cell--span-2-tablet{width:calc(25% - 16px);width:calc(25% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-2,.mdc-layout-grid__cell--span-2-tablet{-ms-grid-column-span:2;grid-column-end:span 2;width:auto}}.mdc-layout-grid__cell--span-3,.mdc-layout-grid__cell--span-3-tablet{width:calc(37.5% - 16px);width:calc(37.5% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-3,.mdc-layout-grid__cell--span-3-tablet{-ms-grid-column-span:3;grid-column-end:span 3;width:auto}}.mdc-layout-grid__cell--span-4,.mdc-layout-grid__cell--span-4-tablet{width:calc(50% - 16px);width:calc(50% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-4,.mdc-layout-grid__cell--span-4-tablet{-ms-grid-column-span:4;grid-column-end:span 4;width:auto}}.mdc-layout-grid__cell--span-5,.mdc-layout-grid__cell--span-5-tablet{width:calc(62.5% - 16px);width:calc(62.5% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-5,.mdc-layout-grid__cell--span-5-tablet{-ms-grid-column-span:5;grid-column-end:span 5;width:auto}}.mdc-layout-grid__cell--span-6,.mdc-layout-grid__cell--span-6-tablet{width:calc(75% - 16px);width:calc(75% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-6,.mdc-layout-grid__cell--span-6-tablet{-ms-grid-column-span:6;grid-column-end:span 6;width:auto}}.mdc-layout-grid__cell--span-7,.mdc-layout-grid__cell--span-7-tablet{width:calc(87.5% - 16px);width:calc(87.5% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-7,.mdc-layout-grid__cell--span-7-tablet{-ms-grid-column-span:7;grid-column-end:span 7;width:auto}}.mdc-layout-grid__cell--span-8,.mdc-layout-grid__cell--span-8-tablet{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-8,.mdc-layout-grid__cell--span-8-tablet{-ms-grid-column-span:8;grid-column-end:span 8;width:auto}}.mdc-layout-grid__cell--span-9,.mdc-layout-grid__cell--span-9-tablet{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-9,.mdc-layout-grid__cell--span-9-tablet{-ms-grid-column-span:8;grid-column-end:span 8;width:auto}}.mdc-layout-grid__cell--span-10,.mdc-layout-grid__cell--span-10-tablet{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-10,.mdc-layout-grid__cell--span-10-tablet{-ms-grid-column-span:8;grid-column-end:span 8;width:auto}}.mdc-layout-grid__cell--span-11,.mdc-layout-grid__cell--span-11-tablet{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-11,.mdc-layout-grid__cell--span-11-tablet{-ms-grid-column-span:8;grid-column-end:span 8;width:auto}}.mdc-layout-grid__cell--span-12,.mdc-layout-grid__cell--span-12-tablet{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-12,.mdc-layout-grid__cell--span-12-tablet{-ms-grid-column-span:8;grid-column-end:span 8;width:auto}}}@media (max-width:599px){.mdc-layout-grid__cell{box-sizing:border-box;margin:8px;margin:calc(var(--mdc-layout-grid-gutter-phone, 16px)/2);width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell{-ms-grid-column-span:4;grid-column-end:span 4;margin:0;width:auto}}.mdc-layout-grid__cell--span-1,.mdc-layout-grid__cell--span-1-phone{width:calc(25% - 16px);width:calc(25% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-1,.mdc-layout-grid__cell--span-1-phone{-ms-grid-column-span:1;grid-column-end:span 1;width:auto}}.mdc-layout-grid__cell--span-2,.mdc-layout-grid__cell--span-2-phone{width:calc(50% - 16px);width:calc(50% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-2,.mdc-layout-grid__cell--span-2-phone{-ms-grid-column-span:2;grid-column-end:span 2;width:auto}}.mdc-layout-grid__cell--span-3,.mdc-layout-grid__cell--span-3-phone{width:calc(75% - 16px);width:calc(75% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-3,.mdc-layout-grid__cell--span-3-phone{-ms-grid-column-span:3;grid-column-end:span 3;width:auto}}.mdc-layout-grid__cell--span-4,.mdc-layout-grid__cell--span-4-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-4,.mdc-layout-grid__cell--span-4-phone{-ms-grid-column-span:4;grid-column-end:span 4;width:auto}}.mdc-layout-grid__cell--span-5,.mdc-layout-grid__cell--span-5-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-5,.mdc-layout-grid__cell--span-5-phone{-ms-grid-column-span:4;grid-column-end:span 4;width:auto}}.mdc-layout-grid__cell--span-6,.mdc-layout-grid__cell--span-6-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-6,.mdc-layout-grid__cell--span-6-phone{-ms-grid-column-span:4;grid-column-end:span 4;width:auto}}.mdc-layout-grid__cell--span-7,.mdc-layout-grid__cell--span-7-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-7,.mdc-layout-grid__cell--span-7-phone{-ms-grid-column-span:4;grid-column-end:span 4;width:auto}}.mdc-layout-grid__cell--span-8,.mdc-layout-grid__cell--span-8-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-8,.mdc-layout-grid__cell--span-8-phone{-ms-grid-column-span:4;grid-column-end:span 4;width:auto}}.mdc-layout-grid__cell--span-9,.mdc-layout-grid__cell--span-9-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-9,.mdc-layout-grid__cell--span-9-phone{-ms-grid-column-span:4;grid-column-end:span 4;width:auto}}.mdc-layout-grid__cell--span-10,.mdc-layout-grid__cell--span-10-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-10,.mdc-layout-grid__cell--span-10-phone{-ms-grid-column-span:4;grid-column-end:span 4;width:auto}}.mdc-layout-grid__cell--span-11,.mdc-layout-grid__cell--span-11-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-11,.mdc-layout-grid__cell--span-11-phone{-ms-grid-column-span:4;grid-column-end:span 4;width:auto}}.mdc-layout-grid__cell--span-12,.mdc-layout-grid__cell--span-12-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-12,.mdc-layout-grid__cell--span-12-phone{-ms-grid-column-span:4;grid-column-end:span 4;width:auto}}}.mdc-layout-grid__cell--order-1{order:1}.mdc-layout-grid__cell--order-2{order:2}.mdc-layout-grid__cell--order-3{order:3}.mdc-layout-grid__cell--order-4{order:4}.mdc-layout-grid__cell--order-5{order:5}.mdc-layout-grid__cell--order-6{order:6}.mdc-layout-grid__cell--order-7{order:7}.mdc-layout-grid__cell--order-8{order:8}.mdc-layout-grid__cell--order-9{order:9}.mdc-layout-grid__cell--order-10{order:10}.mdc-layout-grid__cell--order-11{order:11}.mdc-layout-grid__cell--order-12{order:12}.mdc-layout-grid__cell--align-top{align-self:flex-start}@supports (display:grid){.mdc-layout-grid__cell--align-top{-ms-grid-row-align:start;align-self:start}}.mdc-layout-grid__cell--align-middle{-ms-grid-row-align:center;align-self:center}.mdc-layout-grid__cell--align-bottom{align-self:flex-end}@supports (display:grid){.mdc-layout-grid__cell--align-bottom{-ms-grid-row-align:end;align-self:end}}@media (min-width:840px){.mdc-layout-grid--fixed-column-width{width:1176px;width:calc(var(--mdc-layout-grid-column-width-desktop, 72px)*12 + var(--mdc-layout-grid-gutter-desktop, 24px)*11 + var(--mdc-layout-grid-margin-desktop, 24px)*2)}}@media (min-width:600px) and (max-width:839px){.mdc-layout-grid--fixed-column-width{width:720px;width:calc(var(--mdc-layout-grid-column-width-tablet, 72px)*8 + var(--mdc-layout-grid-gutter-tablet, 16px)*7 + var(--mdc-layout-grid-margin-tablet, 16px)*2)}}@media (max-width:599px){.mdc-layout-grid--fixed-column-width{width:368px;width:calc(var(--mdc-layout-grid-column-width-phone, 72px)*4 + var(--mdc-layout-grid-gutter-phone, 16px)*3 + var(--mdc-layout-grid-margin-phone, 16px)*2)}}.mdc-layout-grid--align-left{margin-left:0;margin-right:auto}.mdc-layout-grid--align-right{margin-left:auto;margin-right:0}body{margin:0}.mx-form-container{box-shadow:none!important}.mx-form-field{width:100%}.mx-form-separator{font-size:12px}.mx-form-separator .mat-list-item-content{padding-left:0!important}.mdc-layout-grid{padding:0!important}.mat-card-header-text{margin:0}.mx-form-header-desc{padding:5px 10px;width:auto}.mx-form-header-desc-icon{font-size:15px;height:15px!important;margin-top:0;padding:0 5px 0 0;width:15px!important}.mat-card-subtitle{padding-top:12px}.mx-form-field-container{padding-top:8px!important}.fields-container .mat-list-base{padding-top:0!important}.mx-form-separator-expandable{color:#00f!important;cursor:pointer;text-decoration:underline}.mx-form-section-showhide{font-size:16px!important;height:16px!important;width:16px!important}.mx-form-button-grid-cell-left{bottom:8px;left:8px;position:absolute}.mx-form-button-grid-cell-right{bottom:8px;position:absolute;right:8px}.mx-form-section-divider{border-top-color:#696969;border-top-width:2px!important}::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,.38);border-radius:2px}::-webkit-scrollbar-thumb{-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,.5);border-radius:8px}::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:window-inactive{background:rgba(0,0,0,.38)}.mx-card-mobile{margin-bottom:12px;word-wrap:break-word}.mx-card-mobile .mat-grid-tile .mat-figure{justify-content:unset}.mx-card-mobile .mx-primary-text .mx-field-value{font-size:18px;font-weight:400;margin-bottom:none}.mx-card-mobile .mx-secondary-text .mx-field-value{font-size:14px;font-weight:300;margin-bottom:none;margin-top:4px}.mx-card-mobile .mx-tertiary-text .mx-field-value{font-size:12px;font-weight:300;margin-bottom:none;margin-top:8px}.mx-card-mobile .mx-card-mobile-cell-container{width:100%}.mx-card-mobile .mx-card-mobile-cell{display:block;padding:4px;width:100%}.mx-card-mobile .mx-card-mobile-cell .fullwidth button{width:100%}.mx-card-mobile .mx-card-mobile-cell .mx-primary-text .mx-field-value,.mx-card-mobile .mx-card-mobile-cell .mx-secondary-text .mx-field-value,.mx-card-mobile .mx-card-mobile-cell .mx-tertiary-text .mx-field-value{display:block}.mx-card-mobile .mx-card-mobile-cell .fullwidth button,.mx-card-mobile .mx-card-mobile-cell .fullwidth mat-chip{width:100%}.mx-card-mobile .mx-card-mobile-cell-inline{display:inline-block;padding:4px;width:100%}.mx-card-mobile .mx-card-mobile-cell-inline .mx-card-mobile-control-separator{padding:4px}.mx-card-mobile .mx-card-mobile-cell-inline .mx-field-lbl-for-label{display:inherit}"]}]}],"members":{"_formConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"formConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"sourceIdentifier":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"sourceIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"widgetArrayIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"originalData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"keyMap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"onFormChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":44,"character":3}}]}],"onFieldChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":45,"character":3}}]}],"onButtonClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":46,"character":3}}]}],"supportingRecord":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":3}}]}],"record":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":3}}]}],"reset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@casl/ability","name":"Ability","line":108,"character":31},{"__symbolic":"reference","module":"@angular/cdk/layout","name":"BreakpointObserver","line":108,"character":68}]}],"ngOnInit":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"getCustomLayout":[{"__symbolic":"method"}],"getActions":[{"__symbolic":"method"}],"dependentFieldChange":[{"__symbolic":"method"}],"fieldChange":[{"__symbolic":"method"}],"buttonClick":[{"__symbolic":"method"}],"fieldDefaultSetting":[{"__symbolic":"method"}],"setTitle":[{"__symbolic":"method"}],"initFormGroup":[{"__symbolic":"method"}],"getFormValue":[{"__symbolic":"method"}],"transformRows":[{"__symbolic":"method"}],"formFieldRowColumnCount":[{"__symbolic":"method"}],"toggleList":[{"__symbolic":"method"}],"getLayout":[{"__symbolic":"method"}],"resetButtonDisplay":[{"__symbolic":"method"}],"resetDisplayInColumn":[{"__symbolic":"method"}],"getNewDisplayInColumn":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"FormHeaderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"mx-form-header","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":13,"character":17},"member":"None"},"template":"<mat-card-header class=\"mx-form-header\">\n    <mat-icon \n        *ngIf=\"formHeaderConfig.icon && formHeaderConfig.icon.font && iconPosition == 'BEFORE_TITLE'\"\n        mat-card-avatar \n        aria-hidden=\"false\" \n        [style.margin-top.px]=\"subtitle ? 8 : 0\"\n        [attr.aria-label]=\"formHeaderConfig.icon.font\">{{ formHeaderConfig.icon.font }}</mat-icon>\n\n    <mat-card-title class=\"mx-form-header-title\">\n        {{ title }}\n        <mat-icon \n            mat-card-avatar\n            *ngIf=\"formHeaderConfig.icon && formHeaderConfig.icon.font && iconPosition == 'AFTER_TITLE'\"\n            aria-hidden=\"false\" \n            [attr.aria-label]=\"formHeaderConfig.icon.font\"\n            class=\"mx-form-header-after-icon\">\n            {{ formHeaderConfig.icon.font }}</mat-icon>\n            <mat-icon \n                *ngIf=\"help && help.message && help.icon\" \n                aria-hidden=\"true\" \n                [attr.aria-label]=\"help.message\" \n                [matTooltip]=\"help.message\"\n                [matTooltipPosition]=\"help.position\"\n                class=\"mx-hint-icon\">\n                {{help.icon ? help.icon : 'live_help'}}\n            </mat-icon>\n    </mat-card-title>\n\n    <mat-card-subtitle class=\"mx-form-header-subtitle\" *ngIf=\"subtitle\">{{ subtitle }}</mat-card-subtitle>\n\n    <div class=\"mx-form-header-buttons\">\n        <!-- {{fields | json}} -->\n        <mx-field \n            *ngFor=\"let field of fields\"\n            [sourceIdentifier]=\"formIdentifier\" \n            [sourceIndex]=\"sourceIndex\" \n            [widgetArrayIndex]=\"widgetArrayIndex\"\n            [form]=\"form\"\n            [fieldControl]=\"form.controls[field.key]\"\n            [field]=\"field\"\n            [displayMode]=\"_formDisplayMode\" \n            [value]=\"\"\n            (onFieldChange)=\"fieldChange($event)\">\n        </mx-field> \n        <span *ngIf=\"fields && fields.length > 0 && buttons && buttons.length > 0\" class=\"mx-form-header-between-action\"></span>\n        <!-- {{context | json}} -->\n        <!-- {{ originalData | json }} -->\n        <!-- --{{_formDisplayMode | json}}==== -->\n        <mx-button-group \n            [buttons]=\"buttons\" \n            [form]=\"form\" \n            [sourceIdentifier]=\"formIdentifier\"\n            [sourceIndex]=\"sourceIndex\"\n            [widgetArrayIndex]=\"widgetArrayIndex\"\n            [formDisplayMode]=\"_formDisplayMode\" \n            [context]=\"context\"\n            [originalData]=\"originalData\"\n            (onClick)=\"buttonClick($event)\">\n        </mx-button-group>  \n    </div>\n</mat-card-header>","styles":[".mx-form-header-buttons{position:absolute;right:0;text-align:right;top:5px}.mat-card-header-text{margin:0 0 10px}.mx-form-header-title{margin-top:0!important}.mx-form-header-after-icon{text-align:center}.mx-form-header-between-action{margin-right:8px}.mx-hint-icon{font-size:75%}"]}]}],"members":{"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"formHeaderConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"description":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"help":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"_formDisplayMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"formDisplayMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"formIdentifier":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"sourceIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"widgetArrayIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"originalData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"context":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"formActions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"onFieldChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":43,"character":3}}]}],"onButtonClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":44,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@casl/ability","name":"Ability","line":54,"character":31}]}],"ngOnInit":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"getFormHeader":[{"__symbolic":"method"}],"setIconPosition":[{"__symbolic":"method"}],"saperateFormActions":[{"__symbolic":"method"}],"initFormGroup":[{"__symbolic":"method"}],"fieldChange":[{"__symbolic":"method"}],"buttonClick":[{"__symbolic":"method"}]}},"DynamicListComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ɵg"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"mx-dynamic-list","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":14,"character":17},"member":"None"},"template":"<!-- <pre>\n  {{displayVertical | json}}----\n</pre>  -->\n<mat-card  \n  [class.mx-hide-card]=\"hideCard\"\n  *ngIf=\"(_listConfig.permission == null || (_listConfig.permission && (_listConfig.permission['subject'] | can: _listConfig.permission['action'])))\">\n  <mat-card-header \n    [class.mx-table-hidden]=\"!(_listConfig) || hideHeader || !(_listConfig && _listConfig.header)\"\n    class=\"mx-list-header\" \n    *ngIf=\"hideHeader == false\">\n    <mat-icon \n      mat-card-avatar  \n      *ngIf=\"_listConfig.header && _listConfig.header.icon && _listConfig.header.icon.font && iconPosition == 'BEFORE_TITLE'\"\n      aria-hidden=\"false\" \n      [style.margin-top.px]=\"_listConfig.header.subtitle ? 8 : 0\"\n      [attr.aria-label]=\"_listConfig.header.icon.font\">\n      {{ _listConfig.header.icon.font }}\n    </mat-icon>\n\n    <mat-card-title *ngIf=\"_listConfig.header && _listConfig.header.title\">\n      {{_listConfig.header.title}}\n      <mat-icon \n        *ngIf=\"_listConfig.header && _listConfig.header.icon && _listConfig.header.icon.font && iconPosition == 'AFTER_TITLE'\"\n        aria-hidden=\"false\" [attr.aria-label]=\"_listConfig.header.icon.font\">{{ _listConfig.header.icon.font }}</mat-icon>\n    </mat-card-title>\n    \n    <mat-card-subtitle class=\"mx-list-header-subtitle\" *ngIf=\"_listConfig.header && _listConfig.header.subtitle\">{{ _listConfig.header.subtitle }}</mat-card-subtitle>\n\n    <div class=\"mx-list-header-buttons\" *ngIf=\"_listConfig.header && _listConfig.header.actions\">\n      <mx-button-group \n          [buttons]=\"_listConfig.header.actions\" \n          [sourceIdentifier]=\"sourceIdentifier\"\n          [sourceIndex]=\"sourceIndex\"\n          [widgetArrayIndex]=\"widgetArrayIndex\"\n          [originalData]=\"originalData\"\n          (onClick)=\"buttonClick($event)\">\n      </mx-button-group> \n    </div>\n  </mat-card-header>\n\n  <mat-card-content> \n    <div class=\"mdc-layout-grid mx-list-desc\" *ngIf=\"_listConfig.description && _listConfig.description.text && _listConfig.description.bgColor\">\n      <div class=\"mdc-layout-grid__inner\">\n        <div class=\"mdc-layout-grid__cell--span-12\">\n          <div \n            class=\"mx-list-header-desc\"\n            [style.background-color]=\"_listConfig.description.bgColor\"\n            [style.color]=\"_listConfig.description.textColor\"\n          >\n            <mat-icon class=\"mx-list-header-desc-icon\" aria-hidden=\"true\" [attr.aria-label]=\"_listConfig.description.icon\" *ngIf=\"_listConfig.description.icon\">{{_listConfig.description.icon}}</mat-icon>\n            <span>{{ _listConfig.description.text }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <mat-divider class=\"mx-list-header-divider\" *ngIf=\"(_listConfig.header && (_listConfig.header.title || _listConfig.header.actions)) || (_listConfig.description && _listConfig.description.text)\"></mat-divider>\n    <mat-card-subtitle *ngIf=\"_listConfig.description && _listConfig.description.text && !_listConfig.description.bgColor\">{{ _listConfig.description.text }}</mat-card-subtitle>\n  \n    <span *ngIf=\"_listConfig\">\n      <ng-container *ngTemplateOutlet=\"cftable\"></ng-container>\n    </span>\n    \n    <mat-card-actions \n      *ngIf=\"hideFooter == false && _listConfig.pagination!='INFINIT_SCROLL' && ((_listConfig) || hideFooter || !(_listConfig && (_listConfig.permission == null || (_listConfig.permission && (_listConfig.permission['subject'] | can: _listConfig.permission['action'])))))\"\n      class=\"mx-footer-actions\" \n      align=\"right\">\n      <mat-paginator \n        [length]=\"_record.total\" \n        [pageSize]=\"limit\"\n        [pageSizeOptions]=\"pageSizeOptions\"\n        (page)=\"onPage($event)\"\n        [ngClass]=\"{'page-wise': _listConfig.pagination=='NO_PAGE'}\"\n        [hidePageSize]=\"_listConfig.pagination=='NO_PAGE'\"\n      ></mat-paginator>\n    </mat-card-actions>\n    \n  </mat-card-content>\n</mat-card>\n\n<ng-template #cftable>\n  <span *ngIf=\"!isCustomTemplate && !(isMobile && _listConfig.mobile && _listConfig.mobile.rowHeight)\">\n    <ng-container *ngTemplateOutlet=\"cftablelist\"></ng-container>\n  </span> \n  <span *ngIf=\"isCustomTemplate\">\n    <ng-container \n      [ngTemplateOutlet]=\"cftablemobile\"\n      [ngTemplateOutletContext]=\"{layout: _listConfig.row.template.layout}\"></ng-container>\n  </span>\n  <span *ngIf=\"isMobile && _listConfig.mobile && _listConfig.mobile.rowHeight\">\n    <ng-container \n      [ngTemplateOutlet]=\"cftablemobile\"\n      [ngTemplateOutletContext]=\"{layout: _listConfig.mobile}\"></ng-container>\n  </span>\n</ng-template>\n\n<ng-template #cftablemobile let-layout=\"layout\">\n  <div class=\"mdc-layout-grid mx-card-list\">\n    <div class=\"mdc-layout-grid__inner\" id=\"mxMobileSearchStrip\" *ngIf=\"_listConfig.staticList.hasOnPageFilter || layout.sorting\">\n      <div \n        *ngIf=\"_listConfig.staticList.hasOnPageFilter\"\n        class=\"mx-mobile-search-field-cont mdc-layout-grid__cell--span-{{ _listConfig.staticList.hasOnPageFilter && !layout.sorting ? 12 : 9}}\"\n      >\n        <mx-field \n          [sourceType]=\"'FORM'\"\n          [form]=\"commonListForm\" \n          [fieldControl]=\"(commonListForm != undefined && commonListForm.controls['pageFilter']) ? commonListForm.controls['pageFilter'] : null\"\n          [field]=\"filterField\"\n          [hideLabel]=\"true\"\n          [displayMode]=\"'EDIT'\" \n          [value]=\"\"\n          (onFieldChange)=\"updateFilter($event);$event.event.stopPropagation()\"\n          class=\"mx-list-search-field search-mobile\"\n          [style.width.%]=\"100\">\n        </mx-field>  \n      </div>\n      <div \n        *ngIf=\"layout.sorting\"\n        class=\"mx-mobile-sort-field-cont mdc-layout-grid__cell--span-{{ !_listConfig.staticList.hasOnPageFilter && layout.sorting ? 12 : 3}}\"> \n        <mat-icon \n          class=\"mx-mobile-filter-icon\" \n          [ngClass]=\"{'rote':this.sortDirection=='desc'}\" \n          [matMenuTriggerFor]=\"filterMenu\"  \n          aria-label=\"Filter Menu\"\n        >filter_list</mat-icon>\n        <!-- (click)=\"(sortDirection == 'asc' ? sortDirection = 'desc' : sortDirection = 'asc');_record.rows=_record.rows.reverse();\" -->\n        <mat-menu #filterMenu=\"matMenu\">\n          <button \n            class=\"mx-mobile-filter-link\"\n            *ngFor=\"let sorting of layout.sorting\" \n            mat-menu-item\n            (click)=\"onSort({'action':sorting.key, 'direction':sorting.direction})\"\n          >\n            {{sorting.label}}\n            <span class=\"material-icons mx-material-icons\">\n              {{ sorting.direction == \"asc\" ? \"north\" : \"south\" }}\n            </span>\n          </button>\n        </mat-menu>\n      </div>\n    </div>\n    <div \n      *ngIf=\"layout && layout.rowHeight\"\n      [ngClass]=\"{'mx-list-infinite-scroll': _listConfig.pagination=='INFINIT_SCROLL'}\" \n      infiniteScroll \n      [infiniteScrollDistance]=\"2\" \n      [infiniteScrollThrottle]=\"1.5\" \n      [infiniteScrollContainer]=\"scrollRow\" \n      #scrollRow \n      (scrolled)=\"onPage($event)\">\n      <!-- <pre>{{_listConfig.mobile.cells | json}}</pre> -->\n      <mat-card class=\"mx-card-mobile\" *ngFor=\"let row of _record.rows; let rowIndex=index\">\n        <mat-card-content>\n          <mat-grid-list [cols]=\"cellCount\" [rowHeight]=\"layout.rowHeight\">\n            <mat-grid-tile *ngFor=\"let cell of layout.cells\" [colspan]=\"cell.cols\" [rowspan]=\"cell.rows\">\n              <div \n                class=\"mx-card-mobile-cell width-100\"\n                [ngClass]=\"{'mx-primary-text': cell.fieldStyle && cell.fieldStyle.class == 'PRIMARY', 'mx-secondary-text': cell.fieldStyle && cell.fieldStyle.class == 'SECONDARY', 'mx-tertiary-text': cell.fieldStyle && cell.fieldStyle.class == 'TERTIARY'}\"\n                *ngIf=\"!(cell.displayInline && cell.displayInline.separator && cell.controls && cell.controls.length > 0); else elseValue;\">\n                <ng-container [ngTemplateOutlet]=\"cfCustomCell\"\n                  [ngTemplateOutletContext]=\"{cell:cell, row:row, rowIndex:rowIndex}\"></ng-container>\n              </div>\n              <ng-template #elseValue>\n                <div \n                  class=\"mx-card-mobile-cell-inline\"\n                  [ngClass]=\"{'mx-primary-text': cell.fieldStyle && cell.fieldStyle.class == 'PRIMARY', 'mx-secondary-text': cell.fieldStyle && cell.fieldStyle.class == 'SECONDARY', 'mx-tertiary-text': cell.fieldStyle && cell.fieldStyle.class == 'TERTIARY'}\">\n                  <ng-container [ngTemplateOutlet]=\"cfCustomCell\"\n                    [ngTemplateOutletContext]=\"{cell:cell, row:row, rowIndex:rowIndex}\"></ng-container>\n                </div>\n              </ng-template>\n            </mat-grid-tile>\n          </mat-grid-list>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #cfCustomRowLayout let-layout=\"layout\" let-row=\"row\" let-rowIndex=\"rowIndex\" let-withCard=\"withCard\"> \n  <mat-card class=\"mx-card-mobile\" *ngIf=\"withCard\">\n    <mat-card-content>\n      <ng-container  \n        [ngTemplateOutlet]=\"cfCustomRow\"\n        [ngTemplateOutletContext]=\"{layout: layout, row: row, rowIndex: rowIndex}\"\n      ></ng-container>\n    </mat-card-content>\n  </mat-card>\n  <span class=\"mx-card-mobile\" *ngIf=\"!withCard\">\n    <ng-container  \n      [ngTemplateOutlet]=\"cfCustomRow\"\n      [ngTemplateOutletContext]=\"{layout: layout, row: row, rowIndex: rowIndex}\"\n    ></ng-container>\n  </span>\n</ng-template>\n\n<ng-template #cfCustomRow let-layout=\"layout\" let-row=\"row\" let-rowIndex=\"rowIndex\"> \n  <mat-grid-list \n      [cols]=\"layout.cellCount\"  \n      [rowHeight]=\"layout.rowHeight\">\n      <mat-grid-tile\n        *ngFor=\"let cell of layout.cells\"\n        [colspan]=\"cell.cols\"\n        [rowspan]=\"cell.rows\">\n        <div \n          class=\"mx-card-mobile-cell\" \n          [ngClass]=\"{'mx-primary-text': cell.fieldStyle && cell.fieldStyle.class == 'PRIMARY', 'mx-secondary-text': cell.fieldStyle && cell.fieldStyle.class == 'SECONDARY', 'mx-tertiary-text': cell.fieldStyle && cell.fieldStyle.class == 'TERTIARY'}\"\n          *ngIf=\"!(cell.displayInline && cell.displayInline.separator && cell.controls && cell.controls.length > 0); else elseValue;\"> \n          <ng-container \n            [ngTemplateOutlet]=\"cfCustomCell\"\n            [ngTemplateOutletContext]=\"{cell:cell, row:row, rowIndex:rowIndex}\"\n          ></ng-container>\n        </div>\n        <ng-template #elseValue>\n          <div \n            class=\"mx-card-mobile-cell-inline\"\n            [ngClass]=\"{'mx-primary-text': cell.fieldStyle && cell.fieldStyle.class == 'PRIMARY', 'mx-secondary-text': cell.fieldStyle && cell.fieldStyle.class == 'SECONDARY', 'mx-tertiary-text': cell.fieldStyle && cell.fieldStyle.class == 'TERTIARY'}\">\n            <ng-container \n              [ngTemplateOutlet]=\"cfCustomCell\"\n              [ngTemplateOutletContext]=\"{cell:cell, row:row, rowIndex:rowIndex}\"\n            ></ng-container>\n          </div>\n        </ng-template>\n      </mat-grid-tile>\n    </mat-grid-list>   \n</ng-template>\n\n<ng-template #cfCustomCell let-cell=\"cell\" let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <span \n    [ngClass]=\"{'fullwidth': control.fullWidth}\"\n    class=\"{{ control?.alignment?.vertical }} {{ control?.alignment?.horizontal }}\"\n    *ngFor=\"let control of cell.controls; let cControlIndex = index;\">\n    <!-- {{control.control.key}} --> \n    <span \n      class=\"mx-card-mobile-control-separator\"\n      *ngIf=\"cell.displayInline && cell.displayInline.separator && cControlIndex > 0\" \n      [innerHtml]=\"cell.displayInline.separator\"></span>\n\n    <!-- =={{cell.link | json}}--{{cell.linkKey}}--=={{control.control.key}}=={{control.type}}== -->\n    <mx-field\n      *ngIf=\"control.control && (!cell.link || (cell.link && cell.linkKey && cell.linkKey != control.control.key)) && control.type == 'FIELD'\" \n      [sourceType]=\"'LIST'\"\n      [sourceIdentifier]=\"_listConfig.identifier\" \n      [sourceIndex]=\"rowIndex\" \n      [widgetArrayIndex]=\"widgetArrayIndex\"\n      [form]=\"(formIndex == rowIndex && form != undefined) ? form : null\" \n      [fieldControl]=\"(formIndex == rowIndex && form != undefined) ? form.controls[control.control.key] : null\"\n      [field]=\"control.control\"\n      [displayMode]=\"displayModes[rowIndex]\" \n      [hideLabel]=\"true\"\n      [value]=\"getValue(control.colIndex, control.cControlIndex, row, control.control.value)\" \n      class=\"mx-list-field\"\n      [ngClass]=\"{'mx-list-field-disabled': (_listConfig && row && _listConfig.disableRow && _listConfig.disableRow(row)) || disabled, 'mx-primary-text': control.fieldStyle && control.fieldStyle.class == 'PRIMARY', 'mx-secondary-text': control.fieldStyle && control.fieldStyle.class == 'SECONDARY', 'mx-tertiary-text': control.fieldStyle && control.fieldStyle.class == 'TERTIARY'}\"\n      [row]=\"row\"\n      [keyMap]=\"keyMap\"\n      (onFieldChange)=\"fieldChange($event);$event.event && $event.event.stopPropagation ? $event.event.stopPropagation(): ''\">\n    </mx-field>\n    <mx-button\n      *ngIf=\"cell.link && ((cell.linkKey && cell.linkKey == control.control.key) || !cell.linkKey) && control.type == 'FIELD'\" \n      [identifier]=\"'listFieldAsLink'\"\n      [form]=\"(formIndex == rowIndex && form != undefined) ? form : null\"\n      [sourceIdentifier]=\"_listConfig.identifier\"\n      [sourceIndex]=\"rowIndex\"\n      [widgetArrayIndex]=\"widgetArrayIndex\"\n      [button]=\"cell.link\"\n      [label]=\"getValue(control.colIndex, control.cControlIndex, row, control.control.value)\"\n      [context]=\"(formIndex == rowIndex && form != undefined) ? form.value : null\"\n      [originalData]=\"row\"\n      [parentHierarchy]=\"parent\"\n      [disabled]=\"(_listConfig && row && _listConfig.disableRow && _listConfig.disableRow(row)) || disabled\"\n      (onClick)=\"buttonClick($event);$event.event.stopPropagation()\"\n    ></mx-button>\n\n    <!-- [formDisplayMode]=\"formConfig.displayMode\" -->\n    <!-- <mx-button-group \n      [ngClass]=\"{'fullwidth': control.fullWidth}\"\n      *ngIf=\"control.type == 'BUTTON'\"\n      [buttons]=\"control.control\" \n      [form]=\"(formIndex == rowIndex && form != undefined) ? form : null\" \n      [sourceIdentifier]=\"_listConfig.identifier\"\n      [sourceIndex]=\"rowIndex\" \n      [widgetArrayIndex]=\"widgetArrayIndex\"\n      [originalData]=\"row\"\n      [context]=\"(formIndex == rowIndex && form != undefined) ? form.value : null\" \n      (onClick)=\"buttonClick($event)\">\n    </mx-button-group> -->\n\n    <mx-button \n      *ngIf=\"control.type == 'BUTTON'\"\n      [form]=\"(formIndex == rowIndex && form != undefined) ? form : null\"\n      [sourceIdentifier]=\"_listConfig.identifier\"\n      [sourceIndex]=\"rowIndex\" \n      [widgetArrayIndex]=\"widgetArrayIndex\"\n      [button]=\"control.control\"\n      [context]=\"(formIndex == rowIndex && form != undefined) ? form.value : null\" \n      [originalData]=\"row\"\n      [parentHierarchy]=\"parent\" \n      [disabled]=\"(_listConfig && row && _listConfig.disableRow && _listConfig.disableRow(row)) || disabled\"\n      (onClick)=\"setRowEditablity(rowIndex);buttonClick($event);$event.event.stopPropagation()\"\n    ></mx-button> \n  </span>\n</ng-template>\n\n<ng-template #cftablelist>\n  <div class=\"mdc-layout-grid mx-table\">\n    <div class=\"mdc-layout-grid__inner\" id=\"mxMobileSearchStrip\" *ngIf=\"_listConfig.staticList.hasOnPageFilter || _listConfig.hasColumnSelection\">\n      <div \n        *ngIf=\"_listConfig.staticList.hasOnPageFilter\"\n        class=\"mdc-layout-grid__cell--span-{{ _listConfig.staticList.hasOnPageFilter && !_listConfig.hasColumnSelection ? 12 : 9}}\"\n      >\n        <mx-field \n          [sourceType]=\"'FORM'\"\n          [form]=\"commonListForm\" \n          [fieldControl]=\"(commonListForm != undefined && commonListForm.controls['pageFilter']) ? commonListForm.controls['pageFilter'] : null\"\n          [field]=\"filterField\"\n          [hideLabel]=\"true\"\n          [displayMode]=\"'EDIT'\" \n          [value]=\"\"\n          (onFieldChange)=\"updateFilter($event);$event.event.stopPropagation()\"\n          class=\"mx-list-search-field\"\n          [style.width.%]=\"100\">\n        </mx-field>  \n      </div>\n      <div \n        *ngIf=\"_listConfig.hasColumnSelection\" \n        class=\"mdc-layout-grid__cell--span-{{!_listConfig.staticList.hasOnPageFilter && _listConfig.hasColumnSelection ? 12 : 3}} mdc-layout-grid--align-right\" \n        [style.width.%]=\"100\">\n        <mx-field\n          [sourceType]=\"'FORM'\"\n          [form]=\"commonListForm\" \n          [fieldControl]=\"(commonListForm != undefined && commonListForm.controls['columnSelector']) ? commonListForm.controls['columnSelector'] : null\"\n          [field]=\"columnSelectorField\"\n          [hideLabel]=\"true\"\n          [displayMode]=\"'EDIT'\" \n          class=\"mx-list-sel-col-field\"\n          (onFieldChange)=\"updateColumnDisplay($event)\"\n          [style.width.%]=\"100\">\n        </mx-field>  \n        <!-- ;$event.event.stopPropagation() -->\n      </div>\n    </div>\n    <div class=\"mdc-layout-grid__inner\">\n      <div class=\"mdc-layout-grid__cell--span-12\" *ngIf=\"columnNames\">\n        <table  \n          mat-table  \n          [dataSource]=\"dataSource\" \n          class=\"mx-table\"\n          [ngClass]=\"{'mx-table-hover': _listConfig.shade && _listConfig.shade.type == 'HOVER', 'mx-table-alternate': _listConfig.shade && _listConfig.shade.type == 'ALTERNATE', 'mx-table-without-header': _listConfig.hideHeaderRow}\"\n          multiTemplateDataRows\n          matSort\n          [matSortActive]=\"_listConfig.defaultSort ? _listConfig.defaultSort.column : ''\" \n          matSortDisableClear  \n          [style.width.%]=\"'100'\"\n          [matSortDirection]=\"_listConfig.defaultSort ? _listConfig.defaultSort.order: ''\"\n          (matSortChange)=\"onSort($event)\">\n\n          <tr class=\"mat-row\" *matNoDataRow>\n            <td class=\"mat-cell\" colspan=\"9999\">\n              {{ _listConfig.noRecordFound ? _listConfig.noRecordFound : 'No data found'}}\n            </td>\n          </tr>\n          \n          <ng-container matColumnDef=\"select\">\n            <th \n              [class.mx-table-header-hidden]=\"_listConfig.hideHeaderRow\"\n              mat-header-cell \n              *matHeaderCellDef \n              class=\"selectable-column\">\n              <mat-checkbox \n                class=\"mx-list-checkbox-selectable\"\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [aria-label]=\"checkboxLabel()\">\n              </mat-checkbox>\n            </th>\n            <td \n              mat-cell \n              *matCellDef=\"let row; let rowIndex = dataIndex\"\n              [ngClass]=\"{'mx-row-editable': inlineEditButtons && inlineEditButtons[rowIndex] && inlineEditButtons[rowIndex].label == 'Cancel', 'mx-row-non-editable': !(inlineEditButtons && inlineEditButtons[rowIndex] && inlineEditButtons[rowIndex].label == 'Cancel')}\"\n              [style.background-color]=\"rowColors && rowColors[rowIndex] ? rowColors[rowIndex].bgColor : ''\"\n              [style.color]=\"rowColors && rowColors[rowIndex] ? rowColors[rowIndex].textColor : ''\"\n              class=\"selectable-column\">\n              <mat-checkbox \n                class=\"mx-list-checkbox-selectable\"\n                [disabled]=\"(_listConfig && row && _listConfig.disableRow && _listConfig.disableRow(row)) || disabled\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [aria-label]=\"checkboxLabel(row)\">\n              </mat-checkbox>\n                <!-- (click)=\"$event.event.stopPropagation()\" -->\n            </td>\n          </ng-container>\n          \n          <ng-container \n            *ngFor=\"let column of columnConfigs; let colIndex = index\"\n            [matColumnDef]=\"getColumnKey(column)\">\n            <th \n              mat-header-cell \n              *matHeaderCellDef\n              mat-sort-header\n              disableClear\n              [disabled]=\"!column.sortable\"\n              [class.mx-table-header-hidden]=\"_listConfig.hideHeaderRow\"\n              [ngClass]=\"{'mx-list-field-first': colIndex == 0}\"\n              [style.width.%]=\"displayVertical ? '' : column.width / totalDispalyableWidth * 100\">\n              {{getColumnLabel(column)}}\n            </th> \n            <!-- [attr.data-label]=\"getColumnLabel(column)\" -->\n            <td \n              mat-cell \n              *matCellDef=\"let row; let rowIndex = dataIndex\"\n              class=\"mx-table-data-cell\"\n              [ngClass]=\"{'mx-row-editable': inlineEditButtons && inlineEditButtons[rowIndex] && inlineEditButtons[rowIndex].label == 'Cancel', 'mx-row-non-editable': !(inlineEditButtons && inlineEditButtons[rowIndex] && inlineEditButtons[rowIndex].label == 'Cancel')}\"\n              [style.background-color]=\"cellColors && cellColors[rowIndex] && cellColors[rowIndex][colIndex] ? cellColors[rowIndex][colIndex].bgColor : ''\"\n              [style.color]=\"cellColors && cellColors[rowIndex] && cellColors[rowIndex][colIndex] ? cellColors[rowIndex][colIndex].textColor : ''\"\n              [style.width.%]=\"displayVertical ? '' : column.width / totalDispalyableWidth * 100\"\n              (click)=\"_listConfig.rowAction ? rowClick(row, rowIndex, ((formIndex == rowIndex && form != undefined) ? form.value : null), $event) : _listConfig.rowAction\"\n              >\n\n              <ng-container *ngIf=\"column?.template?.html || column?.template?.layout; else elseDefault\">\n                <div \n                  [style.width.%]=\"100\"\n                  *ngIf=\"column?.template?.html\">\n                  <ng-container *cfTemplate=\"'<style>'+column?.template?.css+'</style>' + column?.template?.html; context: {row: row, index: rowIndex}\"></ng-container>\n                </div>\n                <div \n                  [style.width.%]=\"100\"\n                  *ngIf=\"column?.template?.layout\">\n                  <!-- {{row | json}}--- -->\n                  <ng-container  \n                    [ngTemplateOutlet]=\"cfCustomRowLayout\"\n                    [ngTemplateOutletContext]=\"{layout: column.template.layout, row: row, rowIndex: rowIndex, withCard: false}\"\n                  ></ng-container>\n                </div>\n              </ng-container>\n              <ng-template #elseDefault>\n                <div \n                  [ngClass]=\"{'mx-list-field-not-first': cFieldIndex > 0, 'mx-list-field-inline': column.displayInline && column.displayInline.separator}\" \n                  *ngFor=\"let field of column.fields; let cFieldIndex = index;\">\n                  <span *ngIf=\"column.displayInline && column.displayInline.separator && cFieldIndex > 0\">{{column.displayInline.separator}}</span>\n                  <mx-field\n                    *ngIf=\"!column.link || (column.link && column.linkKey && column.linkKey != field.key)\" \n                    [sourceType]=\"'LIST'\"\n                    [sourceIdentifier]=\"_listConfig.identifier\" \n                    [sourceIndex]=\"rowIndex\" \n                    [widgetArrayIndex]=\"widgetArrayIndex\"\n                    [form]=\"(formIndex == rowIndex && form != undefined) ? form : null\" \n                    [fieldControl]=\"(formIndex == rowIndex && form != undefined) ? form.controls[field.key] : null\"\n                    [field]=\"field\"\n                    [displayMode]=\"displayModes[rowIndex]\" \n                    [hideLabel]=\"true\"\n                    [value]=\"getValue(colIndex, cFieldIndex, row, field.value)\" \n                    class=\"mx-list-field\"\n                    [ngClass]=\"{'mx-list-field-disabled': (_listConfig && row && _listConfig.disableRow && _listConfig.disableRow(row)) || disabled}\"\n                    [row]=\"row\"\n                    [keyMap]=\"keyMap\"\n                    (onFieldChange)=\"fieldChange($event);$event.event && $event.event.stopPropagation ? $event.event.stopPropagation(): ''\">\n                  </mx-field>\n                  <mx-button\n                    *ngIf=\"column.link && ((column.linkKey && column.linkKey == field.key) || !column.linkKey)\" \n                    [identifier]=\"'listFieldAsLink'\"\n                    [form]=\"(formIndex == rowIndex && form != undefined) ? form : null\"\n                    [sourceIdentifier]=\"_listConfig.identifier\"\n                    [sourceIndex]=\"rowIndex\"\n                    [widgetArrayIndex]=\"widgetArrayIndex\"\n                    [button]=\"column.link\"\n                    [label]=\"getValue(colIndex, cFieldIndex, row, field.value)\"\n                    [context]=\"(formIndex == rowIndex && form != undefined) ? form.value : null\"\n                    [originalData]=\"row\"\n                    [parentHierarchy]=\"parent\"\n                    [disabled]=\"(_listConfig && row && _listConfig.disableRow && _listConfig.disableRow(row)) || disabled\"\n                    (onClick)=\"buttonClick($event);$event.event.stopPropagation()\"\n                  ></mx-button>\n                </div>\n              </ng-template>\n            </td>\n          </ng-container>\n      \n          <ng-container matColumnDef=\"expandedRow\"> \n            <td \n              mat-cell \n              [ngClass]=\"{'mx-row-editable': inlineEditButtons && inlineEditButtons[rowIndex] && inlineEditButtons[rowIndex].label == 'Cancel', 'mx-row-non-editable': !(inlineEditButtons && inlineEditButtons[rowIndex] && inlineEditButtons[rowIndex].label == 'Cancel')}\"\n              *matCellDef=\"let row; let rowIndex = dataIndex\" \n              [attr.colspan]=\"childColumnCount\">\n              <div class=\"mx-element-detail\"\n                  [@detailExpand]=\"row == expandedRow || this._expanded == true ? 'expanded' : 'collapsed'\">\n                <mx-static-list \n                  *ngIf=\"_listConfig.child && _listConfig.child.type == 'LIST' && _listConfig.child.record && (row == expandedRow || _expanded == true)\"\n                  [listConfig]=\"_listConfig.child.record\" \n                  [sourceIdentifier]=\"sourceIdentifier\"\n                  [record]=\"getChildRows(expandedRow)\" \n                  [keyMap]=\"keyMap\"\n                  [expanded]=\"_expanded\"\n                  [listReset]=\"listReset\"\n                  [parent]=\"getObjectTree(row)\"\n                  [style.width.%]=\"100\"\n                  [disabled]=\"(_listConfig && row && _listConfig.disableRow && _listConfig.disableRow(row)) || disabled\"\n                  (onFormChange)=\"formChange($event)\"\n                  (onFieldChange)=\"fieldChange($event);$event.event.stopPropagation()\"\n                  (onButtonClick)=\"buttonClick($event);$event.event.stopPropagation()\"\n                  (onPageChange)=\"onPage($event)\"\n                  (onSortChange)=\"onSort($event)\"  \n                >\n                </mx-static-list>\n                <mx-form \n                    *ngIf=\"_listConfig.child && _listConfig.child.type == 'FORM' && (row == expandedRow || _expanded == true)\"\n                    [formConfig]=\"_listConfig.child.record\"\n                    [sourceIdentifier]=\"_listConfig.identifier\"\n                    [sourceIndex]=\"rowIndex\"\n                    [widgetArrayIndex]=\"widgetArrayIndex\"\n                    [record]=\"getChildRows(expandedRow)\" \n                    [keyMap]=\"keyMap\"\n                    [reset]=\"listReset\"\n                    [style.width.%]=\"100\"\n                    (onFormChange)=\"formChange($event)\"\n                    (onFieldChange)=\"fieldChange($event)\"\n                    (onButtonClick)=\"buttonClick($event)\"\n                ></mx-form>\n              </div>\n            </td> \n          </ng-container>\n      \n          <ng-container \n            *ngIf=\"_listConfig.actions && _listConfig.actions.length > 0\"\n            matColumnDef=\"action\">\n            <th \n              mat-header-cell \n              *matHeaderCellDef\n              class=\"mx-list-action-col\"\n              [class.mx-table-header-hidden]=\"_listConfig.hideHeaderRow\"\n              [style.width.%]=\"displayVertical ? '' : _listConfig.actionWidth / totalDispalyableWidth * 100\"\n              >\n              Action\n            </th>\n            <td \n              mat-cell \n              *matCellDef=\"let row; let rowIndex = dataIndex\"\n              class=\"mx-list-action-col mx-row-non-editable\"\n              [style.background-color]=\"rowColors && rowColors[rowIndex] ? rowColors[rowIndex].bgColor : ''\"\n              [style.color]=\"rowColors && rowColors[rowIndex] ? rowColors[rowIndex].textColor : ''\"\n              [style.width.%]=\"displayVertical ? '' : _listConfig.actionWidth / totalDispalyableWidth * 100\"\n              > \n              <!-- --{{inlineEditButtons[rowIndex].size}} -->\n              <mx-button \n                *ngIf=\"isInlineEditable && inlineEditButtons && inlineEditButtons[rowIndex] && inlineEditButtons[rowIndex].icon\"\n                [form]=\"(formIndex == rowIndex && form != undefined) ? form : null\"\n                [sourceIdentifier]=\"_listConfig.identifier\"\n                [sourceIndex]=\"rowIndex\" \n                [widgetArrayIndex]=\"widgetArrayIndex\"\n                [button]=\"inlineEditButtons[rowIndex]\"\n                class=\"mx-button\"\n                [context]=\"(formIndex == rowIndex && form != undefined) ? form.value : null\" \n                [originalData]=\"row\"\n                [parentHierarchy]=\"parent\" \n                [disabled]=\"(_listConfig && row && _listConfig.disableRow && _listConfig.disableRow(row)) || disabled\"\n                (onClick)=\"setRowEditablity(rowIndex);buttonClick($event);$event.event.stopPropagation()\"\n              ></mx-button> \n              <mx-button-group\n                  *ngIf=\"!isInlineEditable || (inlineEditButtons && inlineEditButtons[rowIndex] && inlineEditButtons[rowIndex].label == 'Cancel')\"\n                  [buttons]=\"_listConfig.actions\"\n                  [form]=\"(formIndex == rowIndex && form != undefined) ? form : null\"\n                  [sourceIdentifier]=\"_listConfig.identifier\"\n                  [sourceIndex]=\"rowIndex\"\n                  [widgetArrayIndex]=\"widgetArrayIndex\"\n                  [context]=\"(formIndex == rowIndex && form != undefined) ? form.value : null\"\n                  [originalData]=\"row\"\n                  [parentHierarchy]=\"parent\"\n                  [disabled]=\"(_listConfig && row && _listConfig.disableRow && _listConfig.disableRow(row)) || disabled\"\n                  (onClick)=\"buttonClick($event);\"\n              ></mx-button-group>\n            </td>\n          </ng-container> \n          <tr \n            mat-header-row \n            *matHeaderRowDef=\"columnNames; sticky: _listConfig.stickyHeader\"\n          ></tr>\n          <div *ngIf=\"(_listConfig.row &&_listConfig.row.hover);else withoutTooltip\">\n            <tr \n              mat-row \n              *matRowDef=\"let row; columns: columnNames; let i = dataIndex;\"\n              [tooltip]=\"rowHoverTemplate\"\n              show-delay=\"300\"\n              [position]=\"tooltipPosition\"\n              [width]=\"_listConfig?.row?.hover?.width\"  \n              [max-width]=\"_listConfig?.row?.hover?.width\"\n              theme=\"light\"\n              content-type=\"template\"\n              class=\"mx-row\"\n              [ngClass]=\"{'without-hover': !(_listConfig.row &&_listConfig.row.hover)}\"\n              (mouseenter)=\"onHover($event,i, (_listConfig && _listConfig.child && _listConfig.child.record && expandedRow === row) ? null : row)\" \n              (click)=\"expandedRow = (_listConfig && _listConfig.child && _listConfig.child.record && expandedRow === row) ? null : row\"\n            ></tr>\n          </div>\n\n          <ng-template #withoutTooltip>\n            <tr \n              mat-row \n              *matRowDef=\"let row; columns: columnNames; let i = dataIndex;\"\n              class=\"mx-row\"\n              [ngClass]=\"{'without-hover': !(_listConfig.row &&_listConfig.row.hover)}\"\n              (click)=\"expandedRow = (_listConfig && _listConfig.child && _listConfig.child.record && expandedRow === row) ? null : row\"\n            ></tr>\n          </ng-template>\n          <!-- [tooltip]=\"rowHoverTemplate\"\n          placement=\"bottom\"\n          content-type=\"template\"\n          hideDelayTouchscreen=0\n          hide-delay=100\n          show-delay=100\n          animation-duration=100\n          max-width=_listConfig?.row?.hover?.width\n          display=\"_listConfig.row && _listConfig.row.hover && (_listConfig.row.hover.template || _listConfig.row.hover.layout)\"\n          theme=\"light\"\n           -->\n          <tr  \n            style=\"background-color: aliceblue;\"\n            mat-row  \n            *matRowDef=\"let row; columns: ['expandedRow']\" \n            [ngClass]=\"{'mx-detail-row-hide': !_listConfig.child || !_listConfig.child.record}\"\n            class=\"mx-detail-row\"\n          ></tr>\n        </table>\n      </div>\n    </div>\n  </div>\n</ng-template> \n\n<ng-template #rowHoverTemplate>\n  <div *ngIf=\"_listConfig?.row?.hover && _listConfig.row.hover.template && _listConfig.row.hover.template.component\" [ngStyle]=\"{'width': _listConfig.row.hover.width + 'px'}\">\n    <!-- <ndc-dynamic\n      [ndcDynamicComponent]=\"_listConfig.row.hover.template.component\"\n      [ndcDynamicInputs]=\"hoverRowData\"\n    ></ndc-dynamic> -->\n  </div>\n  <div *ngIf=\"_listConfig?.row?.hover && _listConfig.row.hover.template && _listConfig.row.hover.template.layout\" [ngStyle]=\"{'width': _listConfig.row.hover.width + 'px'}\" class=\"mx-list-hover-tooltip\">\n    <ng-container  \n      [ngTemplateOutlet]=\"cfCustomRowLayout\"\n      [ngTemplateOutletContext]=\"{layout: _listConfig.row.hover.template.layout, row: hoverRowData, rowIndex: hoverRowIndex, withCard: false}\"\n    ></ng-container>\n  </div>\n</ng-template> \n\n<ng-template #rowTemplate>\n  <div *ngIf=\"_listConfig?.row?.template\">\n    <!-- <ndc-dynamic [ndcDynamicComponent]=\"_listConfig.row.template\"></ndc-dynamic> -->\n  </div>\n</ng-template>","styles":[".mx-list-header .mat-card-header-text{margin:0!important}.mx-list-header .mat-card-title{margin-top:6px}.mx-list-header .mat-card-avatar{font-size:40px;padding-right:8px}.mat-card-subtitle,.mx-list-header-subtitle .mat-card-subtitle{padding-top:8px}.mx-list-header-buttons{position:absolute;right:5px;top:5px}.mx-table-header-hidden,.mx-table-hidden{display:none!important}.mx-table-without-header thead,.mx-table-without-header tr.mat-header-row{height:0!important}table{width:100%}.mx-list-desc,.mx-table{padding:0!important}.mx-hide-card{padding:0}td,th{max-width:200px;white-space:normal;word-wrap:break-word}.mx-element-detail{border-left:2px groove #f5f5f5;display:flex;overflow:hidden;padding-right:3px;width:100%}.mx-list-action-col{text-align:right!important}tr.mx-detail-row{background-color:#f5f5f5;height:0!important}tr.mx-detail-row-hide{display:none!important}.sticky{position:-webkit-sticky;position:sticky}.selectable-column{padding-right:1%}.rote{transform:rotateX(180deg)}.mx-element-detail>th.mat-header-cell:last-of-type,td.mat-cell:last-of-type,td.mat-footer-cell:last-of-type{padding-right:0!important}.mat-card-content{margin-bottom:0!important}.mx-list-header-desc{margin:5px 0;padding:5px 10px;width:auto}.mx-list-header-desc-icon{font-size:15px;height:15px;margin-top:0;padding:0 5px 0 0;width:15px}.mx-table-alternate tr.mat-row:nth-child(odd),.mx-table-hover tr.mat-row:hover{background:#f5f5f5}.mx-table-alternate tr.mat-row:not(:nth-child(4n+1)){background:#fff}.mx-list-field .mat-form-field-appearance-standard .mat-form-field-flex{padding-top:0}.mx-list-field-not-first{padding-top:5px}.mx-list-field-disabled{color:rgba(0,0,0,.5411764705882353)}.mx-list-checkbox-selectable{padding-right:12px}.mx-list-field-inline{display:inline}@media screen and (max-width:599px){.mat-table{border:0;vertical-align:middle}.mat-table caption{font-size:1em}.mat-table .mat-header-row{display:none}.mat-table .mat-header-cell{border:10px solid;clip:rect(0 0 0 0);height:1px;margin:-1px;padding:0;position:absolute;width:1px}.mat-table .mat-row{border-bottom:5px solid #ddd;display:block;height:unset}.mat-table .mat-cell{display:block;font-size:1em;font-weight:700}.mat-table .mx-row-non-editable{border-bottom-width:1px;padding:12px 8px!important}.mat-table .mx-row-editable{border-bottom-width:0;padding:0 8px!important}.mat-table .mat-cell:before{content:attr(data-label);float:left;font-size:.85em;font-weight:400}.mat-table .mat-cell:last-child{border-bottom:0}.mat-table .mat-row td{max-width:unset}}.mx-card-list{padding:0}.mx-card-list mat-card{padding:8px}.mx-card-mobile{margin-bottom:12px;word-wrap:break-word}.mx-card-mobile .mat-grid-tile .mat-figure{justify-content:unset}.mx-card-mobile .mx-primary-text .mx-field-value{font-size:18px;font-weight:400;margin-bottom:none}.mx-card-mobile .mx-secondary-text .mx-field-value{font-size:14px;font-weight:300;margin-bottom:none;margin-top:4px}.mx-card-mobile .mx-tertiary-text .mx-field-value{font-size:12px;font-weight:300;margin-bottom:none;margin-top:8px}.mx-card-mobile .mx-card-mobile-cell{display:block;width:100%}.mx-card-mobile .mx-card-mobile-cell .fullwidth button{width:100%}.mx-card-mobile .mx-card-mobile-cell .mx-primary-text .mx-field-value,.mx-card-mobile .mx-card-mobile-cell .mx-secondary-text .mx-field-value,.mx-card-mobile .mx-card-mobile-cell .mx-tertiary-text .mx-field-value{display:block}.mx-card-mobile .mx-card-mobile-cell .fullwidth button,.mx-card-mobile .mx-card-mobile-cell .fullwidth mat-chip{width:100%}.mx-card-mobile .mx-card-mobile-cell-inline{display:inline-block;width:100%}.mx-card-mobile .mx-card-mobile-cell-inline .mx-card-mobile-control-separator{padding:4px}.hover-template{display:none;position:absolute;z-index:9999}.mx-row:hover .without-hover{pointer-events:none}.mx-list-infinite-scroll{height:69vh;overflow-y:auto}.search-mobile{margin-right:10px}.mx-mobile-search-field-cont,.mx-mobile-sort-field-cont{display:flex}.sticky{background:#fff;border-bottom:1px solid #d3cece;left:0;margin:0 auto;padding:10px 20px;position:fixed;right:0;top:0;width:88%;z-index:99}.sticky+.content{padding-top:102px}.mx-mobile-filter-icon{padding-top:8px}.mx-mobile-filter-link{text-align:end}.mx-list-hover-tooltip{padding:8px}.right-align-forced{text-align:right;width:100%}.width-100{height:100%;width:100%!important}.top{top:0}.middle{top:40%}.bottom{bottom:0}.left{left:0}.left,.right{display:block;position:absolute;width:auto}.right{right:0}.center{display:block;left:50%;position:absolute;width:auto}.mat-drawer-inner-container{overflow:hidden!important}.mx-material-icons{font-size:12px}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@casl/ability","name":"Ability","line":19,"character":20},{"__symbolic":"reference","module":"@angular/cdk/layout","name":"BreakpointObserver","line":20,"character":31}]}],"ngOnInit":[{"__symbolic":"method"}],"isList":[{"__symbolic":"method"}],"onSort":[{"__symbolic":"method"}],"onPage":[{"__symbolic":"method"}]}},"StaticListComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ɵg"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"mx-static-list","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":16,"character":4},"arguments":["detailExpand",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":17,"character":6},"arguments":["collapsed",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":17,"character":25},"arguments":[{"height":"0px","minHeight":"0"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":18,"character":6},"arguments":["expanded",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":18,"character":24},"arguments":[{"height":"*"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":19,"character":6},"arguments":["expanded <=> collapsed",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":19,"character":43},"arguments":["225ms cubic-bezier(0.4, 0.0, 0.2, 1)"]}]}]]}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":22,"character":17},"member":"None"},"template":"<!-- <pre>\n  {{displayVertical | json}}----\n</pre>  -->\n<mat-card  \n  [class.mx-hide-card]=\"hideCard\"\n  *ngIf=\"(_listConfig.permission == null || (_listConfig.permission && (_listConfig.permission['subject'] | can: _listConfig.permission['action'])))\">\n  <mat-card-header \n    [class.mx-table-hidden]=\"!(_listConfig) || hideHeader || !(_listConfig && _listConfig.header)\"\n    class=\"mx-list-header\" \n    *ngIf=\"hideHeader == false\">\n    <mat-icon \n      mat-card-avatar  \n      *ngIf=\"_listConfig.header && _listConfig.header.icon && _listConfig.header.icon.font && iconPosition == 'BEFORE_TITLE'\"\n      aria-hidden=\"false\" \n      [style.margin-top.px]=\"_listConfig.header.subtitle ? 8 : 0\"\n      [attr.aria-label]=\"_listConfig.header.icon.font\">\n      {{ _listConfig.header.icon.font }}\n    </mat-icon>\n\n    <mat-card-title *ngIf=\"_listConfig.header && _listConfig.header.title\">\n      {{_listConfig.header.title}}\n      <mat-icon \n        *ngIf=\"_listConfig.header && _listConfig.header.icon && _listConfig.header.icon.font && iconPosition == 'AFTER_TITLE'\"\n        aria-hidden=\"false\" [attr.aria-label]=\"_listConfig.header.icon.font\">{{ _listConfig.header.icon.font }}</mat-icon>\n    </mat-card-title>\n    \n    <mat-card-subtitle class=\"mx-list-header-subtitle\" *ngIf=\"_listConfig.header && _listConfig.header.subtitle\">{{ _listConfig.header.subtitle }}</mat-card-subtitle>\n\n    <div class=\"mx-list-header-buttons\" *ngIf=\"_listConfig.header && _listConfig.header.actions\">\n      <mx-button-group \n          [buttons]=\"_listConfig.header.actions\" \n          [sourceIdentifier]=\"sourceIdentifier\"\n          [sourceIndex]=\"sourceIndex\"\n          [widgetArrayIndex]=\"widgetArrayIndex\"\n          [originalData]=\"originalData\"\n          (onClick)=\"buttonClick($event)\">\n      </mx-button-group> \n    </div>\n  </mat-card-header>\n\n  <mat-card-content> \n    <div class=\"mdc-layout-grid mx-list-desc\" *ngIf=\"_listConfig.description && _listConfig.description.text && _listConfig.description.bgColor\">\n      <div class=\"mdc-layout-grid__inner\">\n        <div class=\"mdc-layout-grid__cell--span-12\">\n          <div \n            class=\"mx-list-header-desc\"\n            [style.background-color]=\"_listConfig.description.bgColor\"\n            [style.color]=\"_listConfig.description.textColor\"\n          >\n            <mat-icon class=\"mx-list-header-desc-icon\" aria-hidden=\"true\" [attr.aria-label]=\"_listConfig.description.icon\" *ngIf=\"_listConfig.description.icon\">{{_listConfig.description.icon}}</mat-icon>\n            <span>{{ _listConfig.description.text }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <mat-divider class=\"mx-list-header-divider\" *ngIf=\"(_listConfig.header && (_listConfig.header.title || _listConfig.header.actions)) || (_listConfig.description && _listConfig.description.text)\"></mat-divider>\n    <mat-card-subtitle *ngIf=\"_listConfig.description && _listConfig.description.text && !_listConfig.description.bgColor\">{{ _listConfig.description.text }}</mat-card-subtitle>\n  \n    <span *ngIf=\"_listConfig\">\n      <ng-container *ngTemplateOutlet=\"cftable\"></ng-container>\n    </span>\n    \n    <mat-card-actions \n      *ngIf=\"hideFooter == false && _listConfig.pagination!='INFINIT_SCROLL' && ((_listConfig) || hideFooter || !(_listConfig && (_listConfig.permission == null || (_listConfig.permission && (_listConfig.permission['subject'] | can: _listConfig.permission['action'])))))\"\n      class=\"mx-footer-actions\" \n      align=\"right\">\n      <mat-paginator \n        [length]=\"_record.total\" \n        [pageSize]=\"limit\"\n        [pageSizeOptions]=\"pageSizeOptions\"\n        (page)=\"onPage($event)\"\n        [ngClass]=\"{'page-wise': _listConfig.pagination=='NO_PAGE'}\"\n        [hidePageSize]=\"_listConfig.pagination=='NO_PAGE'\"\n      ></mat-paginator>\n    </mat-card-actions>\n    \n  </mat-card-content>\n</mat-card>\n\n<ng-template #cftable>\n  <span *ngIf=\"!isCustomTemplate && !(isMobile && _listConfig.mobile && _listConfig.mobile.rowHeight)\">\n    <ng-container *ngTemplateOutlet=\"cftablelist\"></ng-container>\n  </span> \n  <span *ngIf=\"isCustomTemplate\">\n    <ng-container \n      [ngTemplateOutlet]=\"cftablemobile\"\n      [ngTemplateOutletContext]=\"{layout: _listConfig.row.template.layout}\"></ng-container>\n  </span>\n  <span *ngIf=\"isMobile && _listConfig.mobile && _listConfig.mobile.rowHeight\">\n    <ng-container \n      [ngTemplateOutlet]=\"cftablemobile\"\n      [ngTemplateOutletContext]=\"{layout: _listConfig.mobile}\"></ng-container>\n  </span>\n</ng-template>\n\n<ng-template #cftablemobile let-layout=\"layout\">\n  <div class=\"mdc-layout-grid mx-card-list\">\n    <div class=\"mdc-layout-grid__inner\" id=\"mxMobileSearchStrip\" *ngIf=\"_listConfig.staticList.hasOnPageFilter || layout.sorting\">\n      <div \n        *ngIf=\"_listConfig.staticList.hasOnPageFilter\"\n        class=\"mx-mobile-search-field-cont mdc-layout-grid__cell--span-{{ _listConfig.staticList.hasOnPageFilter && !layout.sorting ? 12 : 9}}\"\n      >\n        <mx-field \n          [sourceType]=\"'FORM'\"\n          [form]=\"commonListForm\" \n          [fieldControl]=\"(commonListForm != undefined && commonListForm.controls['pageFilter']) ? commonListForm.controls['pageFilter'] : null\"\n          [field]=\"filterField\"\n          [hideLabel]=\"true\"\n          [displayMode]=\"'EDIT'\" \n          [value]=\"\"\n          (onFieldChange)=\"updateFilter($event);$event.event.stopPropagation()\"\n          class=\"mx-list-search-field search-mobile\"\n          [style.width.%]=\"100\">\n        </mx-field>  \n      </div>\n      <div \n        *ngIf=\"layout.sorting\"\n        class=\"mx-mobile-sort-field-cont mdc-layout-grid__cell--span-{{ !_listConfig.staticList.hasOnPageFilter && layout.sorting ? 12 : 3}}\"> \n        <mat-icon \n          class=\"mx-mobile-filter-icon\" \n          [ngClass]=\"{'rote':this.sortDirection=='desc'}\" \n          [matMenuTriggerFor]=\"filterMenu\"  \n          aria-label=\"Filter Menu\"\n        >filter_list</mat-icon>\n        <!-- (click)=\"(sortDirection == 'asc' ? sortDirection = 'desc' : sortDirection = 'asc');_record.rows=_record.rows.reverse();\" -->\n        <mat-menu #filterMenu=\"matMenu\">\n          <button \n            class=\"mx-mobile-filter-link\"\n            *ngFor=\"let sorting of layout.sorting\" \n            mat-menu-item\n            (click)=\"onSort({'action':sorting.key, 'direction':sorting.direction})\"\n          >\n            {{sorting.label}}\n            <span class=\"material-icons mx-material-icons\">\n              {{ sorting.direction == \"asc\" ? \"north\" : \"south\" }}\n            </span>\n          </button>\n        </mat-menu>\n      </div>\n    </div>\n    <div \n      *ngIf=\"layout && layout.rowHeight\"\n      [ngClass]=\"{'mx-list-infinite-scroll': _listConfig.pagination=='INFINIT_SCROLL'}\" \n      infiniteScroll \n      [infiniteScrollDistance]=\"2\" \n      [infiniteScrollThrottle]=\"1.5\" \n      [infiniteScrollContainer]=\"scrollRow\" \n      #scrollRow \n      (scrolled)=\"onPage($event)\">\n      <!-- <pre>{{_listConfig.mobile.cells | json}}</pre> -->\n      <mat-card class=\"mx-card-mobile\" *ngFor=\"let row of _record.rows; let rowIndex=index\">\n        <mat-card-content>\n          <mat-grid-list [cols]=\"cellCount\" [rowHeight]=\"layout.rowHeight\">\n            <mat-grid-tile *ngFor=\"let cell of layout.cells\" [colspan]=\"cell.cols\" [rowspan]=\"cell.rows\">\n              <div \n                class=\"mx-card-mobile-cell width-100\"\n                [ngClass]=\"{'mx-primary-text': cell.fieldStyle && cell.fieldStyle.class == 'PRIMARY', 'mx-secondary-text': cell.fieldStyle && cell.fieldStyle.class == 'SECONDARY', 'mx-tertiary-text': cell.fieldStyle && cell.fieldStyle.class == 'TERTIARY'}\"\n                *ngIf=\"!(cell.displayInline && cell.displayInline.separator && cell.controls && cell.controls.length > 0); else elseValue;\">\n                <ng-container [ngTemplateOutlet]=\"cfCustomCell\"\n                  [ngTemplateOutletContext]=\"{cell:cell, row:row, rowIndex:rowIndex}\"></ng-container>\n              </div>\n              <ng-template #elseValue>\n                <div \n                  class=\"mx-card-mobile-cell-inline\"\n                  [ngClass]=\"{'mx-primary-text': cell.fieldStyle && cell.fieldStyle.class == 'PRIMARY', 'mx-secondary-text': cell.fieldStyle && cell.fieldStyle.class == 'SECONDARY', 'mx-tertiary-text': cell.fieldStyle && cell.fieldStyle.class == 'TERTIARY'}\">\n                  <ng-container [ngTemplateOutlet]=\"cfCustomCell\"\n                    [ngTemplateOutletContext]=\"{cell:cell, row:row, rowIndex:rowIndex}\"></ng-container>\n                </div>\n              </ng-template>\n            </mat-grid-tile>\n          </mat-grid-list>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #cfCustomRowLayout let-layout=\"layout\" let-row=\"row\" let-rowIndex=\"rowIndex\" let-withCard=\"withCard\"> \n  <mat-card class=\"mx-card-mobile\" *ngIf=\"withCard\">\n    <mat-card-content>\n      <ng-container  \n        [ngTemplateOutlet]=\"cfCustomRow\"\n        [ngTemplateOutletContext]=\"{layout: layout, row: row, rowIndex: rowIndex}\"\n      ></ng-container>\n    </mat-card-content>\n  </mat-card>\n  <span class=\"mx-card-mobile\" *ngIf=\"!withCard\">\n    <ng-container  \n      [ngTemplateOutlet]=\"cfCustomRow\"\n      [ngTemplateOutletContext]=\"{layout: layout, row: row, rowIndex: rowIndex}\"\n    ></ng-container>\n  </span>\n</ng-template>\n\n<ng-template #cfCustomRow let-layout=\"layout\" let-row=\"row\" let-rowIndex=\"rowIndex\"> \n  <mat-grid-list \n      [cols]=\"layout.cellCount\"  \n      [rowHeight]=\"layout.rowHeight\">\n      <mat-grid-tile\n        *ngFor=\"let cell of layout.cells\"\n        [colspan]=\"cell.cols\"\n        [rowspan]=\"cell.rows\">\n        <div \n          class=\"mx-card-mobile-cell\" \n          [ngClass]=\"{'mx-primary-text': cell.fieldStyle && cell.fieldStyle.class == 'PRIMARY', 'mx-secondary-text': cell.fieldStyle && cell.fieldStyle.class == 'SECONDARY', 'mx-tertiary-text': cell.fieldStyle && cell.fieldStyle.class == 'TERTIARY'}\"\n          *ngIf=\"!(cell.displayInline && cell.displayInline.separator && cell.controls && cell.controls.length > 0); else elseValue;\"> \n          <ng-container \n            [ngTemplateOutlet]=\"cfCustomCell\"\n            [ngTemplateOutletContext]=\"{cell:cell, row:row, rowIndex:rowIndex}\"\n          ></ng-container>\n        </div>\n        <ng-template #elseValue>\n          <div \n            class=\"mx-card-mobile-cell-inline\"\n            [ngClass]=\"{'mx-primary-text': cell.fieldStyle && cell.fieldStyle.class == 'PRIMARY', 'mx-secondary-text': cell.fieldStyle && cell.fieldStyle.class == 'SECONDARY', 'mx-tertiary-text': cell.fieldStyle && cell.fieldStyle.class == 'TERTIARY'}\">\n            <ng-container \n              [ngTemplateOutlet]=\"cfCustomCell\"\n              [ngTemplateOutletContext]=\"{cell:cell, row:row, rowIndex:rowIndex}\"\n            ></ng-container>\n          </div>\n        </ng-template>\n      </mat-grid-tile>\n    </mat-grid-list>   \n</ng-template>\n\n<ng-template #cfCustomCell let-cell=\"cell\" let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <span \n    [ngClass]=\"{'fullwidth': control.fullWidth}\"\n    class=\"{{ control?.alignment?.vertical }} {{ control?.alignment?.horizontal }}\"\n    *ngFor=\"let control of cell.controls; let cControlIndex = index;\">\n    <!-- {{control.control.key}} --> \n    <span \n      class=\"mx-card-mobile-control-separator\"\n      *ngIf=\"cell.displayInline && cell.displayInline.separator && cControlIndex > 0\" \n      [innerHtml]=\"cell.displayInline.separator\"></span>\n\n    <!-- =={{cell.link | json}}--{{cell.linkKey}}--=={{control.control.key}}=={{control.type}}== -->\n    <mx-field\n      *ngIf=\"control.control && (!cell.link || (cell.link && cell.linkKey && cell.linkKey != control.control.key)) && control.type == 'FIELD'\" \n      [sourceType]=\"'LIST'\"\n      [sourceIdentifier]=\"_listConfig.identifier\" \n      [sourceIndex]=\"rowIndex\" \n      [widgetArrayIndex]=\"widgetArrayIndex\"\n      [form]=\"(formIndex == rowIndex && form != undefined) ? form : null\" \n      [fieldControl]=\"(formIndex == rowIndex && form != undefined) ? form.controls[control.control.key] : null\"\n      [field]=\"control.control\"\n      [displayMode]=\"displayModes[rowIndex]\" \n      [hideLabel]=\"true\"\n      [value]=\"getValue(control.colIndex, control.cControlIndex, row, control.control.value)\" \n      class=\"mx-list-field\"\n      [ngClass]=\"{'mx-list-field-disabled': (_listConfig && row && _listConfig.disableRow && _listConfig.disableRow(row)) || disabled, 'mx-primary-text': control.fieldStyle && control.fieldStyle.class == 'PRIMARY', 'mx-secondary-text': control.fieldStyle && control.fieldStyle.class == 'SECONDARY', 'mx-tertiary-text': control.fieldStyle && control.fieldStyle.class == 'TERTIARY'}\"\n      [row]=\"row\"\n      [keyMap]=\"keyMap\"\n      (onFieldChange)=\"fieldChange($event);$event.event && $event.event.stopPropagation ? $event.event.stopPropagation(): ''\">\n    </mx-field>\n    <mx-button\n      *ngIf=\"cell.link && ((cell.linkKey && cell.linkKey == control.control.key) || !cell.linkKey) && control.type == 'FIELD'\" \n      [identifier]=\"'listFieldAsLink'\"\n      [form]=\"(formIndex == rowIndex && form != undefined) ? form : null\"\n      [sourceIdentifier]=\"_listConfig.identifier\"\n      [sourceIndex]=\"rowIndex\"\n      [widgetArrayIndex]=\"widgetArrayIndex\"\n      [button]=\"cell.link\"\n      [label]=\"getValue(control.colIndex, control.cControlIndex, row, control.control.value)\"\n      [context]=\"(formIndex == rowIndex && form != undefined) ? form.value : null\"\n      [originalData]=\"row\"\n      [parentHierarchy]=\"parent\"\n      [disabled]=\"(_listConfig && row && _listConfig.disableRow && _listConfig.disableRow(row)) || disabled\"\n      (onClick)=\"buttonClick($event);$event.event.stopPropagation()\"\n    ></mx-button>\n\n    <!-- [formDisplayMode]=\"formConfig.displayMode\" -->\n    <!-- <mx-button-group \n      [ngClass]=\"{'fullwidth': control.fullWidth}\"\n      *ngIf=\"control.type == 'BUTTON'\"\n      [buttons]=\"control.control\" \n      [form]=\"(formIndex == rowIndex && form != undefined) ? form : null\" \n      [sourceIdentifier]=\"_listConfig.identifier\"\n      [sourceIndex]=\"rowIndex\" \n      [widgetArrayIndex]=\"widgetArrayIndex\"\n      [originalData]=\"row\"\n      [context]=\"(formIndex == rowIndex && form != undefined) ? form.value : null\" \n      (onClick)=\"buttonClick($event)\">\n    </mx-button-group> -->\n\n    <mx-button \n      *ngIf=\"control.type == 'BUTTON'\"\n      [form]=\"(formIndex == rowIndex && form != undefined) ? form : null\"\n      [sourceIdentifier]=\"_listConfig.identifier\"\n      [sourceIndex]=\"rowIndex\" \n      [widgetArrayIndex]=\"widgetArrayIndex\"\n      [button]=\"control.control\"\n      [context]=\"(formIndex == rowIndex && form != undefined) ? form.value : null\" \n      [originalData]=\"row\"\n      [parentHierarchy]=\"parent\" \n      [disabled]=\"(_listConfig && row && _listConfig.disableRow && _listConfig.disableRow(row)) || disabled\"\n      (onClick)=\"setRowEditablity(rowIndex);buttonClick($event);$event.event.stopPropagation()\"\n    ></mx-button> \n  </span>\n</ng-template>\n\n<ng-template #cftablelist>\n  <div class=\"mdc-layout-grid mx-table\">\n    <div class=\"mdc-layout-grid__inner\" id=\"mxMobileSearchStrip\" *ngIf=\"_listConfig.staticList.hasOnPageFilter || _listConfig.hasColumnSelection\">\n      <div \n        *ngIf=\"_listConfig.staticList.hasOnPageFilter\"\n        class=\"mdc-layout-grid__cell--span-{{ _listConfig.staticList.hasOnPageFilter && !_listConfig.hasColumnSelection ? 12 : 9}}\"\n      >\n        <mx-field \n          [sourceType]=\"'FORM'\"\n          [form]=\"commonListForm\" \n          [fieldControl]=\"(commonListForm != undefined && commonListForm.controls['pageFilter']) ? commonListForm.controls['pageFilter'] : null\"\n          [field]=\"filterField\"\n          [hideLabel]=\"true\"\n          [displayMode]=\"'EDIT'\" \n          [value]=\"\"\n          (onFieldChange)=\"updateFilter($event);$event.event.stopPropagation()\"\n          class=\"mx-list-search-field\"\n          [style.width.%]=\"100\">\n        </mx-field>  \n      </div>\n      <div \n        *ngIf=\"_listConfig.hasColumnSelection\" \n        class=\"mdc-layout-grid__cell--span-{{!_listConfig.staticList.hasOnPageFilter && _listConfig.hasColumnSelection ? 12 : 3}} mdc-layout-grid--align-right\" \n        [style.width.%]=\"100\">\n        <mx-field\n          [sourceType]=\"'FORM'\"\n          [form]=\"commonListForm\" \n          [fieldControl]=\"(commonListForm != undefined && commonListForm.controls['columnSelector']) ? commonListForm.controls['columnSelector'] : null\"\n          [field]=\"columnSelectorField\"\n          [hideLabel]=\"true\"\n          [displayMode]=\"'EDIT'\" \n          class=\"mx-list-sel-col-field\"\n          (onFieldChange)=\"updateColumnDisplay($event)\"\n          [style.width.%]=\"100\">\n        </mx-field>  \n        <!-- ;$event.event.stopPropagation() -->\n      </div>\n    </div>\n    <div class=\"mdc-layout-grid__inner\">\n      <div class=\"mdc-layout-grid__cell--span-12\" *ngIf=\"columnNames\">\n        <table  \n          mat-table  \n          [dataSource]=\"dataSource\" \n          class=\"mx-table\"\n          [ngClass]=\"{'mx-table-hover': _listConfig.shade && _listConfig.shade.type == 'HOVER', 'mx-table-alternate': _listConfig.shade && _listConfig.shade.type == 'ALTERNATE', 'mx-table-without-header': _listConfig.hideHeaderRow}\"\n          multiTemplateDataRows\n          matSort\n          [matSortActive]=\"_listConfig.defaultSort ? _listConfig.defaultSort.column : ''\" \n          matSortDisableClear  \n          [style.width.%]=\"'100'\"\n          [matSortDirection]=\"_listConfig.defaultSort ? _listConfig.defaultSort.order: ''\"\n          (matSortChange)=\"onSort($event)\">\n\n          <tr class=\"mat-row\" *matNoDataRow>\n            <td class=\"mat-cell\" colspan=\"9999\">\n              {{ _listConfig.noRecordFound ? _listConfig.noRecordFound : 'No data found'}}\n            </td>\n          </tr>\n          \n          <ng-container matColumnDef=\"select\">\n            <th \n              [class.mx-table-header-hidden]=\"_listConfig.hideHeaderRow\"\n              mat-header-cell \n              *matHeaderCellDef \n              class=\"selectable-column\">\n              <mat-checkbox \n                class=\"mx-list-checkbox-selectable\"\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [aria-label]=\"checkboxLabel()\">\n              </mat-checkbox>\n            </th>\n            <td \n              mat-cell \n              *matCellDef=\"let row; let rowIndex = dataIndex\"\n              [ngClass]=\"{'mx-row-editable': inlineEditButtons && inlineEditButtons[rowIndex] && inlineEditButtons[rowIndex].label == 'Cancel', 'mx-row-non-editable': !(inlineEditButtons && inlineEditButtons[rowIndex] && inlineEditButtons[rowIndex].label == 'Cancel')}\"\n              [style.background-color]=\"rowColors && rowColors[rowIndex] ? rowColors[rowIndex].bgColor : ''\"\n              [style.color]=\"rowColors && rowColors[rowIndex] ? rowColors[rowIndex].textColor : ''\"\n              class=\"selectable-column\">\n              <mat-checkbox \n                class=\"mx-list-checkbox-selectable\"\n                [disabled]=\"(_listConfig && row && _listConfig.disableRow && _listConfig.disableRow(row)) || disabled\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [aria-label]=\"checkboxLabel(row)\">\n              </mat-checkbox>\n                <!-- (click)=\"$event.event.stopPropagation()\" -->\n            </td>\n          </ng-container>\n          \n          <ng-container \n            *ngFor=\"let column of columnConfigs; let colIndex = index\"\n            [matColumnDef]=\"getColumnKey(column)\">\n            <th \n              mat-header-cell \n              *matHeaderCellDef\n              mat-sort-header\n              disableClear\n              [disabled]=\"!column.sortable\"\n              [class.mx-table-header-hidden]=\"_listConfig.hideHeaderRow\"\n              [ngClass]=\"{'mx-list-field-first': colIndex == 0}\"\n              [style.width.%]=\"displayVertical ? '' : column.width / totalDispalyableWidth * 100\">\n              {{getColumnLabel(column)}}\n            </th> \n            <!-- [attr.data-label]=\"getColumnLabel(column)\" -->\n            <td \n              mat-cell \n              *matCellDef=\"let row; let rowIndex = dataIndex\"\n              class=\"mx-table-data-cell\"\n              [ngClass]=\"{'mx-row-editable': inlineEditButtons && inlineEditButtons[rowIndex] && inlineEditButtons[rowIndex].label == 'Cancel', 'mx-row-non-editable': !(inlineEditButtons && inlineEditButtons[rowIndex] && inlineEditButtons[rowIndex].label == 'Cancel')}\"\n              [style.background-color]=\"cellColors && cellColors[rowIndex] && cellColors[rowIndex][colIndex] ? cellColors[rowIndex][colIndex].bgColor : ''\"\n              [style.color]=\"cellColors && cellColors[rowIndex] && cellColors[rowIndex][colIndex] ? cellColors[rowIndex][colIndex].textColor : ''\"\n              [style.width.%]=\"displayVertical ? '' : column.width / totalDispalyableWidth * 100\"\n              (click)=\"_listConfig.rowAction ? rowClick(row, rowIndex, ((formIndex == rowIndex && form != undefined) ? form.value : null), $event) : _listConfig.rowAction\"\n              >\n\n              <ng-container *ngIf=\"column?.template?.html || column?.template?.layout; else elseDefault\">\n                <div \n                  [style.width.%]=\"100\"\n                  *ngIf=\"column?.template?.html\">\n                  <ng-container *cfTemplate=\"'<style>'+column?.template?.css+'</style>' + column?.template?.html; context: {row: row, index: rowIndex}\"></ng-container>\n                </div>\n                <div \n                  [style.width.%]=\"100\"\n                  *ngIf=\"column?.template?.layout\">\n                  <!-- {{row | json}}--- -->\n                  <ng-container  \n                    [ngTemplateOutlet]=\"cfCustomRowLayout\"\n                    [ngTemplateOutletContext]=\"{layout: column.template.layout, row: row, rowIndex: rowIndex, withCard: false}\"\n                  ></ng-container>\n                </div>\n              </ng-container>\n              <ng-template #elseDefault>\n                <div \n                  [ngClass]=\"{'mx-list-field-not-first': cFieldIndex > 0, 'mx-list-field-inline': column.displayInline && column.displayInline.separator}\" \n                  *ngFor=\"let field of column.fields; let cFieldIndex = index;\">\n                  <span *ngIf=\"column.displayInline && column.displayInline.separator && cFieldIndex > 0\">{{column.displayInline.separator}}</span>\n                  <mx-field\n                    *ngIf=\"!column.link || (column.link && column.linkKey && column.linkKey != field.key)\" \n                    [sourceType]=\"'LIST'\"\n                    [sourceIdentifier]=\"_listConfig.identifier\" \n                    [sourceIndex]=\"rowIndex\" \n                    [widgetArrayIndex]=\"widgetArrayIndex\"\n                    [form]=\"(formIndex == rowIndex && form != undefined) ? form : null\" \n                    [fieldControl]=\"(formIndex == rowIndex && form != undefined) ? form.controls[field.key] : null\"\n                    [field]=\"field\"\n                    [displayMode]=\"displayModes[rowIndex]\" \n                    [hideLabel]=\"true\"\n                    [value]=\"getValue(colIndex, cFieldIndex, row, field.value)\" \n                    class=\"mx-list-field\"\n                    [ngClass]=\"{'mx-list-field-disabled': (_listConfig && row && _listConfig.disableRow && _listConfig.disableRow(row)) || disabled}\"\n                    [row]=\"row\"\n                    [keyMap]=\"keyMap\"\n                    (onFieldChange)=\"fieldChange($event);$event.event && $event.event.stopPropagation ? $event.event.stopPropagation(): ''\">\n                  </mx-field>\n                  <mx-button\n                    *ngIf=\"column.link && ((column.linkKey && column.linkKey == field.key) || !column.linkKey)\" \n                    [identifier]=\"'listFieldAsLink'\"\n                    [form]=\"(formIndex == rowIndex && form != undefined) ? form : null\"\n                    [sourceIdentifier]=\"_listConfig.identifier\"\n                    [sourceIndex]=\"rowIndex\"\n                    [widgetArrayIndex]=\"widgetArrayIndex\"\n                    [button]=\"column.link\"\n                    [label]=\"getValue(colIndex, cFieldIndex, row, field.value)\"\n                    [context]=\"(formIndex == rowIndex && form != undefined) ? form.value : null\"\n                    [originalData]=\"row\"\n                    [parentHierarchy]=\"parent\"\n                    [disabled]=\"(_listConfig && row && _listConfig.disableRow && _listConfig.disableRow(row)) || disabled\"\n                    (onClick)=\"buttonClick($event);$event.event.stopPropagation()\"\n                  ></mx-button>\n                </div>\n              </ng-template>\n            </td>\n          </ng-container>\n      \n          <ng-container matColumnDef=\"expandedRow\"> \n            <td \n              mat-cell \n              [ngClass]=\"{'mx-row-editable': inlineEditButtons && inlineEditButtons[rowIndex] && inlineEditButtons[rowIndex].label == 'Cancel', 'mx-row-non-editable': !(inlineEditButtons && inlineEditButtons[rowIndex] && inlineEditButtons[rowIndex].label == 'Cancel')}\"\n              *matCellDef=\"let row; let rowIndex = dataIndex\" \n              [attr.colspan]=\"childColumnCount\">\n              <div class=\"mx-element-detail\"\n                  [@detailExpand]=\"row == expandedRow || this._expanded == true ? 'expanded' : 'collapsed'\">\n                <mx-static-list \n                  *ngIf=\"_listConfig.child && _listConfig.child.type == 'LIST' && _listConfig.child.record && (row == expandedRow || _expanded == true)\"\n                  [listConfig]=\"_listConfig.child.record\" \n                  [sourceIdentifier]=\"sourceIdentifier\"\n                  [record]=\"getChildRows(expandedRow)\" \n                  [keyMap]=\"keyMap\"\n                  [expanded]=\"_expanded\"\n                  [listReset]=\"listReset\"\n                  [parent]=\"getObjectTree(row)\"\n                  [style.width.%]=\"100\"\n                  [disabled]=\"(_listConfig && row && _listConfig.disableRow && _listConfig.disableRow(row)) || disabled\"\n                  (onFormChange)=\"formChange($event)\"\n                  (onFieldChange)=\"fieldChange($event);$event.event.stopPropagation()\"\n                  (onButtonClick)=\"buttonClick($event);$event.event.stopPropagation()\"\n                  (onPageChange)=\"onPage($event)\"\n                  (onSortChange)=\"onSort($event)\"  \n                >\n                </mx-static-list>\n                <mx-form \n                    *ngIf=\"_listConfig.child && _listConfig.child.type == 'FORM' && (row == expandedRow || _expanded == true)\"\n                    [formConfig]=\"_listConfig.child.record\"\n                    [sourceIdentifier]=\"_listConfig.identifier\"\n                    [sourceIndex]=\"rowIndex\"\n                    [widgetArrayIndex]=\"widgetArrayIndex\"\n                    [record]=\"getChildRows(expandedRow)\" \n                    [keyMap]=\"keyMap\"\n                    [reset]=\"listReset\"\n                    [style.width.%]=\"100\"\n                    (onFormChange)=\"formChange($event)\"\n                    (onFieldChange)=\"fieldChange($event)\"\n                    (onButtonClick)=\"buttonClick($event)\"\n                ></mx-form>\n              </div>\n            </td> \n          </ng-container>\n      \n          <ng-container \n            *ngIf=\"_listConfig.actions && _listConfig.actions.length > 0\"\n            matColumnDef=\"action\">\n            <th \n              mat-header-cell \n              *matHeaderCellDef\n              class=\"mx-list-action-col\"\n              [class.mx-table-header-hidden]=\"_listConfig.hideHeaderRow\"\n              [style.width.%]=\"displayVertical ? '' : _listConfig.actionWidth / totalDispalyableWidth * 100\"\n              >\n              Action\n            </th>\n            <td \n              mat-cell \n              *matCellDef=\"let row; let rowIndex = dataIndex\"\n              class=\"mx-list-action-col mx-row-non-editable\"\n              [style.background-color]=\"rowColors && rowColors[rowIndex] ? rowColors[rowIndex].bgColor : ''\"\n              [style.color]=\"rowColors && rowColors[rowIndex] ? rowColors[rowIndex].textColor : ''\"\n              [style.width.%]=\"displayVertical ? '' : _listConfig.actionWidth / totalDispalyableWidth * 100\"\n              > \n              <!-- --{{inlineEditButtons[rowIndex].size}} -->\n              <mx-button \n                *ngIf=\"isInlineEditable && inlineEditButtons && inlineEditButtons[rowIndex] && inlineEditButtons[rowIndex].icon\"\n                [form]=\"(formIndex == rowIndex && form != undefined) ? form : null\"\n                [sourceIdentifier]=\"_listConfig.identifier\"\n                [sourceIndex]=\"rowIndex\" \n                [widgetArrayIndex]=\"widgetArrayIndex\"\n                [button]=\"inlineEditButtons[rowIndex]\"\n                class=\"mx-button\"\n                [context]=\"(formIndex == rowIndex && form != undefined) ? form.value : null\" \n                [originalData]=\"row\"\n                [parentHierarchy]=\"parent\" \n                [disabled]=\"(_listConfig && row && _listConfig.disableRow && _listConfig.disableRow(row)) || disabled\"\n                (onClick)=\"setRowEditablity(rowIndex);buttonClick($event);$event.event.stopPropagation()\"\n              ></mx-button> \n              <mx-button-group\n                  *ngIf=\"!isInlineEditable || (inlineEditButtons && inlineEditButtons[rowIndex] && inlineEditButtons[rowIndex].label == 'Cancel')\"\n                  [buttons]=\"_listConfig.actions\"\n                  [form]=\"(formIndex == rowIndex && form != undefined) ? form : null\"\n                  [sourceIdentifier]=\"_listConfig.identifier\"\n                  [sourceIndex]=\"rowIndex\"\n                  [widgetArrayIndex]=\"widgetArrayIndex\"\n                  [context]=\"(formIndex == rowIndex && form != undefined) ? form.value : null\"\n                  [originalData]=\"row\"\n                  [parentHierarchy]=\"parent\"\n                  [disabled]=\"(_listConfig && row && _listConfig.disableRow && _listConfig.disableRow(row)) || disabled\"\n                  (onClick)=\"buttonClick($event);\"\n              ></mx-button-group>\n            </td>\n          </ng-container> \n          <tr \n            mat-header-row \n            *matHeaderRowDef=\"columnNames; sticky: _listConfig.stickyHeader\"\n          ></tr>\n          <div *ngIf=\"(_listConfig.row &&_listConfig.row.hover);else withoutTooltip\">\n            <tr \n              mat-row \n              *matRowDef=\"let row; columns: columnNames; let i = dataIndex;\"\n              [tooltip]=\"rowHoverTemplate\"\n              show-delay=\"300\"\n              [position]=\"tooltipPosition\"\n              [width]=\"_listConfig?.row?.hover?.width\"  \n              [max-width]=\"_listConfig?.row?.hover?.width\"\n              theme=\"light\"\n              content-type=\"template\"\n              class=\"mx-row\"\n              [ngClass]=\"{'without-hover': !(_listConfig.row &&_listConfig.row.hover)}\"\n              (mouseenter)=\"onHover($event,i, (_listConfig && _listConfig.child && _listConfig.child.record && expandedRow === row) ? null : row)\" \n              (click)=\"expandedRow = (_listConfig && _listConfig.child && _listConfig.child.record && expandedRow === row) ? null : row\"\n            ></tr>\n          </div>\n\n          <ng-template #withoutTooltip>\n            <tr \n              mat-row \n              *matRowDef=\"let row; columns: columnNames; let i = dataIndex;\"\n              class=\"mx-row\"\n              [ngClass]=\"{'without-hover': !(_listConfig.row &&_listConfig.row.hover)}\"\n              (click)=\"expandedRow = (_listConfig && _listConfig.child && _listConfig.child.record && expandedRow === row) ? null : row\"\n            ></tr>\n          </ng-template>\n          <!-- [tooltip]=\"rowHoverTemplate\"\n          placement=\"bottom\"\n          content-type=\"template\"\n          hideDelayTouchscreen=0\n          hide-delay=100\n          show-delay=100\n          animation-duration=100\n          max-width=_listConfig?.row?.hover?.width\n          display=\"_listConfig.row && _listConfig.row.hover && (_listConfig.row.hover.template || _listConfig.row.hover.layout)\"\n          theme=\"light\"\n           -->\n          <tr  \n            style=\"background-color: aliceblue;\"\n            mat-row  \n            *matRowDef=\"let row; columns: ['expandedRow']\" \n            [ngClass]=\"{'mx-detail-row-hide': !_listConfig.child || !_listConfig.child.record}\"\n            class=\"mx-detail-row\"\n          ></tr>\n        </table>\n      </div>\n    </div>\n  </div>\n</ng-template> \n\n<ng-template #rowHoverTemplate>\n  <div *ngIf=\"_listConfig?.row?.hover && _listConfig.row.hover.template && _listConfig.row.hover.template.component\" [ngStyle]=\"{'width': _listConfig.row.hover.width + 'px'}\">\n    <!-- <ndc-dynamic\n      [ndcDynamicComponent]=\"_listConfig.row.hover.template.component\"\n      [ndcDynamicInputs]=\"hoverRowData\"\n    ></ndc-dynamic> -->\n  </div>\n  <div *ngIf=\"_listConfig?.row?.hover && _listConfig.row.hover.template && _listConfig.row.hover.template.layout\" [ngStyle]=\"{'width': _listConfig.row.hover.width + 'px'}\" class=\"mx-list-hover-tooltip\">\n    <ng-container  \n      [ngTemplateOutlet]=\"cfCustomRowLayout\"\n      [ngTemplateOutletContext]=\"{layout: _listConfig.row.hover.template.layout, row: hoverRowData, rowIndex: hoverRowIndex, withCard: false}\"\n    ></ng-container>\n  </div>\n</ng-template> \n\n<ng-template #rowTemplate>\n  <div *ngIf=\"_listConfig?.row?.template\">\n    <!-- <ndc-dynamic [ndcDynamicComponent]=\"_listConfig.row.template\"></ndc-dynamic> -->\n  </div>\n</ng-template>","styles":[".mx-list-header .mat-card-header-text{margin:0!important}.mx-list-header .mat-card-title{margin-top:6px}.mx-list-header .mat-card-avatar{font-size:40px;padding-right:8px}.mat-card-subtitle,.mx-list-header-subtitle .mat-card-subtitle{padding-top:8px}.mx-list-header-buttons{position:absolute;right:5px;top:5px}.mx-table-header-hidden,.mx-table-hidden{display:none!important}.mx-table-without-header thead,.mx-table-without-header tr.mat-header-row{height:0!important}table{width:100%}.mx-list-desc,.mx-table{padding:0!important}.mx-hide-card{padding:0}td,th{max-width:200px;white-space:normal;word-wrap:break-word}.mx-element-detail{border-left:2px groove #f5f5f5;display:flex;overflow:hidden;padding-right:3px;width:100%}.mx-list-action-col{text-align:right!important}tr.mx-detail-row{background-color:#f5f5f5;height:0!important}tr.mx-detail-row-hide{display:none!important}.sticky{position:-webkit-sticky;position:sticky}.selectable-column{padding-right:1%}.rote{transform:rotateX(180deg)}.mx-element-detail>th.mat-header-cell:last-of-type,td.mat-cell:last-of-type,td.mat-footer-cell:last-of-type{padding-right:0!important}.mat-card-content{margin-bottom:0!important}.mx-list-header-desc{margin:5px 0;padding:5px 10px;width:auto}.mx-list-header-desc-icon{font-size:15px;height:15px;margin-top:0;padding:0 5px 0 0;width:15px}.mx-table-alternate tr.mat-row:nth-child(odd),.mx-table-hover tr.mat-row:hover{background:#f5f5f5}.mx-table-alternate tr.mat-row:not(:nth-child(4n+1)){background:#fff}.mx-list-field .mat-form-field-appearance-standard .mat-form-field-flex{padding-top:0}.mx-list-field-not-first{padding-top:5px}.mx-list-field-disabled{color:rgba(0,0,0,.5411764705882353)}.mx-list-checkbox-selectable{padding-right:12px}.mx-list-field-inline{display:inline}@media screen and (max-width:599px){.mat-table{border:0;vertical-align:middle}.mat-table caption{font-size:1em}.mat-table .mat-header-row{display:none}.mat-table .mat-header-cell{border:10px solid;clip:rect(0 0 0 0);height:1px;margin:-1px;padding:0;position:absolute;width:1px}.mat-table .mat-row{border-bottom:5px solid #ddd;display:block;height:unset}.mat-table .mat-cell{display:block;font-size:1em;font-weight:700}.mat-table .mx-row-non-editable{border-bottom-width:1px;padding:12px 8px!important}.mat-table .mx-row-editable{border-bottom-width:0;padding:0 8px!important}.mat-table .mat-cell:before{content:attr(data-label);float:left;font-size:.85em;font-weight:400}.mat-table .mat-cell:last-child{border-bottom:0}.mat-table .mat-row td{max-width:unset}}.mx-card-list{padding:0}.mx-card-list mat-card{padding:8px}.mx-card-mobile{margin-bottom:12px;word-wrap:break-word}.mx-card-mobile .mat-grid-tile .mat-figure{justify-content:unset}.mx-card-mobile .mx-primary-text .mx-field-value{font-size:18px;font-weight:400;margin-bottom:none}.mx-card-mobile .mx-secondary-text .mx-field-value{font-size:14px;font-weight:300;margin-bottom:none;margin-top:4px}.mx-card-mobile .mx-tertiary-text .mx-field-value{font-size:12px;font-weight:300;margin-bottom:none;margin-top:8px}.mx-card-mobile .mx-card-mobile-cell{display:block;width:100%}.mx-card-mobile .mx-card-mobile-cell .fullwidth button{width:100%}.mx-card-mobile .mx-card-mobile-cell .mx-primary-text .mx-field-value,.mx-card-mobile .mx-card-mobile-cell .mx-secondary-text .mx-field-value,.mx-card-mobile .mx-card-mobile-cell .mx-tertiary-text .mx-field-value{display:block}.mx-card-mobile .mx-card-mobile-cell .fullwidth button,.mx-card-mobile .mx-card-mobile-cell .fullwidth mat-chip{width:100%}.mx-card-mobile .mx-card-mobile-cell-inline{display:inline-block;width:100%}.mx-card-mobile .mx-card-mobile-cell-inline .mx-card-mobile-control-separator{padding:4px}.hover-template{display:none;position:absolute;z-index:9999}.mx-row:hover .without-hover{pointer-events:none}.mx-list-infinite-scroll{height:69vh;overflow-y:auto}.search-mobile{margin-right:10px}.mx-mobile-search-field-cont,.mx-mobile-sort-field-cont{display:flex}.sticky{background:#fff;border-bottom:1px solid #d3cece;left:0;margin:0 auto;padding:10px 20px;position:fixed;right:0;top:0;width:88%;z-index:99}.sticky+.content{padding-top:102px}.mx-mobile-filter-icon{padding-top:8px}.mx-mobile-filter-link{text-align:end}.mx-list-hover-tooltip{padding:8px}.right-align-forced{text-align:right;width:100%}.width-100{height:100%;width:100%!important}.top{top:0}.middle{top:40%}.bottom{bottom:0}.left{left:0}.left,.right{display:block;position:absolute;width:auto}.right{right:0}.center{display:block;left:50%;position:absolute;width:auto}.mat-drawer-inner-container{overflow:hidden!important}.mx-material-icons{font-size:12px}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@casl/ability","name":"Ability","line":25,"character":30},{"__symbolic":"reference","module":"@angular/cdk/layout","name":"BreakpointObserver","line":25,"character":66}]}],"ngOnInit":[{"__symbolic":"method"}],"isList":[{"__symbolic":"method"}],"onSort":[{"__symbolic":"method"}],"onPage":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"DialogData":{"__symbolic":"interface"},"ModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"selector":"mx-modal","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":23,"character":17},"member":"None"},"template":"<!-- <h1 mat-dialog-title *ngIf=\"title\">{{title}}</h1>\n<div mat-dialog-content *ngIf=\"message\">\n  <p>{{message}}</p>\n</div>\n<div \n  mat-dialog-actions \n  [style.text-align]=\"'right'\"\n  class=\"mx-dialog-action\">\n</div> -->\n\n<!-- <pre>\n    {{data | json}}\n</pre> -->\n<mx-form \n    *ngIf=\"data && data.type == 'FORM'\"\n    [formConfig]=\"data.widgetConfig\"\n    [sourceIndex]=\"data.sourceIndex\"\n    [record]=\"data.context ? data.context[data.widgetConfig.identifier] : data.context\"\n    [originalData]=\"data.originalData && data.originalData.record ? data.originalData.record[data.widgetConfig.identifier] : {}\"  \n    [keyMap]=\"data.keyMap\"\n    [reset]=\"data.reset\"\n    (onFieldChange)=\"fieldChange($event)\"\n    (onFormChange)=\"formChange($event)\"\n    (onButtonClick)=\"buttonClick($event)\"\n></mx-form>\n","styles":[".mx-dialog-action{text-align:right}.mx-dialog-action>.mx-button{margin-right:8px}.mat-dialog-container{padding:0!important}"]}]}],"members":{"onFormChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":3}}]}],"onFieldChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":27,"character":3}}]}],"onButtonClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":28,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":31,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MAT_DIALOG_DATA","line":31,"character":12}]}],null],"parameters":[{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material/dialog","arguments":[{"__symbolic":"reference","name":"ModalComponent"}]},{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"@casl/ability","name":"Ability","line":32,"character":21}]}],"ngOnInit":[{"__symbolic":"method"}],"click":[{"__symbolic":"method"}],"fieldChange":[{"__symbolic":"method"}],"formChange":[{"__symbolic":"method"}],"buttonClick":[{"__symbolic":"method"}]}},"AdminLayoutComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"app-admin-layout","template":"<p>admin-layout works!</p>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@casl/ability","name":"Ability","line":11,"character":31}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":20,"character":1},"arguments":[{"selector":"mx-button-delete-confirmation","template":"<h1 mat-dialog-title *ngIf=\"title\">{{title}}</h1>\n<div mat-dialog-content *ngIf=\"message\">\n  <p>{{message}}</p>\n</div>\n<div \n  mat-dialog-actions \n  [style.text-align]=\"'right'\"\n  class=\"mx-dialog-action\">\n    <!-- <button mat-flat-button *ngFor=\"let dialogButton of data.confirmationConfig.buttons\" \n        [color]=\"dialogButton.color\" [mat-dialog-close]=\"dialogButton.type\" cdkFocusInitial>\n        <mat-icon aria-hidden=\"true\" [attr.aria-label]=\"dialogButton.label\" [ngClass]=\"{'button-icon-text-padding': dialogButton.icon && dialogButton.label}\" *ngIf=\"displayIcon(dialogButton)\">{{dialogButton.icon}}</mat-icon>\n        <span *ngIf=\"!displayOnlyIcon(dialogButton)\">{{ dialogButton.label }}</span>\n    </button> -->\n    <!-- <pre>{{data | json}}</pre>  -->\n    <mx-button *ngFor=\"let button of data.confirmationConfig.buttons\"\n      [form]=\"data.form\"\n      [sourceIdentifier]=\"data.sourceIdentifier\"\n      [sourceIndex]=\"data.sourceIndex\"\n      [widgetArrayIndex]=\"data.widgetArrayIndex\"\n      [button]=\"button\"\n      [context]=\"data.context\"\n      [originalData]=\"data.originalData\"\n      [buttonRoute]=\"data.buttonRoute\"\n      [parentHierarchy]=\"data.parentHierarchy\"\n      class=\"mx-button\"\n      (onClick)=\"click($event)\"\n    ></mx-button>\n</div>","styles":[".mx-dialog-action{text-align:right}.mx-dialog-action>.mx-button{margin-right:8px}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":28,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MAT_DIALOG_DATA","line":28,"character":12}]}],null],"parameters":[{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material/dialog","arguments":[{"__symbolic":"reference","name":"ɵa"}]},{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"@casl/ability","name":"Ability","line":29,"character":21}]}],"ngOnInit":[{"__symbolic":"method"}],"displayOnlyIcon":[{"__symbolic":"method"}],"displayIcon":[{"__symbolic":"method"}],"resolve":[{"__symbolic":"method"}],"click":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"mx-crud-header","template":"<div \n  class=\"mx-header\"\n  [style.padding]=\"style && style.hideCard ? '0px 16px' : 'auto'\"\n>\n    <div class=\"mdc-layout-grid\">\n        <div class=\"mdc-layout-grid__inner\">\n          <div class=\"mdc-layout-grid__cell--span-{{actions && actions.length > 0 ? 6 : 12}}-desktop mdc-layout-grid__cell--span-{{actions && actions.length > 0 ? 4 : 8}}-tablet mdc-layout-grid__cell--span-{{actions && actions.length > 0 ? 3 : 4}}-phone mdc-layout-grid__cell--align-middle\">\n            <mat-card-header class=\"mx-crud-header\">\n              <mat-icon\n                mat-card-avatar \n                class=\"mx-crud-header-icon-before\"\n                *ngIf=\"icon && icon.font && iconPosition == 'BEFORE_TITLE'\"\n                aria-hidden=\"false\" \n                [style.margin-top.px]=\"subtitle ? 8 : 0\"\n                [attr.aria-label]=\"icon.font\"\n                >{{ icon.font }}</mat-icon>\n\n              <mat-card-title>\n                {{ title }} \n                <mat-icon \n                  class=\"mx-crud-header-icon-after\"\n                  *ngIf=\"icon && icon.font && iconPosition == 'AFTER_TITLE'\"\n                  aria-hidden=\"false\" [attr.aria-label]=\"icon.font\">{{ icon.font }}</mat-icon>\n              </mat-card-title>\n              \n              <!-- <mat-card-subtitle *ngIf=\"description && description.text && !description.bgColor\">{{ description.text }}</mat-card-subtitle> -->\n\n              <mat-card-subtitle class=\"mx-crud-header-subtitle\" *ngIf=\"subtitle\">{{ subtitle }}</mat-card-subtitle>\n\n              <span class=\"mx-crud-header-badge\" *ngIf=\"badges && badges.length > 0\"> \n                  <mx-button-group\n                      [buttons]=\"badgeButtons\"\n                      [sourceIdentifier]=\"identifier\"\n                      [sourceIndex]=\"'0'\"\n                      (onClick)=\"buttonClick($event)\"\n                  ></mx-button-group>\n              </span>\n            </mat-card-header>\n          </div>\n          <div \n            class=\"mdc-layout-grid__cell--span-{{actions && actions.length > 0 ? 6 : 0}}-desktop mdc-layout-grid__cell--span-{{actions && actions.length > 0 ? 4 : 0}}-tablet mdc-layout-grid__cell--span-{{actions && actions.length > 0 ? 1 : 0}}-phone mdc-layout-grid__cell--align-middle mdc-layout-grid--align-right mx-crud-header-button\" \n            *ngIf=\"actions && actions.length > 0\">\n            <!-- <pre>{{actions | json}}</pre> --> \n            <mx-button-group\n                [buttons]=\"actions\"\n                [sourceIdentifier]=\"identifier\"\n                [formDisplayMode]=\"formDisplayMode\"\n                [sourceIndex]=\"'0'\"\n                [originalData]=\"originalData\"\n                [context]=\"context\"\n                (onClick)=\"buttonClick($event)\"\n            ></mx-button-group> \n          </div>\n        </div> \n    </div>\n</div>\n<mat-divider class=\"mx-crud-header-divider\" *ngIf=\"(title || (actions && actions.length > 0)) && description && !description.bgColor\"></mat-divider>\n","styles":[".mx-crud-header ::ng-deep .mat-card-header-text{margin:0!important}.mx-crud-header .mat-card-title{margin-top:6px}.mx-crud-header .mat-card-avatar{font-size:40px;padding-right:8px}.mat-card-subtitle,.mx-crud-header-subtitle .mat-card-subtitle{padding-top:0!important}.mx-crud-header-btns{background:#faebd7;margin-left:8px;padding:2px 5px}.mx-header>.mdc-layout-grid{padding:0!important}.mx-crud-header-button{margin-top:-8px}.mx-crud-header-badge{vertical-align:text-bottom}.mdc-layout-grid{padding:0 0 10px!important}.mx-crud-header-icon-after{padding-left:10px}"]}]}],"members":{"identifier":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"subtitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"description":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"badges":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"_pageBackRoute":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"pageBackRoute":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"formDisplayMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"actions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"showHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"originalData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"context":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"onButtonClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":37,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@casl/ability","name":"Ability","line":42,"character":31}]}],"ngOnInit":[{"__symbolic":"method"}],"setIconPosition":[{"__symbolic":"method"}],"transformBadgeButtons":[{"__symbolic":"method"}],"badgeColorToButtonColor":[{"__symbolic":"method"}],"addBackButton":[{"__symbolic":"method"}],"buttonClick":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"mx-file-uploader","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":8,"character":19},"member":"None"},"template":"<div class=\"mx-field-nm\">\n  <mat-card>\n    <mat-card-content *ngIf=\"fileList.length > 0\"  class=\"card-content\" \n      [ngClass]=\"{'mx-disable': disabled}\" >\n      <ul class=\"file-list\">\n        <ng-container *ngFor=\"let file of fileList; let index=index\">\n          <li class=\"file-item\" *ngIf=\"index < showLess\">\n            <span>\n                <img *ngIf=\"isFileImageType\" matListAvatar [src]=\"file.url\" alt=\"\" class=\"image\" />\n                <span>{{file.name}}</span>\n            </span>\n            <span>\n              <a mat-icon-button [href]=\"file.url\" download target=\"_blank\" [disabled]=\"disabled\" *ngIf=\"!hideDownloadButton\">\n                <mat-icon class=\"mat-24\">file_download</mat-icon>\n              </a>\n              <button mat-icon-button (click)=\"onDeleteFileClick(file)\" *ngIf=\"!hideDeleteFileButton\"\n                [disabled]=\"disabled || isUploadingInProgress\">\n                <mat-icon class=\"mat-24\" [color]=\"isUploadingInProgress? '' : 'warn'\">delete</mat-icon>\n              </button>\n            </span>\n          </li>\n        </ng-container>\n      </ul>\n    </mat-card-content>\n    <mat-card-actions \n      class=\"file-actions\"\n      [ngClass]=\"{'empty-list':fileList.length == 0}\"\n      *ngIf=\"!hideActionStrip\">\n      <div>\n        <div class=\"mat-mini-fab file-icon\" \n        [ngClass]=\"{'mx-disable': disabled}\"\n        *ngIf=\"!hideFileIconButton\">\n          <mat-icon>{{fileIcon}}</mat-icon>\n        </div>\n        <button mat-stroked-button color=\"primary\" (click)=\"onUploadClick()\"\n          [disabled]=\"disabled || isUploadingInProgress\"\n          *ngIf=\"!hideUploadButton\">\n          <mat-icon>file_upload</mat-icon>\n          {{uploadButtonText}}\n        </button>\n        <button  mat-button (click)=\"onShowAllItems()\"\n          [ngClass]=\"{'mx-disable': disabled}\"\n          [disabled]=\"disabled || isUploadingInProgress\"\n          *ngIf=\"showLess<fileList.length\">\n            Show All\n        </button>\n\n        <mat-spinner *ngIf=\"isUploadingInProgress\" [diameter]=\"18\" class=\"spinner\">\n        </mat-spinner>\n      </div>\n\n      <button mat-icon-button (click)=\"onDeleteAllClick()\"\n        [disabled]=\"disabled || isUploadingInProgress\"\n        [ngClass]=\"{'mx-disable': disabled}\"\n        *ngIf=\"!hideDeleteAllButton && fileList.length > 1\">\n        <mat-icon [color]=\"isUploadingInProgress? '' : 'warn'\">delete</mat-icon>\n      </button>\n    </mat-card-actions>\n  </mat-card>\n  <input type=\"file\" #fileInput\n    id=\"fileUpload\"\n    name=\"fileUpload\"\n    [multiple]=\"multiple\"\n    [accept]=\"fileType\"\n    style=\"display:none;\"\n  />\n</div>","styles":["li,ul{list-style:none;margin:0;padding:0}#file-label{display:inline-flex;font-size:12px;line-height:18px;vertical-align:middle}#file-label mat-icon{font-size:18px;text-align:center}#file-label a{cursor:pointer}.file-icon{box-shadow:none}.file-icon .material-icons,.file-list .image{vertical-align:middle}.file-list .image{border:1px solid #4d4d4d;height:30px!important;margin-right:9px;width:30px!important}.file-list .file-item{align-items:center;border-bottom:1px solid #efeded;box-sizing:border-box;display:flex;flex-direction:row;height:40px;justify-content:space-between;padding:0;position:relative;width:100%}.file-list .file-item>span{padding-left:10px}.file-list .file-item:last-child{border-bottom:none;margin-bottom:5px}.file-list .mat-button-base:hover:not([disabled]){background:#efeded}.card-content{margin-bottom:0}.file-actions{border-top:1px solid #efeded;display:flex;justify-content:space-between;margin:0 -16px -8px;padding-top:11px}.file-actions .mat-mini-fab{box-shadow:none!important}.file-actions .spinner{float:right;margin-top:10px}.file-actions .mat-button-base,.file-actions>button,.file-actions>div{margin:0 16px}.file-actions .mat-button-base:hover:not([disabled]){background:#efeded}.file-actions.empty-list{border-top:none;justify-content:space-around;padding:0}.mat-card{margin-bottom:.25em}"]}]}],"members":{"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":5}}]}],"isFieldDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":5}}]}],"fileInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":13,"character":5},"arguments":["fileInput",{"static":false}]}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":39,"character":31}]}],"ngOnInit":[{"__symbolic":"method"}],"setFieldDisabled":[{"__symbolic":"method"}],"setHideDeleteAllButton":[{"__symbolic":"method"}],"setHideActionStrip":[{"__symbolic":"method"}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"selector":"mx-list","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":24,"character":4},"arguments":["detailExpand",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":25,"character":6},"arguments":["collapsed",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":25,"character":25},"arguments":[{"height":"0px","minHeight":"0"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":26,"character":6},"arguments":["expanded",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":26,"character":24},"arguments":[{"height":"*"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":27,"character":6},"arguments":["expanded <=> collapsed",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":27,"character":43},"arguments":["225ms cubic-bezier(0.4, 0.0, 0.2, 1)"]}]}]]}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":30,"character":17},"member":"None"},"template":"<p>list works!</p>\n","styles":[""]}]}],"members":{"_listConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"listConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"_record":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"record":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"sourceIdentifier":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":3}}]}],"sourceIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":3}}]}],"widgetArrayIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":3}}]}],"originalData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3}}]}],"parent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3}}]}],"_listReset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":3}}]}],"listReset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":3}}]}],"keyMap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":3}}]}],"onFormChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":84,"character":3}}]}],"onFieldChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":85,"character":3}}]}],"onButtonClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":86,"character":3}}]}],"onPageChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":87,"character":3}}]}],"onSortChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":88,"character":3}}]}],"expanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":3}}]}],"expandRowIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":3}}]}],"contentPage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":104,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginator","line":104,"character":13},{"static":false}]}]}],"contentSort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":109,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/sort","name":"MatSort","line":109,"character":13},{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@casl/ability","name":"Ability","line":156,"character":30},{"__symbolic":"reference","module":"@angular/cdk/layout","name":"BreakpointObserver","line":156,"character":66}]}],"ngOnInit":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"setCustomTemplate":[{"__symbolic":"method"}],"sticky":[{"__symbolic":"method"}],"onScrolled":[{"__symbolic":"method"}],"setFilterBar":[{"__symbolic":"method"}],"setPageSize":[{"__symbolic":"method"}],"setIconPosition":[{"__symbolic":"method"}],"getFilterField":[{"__symbolic":"method"}],"getColumnSelectorField":[{"__symbolic":"method"}],"updateColumnDisplay":[{"__symbolic":"method"}],"inlinEditButton":[{"__symbolic":"method"}],"getColumnLabel":[{"__symbolic":"method"}],"getColumnKey":[{"__symbolic":"method"}],"resetInlineEditButton":[{"__symbolic":"method"}],"showRowEditable":[{"__symbolic":"method"}],"setRowEditablity":[{"__symbolic":"method"}],"populateAllChilds":[{"__symbolic":"method"}],"getChildRows":[{"__symbolic":"method"}],"getValue":[{"__symbolic":"method"}],"updateFilter":[{"__symbolic":"method"}],"initFormGroup":[{"__symbolic":"method"}],"initCommonFormGroup":[{"__symbolic":"method"}],"getCurrentRecord":[{"__symbolic":"method"}],"getObjectTree":[{"__symbolic":"method"}],"isAllSelected":[{"__symbolic":"method"}],"masterToggle":[{"__symbolic":"method"}],"checkboxLabel":[{"__symbolic":"method"}],"setCardVisibility":[{"__symbolic":"method"}],"setColumnNames":[{"__symbolic":"method"}],"setDetailColumnCount":[{"__symbolic":"method"}],"setColors":[{"__symbolic":"method"}],"selectableButton":[{"__symbolic":"method"}],"fieldChange":[{"__symbolic":"method"}],"formChange":[{"__symbolic":"method"}],"buttonClick":[{"__symbolic":"method"}],"getLayout":[{"__symbolic":"method"}],"rowClick":[{"__symbolic":"method"}],"resetVerticalDisplay":[{"__symbolic":"method"}],"getButton":[{"__symbolic":"method"}],"onHover":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵh":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"FieldComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"mx-chips","template":"<ng-container *ngIf=\"!enableDragAndDrop && options.length==0\">\n    <ng-container *ngTemplateOutlet=\"chipListStandard\"></ng-container>\n</ng-container>\n<ng-container *ngIf=\"!enableDragAndDrop && options.length>0\">\n    <ng-container *ngTemplateOutlet=\"chipListAutoComplete\"></ng-container>\n</ng-container>\n\n<!-- Chip list Standard -->\n<ng-template #chipListStandard>\n    <mat-form-field \n        [appearance]=\"appearance | lowercase\"\n        class=\"mx-chip-list\">\n        <mat-label class=\"mx-field-lbl mx-field-lbl-{{field.key}}\" *ngIf=\"!(hideLabel == true) && field.fieldDisplayType != 'HORIZONTAL'\">\n          <strong>{{field.label}}</strong>\n          <span class=\"mx-field-lbl-req\" *ngIf=\"isRequired\">*</span>\n          <span *ngIf=\"field.help && field.help.message && field.help.displayType == 'PLAIN_TEXT' && field.help.withLabel\">\n            {{field.help.message}}\n          </span>\n        </mat-label>\n        <!-- <mat-label class=\"mx-field-lbl\" *ngIf=\"(hideLabel == true)\"> \n        </mat-label> -->\n  \n        <mat-icon \n          *ngIf=\"field.icon\" \n          matPrefix\n          aria-hidden=\"true\" \n          [attr.aria-label]=\"field.icon\" \n          class=\"mx-field-icon\" \n        >{{field.icon}}</mat-icon>\n  \n        <mat-chip-list #chipList [ngClass]=\"{'mat-chip-list-stacked': orientation === 'VERTICAL'}\">\n            <mat-chip *ngFor=\"let chip of chips;let i=index\" [removable]=\"chip.removable || true\"\n                (removed)=\"removeItem($event,chip,i)\" class=\"chip-item\" [disabled]=\"chip.disabled\">\n                {{chip.value}}\n                <mat-icon matChipRemove *ngIf=\"chip.removable\">cancel</mat-icon>\n            </mat-chip>\n            <!-- [formControl]=\"formControl\"  -->\n            <input \n                matInput \n                #input \n                [id]=\"field.key\"\n                [placeholder]=\"placeholder\" \n                [matChipInputFor]=\"chipList\"\n                [errorStateMatcher]=\"errorMatcher\"\n                [disabled]=\"disabled\"\n                [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" \n                [matChipInputAddOnBlur]=\"addOnBlur\"\n                (matChipInputTokenEnd)=\"addItem($event)\" />\n        </mat-chip-list>\n        <mx-button\n            matSuffix\n            *ngIf=\"hasClear && !hasFieldNavigate && !(field.help && field.help.displayType == 'TOOLTIP' && field.help.message)\"\n            [button]=\"textClearButton\"\n            class=\"mx-field-clr-btn mx-field-clr-btn-{{field.key}}\"\n            (onClick)=\"cleanValue()\"\n        ></mx-button>\n        <mx-button\n            matSuffix\n            *ngIf=\"hasFieldNavigate\"\n            [button]=\"routeToButton\"\n            class=\"mx-field-clr-btn mx-field-clr-btn-{{field.key}}\"\n            (onClick)=\"resolvedValue = ''\"\n        ></mx-button> \n        <mx-tooltip matSuffix [field]=\"field\"></mx-tooltip>\n\n        <!-- <ng-container *ngTemplateOutlet=\"cfHelp;\"></ng-container> -->\n        <mat-hint *ngIf=\"field.help && field.help.message && field.help.displayType == 'PLAIN_TEXT' && !field.help.withLabel\" class=\"mx-field-hint\">\n            <mat-icon \n            aria-hidden=\"true\"  \n            [attr.aria-label]=\"field.help.message\" \n            class=\"mx-field-hint-icon\">\n            {{field.help.icon ? field.help.icon : 'live_help'}}\n            </mat-icon>\n            {{field.help.message}}\n        </mat-hint>\n\n        <mat-error aria-hidden=\"true\" [attr.aria-label]=\"error.message\" *ngFor=\"let error of errors()\" [innerHtml]=\"error.message\"></mat-error>\n    </mat-form-field>\n</ng-template>\n\n<!-- Chip list with Autocomplete -->\n<ng-template #chipListAutoComplete>\n    <mat-form-field class=\"mx-chip-list\">\n        <mat-label class=\"mx-field-lbl mx-field-lbl-{{field.key}}\" *ngIf=\"!(hideLabel == true) && field.fieldDisplayType != 'HORIZONTAL'\">\n            <strong>{{field.label}}</strong>\n            <span class=\"mx-field-lbl-req\" *ngIf=\"isRequired\">*</span>\n            <span *ngIf=\"field.help && field.help.message && field.help.displayType == 'PLAIN_TEXT' && field.help.withLabel\">\n              {{field.help.message}}\n            </span>\n          </mat-label>\n          <!-- <mat-label class=\"mx-field-lbl\" *ngIf=\"(hideLabel == true)\"> \n          </mat-label> -->\n    \n          <mat-icon \n            *ngIf=\"field.icon\" \n            matPrefix\n            aria-hidden=\"true\" \n            [attr.aria-label]=\"field.icon\" \n            class=\"mx-field-icon\" \n          >{{field.icon}}</mat-icon>\n      \n        <mat-chip-list #chipList [ngClass]=\"{'mat-chip-list-stacked': orientation === 'VERTICAL'}\">\n            <mat-chip *ngFor=\"let chip of chips;let i=index\" [removable]=\"chip.removable || true\"\n                (removed)=\"removeItem($event,chip,i)\" class=\"chip-item\" [disabled]=\"chip.disabled\">\n                {{chip.value}}\n                <mat-icon matChipRemove *ngIf=\"chip.removable\">cancel</mat-icon>\n            </mat-chip>\n            <!-- [formControl]=\"formControl\"  -->\n            <input \n                matInput \n                #input \n                [id]=\"field.key\"\n                [placeholder]=\"placeholder\" \n                [matChipInputFor]=\"chipList\"\n                [errorStateMatcher]=\"errorMatcher\"\n                [disabled]=\"disabled\"\n                [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" \n                [matChipInputAddOnBlur]=\"addOnBlur\"\n                [matAutocomplete]=\"auto\" />\n        </mat-chip-list>\n        <mat-error aria-hidden=\"true\" [attr.aria-label]=\"error.message\" *ngFor=\"let error of errors()\" [innerHtml]=\"error.message\"></mat-error>\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelected($event)\">\n            <mat-option \n                *ngFor=\"let option of options\" \n                [value]=\"option\"\n                [disabled]=\"option.disabled\" >\n                {{option.value}}\n                <!-- <span [innerHTML]=\"option.value | highlight: highlightAutoCompleteText\"></span> -->\n            </mat-option>\n        </mat-autocomplete>\n\n        <mx-button\n            matSuffix\n            *ngIf=\"hasClear && !hasFieldNavigate && !(field.help && field.help.displayType == 'TOOLTIP' && field.help.message)\"\n            [button]=\"textClearButton\"\n            class=\"mx-field-clr-btn mx-field-clr-btn-{{field.key}}\"\n            (onClick)=\"cleanValue()\"\n        ></mx-button>\n        <mx-button\n            matSuffix\n            *ngIf=\"hasFieldNavigate\"\n            [button]=\"routeToButton\"\n            class=\"mx-field-clr-btn mx-field-clr-btn-{{field.key}}\"\n            (onClick)=\"resolvedValue = ''\"\n        ></mx-button> \n        <mx-tooltip matSuffix [field]=\"field\"></mx-tooltip>\n\n        <!-- <ng-container *ngTemplateOutlet=\"cfHelp;\"></ng-container> -->\n        <mat-hint *ngIf=\"field.help && field.help.message && field.help.displayType == 'PLAIN_TEXT' && !field.help.withLabel\" class=\"mx-field-hint\">\n            <mat-icon \n            aria-hidden=\"true\" \n            [attr.aria-label]=\"field.help.message\" \n            class=\"mx-field-hint-icon\">\n            {{field.help.icon ? field.help.icon : 'live_help'}}\n            </mat-icon>\n            {{field.help.message}}\n        </mat-hint>\n\n        <mat-error aria-hidden=\"true\" [attr.aria-label]=\"error.message\" *ngFor=\"let error of errors()\" [innerHtml]=\"error.message\"></mat-error>\n\n    </mat-form-field>\n</ng-template>\n\n","styles":[".mx-chip-list{width:100%}.mx-chip-list .chip-item.cdk-drag-animating,.mx-chip-list .hip-item .cdk-drop-list-dragging{transition:transform .25s cubic-bezier(0,0,.2,1)}.mx-chip-list .mat-chip-list-stacked input.mat-chip-input{flex:none}"]}]}],"members":{"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":5}}]}],"formControl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"errorMatcher":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":31,"character":5},"arguments":["input"]}]}],"matAutocomplete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":32,"character":5},"arguments":["auto"]}]}],"onListChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":34,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"Router","line":45,"character":31},{"__symbolic":"reference","module":"@casl/ability","name":"Ability","line":45,"character":55}]}],"setDescribedByIds":[{"__symbolic":"method"}],"onContainerClick":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"setChips":[{"__symbolic":"method"}],"keyExists":[{"__symbolic":"method"}],"errors":[{"__symbolic":"method"}]}},"ɵi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"mx-toolbar","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":7,"character":19},"member":"None"},"template":"<span>\n    <button mat-button *ngFor=\"let item of menuItems\" (click)=\"onMenuClick(item)\"\n    [fxShow]=\"item.showOnDesktop\" \n    [fxShow.xs]=\"item.showOnMobile\"\n    [fxShow.sm]=\"item.showOnTablet\">\n        <mat-icon class=\"mr\">{{item.icon}}</mat-icon>\n        {{item.label}}\n    </button>\n    <button mat-icon-button [matMenuTriggerFor]=\"dropMenu\">\n        <mat-icon>more_vert</mat-icon>\n    </button>\n    <mat-menu #dropMenu=\"matMenu\">\n        <ng-container *ngFor=\"let item of menuItems\">\n            <div [fxShow]=\"!item.showOnDesktop\" \n                [fxShow.sm]=\"!item.showOnTablet\" \n                [fxShow.xs]=\"!item.showOnMobile\">\n                <button mat-menu-item (click)=\"onMenuClick(item)\">\n                    <mat-icon class=\"mr\">{{item.icon}}</mat-icon>\n                    {{item.label}}\n                </button>\n                <mat-divider></mat-divider>\n            </div>\n        </ng-container>\n    </mat-menu>\n</span>","styles":[".mx-chip-list{width:100%}.mx-chip-list .chip-item.cdk-drag-animating,.mx-chip-list .hip-item .cdk-drop-list-dragging{transition:transform .25s cubic-bezier(0,0,.2,1)}"]}]}],"members":{"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"mx-multi-image","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":8,"character":19},"member":"None"},"template":"<div class=\"avatars mx-field-nm\"  [ngClass]=\"{'mx-disable': disabled}\">\n    <ng-container *ngFor=\"let img of images; let i=index,let last = last\">\n        <div class=\"avatar\"  *ngIf=\"i<count\" matTooltip=\"{{img.name}}\" [matTooltipDisabled]=\"hideTooltip\"\n            [style.margin-left.px]=\"i==0? 0:-radius/2\" [style.z-index]=\"1000-i\">\n            <img class=\"item\" src=\"{{img.url || img}}\" [style.width.px]=\"radius\" [style.height.px]=\"radius\"/>\n        </div>\n    </ng-container>\n    <span class=\"avatar\" *ngIf=\"(showCount || showAll) && (count !== images.length)\"\n        [style.margin-left.px]=\"-radius/2\" [style.width.px]=\"radius\">\n        <button class=\"item\"  (click)=\"onShowAllClick()\"\n            [style.padding-left.px]=\"radius/4\" \n            [disabled]=\"(disabled || !showAll)\" \n            [style.width.px]=\"radius\" \n            [style.height.px]=\"radius\">\n            {{lastItemLabel}}\n        </button>\n    </span>\n</div>","styles":[".avatars{display:flex;margin-bottom:1.25em!important;overflow:auto;width:100%}.item{align-items:center;background-color:#bbb;border-radius:9999px;box-shadow:0 0 0 2px #fff;color:#fff;display:flex;justify-content:center}button{background:transparent;border:none;color:#4d4d4d;font-size:18px}button:hover:not([disabled]){background-color:rgba(103,58,183,.5803921568627451);cursor:pointer}button:disabled:hover:not([disabled]){color:#ccc}"]}]}],"members":{"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":5}}]}],"control":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵk":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"FieldComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"mx-paragraph","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":14,"character":19},"member":"None"},"template":"<ng-container *ngFor=\"let token of tokens\">\n    <ng-container *ngIf=\"token.type == 'LABEL'\">\n        <span class=\"text\">{{token.value}} </span>\n    </ng-container>\n    <ng-container *ngIf=\"token.type == 'FIELD'\">\n        <mx-field \n            [sourceType]=\"sourceType\"\n            [sourceIdentifier]=\"sourceIdentifier\" \n            [sourceIndex]=\"sourceIndex\" \n            [widgetArrayIndex]=\"widgetArrayIndex\"\n            [form]=\"form\" \n            [fieldControl]=\"fieldControl['controls'][token.field.key]\"\n            [keyMap]=\"keyMap\"\n            [field]=\"token.field\"\n            [displayMode]=\"displayMode\" \n            [value]=\"\" \n            (onFieldChange)=\"fieldChange($event)\" \n            class=\"field\">\n        </mx-field> \n    </ng-container> \n    <ng-container *ngIf=\"token.type == 'BUTTON'\">\n        <!-- \n        [buttonRoute]=\"buttonRoute\"\n        [parentHierarchy]=\"parentHierarchy\"\n         -->\n        <mx-button\n            [form]=\"form\"\n            [sourceIdentifier]=\"sourceIdentifier\"\n            [sourceIndex]=\"sourceIndex\"\n            class=\"button\"\n            [widgetArrayIndex]=\"widgetArrayIndex\"\n            [button]=\"token.button\"\n            [context]=\"getFormValue()\"\n            [originalData]=\"originalData\"\n            [formDisplayMode]=\"displayMode\"\n            [disabled]=\"isButtonDisable()\"\n            (onClick)=\"buttonClick($event)\"\n        ></mx-button>\n    </ng-container>\n</ng-container>","styles":[".text{vertical-align:middle}.button,.field{padding:0 10px}"]}]}],"members":{"onButtonClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"Router","line":21,"character":31},{"__symbolic":"reference","module":"@casl/ability","name":"Ability","line":21,"character":55}]}],"ngOnInit":[{"__symbolic":"method"}],"fieldChange":[{"__symbolic":"method"}],"isButtonDisable":[{"__symbolic":"method"}],"getFormValue":[{"__symbolic":"method"}],"buttonClick":[{"__symbolic":"method"}]}},"ɵl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":4,"character":1},"arguments":[{"name":"highlight"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"mx-tooltip","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":9,"character":19},"member":"None"},"template":"    <!-- <mat-icon  matSuffix inline=\"true\"> {{field.help.icon ? field.help.icon : 'live_help'}}</mat-icon> -->\n<span *ngIf=\"field.help && field.help.message && !hasFieldNavigate && field.help.displayType == 'TOOLTIP'\" \n    [tooltip]=\"HtmlContent\"\n    [placement]=\"placement\"\n    theme=\"light\"\n    content-type=\"template\"\n    class=\"mx-field-hint mx-field-hint-inline mx-field-hint-{{field.key}}\">\n    \n    <button mat-icon-button class=\"mx-tooltip-button\">\n        <mat-icon inline=\"true\"> {{field.help.icon ? field.help.icon : 'live_help'}}</mat-icon>\n    </button>\n</span>\n\n<ng-template #HtmlContent>\n    <mat-card class=\"tooltip-card\">\n        <mat-card-header>\n            {{field.help.title}}\n        </mat-card-header>\n        <mat-card-content>\n            {{field.help.message}}\n        </mat-card-content>\n    </mat-card>\n</ng-template>","styles":[".tooltip{background-color:#fff!important;max-width:260px;padding:0!important}.tooltip .tooltip-card{margin:0!important;padding:0!important}.tooltip .tooltip-card .mat-card-header{background-color:#e5e3e3!important;color:#4d4d4d}.tooltip .tooltip-card .mat-card-content,.tooltip .tooltip-card .mat-card-header{padding:10px;text-align:left}.tooltip-top:after{border-color:#444 transparent transparent!important;border-width:7px!important;margin-left:-7px!important}.mx-tooltip-button{color:rgba(0,0,0,.54)}"]}]}],"members":{"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":5}}]}],"control":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"fieldNavigate":[{"__symbolic":"method"}]}},"ɵn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":3,"character":1},"arguments":[{"selector":"[ngInit]"}]}],"members":{"ngInit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":7,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵo":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"safeHtml"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":8,"character":35}]}],"transform":[{"__symbolic":"method"}]}},"ɵp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":15,"character":1},"arguments":[{"selector":"[cfTemplate]"}]}],"members":{"cfTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"cfTemplateContext":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"currentComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":25,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"Compiler","line":25,"character":65}]}],"ngOnChanges":[{"__symbolic":"method"}],"updateProperties":[{"__symbolic":"method"}],"createDynamicComponent":[{"__symbolic":"method"}],"createDynamicModule":[{"__symbolic":"method"}]}},"ɵq":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"admin-navigation","template":"<mat-sidenav-container class=\"admin-container\" autosize>\n  <mat-sidenav\n    #sidenav\n    class=\"admin-sidenav\"\n    [fixedInViewport]=\"'true'\"\n    [ngClass]=\"{\n      'side-width': isExpanded || isShowing,\n      'mobile-side-remove': !isExpanded,\n      'collaps-width': !isExpanded && !isShowing\n    }\"\n    mode=\"side\"\n    opened=\"true\"\n    (mouseenter)=\"mouseenter()\"\n    (mouseleave)=\"mouseleave()\"\n  >\n    <span class=\"flex-layout\">\n      <mat-nav-list>\n        <header *ngIf=\"navigationPanel?.header\">\n          <H3\n            *ngIf=\"navigationPanel?.header?.logo?.name; else image\"\n            align=\"center\"\n            >{{ navigationPanel?.header?.logo?.name }}</H3\n          >\n          <ng-template #image>\n            <div class=\"flex-center\">\n              <img\n                [ngClass]=\"{ 'image-icon': !(isExpanded || isShowing) }\"\n                [src]=\"navigationPanel?.header?.logo?.image\"\n                class=\"header-image\"\n              />\n            </div>\n          </ng-template>\n        </header>\n        <div *ngFor=\"let data of navigation; let i = index\">\n          <!-- <mat-list-item (click)=\"showSubmenu[0] = !showSubmenu[0]\" class=\"parent\">\n          <span class=\"full-width\" *ngIf=\"isExpanded || isShowing\">{{data.name}}</span>\n          <mat-icon mat-list-icon>{{data.icon}}</mat-icon>\n          <mat-icon class=\"menu-button\" [ngClass]=\"{'rotated' : showSubmenu[0]}\" *ngIf=\"isExpanded || isShowing\">\n            expand_more</mat-icon>\n        </mat-list-item> -->\n          <ng-container\n            *ngTemplateOutlet=\"mainmenu; context: { menu: data, index: i }\"\n          ></ng-container>\n        </div>\n      </mat-nav-list>\n\n      <footer *ngIf=\"navigationPanel.footer\">\n        <mat-nav-list>\n          <mat-list-item\n            *ngIf=\"navigationPanel.footer.logout\"\n            (click)=\"logoutEvent()\"\n          >\n            <ng-container\n              *ngIf=\"\n                navigationPanel.footer?.template.content as tmpl;\n                else footertemplate\n              \"\n            >\n              <ng-container\n                cfTemplate\n                [cfTemplate]=\"\n                  '<style>' +\n                  navigationPanel.footer?.template?.css +\n                  '</style>' +\n                  tmpl\n                \"\n              >\n              </ng-container>\n            </ng-container>\n          </mat-list-item>\n        </mat-nav-list>\n      </footer>\n    </span>\n  </mat-sidenav>\n\n  <ng-content></ng-content>\n</mat-sidenav-container>\n\n<ng-template #submenu let-menu=\"menu\" let-j=\"mainindex\" let-s=\"subindex\">\n  <div\n    class=\"submenu\"\n    [ngClass]=\"{ expanded: s >= 0 ? showSubSubMenu[j][s] : showSubmenu[j] }\"\n    *ngIf=\"isShowing || isExpanded\"\n  >\n    <div *ngFor=\"let item of menu; let m = index\">\n      <div *ngIf=\"item?.children; else nochild\">\n        <mat-list-item\n          (click)=\"showSubSubMenu[j][m] = !showSubSubMenu[j][m]\"\n          class=\"parent\"\n        >\n          <span class=\"full-width\" *ngIf=\"isExpanded || isShowing\">\n            <span *ngIf=\"item.name; else submenuImage\">{{ item.name }}</span>\n            <span\n              [matBadge]=\"item?.subText?.text\"\n              *ngIf=\"item?.subText?.displayType == 'BADGE'\"\n              matBadgeOverlap=\"false\"\n            ></span>\n            <span\n              *ngIf=\"item?.subText?.displayType == 'PLAIN_TEXT'\"\n              class=\"sub-text\"\n              >{{ item?.subText?.text }}</span\n            >\n          </span>\n          <mat-icon *ngIf=\"item.icon; else subimageIcon\" mat-list-icon>{{\n            item.icon\n          }}</mat-icon>\n          <mat-icon\n            class=\"menu-button\"\n            [ngClass]=\"{ rotated: showSubSubMenu[j][m] }\"\n            *ngIf=\"isExpanded || isShowing\"\n          >\n            expand_more</mat-icon\n          >\n        </mat-list-item>\n        <span *ngIf=\"showSubSubMenu[j][m]\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              submenu;\n              context: { menu: item.children, mainindex: j, subindex: m }\n            \"\n          >\n          </ng-container>\n        </span>\n      </div>\n      <ng-template #nochild>\n        <mat-list-item [routerLink]=\"[item?.route]\" routerLinkActive=\"active\">\n          <span *ngIf=\"item.name; else submenuImage\">{{ item.name }}</span>\n          <span\n            [matBadge]=\"item?.subText?.text\"\n            *ngIf=\"item?.subText?.displayType == 'BADGE'\"\n            matBadgeOverlap=\"false\"\n          ></span>\n          <span\n            *ngIf=\"item?.subText?.displayType == 'PLAIN_TEXT'\"\n            class=\"sub-text\"\n            >{{ item?.subText?.text }}</span\n          >\n          <mat-icon *ngIf=\"item.icon; else subimageIcon\" mat-list-icon>\n            {{ item.icon }}</mat-icon\n          >\n        </mat-list-item>\n      </ng-template>\n      <mat-divider *ngIf=\"item?.divider\"></mat-divider>\n\n      <ng-template #subimageIcon>\n        <img [src]=\"item.image\" class=\"image-icon\" />\n      </ng-template>\n\n      <ng-template #submenuImage>\n        <img [src]=\"item.nameAsImage\" class=\"image-name\" />\n      </ng-template>\n    </div>\n    <!-- <mat-list-item>SubSubmenu Item 2</mat-list-item> -->\n  </div>\n</ng-template>\n\n<ng-template #mainmenu let-menu=\"menu\" let-i=\"index\">\n  <div *ngIf=\"menu.children; else nochild\">\n    <mat-list-item (click)=\"showSubmenu[i] = !showSubmenu[i]\" class=\"parent\">\n      <span class=\"full-width\" *ngIf=\"isExpanded || isShowing\">\n        <span *ngIf=\"menu.name; else menuImage\">{{ menu.name }}</span>\n        <span\n          [matBadge]=\"menu?.subText?.text\"\n          *ngIf=\"menu?.subText?.displayType == 'BADGE'\"\n          matBadgeOverlap=\"false\"\n        ></span>\n\n        <span\n          *ngIf=\"menu?.subText?.displayType == 'PLAIN_TEXT'\"\n          class=\"sub-text\"\n          >{{ menu?.subText?.text }}</span\n        >\n      </span>\n      <mat-icon *ngIf=\"menu.icon; else imageIcon\" mat-list-icon\n        >{{ menu.icon }}\n      </mat-icon>\n\n      <mat-icon\n        class=\"menu-button\"\n        [ngClass]=\"{ rotated: showSubmenu[i] }\"\n        *ngIf=\"isExpanded || isShowing\"\n      >\n        expand_more\n      </mat-icon>\n    </mat-list-item>\n    <span *ngIf=\"showSubmenu[i]\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          submenu;\n          context: { menu: menu.children, mainindex: i }\n        \"\n      ></ng-container>\n    </span>\n  </div>\n  <ng-template #nochild>\n    <mat-list-item\n      class=\"parent\"\n      [routerLink]=\"[menu?.route]\"\n      routerLinkActive=\"active\"\n      ><span class=\"full-width\" *ngIf=\"isExpanded || isShowing\">\n        <span *ngIf=\"menu.name; else menuImage\">{{ menu.name }}</span></span\n      >\n      <mat-icon *ngIf=\"menu.icon; else imageIcon\" mat-list-icon>\n        {{ menu.icon }}</mat-icon\n      >\n    </mat-list-item>\n  </ng-template>\n  <mat-divider *ngIf=\"menu?.divider\"></mat-divider>\n  <ng-template #imageIcon>\n    <img [src]=\"menu.image\" class=\"image-icon\" />\n  </ng-template>\n\n  <ng-template #menuImage>\n    <img [src]=\"menu.nameAsImage\" class=\"image-name\" />\n  </ng-template>\n</ng-template>\n\n<ng-template #footertemplate>\n  <mat-icon mat-list-icon>power_settings_new</mat-icon>\n  <span *ngIf=\"isExpanded || isShowing\">Logout</span>\n</ng-template>\n\n<button\n  mat-mini-fab\n  color=\"primary\"\n  [ngClass]=\"{ minimize: !isExpanded && !isShowing }\"\n  (click)=\"isExpanded = !isExpanded\"\n  class=\"menu-side-button\"\n  aria-label=\"Menu collapse\"\n\n  *ngIf=\"navigationPanel.canCollapse\"\n>\n  <mat-icon> keyboard_arrow_left</mat-icon>\n</button>\n","styles":[".admin-sidenav-content{align-items:center;display:flex;height:100%;justify-content:center}.admin-sidenav{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.full-width{align-items:center;display:flex;padding-left:10px;width:100%}.menu-button{transform:rotate(0deg);transition:.3s ease-in-out}.menu-button.rotated{transform:rotate(180deg)}.submenu{overflow-y:hidden;padding-left:30px;transform:scaleY(0);transform-origin:top;transition:transform .3s ease}.submenu.expanded{transform:scaleY(1)}.side-width{width:250px}.collaps-width{width:65px}.menu-side-button{background:#fff;color:#000;left:238px;position:fixed;top:55px;z-index:9}@media (max-width:599px){.menu-side-button{display:none}}.menu-side-button.minimize{left:52px;transform:rotate(180deg)}@media (max-width:599px){.mobile-side-remove{display:none}}mat-sidenav-container{min-height:88vh}.image-icon{width:32px}.image-name{width:92px;z-index:-1}.sub-text{background:#673ab7;border-radius:5px;color:#fff;margin:5px;padding:5px}.mat-badge-medium.mat-badge-above .mat-badge-content{top:-18px}.flex-beetween{align-content:space-between}.flex-beetween,.flex-layout{display:flex;flex-direction:column}.flex-layout{height:100%;justify-content:space-between}.flex-layout .flex-center{display:flex;flex-direction:row;justify-content:center}.flex-layout .flex-center .header-image{max-width:64px}.mat-drawer-inner-container{overflow:hidden!important}"]}]}],"members":{"sidenav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":19,"character":3},"arguments":["sidenav"]}]}],"isExpanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"navigationPanel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"navigation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"logout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/cdk/layout","name":"BreakpointObserver","line":29,"character":31},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":30,"character":17}]}],"ngAfterViewChecked":[{"__symbolic":"method"}],"mouseenter":[{"__symbolic":"method"}],"mouseleave":[{"__symbolic":"method"}],"logoutEvent":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}]}}},"origins":{"MaterialWidgetModule":"./lib/ngx-material-widget.module","ButtonComponent":"./lib/button/component/button/button.component","ButtonGroupComponent":"./lib/button/component/button-group/button-group.component","CrudFormComponent":"./lib/crud/component/crud-form/crud-form.component","CrudListComponent":"./lib/crud/component/crud-list/crud-list.component","BottomSearchSheet":"./lib/crud/component/crud-list/crud-list.component","CrudListComponentInterface":"./lib/crud/interface/crud-list/crud-list-interface.component","FieldErrorStateMatcher":"./lib/field/component/field/field.component","FieldComponent":"./lib/field/component/field/field.component","FormComponent":"./lib/form/component/form/form.component","FormHeaderComponent":"./lib/form/component/form-header/form-header.component","DynamicListComponent":"./lib/list/component/dynamic-list/dynamic-list.component","StaticListComponent":"./lib/list/component/static-list/static-list.component","DialogData":"./lib/modal/component/modal/modal.component","ModalComponent":"./lib/modal/component/modal/modal.component","AdminLayoutComponent":"./lib/page/component/admin-layout/admin-layout.component","ɵa":"./lib/button/component/button-delete-confirmation/button-delete-confirmation.component","ɵb":"./lib/crud/component/crud-header/crud-header.component","ɵc":"./lib/field/component/file-uploader/file-uploader.component","ɵd":"./lib/field/component","ɵe":"./lib/form/component","ɵf":"./lib/form/component","ɵg":"./lib/list/component/list.component","ɵh":"./lib/field/component/chips/chips.component","ɵi":"./lib/field/component/toolbar/toolbar.component","ɵj":"./lib/field/component/multi-image/multi-image.component","ɵk":"./lib/field/component/paragraph/paragraph.component","ɵl":"./lib/field/pipes/highlightPipe","ɵm":"./lib/field/component/tooltip/tooltip.component","ɵn":"./lib/list/directives/ngInit.directive","ɵo":"./lib/list/pipes/safeHtml.pipe","ɵp":"./lib/list/directives/compile.directive","ɵq":"./lib/navigation/component/navigation/navigation.component"},"importAs":"ngx-material-widget"}