@messaia/cdk 17.0.0-rc01 → 17.0.0-rc02
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/base/components/dynamic-table-config-dialog.comnponent.mjs +1 -1
- package/esm2022/lib/chips/components/chips.component.mjs +1 -1
- package/esm2022/lib/dialogs/alert-dialog/alert-dialog.component.mjs +1 -1
- package/esm2022/lib/dialogs/confirm-dialog/confirm-dialog.component.mjs +1 -1
- package/esm2022/lib/dialogs/prompt-dialog/prompt-dialog.component.mjs +1 -1
- package/esm2022/lib/file/file-input.component.mjs +1 -1
- package/esm2022/lib/forms/components/datepicker/datepicker-header.component.mjs +1 -1
- package/esm2022/lib/forms/components/generic-form/generic-form.component.mjs +1 -1
- package/esm2022/lib/layout/dynamic-menu/dynamic-menu.component.mjs +1 -1
- package/esm2022/lib/layout/layout-manage-list/layout-manage-list.component.mjs +1 -1
- package/esm2022/lib/layout/layout-nav/layout-nav.component.mjs +1 -1
- package/esm2022/lib/layout/layout.component.mjs +2 -2
- package/esm2022/lib/layout/list-toolbar/list-toolbar.component.mjs +1 -1
- package/esm2022/lib/layout/navigation-drawer/navigation-drawer.component.mjs +2 -2
- package/esm2022/lib/search/vd-search-box/vd-search-box.component.mjs +2 -2
- package/esm2022/lib/search/vd-search-input/vd-search-input.component.mjs +2 -2
- package/esm2022/lib/select/components/select.component.mjs +1 -1
- package/esm2022/lib/table/components/dynamic-table/dynamic-table.component.mjs +2 -2
- package/esm2022/lib/table/components/filter-clear.component.mjs +1 -1
- package/esm2022/lib/table/components/filter-date.component.mjs +1 -1
- package/esm2022/lib/table/components/filter-input.component.mjs +1 -1
- package/esm2022/lib/table/components/filter-select.component.mjs +1 -1
- package/fesm2022/messaia-cdk.mjs +23 -23
- package/fesm2022/messaia-cdk.mjs.map +1 -1
- package/lib/common/styles/_variables.scss +5 -3
- package/lib/common/styles/core/_structure.scss +6 -3
- package/package.json +1 -1
|
@@ -72,7 +72,7 @@ export class VdDynamicTableConfigDialogComponent extends BaseComponent {
|
|
|
72
72
|
<a mat-flat-button (click)="apply()" i18n="@@apply">Apply</a>
|
|
73
73
|
<a mat-flat-button (click)="dialogRef.close()" i18n="@@close">Close</a>
|
|
74
74
|
</div>
|
|
75
|
-
</vd-dynamic-table>`, isInline: true, styles: [".mat-mdc-dialog-title{cursor:move}\n"], dependencies: [{ kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: i3.VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "formArray", "debugValue", "classType", "context", "dataSourceFilter", "static", "filterable", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "columns", "rowMenuItems", "rowAction", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }, { kind: "component", type: i4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]",
|
|
75
|
+
</vd-dynamic-table>`, isInline: true, styles: [".mat-mdc-dialog-title{cursor:move}\n"], dependencies: [{ kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: i3.VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "formArray", "debugValue", "classType", "context", "dataSourceFilter", "static", "filterable", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "columns", "rowMenuItems", "rowAction", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }, { kind: "component", type: i4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] });
|
|
76
76
|
}
|
|
77
77
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VdDynamicTableConfigDialogComponent, decorators: [{
|
|
78
78
|
type: Component,
|
|
@@ -512,7 +512,7 @@ export class VdChipsComponent extends AbstractMatFormField {
|
|
|
512
512
|
provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
|
|
513
513
|
useValue: { overlayPanelClass: 'vd-chips-autocomplete' }
|
|
514
514
|
}
|
|
515
|
-
], queries: [{ propertyName: "chipTemplate", first: true, predicate: VdChipDirective, descendants: true }, { propertyName: "autocompleteOptionTemplate", first: true, predicate: VdAutocompleteOptionDirective, descendants: true }], viewQueries: [{ propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\r\n\t<!-- #region Chips -->\r\n\t<mat-chip-row *ngFor=\"let chip of chips; let first = first; let index = index\" [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n\t\t<span class=\"vd-chip-content\">\r\n\t\t\t<span *ngIf=\"!chipTemplate?.templateRef\">\r\n\t\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{ chip }}</span>\r\n\t\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n\t\t\t</span>\r\n\t\t\t<ng-template *ngIf=\"chipTemplate?.templateRef\" [ngTemplateOutlet]=\"chipTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n\t\t</span>\r\n\t\t<a matChipTrailingIcon *ngFor=\"let button of suffixButtons; let first = first\" [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n\t\t\t<mat-icon>{{button.icon}}</mat-icon>\r\n\t\t</a>\r\n\t\t<a matChipTrailingIcon *ngIf=\"onLaunch?.observers?.length > 0\" (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n\t\t\t<mat-icon>launch</mat-icon>\r\n\t\t</a>\r\n\t\t<a matChipTrailingIcon *ngIf=\"!readonly\" (click)=\"handleRemovedEvent()\">\r\n\t\t\t<mat-icon>close</mat-icon>\r\n\t\t</a>\r\n\t</mat-chip-row>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Search box -->\r\n\t<input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Reset button -->\r\n\t<a trailingIcon *ngIf=\"(!value || empty) && !readonly && !disabled\" class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\r\n\t\t<svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\r\n\t\t\t<path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\r\n\t\t</svg>\r\n\t</a>\r\n\t<!-- #endregion -->\r\n</mat-chip-grid>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n\t<ng-template *ngIf=\"!classType && opened\" let-item let-first=\"first\" ngFor [ngForOf]=\"dataSource?.items\">\r\n\t\t<mat-option [value]=\"item\">\r\n\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{item}}</span>\r\n\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n\t\t</mat-option>\r\n\t</ng-template>\r\n\t<ng-container *ngIf=\"classType && opened\">\r\n\t\t<mat-option hide=\"true\"></mat-option>\r\n\t\t<vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n\t</ng-container>\r\n\t<div class=\"vd-chips-paginator\">\r\n\t\t<mat-divider></mat-divider>\r\n\t\t<mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n\t</div>\r\n</mat-autocomplete>\r\n<!-- #endregion -->\r\n\r\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center;background-color:transparent!important;margin-right:0!important;margin-left:0!important;padding:0!important;margin:0;height:initial}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.6;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-12px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "formArray", "debugValue", "classType", "context", "dataSourceFilter", "static", "filterable", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "columns", "rowMenuItems", "rowAction", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }, { kind: "component", type: i7.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "directive", type: i7.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i10.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i10.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "component", type: i11.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
|
|
515
|
+
], queries: [{ propertyName: "chipTemplate", first: true, predicate: VdChipDirective, descendants: true }, { propertyName: "autocompleteOptionTemplate", first: true, predicate: VdAutocompleteOptionDirective, descendants: true }], viewQueries: [{ propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\r\n\t<!-- #region Chips -->\r\n\t<mat-chip-row *ngFor=\"let chip of chips; let first = first; let index = index\" [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n\t\t<span class=\"vd-chip-content\">\r\n\t\t\t<span *ngIf=\"!chipTemplate?.templateRef\">\r\n\t\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{ chip }}</span>\r\n\t\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n\t\t\t</span>\r\n\t\t\t<ng-template *ngIf=\"chipTemplate?.templateRef\" [ngTemplateOutlet]=\"chipTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n\t\t</span>\r\n\t\t<a matChipTrailingIcon *ngFor=\"let button of suffixButtons; let first = first\" [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n\t\t\t<mat-icon>{{button.icon}}</mat-icon>\r\n\t\t</a>\r\n\t\t<a matChipTrailingIcon *ngIf=\"onLaunch?.observers?.length > 0\" (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n\t\t\t<mat-icon>launch</mat-icon>\r\n\t\t</a>\r\n\t\t<a matChipTrailingIcon *ngIf=\"!readonly\" (click)=\"handleRemovedEvent()\">\r\n\t\t\t<mat-icon>close</mat-icon>\r\n\t\t</a>\r\n\t</mat-chip-row>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Search box -->\r\n\t<input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Reset button -->\r\n\t<a trailingIcon *ngIf=\"(!value || empty) && !readonly && !disabled\" class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\r\n\t\t<svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\r\n\t\t\t<path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\r\n\t\t</svg>\r\n\t</a>\r\n\t<!-- #endregion -->\r\n</mat-chip-grid>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n\t<ng-template *ngIf=\"!classType && opened\" let-item let-first=\"first\" ngFor [ngForOf]=\"dataSource?.items\">\r\n\t\t<mat-option [value]=\"item\">\r\n\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{item}}</span>\r\n\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n\t\t</mat-option>\r\n\t</ng-template>\r\n\t<ng-container *ngIf=\"classType && opened\">\r\n\t\t<mat-option hide=\"true\"></mat-option>\r\n\t\t<vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n\t</ng-container>\r\n\t<div class=\"vd-chips-paginator\">\r\n\t\t<mat-divider></mat-divider>\r\n\t\t<mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n\t</div>\r\n</mat-autocomplete>\r\n<!-- #endregion -->\r\n\r\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center;background-color:transparent!important;margin-right:0!important;margin-left:0!important;padding:0!important;margin:0;height:initial}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.6;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-12px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "formArray", "debugValue", "classType", "context", "dataSourceFilter", "static", "filterable", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "columns", "rowMenuItems", "rowAction", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }, { kind: "component", type: i7.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "directive", type: i7.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i10.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i10.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "component", type: i11.MatPaginator, selector: "mat-paginator", inputs: ["disabled", "color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
|
|
516
516
|
}
|
|
517
517
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VdChipsComponent, decorators: [{
|
|
518
518
|
type: Component,
|
|
@@ -29,7 +29,7 @@ export class VdAlertDialogComponent {
|
|
|
29
29
|
<mat-dialog-content class="md-subhead" [innerHtml]="message"></mat-dialog-content>
|
|
30
30
|
<mat-dialog-actions align="end">
|
|
31
31
|
<button mat-button color="accent" (click)="close()">{{closeButton}}</button>
|
|
32
|
-
</mat-dialog-actions>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.
|
|
32
|
+
</mat-dialog-actions>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] });
|
|
33
33
|
}
|
|
34
34
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VdAlertDialogComponent, decorators: [{
|
|
35
35
|
type: Component,
|
|
@@ -36,7 +36,7 @@ export class VdConfirmDialogComponent {
|
|
|
36
36
|
<mat-dialog-actions align="end">
|
|
37
37
|
<button mat-button #closeBtn (keydown.arrowright)="acceptBtn.focus()" (click)="cancel()">{{cancelButton}}</button>
|
|
38
38
|
<button mat-button color="accent" #acceptBtn (keydown.arrowleft)="closeBtn.focus()" (click)="accept()">{{acceptButton}}</button>
|
|
39
|
-
</mat-dialog-actions>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.
|
|
39
|
+
</mat-dialog-actions>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] });
|
|
40
40
|
}
|
|
41
41
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VdConfirmDialogComponent, decorators: [{
|
|
42
42
|
type: Component,
|
|
@@ -35,7 +35,7 @@ export class VdPromptDialogComponent {
|
|
|
35
35
|
this._dialogRef.close(this.value);
|
|
36
36
|
}
|
|
37
37
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VdPromptDialogComponent, deps: [{ token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
38
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: VdPromptDialogComponent, selector: "vd-prompt-dialog", ngImport: i0, template: "<vd-dialog>\r\n\t<vd-dialog-title *ngIf=\"title\">{{title}}</vd-dialog-title>\r\n\t<vd-dialog-content layout=\"column\" class=\"md-subhead\">\r\n\t\t<span [innerHtml]=\"message\"></span>\r\n\t\t<form #form=\"ngForm\" layout=\"row\" novalidate flex>\r\n\t\t\t<mat-form-field flex>\r\n\t\t\t\t<input matInput (keydown.enter)=\"$event.preventDefault(); form.valid && accept()\" [(ngModel)]=\"value\" name=\"value\" required />\r\n\t\t\t</mat-form-field>\r\n\t\t</form>\r\n\t</vd-dialog-content>\r\n\t<vd-dialog-actions>\r\n\t\t<button mat-button #closeBtn (keydown.arrowright)=\"acceptBtn.focus()\" (click)=\"cancel()\">{{cancelButton}}</button>\r\n\t\t<button mat-button color=\"accent\" #acceptBtn (keydown.arrowleft)=\"closeBtn.focus()\" [disabled]=\"!form.valid\" (click)=\"accept()\">{{acceptButton}}</button>\r\n\t</vd-dialog-actions>\r\n</vd-dialog>", styles: ["@media (min-width: 600px){vd-dialog{width:400px}}@media (max-width: 599px){vd-dialog{width:250px}}\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ",
|
|
38
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: VdPromptDialogComponent, selector: "vd-prompt-dialog", ngImport: i0, template: "<vd-dialog>\r\n\t<vd-dialog-title *ngIf=\"title\">{{title}}</vd-dialog-title>\r\n\t<vd-dialog-content layout=\"column\" class=\"md-subhead\">\r\n\t\t<span [innerHtml]=\"message\"></span>\r\n\t\t<form #form=\"ngForm\" layout=\"row\" novalidate flex>\r\n\t\t\t<mat-form-field flex>\r\n\t\t\t\t<input matInput (keydown.enter)=\"$event.preventDefault(); form.valid && accept()\" [(ngModel)]=\"value\" name=\"value\" required />\r\n\t\t\t</mat-form-field>\r\n\t\t</form>\r\n\t</vd-dialog-content>\r\n\t<vd-dialog-actions>\r\n\t\t<button mat-button #closeBtn (keydown.arrowright)=\"acceptBtn.focus()\" (click)=\"cancel()\">{{cancelButton}}</button>\r\n\t\t<button mat-button color=\"accent\" #acceptBtn (keydown.arrowleft)=\"closeBtn.focus()\" [disabled]=\"!form.valid\" (click)=\"accept()\">{{acceptButton}}</button>\r\n\t</vd-dialog-actions>\r\n</vd-dialog>", styles: ["@media (min-width: 600px){vd-dialog{width:400px}}@media (max-width: 599px){vd-dialog{width:250px}}\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i7.VdDialogComponent, selector: "vd-dialog" }, { kind: "directive", type: i7.VdDialogTitleDirective, selector: "vd-dialog-title" }, { kind: "directive", type: i7.VdDialogActionsDirective, selector: "vd-dialog-actions" }, { kind: "directive", type: i7.VdDialogContentDirective, selector: "vd-dialog-content" }] });
|
|
39
39
|
}
|
|
40
40
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VdPromptDialogComponent, decorators: [{
|
|
41
41
|
type: Component,
|
|
@@ -281,7 +281,7 @@ export class VdFileInputComponent {
|
|
|
281
281
|
<mat-icon>close</mat-icon>
|
|
282
282
|
</button>
|
|
283
283
|
</div>
|
|
284
|
-
</div>`, isInline: true, styles: [".btn-suffix .mat-mdc-icon-button{position:absolute;right:-16px;top:0}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]",
|
|
284
|
+
</div>`, isInline: true, styles: [".btn-suffix .mat-mdc-icon-button{position:absolute;right:-16px;top:0}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] });
|
|
285
285
|
}
|
|
286
286
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VdFileInputComponent, decorators: [{
|
|
287
287
|
type: Component,
|
|
@@ -72,7 +72,7 @@ export class DatePickerHeaderComponent {
|
|
|
72
72
|
this.destroyed.complete();
|
|
73
73
|
}
|
|
74
74
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DatePickerHeaderComponent, deps: [{ token: i1.MatCalendar }, { token: i2.DateAdapter }, { token: MAT_DATE_FORMATS }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
75
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DatePickerHeaderComponent, selector: "vd-datepicker-header", ngImport: i0, template: "<div class=\"header\">\r\n\t<button type=\"button\" mat-icon-button (click)=\"previousClicked('year')\">\r\n\t\t<mat-icon>keyboard_double_arrow_left</mat-icon>\r\n\t</button>\r\n\t<button type=\"button\" mat-icon-button (click)=\"previousClicked('month')\">\r\n\t\t<mat-icon>keyboard_arrow_left</mat-icon>\r\n\t</button>\r\n\t<span class=\"header-label\">{{periodLabel}}</span>\r\n\t<button type=\"button\" mat-icon-button (click)=\"nextClicked('month')\">\r\n\t\t<mat-icon>keyboard_arrow_right</mat-icon>\r\n\t</button>\r\n\t<button type=\"button\" mat-icon-button (click)=\"nextClicked('year')\">\r\n\t\t<mat-icon>keyboard_double_arrow_right</mat-icon>\r\n\t</button>\r\n</div>", styles: [".header{display:flex;align-items:center;padding:.5em}.header-label{flex:1;height:1em;font-weight:500;text-align:center}\n"], dependencies: [{ kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]",
|
|
75
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DatePickerHeaderComponent, selector: "vd-datepicker-header", ngImport: i0, template: "<div class=\"header\">\r\n\t<button type=\"button\" mat-icon-button (click)=\"previousClicked('year')\">\r\n\t\t<mat-icon>keyboard_double_arrow_left</mat-icon>\r\n\t</button>\r\n\t<button type=\"button\" mat-icon-button (click)=\"previousClicked('month')\">\r\n\t\t<mat-icon>keyboard_arrow_left</mat-icon>\r\n\t</button>\r\n\t<span class=\"header-label\">{{periodLabel}}</span>\r\n\t<button type=\"button\" mat-icon-button (click)=\"nextClicked('month')\">\r\n\t\t<mat-icon>keyboard_arrow_right</mat-icon>\r\n\t</button>\r\n\t<button type=\"button\" mat-icon-button (click)=\"nextClicked('year')\">\r\n\t\t<mat-icon>keyboard_double_arrow_right</mat-icon>\r\n\t</button>\r\n</div>", styles: [".header{display:flex;align-items:center;padding:.5em}.header-label{flex:1;height:1em;font-weight:500;text-align:center}\n"], dependencies: [{ kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
76
76
|
}
|
|
77
77
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DatePickerHeaderComponent, decorators: [{
|
|
78
78
|
type: Component,
|
|
@@ -380,7 +380,7 @@ export class VdGenericFormComponent {
|
|
|
380
380
|
console.log(message, optionalParams);
|
|
381
381
|
}
|
|
382
382
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VdGenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
383
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: { formGroup: "formGroup", classType: "classType", formDefinition: "formDefinition", fieldGroups: "fieldGroups", groupName: "groupName", fieldSets: "fieldSets", context: "context", debugValue: "debugValue", readonly: "readonly", separatorKeysCodes: "separatorKeysCodes" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: VdEditorDirective, descendants: true }, { propertyName: "codeTemplate", first: true, predicate: VdCodeDirective, descendants: true }, { propertyName: "fileTemplate", first: true, predicate: VdFileDirective, descendants: true }, { propertyName: "customTemplate", first: true, predicate: VdCustomDirective, descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "customFields", first: true, predicate: ["customFields"], descendants: true }, { propertyName: "customFieldsTemplates", predicate: VdGenericFormCustomFieldDirective }], ngImport: i0, template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n <!-- #region Fields -->\r\n <ng-container *ngFor=\"let fields of fieldRows; let i = index\">\r\n <div layout-gt-sm=\"row\" layout=\"column\">\r\n <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n <ng-container *ngIf=\"!field.hide || !field.hide(formValue, formGroup, context)\">\r\n <ng-container *ngIf=\"field.wrapped\">\r\n <!-- #region Text input -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name\" [readonly]=\"readonly || (field.readonly && field.readonly(formValue, formGroup, context))\">\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Textarea -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\" [readonly]=\"readonly || (field.readonly && field.readonly(formValue, formGroup, context))\"></textarea>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Enum -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <vd-select [formControlName]=\"field.name\" [enum]=\"field.enumType\" [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"readonly || (field.readonly && field.readonly(formValue, formGroup, context))\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" layout=\"row\" flex>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n </vd-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region VdSelect -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <vd-select [formControlName]=\"field.name\" [endpoint]=\"field.endpoint | func:formValue:formGroup:context\" [params]=\"field.params | func:formValue:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [selectFirst]=\"field.selectFirst\" [readonly]=\"readonly || (field.readonly && field.readonly(formValue, formGroup, context))\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" layout=\"row\" flex>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerMapper && field.multiple && field.triggerMode == 'chip'\">\r\n <span *ngFor=\"let item of trigger\" class=\"mat-mdc-chip mat-mdc-standard-chip mat-primary mat-mdc-chip-selected\">\r\n <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\r\n </span>\r\n </ng-template>\r\n <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n </vd-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region VdList -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.VdList\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <vd-list [formControlName]=\"field.name\" [endpoint]=\"field.endpoint | func:formValue:formGroup:context\" [params]=\"field.params | func:formValue:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"readonly || (field.readonly && field.readonly(formValue, formGroup, context))\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" [style.max-width]=\"field.maxWidth\" [style.max-height]=\"field.maxHeight\" flex>\r\n <ng-template vd-list-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n </vd-list>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Chips -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <mat-chip-grid #chipList [formControlName]=\"field.name\" [disableControl]=\"readonly || (field.readonly && field.readonly(formValue, formGroup, context))\">\r\n <mat-chip-row *ngFor=\"let chip of formGroup.controls[field.name]?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n <span>{{chip}}</span>\r\n <button matChipRemove>\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n <input [placeholder]=\"$any(field.label)\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matAutocomplete]=\"chipAutocomplete\" (input)=\"filterAutocomplete(field, chipInput)\" (matChipInputTokenEnd)=\"addChip(field, $event)\" autocomplete=\"off\">\r\n </mat-chip-grid>\r\n <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\r\n <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name]\" [value]=\"option.id\">\r\n {{option.name}}\r\n </mat-option>\r\n </mat-autocomplete>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region VdChips -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"field.endpoint | func:formValue:formGroup:context\" [params]=\"field.params | func:formValue:formGroup:context\" [searchField]=\"field.searchField\" [classType]=\"field.classType\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [readonly]=\"readonly || (field.readonly && field.readonly(formValue, formGroup, context))\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" [autocompleteCssClass]=\"field.autocompleteCssClass\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\" [customValue]=\"field.customValue\" layout=\"row\" flex>\r\n <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\r\n </ng-template>\r\n <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\r\n </ng-template>\r\n </vd-chips>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Select -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <mat-select [formControlName]=\"field.name\" [multiple]=\"field.multiple\" [disableControl]=\"readonly || (field.readonly && field.readonly(formValue, formGroup, context))\" flex>\r\n <mat-option *ngFor=\"let option of $any(field.options)\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n </mat-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Autocomplete -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input type=\"text\" matInput [formControlName]=\"field.name\" [min]=\"field.min\" [max]=\"field.max\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"readonly || (field.readonly && field.readonly(formValue, formGroup, context))\">\r\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\r\n <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name]\" [value]=\"option.id\">\r\n {{option.name}}\r\n </mat-option>\r\n </mat-autocomplete>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Date -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input matInput [formControlName]=\"field.name\" [min]=\"field.min\" [max]=\"field.max\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [matDatepickerFilter]=\"field.dateFilter\" [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\">\r\n <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #datePicker [disabled]=\"readonly || (field.readonly && field.readonly(formValue, formGroup, context))\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Calendar -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Calendar\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input input=\"hidden\" hidden matInput [formControlName]=\"field.name\">\r\n <mat-calendar #calendar [selected]=\"formGroup.get(field.name).value\" (selectedChange)=\"formGroup.get(field.name).setValue($event);\" (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\" [headerComponent]=\"datePickerHeaderComponent\" style=\"width: 100%;\"></mat-calendar>\r\n <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n </ng-container>\r\n\r\n <!-- #region Checkbox -->\r\n <div *ngSwitchCase=\"FormFieldType.Checkbox\" [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\r\n <mat-checkbox [formControlName]=\"field.name\" [disableControl]=\"readonly || (field.readonly && field.readonly(formValue, formGroup, context))\">{{field.label}}</mat-checkbox>\r\n <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n </div>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Editor -->\r\n <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n <ng-template *ngIf=\"editorTemplate?.templateRef\" [ngTemplateOutlet]=\"editorTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Code -->\r\n <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n <ng-template *ngIf=\"codeTemplate?.templateRef\" [ngTemplateOutlet]=\"codeTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region File -->\r\n <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <div vd-file-input [formControlName]=\"field.name\" (select)=\"field.change && field.change(field, $event, formGroup, context)\" [accept]=\"field.fileExtensions\" [disableControl]=\"readonly || (field.readonly && field.readonly(formValue, formGroup, context))\" flex></div>\r\n </mat-form-field>\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Custom -->\r\n <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n <ng-template *ngIf=\"customTemplate?.templateRef\" [ngTemplateOutlet]=\"customTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- #region Template for custom fields -->\r\n <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n <ng-template *ngIf=\"customField?.templateRef && customField.row == fields[0]?.row && customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </div>\r\n\r\n <!-- #region Template for custom fields -->\r\n <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0]?.row + 1}\"></ng-container>\r\n <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n <ng-template *ngIf=\"customField?.templateRef && customField.row == (fields[0]?.row+1) && !customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Form bottom -->\r\n <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Template for suffix buttons -->\r\n <ng-template #suffixButtons let-field>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Debug value -->\r\n <code *ngIf=\"debugValue\">\r\n <pre>{{formValue | json}}</pre>\r\n </code>\r\n <!-- #endregion -->\r\n</div>", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mdc-typography-caption-font-size, 12px)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "component", type: i3.VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass", "triggerMode"] }, { kind: "directive", type: i4.VdSelectOptionDirective, selector: "[vd-select-option]ng-template" }, { kind: "directive", type: i5.VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template" }, { kind: "component", type: i6.VdChipsComponent, selector: "vd-chips", inputs: ["classType", "chips", "endpoint", "params", "projection", "paginated", "customValue", "context", "key", "searchField", "searchFields", "removable", "debounce", "autocompleteCssClass", "suffixButtons"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { kind: "directive", type: i7.VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { kind: "directive", type: i8.VdChipDirective, selector: "[vd-chip]ng-template" }, { kind: "component", type: i9.VdFileInputComponent, selector: "[vd-file-input]", inputs: ["accept", "placeholder", "required", "multiple", "disabled", "errorState"], outputs: ["select", "clear"] }, { kind: "component", type: i10.VdListComponent, selector: "vd-list" }, { kind: "directive", type: i11.VdListOptionDirective, selector: "[vd-list-option]ng-template" }, { kind: "directive", type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i12.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i12.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i12.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i12.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i12.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i13.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i13.MatLabel, selector: "mat-label" }, { kind: "directive", type: i13.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i13.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i13.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i14.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i15.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i16.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i17.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i18.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i19.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: i19.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i19.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i19.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i20.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i21.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i21.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i22.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i22.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i22.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i22.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "directive", type: i23.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: i24.MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { kind: "directive", type: i25.EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }, { kind: "pipe", type: i26.FuncPipe, name: "func" }] });
|
|
383
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: { formGroup: "formGroup", classType: "classType", formDefinition: "formDefinition", fieldGroups: "fieldGroups", groupName: "groupName", fieldSets: "fieldSets", context: "context", debugValue: "debugValue", readonly: "readonly", separatorKeysCodes: "separatorKeysCodes" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: VdEditorDirective, descendants: true }, { propertyName: "codeTemplate", first: true, predicate: VdCodeDirective, descendants: true }, { propertyName: "fileTemplate", first: true, predicate: VdFileDirective, descendants: true }, { propertyName: "customTemplate", first: true, predicate: VdCustomDirective, descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "customFields", first: true, predicate: ["customFields"], descendants: true }, { propertyName: "customFieldsTemplates", predicate: VdGenericFormCustomFieldDirective }], ngImport: i0, template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n <!-- #region Fields -->\r\n <ng-container *ngFor=\"let fields of fieldRows; let i = index\">\r\n <div layout-gt-sm=\"row\" layout=\"column\">\r\n <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n <ng-container *ngIf=\"!field.hide || !field.hide(formValue, formGroup, context)\">\r\n <ng-container *ngIf=\"field.wrapped\">\r\n <!-- #region Text input -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name\" [readonly]=\"readonly || (field.readonly && field.readonly(formValue, formGroup, context))\">\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Textarea -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\" [readonly]=\"readonly || (field.readonly && field.readonly(formValue, formGroup, context))\"></textarea>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Enum -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <vd-select [formControlName]=\"field.name\" [enum]=\"field.enumType\" [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"readonly || (field.readonly && field.readonly(formValue, formGroup, context))\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" layout=\"row\" flex>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n </vd-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region VdSelect -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <vd-select [formControlName]=\"field.name\" [endpoint]=\"field.endpoint | func:formValue:formGroup:context\" [params]=\"field.params | func:formValue:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [selectFirst]=\"field.selectFirst\" [readonly]=\"readonly || (field.readonly && field.readonly(formValue, formGroup, context))\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" layout=\"row\" flex>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerMapper && field.multiple && field.triggerMode == 'chip'\">\r\n <span *ngFor=\"let item of trigger\" class=\"mat-mdc-chip mat-mdc-standard-chip mat-primary mat-mdc-chip-selected\">\r\n <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\r\n </span>\r\n </ng-template>\r\n <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n </vd-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region VdList -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.VdList\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <vd-list [formControlName]=\"field.name\" [endpoint]=\"field.endpoint | func:formValue:formGroup:context\" [params]=\"field.params | func:formValue:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"readonly || (field.readonly && field.readonly(formValue, formGroup, context))\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" [style.max-width]=\"field.maxWidth\" [style.max-height]=\"field.maxHeight\" flex>\r\n <ng-template vd-list-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n </vd-list>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Chips -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <mat-chip-grid #chipList [formControlName]=\"field.name\" [disableControl]=\"readonly || (field.readonly && field.readonly(formValue, formGroup, context))\">\r\n <mat-chip-row *ngFor=\"let chip of formGroup.controls[field.name]?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n <span>{{chip}}</span>\r\n <button matChipRemove>\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n <input [placeholder]=\"$any(field.label)\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matAutocomplete]=\"chipAutocomplete\" (input)=\"filterAutocomplete(field, chipInput)\" (matChipInputTokenEnd)=\"addChip(field, $event)\" autocomplete=\"off\">\r\n </mat-chip-grid>\r\n <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\r\n <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name]\" [value]=\"option.id\">\r\n {{option.name}}\r\n </mat-option>\r\n </mat-autocomplete>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region VdChips -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"field.endpoint | func:formValue:formGroup:context\" [params]=\"field.params | func:formValue:formGroup:context\" [searchField]=\"field.searchField\" [classType]=\"field.classType\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [readonly]=\"readonly || (field.readonly && field.readonly(formValue, formGroup, context))\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" [autocompleteCssClass]=\"field.autocompleteCssClass\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\" [customValue]=\"field.customValue\" layout=\"row\" flex>\r\n <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\r\n </ng-template>\r\n <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\r\n </ng-template>\r\n </vd-chips>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Select -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <mat-select [formControlName]=\"field.name\" [multiple]=\"field.multiple\" [disableControl]=\"readonly || (field.readonly && field.readonly(formValue, formGroup, context))\" flex>\r\n <mat-option *ngFor=\"let option of $any(field.options)\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n </mat-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Autocomplete -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input type=\"text\" matInput [formControlName]=\"field.name\" [min]=\"field.min\" [max]=\"field.max\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"readonly || (field.readonly && field.readonly(formValue, formGroup, context))\">\r\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\r\n <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name]\" [value]=\"option.id\">\r\n {{option.name}}\r\n </mat-option>\r\n </mat-autocomplete>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Date -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input matInput [formControlName]=\"field.name\" [min]=\"field.min\" [max]=\"field.max\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [matDatepickerFilter]=\"field.dateFilter\" [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\">\r\n <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #datePicker [disabled]=\"readonly || (field.readonly && field.readonly(formValue, formGroup, context))\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Calendar -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Calendar\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input input=\"hidden\" hidden matInput [formControlName]=\"field.name\">\r\n <mat-calendar #calendar [selected]=\"formGroup.get(field.name).value\" (selectedChange)=\"formGroup.get(field.name).setValue($event);\" (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\" [headerComponent]=\"datePickerHeaderComponent\" style=\"width: 100%;\"></mat-calendar>\r\n <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n </ng-container>\r\n\r\n <!-- #region Checkbox -->\r\n <div *ngSwitchCase=\"FormFieldType.Checkbox\" [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\r\n <mat-checkbox [formControlName]=\"field.name\" [disableControl]=\"readonly || (field.readonly && field.readonly(formValue, formGroup, context))\">{{field.label}}</mat-checkbox>\r\n <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n </div>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Editor -->\r\n <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n <ng-template *ngIf=\"editorTemplate?.templateRef\" [ngTemplateOutlet]=\"editorTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Code -->\r\n <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n <ng-template *ngIf=\"codeTemplate?.templateRef\" [ngTemplateOutlet]=\"codeTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region File -->\r\n <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <div vd-file-input [formControlName]=\"field.name\" (select)=\"field.change && field.change(field, $event, formGroup, context)\" [accept]=\"field.fileExtensions\" [disableControl]=\"readonly || (field.readonly && field.readonly(formValue, formGroup, context))\" flex></div>\r\n </mat-form-field>\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Custom -->\r\n <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n <ng-template *ngIf=\"customTemplate?.templateRef\" [ngTemplateOutlet]=\"customTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- #region Template for custom fields -->\r\n <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n <ng-template *ngIf=\"customField?.templateRef && customField.row == fields[0]?.row && customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </div>\r\n\r\n <!-- #region Template for custom fields -->\r\n <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0]?.row + 1}\"></ng-container>\r\n <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n <ng-template *ngIf=\"customField?.templateRef && customField.row == (fields[0]?.row+1) && !customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Form bottom -->\r\n <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Template for suffix buttons -->\r\n <ng-template #suffixButtons let-field>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Debug value -->\r\n <code *ngIf=\"debugValue\">\r\n <pre>{{formValue | json}}</pre>\r\n </code>\r\n <!-- #endregion -->\r\n</div>", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mdc-typography-caption-font-size, 12px)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "component", type: i3.VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass", "triggerMode"] }, { kind: "directive", type: i4.VdSelectOptionDirective, selector: "[vd-select-option]ng-template" }, { kind: "directive", type: i5.VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template" }, { kind: "component", type: i6.VdChipsComponent, selector: "vd-chips", inputs: ["classType", "chips", "endpoint", "params", "projection", "paginated", "customValue", "context", "key", "searchField", "searchFields", "removable", "debounce", "autocompleteCssClass", "suffixButtons"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { kind: "directive", type: i7.VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { kind: "directive", type: i8.VdChipDirective, selector: "[vd-chip]ng-template" }, { kind: "component", type: i9.VdFileInputComponent, selector: "[vd-file-input]", inputs: ["accept", "placeholder", "required", "multiple", "disabled", "errorState"], outputs: ["select", "clear"] }, { kind: "component", type: i10.VdListComponent, selector: "vd-list" }, { kind: "directive", type: i11.VdListOptionDirective, selector: "[vd-list-option]ng-template" }, { kind: "directive", type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i12.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i12.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i12.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i12.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i12.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i13.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i13.MatLabel, selector: "mat-label" }, { kind: "directive", type: i13.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i13.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i13.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i14.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "aria-describedby", "panelClass", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i15.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i16.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i17.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i18.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i19.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: i19.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i19.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i19.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i20.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i21.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i21.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i22.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i22.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i22.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i22.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "directive", type: i23.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: i24.MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { kind: "directive", type: i25.EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }, { kind: "pipe", type: i26.FuncPipe, name: "func" }] });
|
|
384
384
|
}
|
|
385
385
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VdGenericFormComponent, decorators: [{
|
|
386
386
|
type: Component,
|
|
@@ -77,7 +77,7 @@ export class VdDynamicMenuComponent {
|
|
|
77
77
|
}, { once: true });
|
|
78
78
|
}
|
|
79
79
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VdDynamicMenuComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
80
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: { items: "items", data: "data", index: "index", context: "context", contextMenu: "contextMenu" }, viewQueries: [{ propertyName: "matMenu", first: true, predicate: MatMenu, descendants: true }, { propertyName: "contextMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div layout=\"row\" layout-align=\"start center\" *ngIf=\"items\" flex>\r\n <ng-container *ngFor=\"let menu of items\">\r\n <!-- #region Button trigger -->\r\n <a mat-icon-button [mat-menu-trigger-for]=\"matMenu\" *ngIf=\"!contextMenu && menu?.items?.length && !(menu.hide && menu.hide(data, context, index))\" [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context, index))\" (click)=\"$event.stopPropagation();\">\r\n <mat-icon fontSet=\"{{menu.iconFontSet}}\" [class]=\"menu.iconClass | func:data:context\">{{(menu.icon | func:data:context) || 'more_vert'}}</mat-icon>\r\n <span>{{menu.title}}</span>\r\n </a>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Context trigger -->\r\n <div *ngIf=\"contextMenu\" style=\"visibility: hidden; position: fixed\" [style.left]=\"contextMenuPosition.x\" [style.top]=\"contextMenuPosition.y\" [matMenuTriggerFor]=\"matMenu\"></div>\r\n <!-- #endregion -->\r\n\r\n <a mat-icon-button *ngIf=\"!menu?.items?.length && !(menu.hide && menu.hide(data, context, index))\" [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context, index))\" (click)=\"$event.stopPropagation(); menu.event?menu.event(data, context, index):null\">\r\n <mat-icon fontSet=\"{{menu.iconFontSet}}\" [class]=\"menu.iconClass | func:data:context\">{{(menu.icon | func:data:context) || 'radio_button_unchecked'}}</mat-icon>\r\n </a>\r\n <mat-menu x-position=\"before\" #matMenu=\"matMenu\">\r\n <ng-container *ngFor=\"let menuItem of menu?.items\">\r\n <ng-container *ngIf=\"!menuItem.items\">\r\n <a mat-menu-item (click)=\"menuItem.event?menuItem.event(data, context, index):null\" *ngIf=\"!menuItem.hide || !menuItem.hide(data, context, index)\" [disabled]=\"menuItem.disable && menuItem.disable(data, context, index)\">\r\n <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass | func:data:context\">{{(menuItem.icon | func:data:context) || 'radio_button_unchecked'}}</mat-icon>\r\n <span>{{menuItem.title}}</span>\r\n </a>\r\n </ng-container>\r\n <ng-container *ngIf=\"menuItem.items\">\r\n <mat-menu x-position=\"before\" #subMenu=\"matMenu\">\r\n <ng-container *ngFor=\"let menuSubItem of menuItem.items\">\r\n <a mat-menu-item (click)=\"menuSubItem.event?menuSubItem.event(data, context, index):null\" *ngIf=\"!menuSubItem.hide || !menuSubItem.hide(data, context, index)\" [disabled]=\"menuSubItem.disable && menuSubItem.disable(data, context, index)\">\r\n <mat-icon fontSet=\"{{menuSubItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuSubItem.iconClass | func:data:context\">{{(menuSubItem.icon | func:data:context) || 'radio_button_unchecked'}}</mat-icon>\r\n <span>{{menuSubItem.title}}</span>\r\n </a>\r\n </ng-container>\r\n </mat-menu>\r\n <a mat-menu-item [matMenuTriggerFor]=\"subMenu\" *ngIf=\"!menuItem.hide || !menuItem.hide(data, context, index)\" [disabled]=\"menuItem.disable && menuItem.disable(data, context, index)\">\r\n <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass | func:data:context\">{{(menuItem.icon | func:data:context) || 'radio_button_unchecked'}}</mat-icon>\r\n <span>{{menuItem.title}}</span>\r\n </a>\r\n </ng-container>\r\n </ng-container>\r\n </mat-menu>\r\n </ng-container>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIconAnchor, selector: "a[mat-icon-button]",
|
|
80
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: { items: "items", data: "data", index: "index", context: "context", contextMenu: "contextMenu" }, viewQueries: [{ propertyName: "matMenu", first: true, predicate: MatMenu, descendants: true }, { propertyName: "contextMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div layout=\"row\" layout-align=\"start center\" *ngIf=\"items\" flex>\r\n <ng-container *ngFor=\"let menu of items\">\r\n <!-- #region Button trigger -->\r\n <a mat-icon-button [mat-menu-trigger-for]=\"matMenu\" *ngIf=\"!contextMenu && menu?.items?.length && !(menu.hide && menu.hide(data, context, index))\" [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context, index))\" (click)=\"$event.stopPropagation();\">\r\n <mat-icon fontSet=\"{{menu.iconFontSet}}\" [class]=\"menu.iconClass | func:data:context\">{{(menu.icon | func:data:context) || 'more_vert'}}</mat-icon>\r\n <span>{{menu.title}}</span>\r\n </a>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Context trigger -->\r\n <div *ngIf=\"contextMenu\" style=\"visibility: hidden; position: fixed\" [style.left]=\"contextMenuPosition.x\" [style.top]=\"contextMenuPosition.y\" [matMenuTriggerFor]=\"matMenu\"></div>\r\n <!-- #endregion -->\r\n\r\n <a mat-icon-button *ngIf=\"!menu?.items?.length && !(menu.hide && menu.hide(data, context, index))\" [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context, index))\" (click)=\"$event.stopPropagation(); menu.event?menu.event(data, context, index):null\">\r\n <mat-icon fontSet=\"{{menu.iconFontSet}}\" [class]=\"menu.iconClass | func:data:context\">{{(menu.icon | func:data:context) || 'radio_button_unchecked'}}</mat-icon>\r\n </a>\r\n <mat-menu x-position=\"before\" #matMenu=\"matMenu\">\r\n <ng-container *ngFor=\"let menuItem of menu?.items\">\r\n <ng-container *ngIf=\"!menuItem.items\">\r\n <a mat-menu-item (click)=\"menuItem.event?menuItem.event(data, context, index):null\" *ngIf=\"!menuItem.hide || !menuItem.hide(data, context, index)\" [disabled]=\"menuItem.disable && menuItem.disable(data, context, index)\">\r\n <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass | func:data:context\">{{(menuItem.icon | func:data:context) || 'radio_button_unchecked'}}</mat-icon>\r\n <span>{{menuItem.title}}</span>\r\n </a>\r\n </ng-container>\r\n <ng-container *ngIf=\"menuItem.items\">\r\n <mat-menu x-position=\"before\" #subMenu=\"matMenu\">\r\n <ng-container *ngFor=\"let menuSubItem of menuItem.items\">\r\n <a mat-menu-item (click)=\"menuSubItem.event?menuSubItem.event(data, context, index):null\" *ngIf=\"!menuSubItem.hide || !menuSubItem.hide(data, context, index)\" [disabled]=\"menuSubItem.disable && menuSubItem.disable(data, context, index)\">\r\n <mat-icon fontSet=\"{{menuSubItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuSubItem.iconClass | func:data:context\">{{(menuSubItem.icon | func:data:context) || 'radio_button_unchecked'}}</mat-icon>\r\n <span>{{menuSubItem.title}}</span>\r\n </a>\r\n </ng-container>\r\n </mat-menu>\r\n <a mat-menu-item [matMenuTriggerFor]=\"subMenu\" *ngIf=\"!menuItem.hide || !menuItem.hide(data, context, index)\" [disabled]=\"menuItem.disable && menuItem.disable(data, context, index)\">\r\n <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass | func:data:context\">{{(menuItem.icon | func:data:context) || 'radio_button_unchecked'}}</mat-icon>\r\n <span>{{menuItem.title}}</span>\r\n </a>\r\n </ng-container>\r\n </ng-container>\r\n </mat-menu>\r\n </ng-container>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: i5.FuncPipe, name: "func" }] });
|
|
81
81
|
}
|
|
82
82
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VdDynamicMenuComponent, decorators: [{
|
|
83
83
|
type: Component,
|
|
@@ -117,7 +117,7 @@ export class VdLayoutManageListComponent {
|
|
|
117
117
|
*/
|
|
118
118
|
close() { return this.sidenav.close(); }
|
|
119
119
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VdLayoutManageListComponent, deps: [{ token: forwardRef(() => VdLayoutComponent) }, { token: i1.VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
|
|
120
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: VdLayoutManageListComponent, selector: "vd-layout-manage-list", inputs: { title: "title", closable: "closable", menuItems: "menuItems", mode: "mode", sideGt: "sideGt", opened: "opened", openedGt: "openedGt", sidenavWidth: "sidenavWidth", sidenavGtXsWidth: "sidenavGtXsWidth" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container fullscreen class=\"vd-layout-manage-list\">\r\n\t<!-- #region Side nav -->\r\n\t<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened && !mini\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\">\r\n\t\t<!-- #region Nav list toolbar -->\r\n\t\t<mat-toolbar dense *ngIf=\"title\">\r\n\t\t\t<span>{{title}}</span>\r\n\t\t\t<span flex></span>\r\n\t\t\t<button mat-icon-button (click)=\"close()\" *ngIf=\"closable\">\r\n\t\t\t\t<mat-icon>menu_open</mat-icon>\r\n\t\t\t</button>\r\n\t\t</mat-toolbar>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom title toolbar -->\r\n\t\t<ng-content select=\"mat-toolbar[vd-sidenav-content]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<div class=\"vd-layout-manage-list-sidenav\" cdkScrollable>\r\n\t\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t\t\t<ng-content select=\"vd-menu\"></ng-content>\r\n\t\t\t<vd-menu [items]=\"menuItems\" *ngIf=\"menuItems\"></vd-menu>\r\n\t\t</div>\r\n\t</mat-sidenav>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Main content -->\r\n\t<div class=\"vd-layout-manage-list-main\">\r\n\t\t<!-- #region Toolbar projection -->\r\n\t\t<ng-content select=\"mat-toolbar\"></ng-content>\r\n\t\t<!-- <ng-content select=\"vd-list-toolbar\"></ng-content> -->\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Scrollable content -->\r\n\t\t<div class=\"vd-layout-manage-list-content\" cdkScrollable>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</div>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Footer content -->\r\n\t\t<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\t</div>\r\n\t<!-- #endregion -->\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list{flex:1}:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opened,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opening,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closed,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host mat-sidenav-container.vd-layout-manage-list ::ng-deep .mat-drawer-inner-container{overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list ::ng-deep .mat-drawer-inner-container .mat-mdc-list-item .mat-mdc-list-item-title{overflow:hidden;text-overflow:ellipsis;display:inline}:host .vd-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;flex-direction:column;box-sizing:border-box;display:flex}:host .vd-layout-manage-list-main .vd-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>mat-sidenav{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}:host ::ng-deep .mat-toolbar{font-weight:400;display:flex;align-items:center}:host ::ng-deep .mat-toolbar *{overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .mat-toolbar>.mdc-icon-button{margin-right:-2px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]",
|
|
120
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: VdLayoutManageListComponent, selector: "vd-layout-manage-list", inputs: { title: "title", closable: "closable", menuItems: "menuItems", mode: "mode", sideGt: "sideGt", opened: "opened", openedGt: "openedGt", sidenavWidth: "sidenavWidth", sidenavGtXsWidth: "sidenavGtXsWidth" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container fullscreen class=\"vd-layout-manage-list\">\r\n\t<!-- #region Side nav -->\r\n\t<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened && !mini\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\">\r\n\t\t<!-- #region Nav list toolbar -->\r\n\t\t<mat-toolbar dense *ngIf=\"title\">\r\n\t\t\t<span>{{title}}</span>\r\n\t\t\t<span flex></span>\r\n\t\t\t<button mat-icon-button (click)=\"close()\" *ngIf=\"closable\">\r\n\t\t\t\t<mat-icon>menu_open</mat-icon>\r\n\t\t\t</button>\r\n\t\t</mat-toolbar>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom title toolbar -->\r\n\t\t<ng-content select=\"mat-toolbar[vd-sidenav-content]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<div class=\"vd-layout-manage-list-sidenav\" cdkScrollable>\r\n\t\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t\t\t<ng-content select=\"vd-menu\"></ng-content>\r\n\t\t\t<vd-menu [items]=\"menuItems\" *ngIf=\"menuItems\"></vd-menu>\r\n\t\t</div>\r\n\t</mat-sidenav>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Main content -->\r\n\t<div class=\"vd-layout-manage-list-main\">\r\n\t\t<!-- #region Toolbar projection -->\r\n\t\t<ng-content select=\"mat-toolbar\"></ng-content>\r\n\t\t<!-- <ng-content select=\"vd-list-toolbar\"></ng-content> -->\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Scrollable content -->\r\n\t\t<div class=\"vd-layout-manage-list-content\" cdkScrollable>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</div>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Footer content -->\r\n\t\t<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\t</div>\r\n\t<!-- #endregion -->\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list{flex:1}:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opened,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opening,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closed,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host mat-sidenav-container.vd-layout-manage-list ::ng-deep .mat-drawer-inner-container{overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list ::ng-deep .mat-drawer-inner-container .mat-mdc-list-item .mat-mdc-list-item-title{overflow:hidden;text-overflow:ellipsis;display:inline}:host .vd-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;flex-direction:column;box-sizing:border-box;display:flex}:host .vd-layout-manage-list-main .vd-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>mat-sidenav{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}:host ::ng-deep .mat-toolbar{font-weight:400;display:flex;align-items:center}:host ::ng-deep .mat-toolbar *{overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .mat-toolbar>.mdc-icon-button{margin-right:-2px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.VdMenuComponent, selector: "vd-menu", inputs: ["items", "activeExact", "fontSet", "avatar"], outputs: ["click", "over", "out"] }] });
|
|
121
121
|
}
|
|
122
122
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VdLayoutManageListComponent, decorators: [{
|
|
123
123
|
type: Component,
|
|
@@ -109,7 +109,7 @@ export class VdLayoutNavComponent {
|
|
|
109
109
|
}
|
|
110
110
|
}
|
|
111
111
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VdLayoutNavComponent, deps: [{ token: i1.Router, optional: true }, { token: i1.ActivatedRoute, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
112
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: VdLayoutNavComponent, selector: "vd-layout-nav", inputs: { toolbarTitle: "toolbarTitle", editMode: "editMode", actions: "actions", data: "data", context: "context", icon: "icon", logo: "logo", color: "color", hideToggle: "hideToggle", backNavigationRoute: "backNavigationRoute", navigationRoute: "navigationRoute" }, outputs: { reload: "reload" }, ngImport: i0, template: "<div class=\"vd-layout-nav-wrapper\">\r\n\t<mat-toolbar [color]=\"color\" dense>\r\n\t\t<!-- #region Toggle buton -->\r\n\t\t<button mat-icon-button vd-menu-button [vdLayoutToggle]=\"true\" *ngIf=\"!hideToggle\">\r\n\t\t\t<mat-icon>menu</mat-icon>\r\n\t\t</button>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Back button -->\r\n\t\t<button mat-icon-button vd-menu-button *ngIf=\"backNavigationRouteEnabled\" (click)=\"handleBackNavigationClick()\">\r\n\t\t\t<mat-icon>arrow_back</mat-icon>\r\n\t\t</button>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom buttons -->\r\n\t\t<ng-content select=\"[vd-menu-button]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Logo with home link -->\r\n\t\t<span *ngIf=\"icon || logo || toolbarTitle\" [class.cursor-pointer]=\"routerEnabled\" (click)=\"handleNavigationClick()\" class=\"vd-layout-nav-toolbar-content\">\r\n\t\t\t<mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\r\n\t\t\t<mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\r\n\t\t\t<span *ngIf=\"toolbarTitle\">{{toolbarTitle}}</span> \r\n\t\t\t<span i18n=\"@@add\" *ngIf=\"editMode == false\">Add</span>\r\n\t\t\t<span i18n=\"@@edit\" *ngIf=\"editMode == true\">Edit</span>\r\n\t\t</span>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom content -->\r\n\t\t<ng-content select=\"[vd-toolbar-content]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<span flex></span>\r\n\r\n\t\t<!-- #region Actions -->\r\n\t\t<vd-dynamic-menu *ngIf=\"editMode==true\" [items]=\"actions\" [data]=\"data\" [context]=\"context\"></vd-dynamic-menu>\r\n\t\t<!-- #endregion-->\r\n\r\n\t\t<!-- #region Custom right content -->\r\n\t\t<ng-content select=\"[vd-toolbar-content-right]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\t</mat-toolbar>\r\n\t<div class=\"vd-layout-nav-content\" cdkScrollable>\r\n\t\t<ng-content></ng-content>\r\n\t</div>\r\n\t<ng-content select=\"vd-layout-footer\"></ng-content>\r\n</div>", styles: [".vd-menu-button{margin-left:0}::ng-deep [dir=rtl] .vd-menu-button{margin-right:0;margin-left:6px}:host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host .vd-layout-nav-wrapper{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%}:host .vd-layout-nav-wrapper .vd-layout-nav-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .vd-layout-nav-wrapper .vd-layout-nav-content{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]",
|
|
112
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: VdLayoutNavComponent, selector: "vd-layout-nav", inputs: { toolbarTitle: "toolbarTitle", editMode: "editMode", actions: "actions", data: "data", context: "context", icon: "icon", logo: "logo", color: "color", hideToggle: "hideToggle", backNavigationRoute: "backNavigationRoute", navigationRoute: "navigationRoute" }, outputs: { reload: "reload" }, ngImport: i0, template: "<div class=\"vd-layout-nav-wrapper\">\r\n\t<mat-toolbar [color]=\"color\" dense>\r\n\t\t<!-- #region Toggle buton -->\r\n\t\t<button mat-icon-button vd-menu-button [vdLayoutToggle]=\"true\" *ngIf=\"!hideToggle\">\r\n\t\t\t<mat-icon>menu</mat-icon>\r\n\t\t</button>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Back button -->\r\n\t\t<button mat-icon-button vd-menu-button *ngIf=\"backNavigationRouteEnabled\" (click)=\"handleBackNavigationClick()\">\r\n\t\t\t<mat-icon>arrow_back</mat-icon>\r\n\t\t</button>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom buttons -->\r\n\t\t<ng-content select=\"[vd-menu-button]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Logo with home link -->\r\n\t\t<span *ngIf=\"icon || logo || toolbarTitle\" [class.cursor-pointer]=\"routerEnabled\" (click)=\"handleNavigationClick()\" class=\"vd-layout-nav-toolbar-content\">\r\n\t\t\t<mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\r\n\t\t\t<mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\r\n\t\t\t<span *ngIf=\"toolbarTitle\">{{toolbarTitle}}</span> \r\n\t\t\t<span i18n=\"@@add\" *ngIf=\"editMode == false\">Add</span>\r\n\t\t\t<span i18n=\"@@edit\" *ngIf=\"editMode == true\">Edit</span>\r\n\t\t</span>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom content -->\r\n\t\t<ng-content select=\"[vd-toolbar-content]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<span flex></span>\r\n\r\n\t\t<!-- #region Actions -->\r\n\t\t<vd-dynamic-menu *ngIf=\"editMode==true\" [items]=\"actions\" [data]=\"data\" [context]=\"context\"></vd-dynamic-menu>\r\n\t\t<!-- #endregion-->\r\n\r\n\t\t<!-- #region Custom right content -->\r\n\t\t<ng-content select=\"[vd-toolbar-content-right]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\t</mat-toolbar>\r\n\t<div class=\"vd-layout-nav-content\" cdkScrollable>\r\n\t\t<ng-content></ng-content>\r\n\t</div>\r\n\t<ng-content select=\"vd-layout-footer\"></ng-content>\r\n</div>", styles: [".vd-menu-button{margin-left:0}::ng-deep [dir=rtl] .vd-menu-button{margin-right:0;margin-left:6px}:host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host .vd-layout-nav-wrapper{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%}:host .vd-layout-nav-wrapper .vd-layout-nav-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .vd-layout-nav-wrapper .vd-layout-nav-content{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.VdLayoutToggleDirective, selector: "[vdLayoutToggle]", inputs: ["vdLayoutToggle"] }, { kind: "component", type: i8.VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["items", "data", "index", "context", "contextMenu"] }] });
|
|
113
113
|
}
|
|
114
114
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VdLayoutNavComponent, decorators: [{
|
|
115
115
|
type: Component,
|
|
@@ -189,11 +189,11 @@ export class VdLayoutComponent {
|
|
|
189
189
|
this.closeMenu($event);
|
|
190
190
|
}
|
|
191
191
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VdLayoutComponent, deps: [{ token: i1.VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
|
|
192
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: VdLayoutComponent, selector: "vd-layout", inputs: { menuItems: "menuItems", mode: "mode", color: "color", opened: "opened", mini: "mini", sideGt: "sideGt", sidenavWidth: "sidenavWidth", subMenuWidth: "subMenuWidth" }, outputs: { expandedChange: "expandedChange" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }, { propertyName: "subMenuDrawer", first: true, predicate: ["subMenuDrawer"], descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container fullscreen [ngClass]=\"{'sidenav-container-mini': mini}\">\r\n\t<mat-sidenav #sidenav class=\"vd-layout-sidenav\" [mode]=\"mode\" [opened]=\"opened\" [ngClass]=\"{'sidenav-mini': mini}\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\" [disableClose]=\"disableClose\">\r\n\t\t<ng-content select=\"vd-navigation-drawer\"></ng-content>\r\n\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t</mat-sidenav>\r\n\t<mat-drawer-container fullscreen>\r\n\t\t<mat-drawer #subMenuDrawer mode=\"over\" class=\"mat-drawer-submenu\" [style.max-width]=\"subMenuWidth\" [style.min-width]=\"subMenuWidth\" (mouseleave)=\"onSubMenuMouseOut($event)\">\r\n\t\t\t<vd-menu [items]=\"menuItems\" [activeExact]=\"false\" (click)=\"closeMenu($event)\"></vd-menu>\r\n\t\t</mat-drawer>\r\n\t\t<ng-content></ng-content>\r\n\t</mat-drawer-container>\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host ::ng-deep>mat-sidenav-container>mat-sidenav{display:flex;flex-direction:column}:host ::ng-deep>mat-sidenav-container .vd-layout-menu-button{margin-left:-16px}:host ::ng-deep>mat-sidenav-container.sidenav-container-mini .vd-layout-nav-wrapper>mat-toolbar .vd-layout-menu-button{display:none!important}:host ::ng-deep>mat-sidenav-container.sidenav-container-mini .mat-drawer.mat-drawer-submenu{border-radius:0 16px 16px 0}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item{display:flex;flex-direction:column;width:80px;margin:0 auto;padding:8px 0;height:66px!important;justify-content:center}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item .mdc-list-item__content .mat-mdc-list-item-title,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item .mdc-list-item__content .mat-mdc-list-item-title{font-size:11px;font-weight:
|
|
192
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: VdLayoutComponent, selector: "vd-layout", inputs: { menuItems: "menuItems", mode: "mode", color: "color", opened: "opened", mini: "mini", sideGt: "sideGt", sidenavWidth: "sidenavWidth", subMenuWidth: "subMenuWidth" }, outputs: { expandedChange: "expandedChange" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }, { propertyName: "subMenuDrawer", first: true, predicate: ["subMenuDrawer"], descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container fullscreen [ngClass]=\"{'sidenav-container-mini': mini}\">\r\n\t<mat-sidenav #sidenav class=\"vd-layout-sidenav\" [mode]=\"mode\" [opened]=\"opened\" [ngClass]=\"{'sidenav-mini': mini}\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\" [disableClose]=\"disableClose\">\r\n\t\t<ng-content select=\"vd-navigation-drawer\"></ng-content>\r\n\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t</mat-sidenav>\r\n\t<mat-drawer-container fullscreen>\r\n\t\t<mat-drawer #subMenuDrawer mode=\"over\" class=\"mat-drawer-submenu\" [style.max-width]=\"subMenuWidth\" [style.min-width]=\"subMenuWidth\" (mouseleave)=\"onSubMenuMouseOut($event)\">\r\n\t\t\t<vd-menu [items]=\"menuItems\" [activeExact]=\"false\" (click)=\"closeMenu($event)\"></vd-menu>\r\n\t\t</mat-drawer>\r\n\t\t<ng-content></ng-content>\r\n\t</mat-drawer-container>\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host ::ng-deep>mat-sidenav-container>mat-sidenav{display:flex;flex-direction:column}:host ::ng-deep>mat-sidenav-container .vd-layout-menu-button{margin-left:-16px}:host ::ng-deep>mat-sidenav-container.sidenav-container-mini .vd-layout-nav-wrapper>mat-toolbar .vd-layout-menu-button{display:none!important}:host ::ng-deep>mat-sidenav-container.sidenav-container-mini .mat-drawer.mat-drawer-submenu{border-radius:0 16px 16px 0}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item{display:flex;flex-direction:column;width:80px;margin:0 auto;padding:8px 0;height:66px!important;justify-content:center}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item .mdc-list-item__content .mat-mdc-list-item-title,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item .mdc-list-item__content .mat-mdc-list-item-title{font-size:11px;font-weight:500;letter-spacing:.1px;padding-top:2px}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item.mat-mdc-list-item-interactive:before,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item.mat-mdc-list-item-interactive:before{background:inherit}:host ::ng-deep mat-nav-list .mdc-list-item--with-leading-icon .mat-mdc-list-item-title{overflow:hidden;text-overflow:ellipsis;display:inline!important}:host ::ng-deep mat-nav-list .mdc-list-item--with-leading-icon .mdc-list-item__start{margin-right:18px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i3.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i3.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i4.VdMenuComponent, selector: "vd-menu", inputs: ["items", "activeExact", "fontSet", "avatar"], outputs: ["click", "over", "out"] }] });
|
|
193
193
|
}
|
|
194
194
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VdLayoutComponent, decorators: [{
|
|
195
195
|
type: Component,
|
|
196
|
-
args: [{ selector: 'vd-layout', template: "<mat-sidenav-container fullscreen [ngClass]=\"{'sidenav-container-mini': mini}\">\r\n\t<mat-sidenav #sidenav class=\"vd-layout-sidenav\" [mode]=\"mode\" [opened]=\"opened\" [ngClass]=\"{'sidenav-mini': mini}\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\" [disableClose]=\"disableClose\">\r\n\t\t<ng-content select=\"vd-navigation-drawer\"></ng-content>\r\n\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t</mat-sidenav>\r\n\t<mat-drawer-container fullscreen>\r\n\t\t<mat-drawer #subMenuDrawer mode=\"over\" class=\"mat-drawer-submenu\" [style.max-width]=\"subMenuWidth\" [style.min-width]=\"subMenuWidth\" (mouseleave)=\"onSubMenuMouseOut($event)\">\r\n\t\t\t<vd-menu [items]=\"menuItems\" [activeExact]=\"false\" (click)=\"closeMenu($event)\"></vd-menu>\r\n\t\t</mat-drawer>\r\n\t\t<ng-content></ng-content>\r\n\t</mat-drawer-container>\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host ::ng-deep>mat-sidenav-container>mat-sidenav{display:flex;flex-direction:column}:host ::ng-deep>mat-sidenav-container .vd-layout-menu-button{margin-left:-16px}:host ::ng-deep>mat-sidenav-container.sidenav-container-mini .vd-layout-nav-wrapper>mat-toolbar .vd-layout-menu-button{display:none!important}:host ::ng-deep>mat-sidenav-container.sidenav-container-mini .mat-drawer.mat-drawer-submenu{border-radius:0 16px 16px 0}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item{display:flex;flex-direction:column;width:80px;margin:0 auto;padding:8px 0;height:66px!important;justify-content:center}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item .mdc-list-item__content .mat-mdc-list-item-title,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item .mdc-list-item__content .mat-mdc-list-item-title{font-size:11px;font-weight:
|
|
196
|
+
args: [{ selector: 'vd-layout', template: "<mat-sidenav-container fullscreen [ngClass]=\"{'sidenav-container-mini': mini}\">\r\n\t<mat-sidenav #sidenav class=\"vd-layout-sidenav\" [mode]=\"mode\" [opened]=\"opened\" [ngClass]=\"{'sidenav-mini': mini}\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\" [disableClose]=\"disableClose\">\r\n\t\t<ng-content select=\"vd-navigation-drawer\"></ng-content>\r\n\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t</mat-sidenav>\r\n\t<mat-drawer-container fullscreen>\r\n\t\t<mat-drawer #subMenuDrawer mode=\"over\" class=\"mat-drawer-submenu\" [style.max-width]=\"subMenuWidth\" [style.min-width]=\"subMenuWidth\" (mouseleave)=\"onSubMenuMouseOut($event)\">\r\n\t\t\t<vd-menu [items]=\"menuItems\" [activeExact]=\"false\" (click)=\"closeMenu($event)\"></vd-menu>\r\n\t\t</mat-drawer>\r\n\t\t<ng-content></ng-content>\r\n\t</mat-drawer-container>\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host ::ng-deep>mat-sidenav-container>mat-sidenav{display:flex;flex-direction:column}:host ::ng-deep>mat-sidenav-container .vd-layout-menu-button{margin-left:-16px}:host ::ng-deep>mat-sidenav-container.sidenav-container-mini .vd-layout-nav-wrapper>mat-toolbar .vd-layout-menu-button{display:none!important}:host ::ng-deep>mat-sidenav-container.sidenav-container-mini .mat-drawer.mat-drawer-submenu{border-radius:0 16px 16px 0}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item{display:flex;flex-direction:column;width:80px;margin:0 auto;padding:8px 0;height:66px!important;justify-content:center}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item .mdc-list-item__content .mat-mdc-list-item-title,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item .mdc-list-item__content .mat-mdc-list-item-title{font-size:11px;font-weight:500;letter-spacing:.1px;padding-top:2px}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item.mat-mdc-list-item-interactive:before,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item.mat-mdc-list-item-interactive:before{background:inherit}:host ::ng-deep mat-nav-list .mdc-list-item--with-leading-icon .mat-mdc-list-item-title{overflow:hidden;text-overflow:ellipsis;display:inline!important}:host ::ng-deep mat-nav-list .mdc-list-item--with-leading-icon .mdc-list-item__start{margin-right:18px!important}\n"] }]
|
|
197
197
|
}], ctorParameters: () => [{ type: i1.VdMediaService }], propDecorators: { sidenav: [{
|
|
198
198
|
type: ViewChild,
|
|
199
199
|
args: [MatSidenav, { static: true }]
|
|
@@ -28,7 +28,7 @@ export class VdListToolbarComponent {
|
|
|
28
28
|
*/
|
|
29
29
|
actions = [];
|
|
30
30
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VdListToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
31
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: VdListToolbarComponent, selector: "vd-list-toolbar", inputs: { subtitle: "subtitle", mini: "mini", backButton: "backButton", actions: "actions" }, outputs: { back: "back" }, ngImport: i0, template: "<mat-toolbar dense [ngClass]=\"{'pad-left-none': backButton}\">\r\n <div layout=\"row\" layout-align=\"start center\" flex>\r\n <button mat-icon-button *ngIf=\"!mini\" [vdLayoutManageListOpen]=\"true\" [hideWhenOpened]=\"true\">\r\n <mat-icon>menu</mat-icon>\r\n </button>\r\n <button mat-icon-button (click)=\"back.emit()\" *ngIf=\"backButton && !mini\">\r\n <mat-icon>arrow_back</mat-icon>\r\n </button>\r\n <span>{{subtitle}}</span>\r\n <span flex></span>\r\n <vd-dynamic-menu [items]=\"actions\"></vd-dynamic-menu>\r\n </div>\r\n</mat-toolbar>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]",
|
|
31
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: VdListToolbarComponent, selector: "vd-list-toolbar", inputs: { subtitle: "subtitle", mini: "mini", backButton: "backButton", actions: "actions" }, outputs: { back: "back" }, ngImport: i0, template: "<mat-toolbar dense [ngClass]=\"{'pad-left-none': backButton}\">\r\n <div layout=\"row\" layout-align=\"start center\" flex>\r\n <button mat-icon-button *ngIf=\"!mini\" [vdLayoutManageListOpen]=\"true\" [hideWhenOpened]=\"true\">\r\n <mat-icon>menu</mat-icon>\r\n </button>\r\n <button mat-icon-button (click)=\"back.emit()\" *ngIf=\"backButton && !mini\">\r\n <mat-icon>arrow_back</mat-icon>\r\n </button>\r\n <span>{{subtitle}}</span>\r\n <span flex></span>\r\n <vd-dynamic-menu [items]=\"actions\"></vd-dynamic-menu>\r\n </div>\r\n</mat-toolbar>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.VdLayoutManageListOpenDirective, selector: "[vdLayoutManageListOpen]", inputs: ["vdLayoutManageListOpen"] }, { kind: "component", type: i6.VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["items", "data", "index", "context", "contextMenu"] }] });
|
|
32
32
|
}
|
|
33
33
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VdListToolbarComponent, decorators: [{
|
|
34
34
|
type: Component,
|