@messaia/cdk 13.0.1 → 13.3.0-rc01

package/esm2020/lib/forms/components/generic-form/generic-form.component.mjs

@@ -23,9 +23,9 @@ export class VdEditorDirective extends CdkPortal {
         super(templateRef, viewContainerRef);
     }
 }
-/** @nocollapse */ /** @nocollapse */ VdEditorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdEditorDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ VdEditorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.3", type: VdEditorDirective, selector: "[vd-editor]ng-template", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdEditorDirective, decorators: [{
+/** @nocollapse */ /** @nocollapse */ VdEditorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdEditorDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ VdEditorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: VdEditorDirective, selector: "[vd-editor]ng-template", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdEditorDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[vd-editor]ng-template' }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
@@ -37,9 +37,9 @@ export class VdCodeDirective extends CdkPortal {
         super(templateRef, viewContainerRef);
     }
 }
-/** @nocollapse */ /** @nocollapse */ VdCodeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdCodeDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ VdCodeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.3", type: VdCodeDirective, selector: "[vd-code]ng-template", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdCodeDirective, decorators: [{
+/** @nocollapse */ /** @nocollapse */ VdCodeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdCodeDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ VdCodeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: VdCodeDirective, selector: "[vd-code]ng-template", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdCodeDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[vd-code]ng-template' }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
@@ -51,9 +51,9 @@ export class VdFileDirective extends CdkPortal {
         super(templateRef, viewContainerRef);
     }
 }
-/** @nocollapse */ /** @nocollapse */ VdFileDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdFileDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ VdFileDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.3", type: VdFileDirective, selector: "[vd-file]ng-template", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdFileDirective, decorators: [{
+/** @nocollapse */ /** @nocollapse */ VdFileDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdFileDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ VdFileDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: VdFileDirective, selector: "[vd-file]ng-template", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdFileDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[vd-file]ng-template' }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
@@ -65,9 +65,9 @@ export class VdCustomDirective extends CdkPortal {
         super(templateRef, viewContainerRef);
     }
 }
-/** @nocollapse */ /** @nocollapse */ VdCustomDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdCustomDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ VdCustomDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.3", type: VdCustomDirective, selector: "[vd-custom]ng-template", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdCustomDirective, decorators: [{
+/** @nocollapse */ /** @nocollapse */ VdCustomDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdCustomDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ VdCustomDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: VdCustomDirective, selector: "[vd-custom]ng-template", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdCustomDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[vd-custom]ng-template' }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
@@ -104,9 +104,9 @@ export class VdGenericFormComponent {
         });
     }
 }
-/** @nocollapse */ /** @nocollapse */ VdGenericFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdGenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ VdGenericFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: { formGroup: "formGroup", fieldGroups: "fieldGroups", groupName: "groupName" }, 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 }], ngImport: i0, template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <div layout-gt-sm=\"row\" layout=\"column\" *ngFor=\"let fields of fieldRows\">\r\n        <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n            <!-- #region Error handling -->\r\n            <ng-template #fieldErrors>\r\n                <div *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</div>\r\n            </ng-template>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Text input -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" matInput [formControlName]=\"field.name\">\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Text area -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\"></textarea>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Enum -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [enum]=\"field.enumType\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" flex></vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region VdSelect -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" flex></vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region VdChips -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [searchField]=\"field.searchField\" [projection]=\"field.projection\" [key]=\"field.optionValue\" flex>\r\n                        <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                            <div [outerHTML]=\"field.chipTemplate(chip)\"></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)\"></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 found</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Select -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <mat-select [formControlName]=\"field.name\" [multiple]=\"field.multiple\" flex>\r\n                        <mat-option *ngFor=\"let option of field.options\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                    </mat-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Autocomplete -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input type=\"text\" matInput [formControlName]=\"field.name\" [matAutocomplete]=\"auto\" autocomplete=\"false\">\r\n                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\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                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Date -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input matInput [formControlName]=\"field.name\" autocomplete=\"off\" [matDatepicker]=\"datePicker\">\r\n                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                    <mat-datepicker #datePicker></mat-datepicker>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Checkbox -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <div *ngSwitchCase=\"FormFieldType.Checkbox\" layout-margin appearance=\"outline\" class=\"pad-bottom-xs\">\r\n                    <mat-checkbox [formControlName]=\"field.name\">{{field.header}}</mat-checkbox>\r\n                </div>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Editor -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\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            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Code -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\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            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region File -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n                    <ng-template *ngIf=\"fileTemplate?.templateRef\" [ngTemplateOutlet]=\"fileTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Custom -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\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            </ng-container>\r\n            <!-- #endregion -->\r\n        </ng-container>\r\n    </div>\r\n    <!-- #endregion -->\r\n</div>", styles: [""], components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.VdSelectComponent, selector: "vd-select", inputs: ["multiple", "disabled", "sorted", "textPrefix", "endpoint", "params", "projection", "enum", "key", "text", "prefix", "options", "filteredOptions", "filterable", "cache", "sortBy", "searchField"], outputs: ["change", "itemChange", "selected", "itemSelected", "launch"] }, { type: i3.VdChipsComponent, selector: "vd-chips", inputs: ["chips", "endpoint", "params", "projection", "path", "key", "searchField", "searchFields", "termMinlength", "limit", "debounce", "default"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i10.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i9.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i11.MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { type: i1.MatLabel, selector: "mat-label" }, { type: i12.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"] }, { type: i10.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i10.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i10.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.VdChipDirective, selector: "[vd-chip]ng-template" }, { type: i3.VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1.MatSuffix, selector: "[matSuffix]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdGenericFormComponent, decorators: [{
+/** @nocollapse */ /** @nocollapse */ VdGenericFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdGenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ VdGenericFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: { formGroup: "formGroup", fieldGroups: "fieldGroups", groupName: "groupName" }, 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 }], ngImport: i0, template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <div layout-gt-sm=\"row\" layout=\"column\" *ngFor=\"let fields of fieldRows\">\r\n        <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n            <!-- #region Error handling -->\r\n            <ng-template #fieldErrors>\r\n                <div *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</div>\r\n            </ng-template>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Text input -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" matInput [formControlName]=\"field.name\">\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Text area -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\"></textarea>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Enum -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [enum]=\"field.enumType\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" flex></vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region VdSelect -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" flex></vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region VdChips -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [searchField]=\"field.searchField\" [projection]=\"field.projection\" [key]=\"field.optionValue\" flex>\r\n                        <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                            <div [outerHTML]=\"field.chipTemplate(chip)\"></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)\"></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 found</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Select -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <mat-select [formControlName]=\"field.name\" [multiple]=\"field.multiple\" flex>\r\n                        <mat-option *ngFor=\"let option of field.options\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                    </mat-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Autocomplete -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input type=\"text\" matInput [formControlName]=\"field.name\" [matAutocomplete]=\"auto\" autocomplete=\"false\">\r\n                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\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                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Date -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input matInput [formControlName]=\"field.name\" autocomplete=\"off\" [matDatepicker]=\"datePicker\">\r\n                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                    <mat-datepicker #datePicker></mat-datepicker>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Checkbox -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <div *ngSwitchCase=\"FormFieldType.Checkbox\" layout-margin appearance=\"outline\" class=\"pad-bottom-xs\">\r\n                    <mat-checkbox [formControlName]=\"field.name\">{{field.header}}</mat-checkbox>\r\n                </div>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Editor -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\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            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Code -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\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            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region File -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n                    <ng-template *ngIf=\"fileTemplate?.templateRef\" [ngTemplateOutlet]=\"fileTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Custom -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\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            </ng-container>\r\n            <!-- #endregion -->\r\n        </ng-container>\r\n    </div>\r\n    <!-- #endregion -->\r\n</div>", styles: [""], components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.VdSelectComponent, selector: "vd-select", inputs: ["multiple", "disabled", "sorted", "textPrefix", "endpoint", "params", "projection", "enum", "key", "text", "prefix", "options", "filteredOptions", "filterable", "cache", "sortBy", "searchField"], outputs: ["change", "itemChange", "selected", "itemSelected", "launch"] }, { type: i3.VdChipsComponent, selector: "vd-chips", inputs: ["chips", "endpoint", "params", "projection", "path", "key", "searchField", "searchFields", "termMinlength", "limit", "debounce", "default"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i10.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i9.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i11.MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { type: i1.MatLabel, selector: "mat-label" }, { type: i12.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"] }, { type: i10.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i10.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i10.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.VdChipDirective, selector: "[vd-chip]ng-template" }, { type: i3.VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1.MatSuffix, selector: "[matSuffix]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdGenericFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-generic-form', template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <div layout-gt-sm=\"row\" layout=\"column\" *ngFor=\"let fields of fieldRows\">\r\n        <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n            <!-- #region Error handling -->\r\n            <ng-template #fieldErrors>\r\n                <div *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</div>\r\n            </ng-template>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Text input -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" matInput [formControlName]=\"field.name\">\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Text area -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\"></textarea>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Enum -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [enum]=\"field.enumType\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" flex></vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region VdSelect -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" flex></vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region VdChips -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [searchField]=\"field.searchField\" [projection]=\"field.projection\" [key]=\"field.optionValue\" flex>\r\n                        <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                            <div [outerHTML]=\"field.chipTemplate(chip)\"></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)\"></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 found</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Select -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <mat-select [formControlName]=\"field.name\" [multiple]=\"field.multiple\" flex>\r\n                        <mat-option *ngFor=\"let option of field.options\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                    </mat-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Autocomplete -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input type=\"text\" matInput [formControlName]=\"field.name\" [matAutocomplete]=\"auto\" autocomplete=\"false\">\r\n                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\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                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Date -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input matInput [formControlName]=\"field.name\" autocomplete=\"off\" [matDatepicker]=\"datePicker\">\r\n                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                    <mat-datepicker #datePicker></mat-datepicker>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Checkbox -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <div *ngSwitchCase=\"FormFieldType.Checkbox\" layout-margin appearance=\"outline\" class=\"pad-bottom-xs\">\r\n                    <mat-checkbox [formControlName]=\"field.name\">{{field.header}}</mat-checkbox>\r\n                </div>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Editor -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\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            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Code -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\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            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region File -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n                    <ng-template *ngIf=\"fileTemplate?.templateRef\" [ngTemplateOutlet]=\"fileTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Custom -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\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            </ng-container>\r\n            <!-- #endregion -->\r\n        </ng-container>\r\n    </div>\r\n    <!-- #endregion -->\r\n</div>", styles: [""] }]
         }], propDecorators: { formGroup: [{

package/esm2020/lib/forms/directives/mat-form-field-readonly.directive.mjs

@@ -21,9 +21,9 @@ export class MatFormFieldReadonlyDirective {
         return false;
     }
 }
-/** @nocollapse */ /** @nocollapse */ MatFormFieldReadonlyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MatFormFieldReadonlyDirective, deps: [{ token: i1.MatFormField }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ MatFormFieldReadonlyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.3", type: MatFormFieldReadonlyDirective, selector: "mat-form-field", host: { properties: { "class.mat-form-field-readonly": "isReadonlyInput()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MatFormFieldReadonlyDirective, decorators: [{
+/** @nocollapse */ /** @nocollapse */ MatFormFieldReadonlyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MatFormFieldReadonlyDirective, deps: [{ token: i1.MatFormField }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ MatFormFieldReadonlyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: MatFormFieldReadonlyDirective, selector: "mat-form-field", host: { properties: { "class.mat-form-field-readonly": "isReadonlyInput()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MatFormFieldReadonlyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-form-field',

package/esm2020/lib/forms/forms.module.mjs

@@ -43,8 +43,8 @@ const DECLARATIONS = [
 ];
 export class VdFormsModule {
 }
-/** @nocollapse */ /** @nocollapse */ VdFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ /** @nocollapse */ VdFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdFormsModule, declarations: [EqualValidator,
+/** @nocollapse */ /** @nocollapse */ VdFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ VdFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdFormsModule, declarations: [EqualValidator,
         UniqueValidatorDirective,
         NativeElementInjectorDirective,
         MatFormFieldReadonlyDirective,
@@ -76,7 +76,7 @@ export class VdFormsModule {
         VdFileDirective,
         VdCustomDirective,
         VdGenericFormComponent] });
-/** @nocollapse */ /** @nocollapse */ VdFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdFormsModule, imports: [[
+/** @nocollapse */ /** @nocollapse */ VdFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdFormsModule, imports: [[
             CommonModule,
             VdCommonModule,
             VdSelectModule,
@@ -94,7 +94,7 @@ export class VdFormsModule {
             MatNativeDateModule,
             MatAutocompleteModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdFormsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdFormsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2020/lib/forms/helpers/abstract-mat-form-field.mjs

@@ -227,9 +227,9 @@ export class AbstractMatFormField extends mixinErrorState(_AbstractMatFormField)
  * The element ID
  */
 AbstractMatFormField.nextId = 0;
-/** @nocollapse */ /** @nocollapse */ AbstractMatFormField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: AbstractMatFormField, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ AbstractMatFormField.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.3", type: AbstractMatFormField, inputs: { placeholder: "placeholder", required: "required", readonly: "readonly", disabled: "disabled" }, host: { listeners: { "focusout": "onBlur()" }, properties: { "id": "this.id", "attr.aria-describedBy": "this.describedBy" } }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: AbstractMatFormField, decorators: [{
+/** @nocollapse */ /** @nocollapse */ AbstractMatFormField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: AbstractMatFormField, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ AbstractMatFormField.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: AbstractMatFormField, inputs: { placeholder: "placeholder", required: "required", readonly: "readonly", disabled: "disabled" }, host: { listeners: { "focusout": "onBlur()" }, properties: { "id": "this.id", "attr.aria-describedBy": "this.describedBy" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: AbstractMatFormField, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: undefined }, { type: i1.NgControl }, { type: i1.NgForm }, { type: i1.FormGroupDirective }, { type: i2.ErrorStateMatcher }, { type: i3.FocusMonitor }, { type: i0.ElementRef }]; }, propDecorators: { placeholder: [{
                 type: Input

package/esm2020/lib/forms/helpers/value-accessor-base.mjs

@@ -130,9 +130,9 @@ export class ValueAccessorBase extends MatFormFieldControl {
         this.stateChanges.complete();
     }
 }
-/** @nocollapse */ /** @nocollapse */ ValueAccessorBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: ValueAccessorBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ ValueAccessorBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.3", type: ValueAccessorBase, host: { properties: { "attr.aria-describedby": "this.describedBy" } }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: ValueAccessorBase, decorators: [{
+/** @nocollapse */ /** @nocollapse */ ValueAccessorBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: ValueAccessorBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ ValueAccessorBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: ValueAccessorBase, host: { properties: { "attr.aria-describedby": "this.describedBy" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: ValueAccessorBase, decorators: [{
             type: Directive
         }], propDecorators: { describedBy: [{
                 type: HostBinding,

package/esm2020/lib/forms/validators/equal-validator.directive.mjs

@@ -49,15 +49,15 @@ export class EqualValidator {
         return null;
     }
 }
-/** @nocollapse */ /** @nocollapse */ EqualValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: EqualValidator, deps: [{ token: 'validateEqual', attribute: true }, { token: 'reverse', attribute: true }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ EqualValidator.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.3", type: EqualValidator, selector: "[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]", providers: [
+/** @nocollapse */ /** @nocollapse */ EqualValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: EqualValidator, deps: [{ token: 'validateEqual', attribute: true }, { token: 'reverse', attribute: true }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ EqualValidator.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: EqualValidator, selector: "[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]", providers: [
         {
             provide: NG_VALIDATORS,
             useExisting: forwardRef((() => EqualValidator)),
             multi: true
         }
     ], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: EqualValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: EqualValidator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]',

package/esm2020/lib/forms/validators/native-element-injector.directive.mjs

@@ -21,9 +21,9 @@ export class NativeElementInjectorDirective {
         }
     }
 }
-/** @nocollapse */ /** @nocollapse */ NativeElementInjectorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NativeElementInjectorDirective, deps: [{ token: i0.ElementRef }, { token: i1.NgControl }, { token: i1.NgModel, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ NativeElementInjectorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.3", type: NativeElementInjectorDirective, selector: "[ngModel]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NativeElementInjectorDirective, decorators: [{
+/** @nocollapse */ /** @nocollapse */ NativeElementInjectorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NativeElementInjectorDirective, deps: [{ token: i0.ElementRef }, { token: i1.NgControl }, { token: i1.NgModel, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ NativeElementInjectorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: NativeElementInjectorDirective, selector: "[ngModel]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NativeElementInjectorDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[ngModel]' }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.NgControl }, { type: i1.NgModel, decorators: [{

package/esm2020/lib/forms/validators/unique-validator-directive.mjs

@@ -52,9 +52,9 @@ export class UniqueValidatorDirective {
         }));
     }
 }
-/** @nocollapse */ /** @nocollapse */ UniqueValidatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: UniqueValidatorDirective, deps: [{ token: i1.HttpClient }, { token: 'unique', attribute: true }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ UniqueValidatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.3", type: UniqueValidatorDirective, selector: "[unique]", inputs: { uniqueProperty: "uniqueProperty", uniqueId: "uniqueId", uniqueParams: "uniqueParams", invert: "invert" }, providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: UniqueValidatorDirective, multi: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: UniqueValidatorDirective, decorators: [{
+/** @nocollapse */ /** @nocollapse */ UniqueValidatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: UniqueValidatorDirective, deps: [{ token: i1.HttpClient }, { token: 'unique', attribute: true }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ UniqueValidatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: UniqueValidatorDirective, selector: "[unique]", inputs: { uniqueProperty: "uniqueProperty", uniqueId: "uniqueId", uniqueParams: "uniqueParams", invert: "invert" }, providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: UniqueValidatorDirective, multi: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: UniqueValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[unique]',

package/esm2020/lib/http/http.module.mjs

@@ -4,12 +4,12 @@ import * as i0 from "@angular/core";
 export { GenericService } from './services/generic.service';
 export class VdHttpModule {
 }
-/** @nocollapse */ /** @nocollapse */ VdHttpModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdHttpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ /** @nocollapse */ VdHttpModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdHttpModule, imports: [HttpClientModule] });
-/** @nocollapse */ /** @nocollapse */ VdHttpModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdHttpModule, imports: [[
+/** @nocollapse */ /** @nocollapse */ VdHttpModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdHttpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ VdHttpModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdHttpModule, imports: [HttpClientModule] });
+/** @nocollapse */ /** @nocollapse */ VdHttpModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdHttpModule, imports: [[
             HttpClientModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdHttpModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdHttpModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2020/lib/layout/layout-card-over/layout-card-over.component.mjs

@@ -22,9 +22,9 @@ export class VdLayoutCardOverComponent {
         this.color = 'primary';
     }
 }
-/** @nocollapse */ /** @nocollapse */ VdLayoutCardOverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdLayoutCardOverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ VdLayoutCardOverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: VdLayoutCardOverComponent, selector: "vd-layout-card-over", inputs: { cardTitle: "cardTitle", cardSubtitle: "cardSubtitle", cardWidth: "cardWidth", color: "color" }, ngImport: i0, template: "<mat-toolbar [color]=\"color\"></mat-toolbar>\r\n<div class=\"vd-layout-card-over-wrapper\">\r\n\t<div class=\"vd-layout-card-over\" [style.max-width.%]=\"cardWidth\" [style.flex]=\"'1 1 ' + cardWidth + '%'\" [style.-ms-flex]=\"'1 1 ' + cardWidth + '%'\"\r\n\t [style.-webkit-box-flex]=\"1\">\r\n\t\t<mat-card>\r\n\t\t\t<mat-card-title *ngIf=\"cardTitle\">{{cardTitle}}</mat-card-title>\r\n\t\t\t<mat-card-subtitle *ngIf=\"cardSubtitle\">{{cardSubtitle}}</mat-card-subtitle>\r\n\t\t\t<mat-divider *ngIf=\"cardTitle || cardSubtitle\"></mat-divider>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</mat-card>\r\n\t\t<ng-content select=\"[vd-after-card]\"></ng-content>\r\n\t</div>\r\n</div>", styles: [":host{position:relative;display:block;z-index:2;width:100%;min-height:100%;height:100%}:host [vd-after-card]{display:block}.vd-layout-card-over-wrapper{margin:-64px 0;width:100%;min-height:100%;height:100%}@media (min-width: 960px){.vd-layout-card-over-wrapper{flex-direction:row;box-sizing:border-box;display:flex;align-items:flex-start;align-content:flex-start;justify-content:center}.vd-layout-card-over-wrapper .vd-layout-card-over{max-height:100%;box-sizing:border-box}}@media (max-width: 959px){.vd-layout-card-over-wrapper .vd-layout-card-over{max-width:100%!important}}\n"], components: [{ type: i1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdLayoutCardOverComponent, decorators: [{
+/** @nocollapse */ /** @nocollapse */ VdLayoutCardOverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutCardOverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ VdLayoutCardOverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdLayoutCardOverComponent, selector: "vd-layout-card-over", inputs: { cardTitle: "cardTitle", cardSubtitle: "cardSubtitle", cardWidth: "cardWidth", color: "color" }, ngImport: i0, template: "<mat-toolbar [color]=\"color\"></mat-toolbar>\r\n<div class=\"vd-layout-card-over-wrapper\">\r\n\t<div class=\"vd-layout-card-over\" [style.max-width.%]=\"cardWidth\" [style.flex]=\"'1 1 ' + cardWidth + '%'\" [style.-ms-flex]=\"'1 1 ' + cardWidth + '%'\"\r\n\t [style.-webkit-box-flex]=\"1\">\r\n\t\t<mat-card>\r\n\t\t\t<mat-card-title *ngIf=\"cardTitle\">{{cardTitle}}</mat-card-title>\r\n\t\t\t<mat-card-subtitle *ngIf=\"cardSubtitle\">{{cardSubtitle}}</mat-card-subtitle>\r\n\t\t\t<mat-divider *ngIf=\"cardTitle || cardSubtitle\"></mat-divider>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</mat-card>\r\n\t\t<ng-content select=\"[vd-after-card]\"></ng-content>\r\n\t</div>\r\n</div>", styles: [":host{position:relative;display:block;z-index:2;width:100%;min-height:100%;height:100%}:host [vd-after-card]{display:block}.vd-layout-card-over-wrapper{margin:-64px 0;width:100%;min-height:100%;height:100%}@media (min-width: 960px){.vd-layout-card-over-wrapper{flex-direction:row;box-sizing:border-box;display:flex;align-items:flex-start;align-content:flex-start;justify-content:center}.vd-layout-card-over-wrapper .vd-layout-card-over{max-height:100%;box-sizing:border-box}}@media (max-width: 959px){.vd-layout-card-over-wrapper .vd-layout-card-over{max-width:100%!important}}\n"], components: [{ type: i1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutCardOverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-layout-card-over', template: "<mat-toolbar [color]=\"color\"></mat-toolbar>\r\n<div class=\"vd-layout-card-over-wrapper\">\r\n\t<div class=\"vd-layout-card-over\" [style.max-width.%]=\"cardWidth\" [style.flex]=\"'1 1 ' + cardWidth + '%'\" [style.-ms-flex]=\"'1 1 ' + cardWidth + '%'\"\r\n\t [style.-webkit-box-flex]=\"1\">\r\n\t\t<mat-card>\r\n\t\t\t<mat-card-title *ngIf=\"cardTitle\">{{cardTitle}}</mat-card-title>\r\n\t\t\t<mat-card-subtitle *ngIf=\"cardSubtitle\">{{cardSubtitle}}</mat-card-subtitle>\r\n\t\t\t<mat-divider *ngIf=\"cardTitle || cardSubtitle\"></mat-divider>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</mat-card>\r\n\t\t<ng-content select=\"[vd-after-card]\"></ng-content>\r\n\t</div>\r\n</div>", styles: [":host{position:relative;display:block;z-index:2;width:100%;min-height:100%;height:100%}:host [vd-after-card]{display:block}.vd-layout-card-over-wrapper{margin:-64px 0;width:100%;min-height:100%;height:100%}@media (min-width: 960px){.vd-layout-card-over-wrapper{flex-direction:row;box-sizing:border-box;display:flex;align-items:flex-start;align-content:flex-start;justify-content:center}.vd-layout-card-over-wrapper .vd-layout-card-over{max-height:100%;box-sizing:border-box}}@media (max-width: 959px){.vd-layout-card-over-wrapper .vd-layout-card-over{max-width:100%!important}}\n"] }]
         }], propDecorators: { cardTitle: [{

package/esm2020/lib/layout/layout-footer/layout-footer.component.mjs

@@ -22,9 +22,9 @@ export class VdLayoutFooterComponent {
         return this._color;
     }
 }
-/** @nocollapse */ /** @nocollapse */ VdLayoutFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdLayoutFooterComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ VdLayoutFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: VdLayoutFooterComponent, selector: "vd-layout-footer,vd-layout-footer-inner", inputs: { color: "color" }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{display:block;padding:10px 16px}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdLayoutFooterComponent, decorators: [{
+/** @nocollapse */ /** @nocollapse */ VdLayoutFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutFooterComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ VdLayoutFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdLayoutFooterComponent, selector: "vd-layout-footer,vd-layout-footer-inner", inputs: { color: "color" }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{display:block;padding:10px 16px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-layout-footer,vd-layout-footer-inner', template: "<ng-content></ng-content>", styles: [":host{display:block;padding:10px 16px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { color: [{

package/esm2020/lib/layout/layout-manage-list/layout-manage-list.component.mjs

@@ -98,9 +98,9 @@ export class VdLayoutManageListComponent {
         return this.sidenav.close();
     }
 }
-/** @nocollapse */ /** @nocollapse */ VdLayoutManageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdLayoutManageListComponent, deps: [{ token: i1.VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ VdLayoutManageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: VdLayoutManageListComponent, selector: "vd-layout-manage-list", inputs: { 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<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\"\r\n\t [style.min-width]=\"sidenavWidth\">\r\n\t\t<ng-content select=\"mat-toolbar[vd-sidenav-content]\"></ng-content>\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</div>\r\n\t</mat-sidenav>\r\n\t<div class=\"vd-layout-manage-list-main\">\r\n\t\t<ng-content select=\"mat-toolbar\"></ng-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<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t</div>\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 .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-nav-list a[mat-list-item] .mat-list-item-content{font-size:14px}:host ::ng-deep .mat-toolbar{font-weight:400}\n"], components: [{ type: i2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }], directives: [{ type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdLayoutManageListComponent, decorators: [{
+/** @nocollapse */ /** @nocollapse */ VdLayoutManageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutManageListComponent, deps: [{ token: i1.VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ VdLayoutManageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdLayoutManageListComponent, selector: "vd-layout-manage-list", inputs: { 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<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\"\r\n\t [style.min-width]=\"sidenavWidth\">\r\n\t\t<ng-content select=\"mat-toolbar[vd-sidenav-content]\"></ng-content>\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</div>\r\n\t</mat-sidenav>\r\n\t<div class=\"vd-layout-manage-list-main\">\r\n\t\t<ng-content select=\"mat-toolbar\"></ng-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<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t</div>\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 .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-nav-list a[mat-list-item] .mat-list-item-content{font-size:14px}:host ::ng-deep .mat-toolbar{font-weight:400}\n"], components: [{ type: i2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }], directives: [{ type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutManageListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-layout-manage-list', template: "<mat-sidenav-container fullscreen class=\"vd-layout-manage-list\">\r\n\t<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\"\r\n\t [style.min-width]=\"sidenavWidth\">\r\n\t\t<ng-content select=\"mat-toolbar[vd-sidenav-content]\"></ng-content>\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</div>\r\n\t</mat-sidenav>\r\n\t<div class=\"vd-layout-manage-list-main\">\r\n\t\t<ng-content select=\"mat-toolbar\"></ng-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<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t</div>\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 .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-nav-list a[mat-list-item] .mat-list-item-content{font-size:14px}:host ::ng-deep .mat-toolbar{font-weight:400}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.VdMediaService }]; }, propDecorators: { sidenav: [{

package/esm2020/lib/layout/layout-manage-list/layout-manage-list.directives.mjs

@@ -14,9 +14,9 @@ export class VdLayoutManageListToggleDirective extends LayoutToggle {
         this._layout.toggle();
     }
 }
-/** @nocollapse */ /** @nocollapse */ VdLayoutManageListToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdLayoutManageListToggleDirective, deps: [{ token: forwardRef(() => VdLayoutManageListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ VdLayoutManageListToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.3", type: VdLayoutManageListToggleDirective, selector: "[vdLayoutManageListToggle]", inputs: { vdLayoutManageListToggle: "vdLayoutManageListToggle" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdLayoutManageListToggleDirective, decorators: [{
+/** @nocollapse */ /** @nocollapse */ VdLayoutManageListToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutManageListToggleDirective, deps: [{ token: forwardRef(() => VdLayoutManageListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ VdLayoutManageListToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: VdLayoutManageListToggleDirective, selector: "[vdLayoutManageListToggle]", inputs: { vdLayoutManageListToggle: "vdLayoutManageListToggle" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutManageListToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vdLayoutManageListToggle]',
@@ -39,9 +39,9 @@ export class VdLayoutManageListCloseDirective extends LayoutToggle {
         this._layout.close();
     }
 }
-/** @nocollapse */ /** @nocollapse */ VdLayoutManageListCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdLayoutManageListCloseDirective, deps: [{ token: forwardRef(() => VdLayoutManageListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ VdLayoutManageListCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.3", type: VdLayoutManageListCloseDirective, selector: "[vdLayoutManageListClose]", inputs: { vdLayoutManageListClose: "vdLayoutManageListClose" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdLayoutManageListCloseDirective, decorators: [{
+/** @nocollapse */ /** @nocollapse */ VdLayoutManageListCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutManageListCloseDirective, deps: [{ token: forwardRef(() => VdLayoutManageListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ VdLayoutManageListCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: VdLayoutManageListCloseDirective, selector: "[vdLayoutManageListClose]", inputs: { vdLayoutManageListClose: "vdLayoutManageListClose" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutManageListCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vdLayoutManageListClose]',
@@ -64,9 +64,9 @@ export class VdLayoutManageListOpenDirective extends LayoutToggle {
         this._layout.open();
     }
 }
-/** @nocollapse */ /** @nocollapse */ VdLayoutManageListOpenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdLayoutManageListOpenDirective, deps: [{ token: forwardRef(() => VdLayoutManageListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ VdLayoutManageListOpenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.3", type: VdLayoutManageListOpenDirective, selector: "[vdLayoutManageListOpen]", inputs: { vdLayoutManageListOpen: "vdLayoutManageListOpen" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdLayoutManageListOpenDirective, decorators: [{
+/** @nocollapse */ /** @nocollapse */ VdLayoutManageListOpenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutManageListOpenDirective, deps: [{ token: forwardRef(() => VdLayoutManageListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ VdLayoutManageListOpenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: VdLayoutManageListOpenDirective, selector: "[vdLayoutManageListOpen]", inputs: { vdLayoutManageListOpen: "vdLayoutManageListOpen" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutManageListOpenDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vdLayoutManageListOpen]',

package/esm2020/lib/layout/layout-nav/layout-nav.component.mjs

@@ -36,9 +36,9 @@ export class VdLayoutNavComponent {
         }
     }
 }
-/** @nocollapse */ /** @nocollapse */ VdLayoutNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdLayoutNavComponent, deps: [{ token: i1.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ VdLayoutNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: VdLayoutNavComponent, selector: "vd-layout-nav", inputs: { toolbarTitle: "toolbarTitle", icon: "icon", logo: "logo", color: "color", navigationRoute: "navigationRoute" }, ngImport: i0, template: "<div class=\"vd-layout-nav-wrapper\">\r\n\t<mat-toolbar [color]=\"color\">\r\n\t\t<ng-content select=\"[vd-menu-button]\"></ng-content>\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</span>\r\n\t\t<ng-content select=\"[vd-toolbar-content]\"></ng-content>\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"], components: [{ type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdLayoutNavComponent, decorators: [{
+/** @nocollapse */ /** @nocollapse */ VdLayoutNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutNavComponent, deps: [{ token: i1.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ VdLayoutNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdLayoutNavComponent, selector: "vd-layout-nav", inputs: { toolbarTitle: "toolbarTitle", icon: "icon", logo: "logo", color: "color", navigationRoute: "navigationRoute" }, ngImport: i0, template: "<div class=\"vd-layout-nav-wrapper\">\r\n\t<mat-toolbar [color]=\"color\">\r\n\t\t<ng-content select=\"[vd-menu-button]\"></ng-content>\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</span>\r\n\t\t<ng-content select=\"[vd-toolbar-content]\"></ng-content>\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"], components: [{ type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-layout-nav', template: "<div class=\"vd-layout-nav-wrapper\">\r\n\t<mat-toolbar [color]=\"color\">\r\n\t\t<ng-content select=\"[vd-menu-button]\"></ng-content>\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</span>\r\n\t\t<ng-content select=\"[vd-toolbar-content]\"></ng-content>\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"] }]
         }], ctorParameters: function () { return [{ type: i1.Router, decorators: [{

package/esm2020/lib/layout/layout-nav-list/layout-nav-list.component.mjs

@@ -85,9 +85,9 @@ export class VdLayoutNavListComponent {
         return this.sidenav.close();
     }
 }
-/** @nocollapse */ /** @nocollapse */ VdLayoutNavListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdLayoutNavListComponent, deps: [{ token: i1.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ VdLayoutNavListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: VdLayoutNavListComponent, selector: "vd-layout-nav-list", inputs: { toolbarTitle: "toolbarTitle", icon: "icon", logo: "logo", color: "color", mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth", navigationRoute: "navigationRoute" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<div class=\"vd-layout-nav-list-wrapper\">\r\n\t<mat-sidenav-container fullscreen class=\"vd-layout-nav-list\">\r\n\t\t<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\"\r\n\t\t [style.min-width]=\"sidenavWidth\">\r\n\t\t\t<mat-toolbar [color]=\"color\">\r\n\t\t\t\t<ng-content select=\"[vd-menu-button]\"></ng-content>\r\n\t\t\t\t<span *ngIf=\"icon || logo || toolbarTitle\" class=\"vd-layout-nav-list-toolbar-content\" [class.cursor-pointer]=\"routerEnabled\"\r\n\t\t\t\t (click)=\"handleNavigationClick()\">\r\n\t\t\t\t\t<mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\r\n\t\t\t\t\t<mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\r\n\t\t\t\t\t<span *ngIf=\"toolbarTitle\">{{toolbarTitle}}</span>\r\n\t\t\t\t</span>\r\n\t\t\t\t<ng-content select=\"[vd-sidenav-toolbar-content]\"></ng-content>\r\n\t\t\t</mat-toolbar>\r\n\t\t\t<div class=\"vd-layout-nav-list-content\" cdkScrollable>\r\n\t\t\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t\t\t</div>\r\n\t\t</mat-sidenav>\r\n\t\t<div class=\"vd-layout-nav-list-main\">\r\n\t\t\t<mat-toolbar [color]=\"color\">\r\n\t\t\t\t<ng-content select=\"[vd-toolbar-content]\"></ng-content>\r\n\t\t\t</mat-toolbar>\r\n\t\t\t<div class=\"vd-layout-nav-list-content\" cdkScrollable>\r\n\t\t\t\t<ng-content></ng-content>\r\n\t\t\t</div>\r\n\t\t\t<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t\t</div>\r\n\t</mat-sidenav-container>\r\n</div>\r\n<ng-content select=\"vd-layout-footer\"></ng-content>", styles: [":host{margin:0;width:100%;min-height:100%;height:100%;overflow:hidden;flex-direction:column;box-sizing:border-box;display:flex;flex:1}:host .vd-layout-nav-list-wrapper{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-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-list-wrapper .vd-layout-nav-list-content{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-main{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-main .vd-layout-nav-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list{flex:1}:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-opened,:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-opening,:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-closed,:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-closing{box-shadow:none}:host ::ng-deep mat-sidenav-container.vd-layout-nav-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-nav-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}\n"], components: [{ type: i2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdLayoutNavListComponent, decorators: [{
+/** @nocollapse */ /** @nocollapse */ VdLayoutNavListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutNavListComponent, deps: [{ token: i1.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ VdLayoutNavListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdLayoutNavListComponent, selector: "vd-layout-nav-list", inputs: { toolbarTitle: "toolbarTitle", icon: "icon", logo: "logo", color: "color", mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth", navigationRoute: "navigationRoute" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<div class=\"vd-layout-nav-list-wrapper\">\r\n\t<mat-sidenav-container fullscreen class=\"vd-layout-nav-list\">\r\n\t\t<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\"\r\n\t\t [style.min-width]=\"sidenavWidth\">\r\n\t\t\t<mat-toolbar [color]=\"color\">\r\n\t\t\t\t<ng-content select=\"[vd-menu-button]\"></ng-content>\r\n\t\t\t\t<span *ngIf=\"icon || logo || toolbarTitle\" class=\"vd-layout-nav-list-toolbar-content\" [class.cursor-pointer]=\"routerEnabled\"\r\n\t\t\t\t (click)=\"handleNavigationClick()\">\r\n\t\t\t\t\t<mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\r\n\t\t\t\t\t<mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\r\n\t\t\t\t\t<span *ngIf=\"toolbarTitle\">{{toolbarTitle}}</span>\r\n\t\t\t\t</span>\r\n\t\t\t\t<ng-content select=\"[vd-sidenav-toolbar-content]\"></ng-content>\r\n\t\t\t</mat-toolbar>\r\n\t\t\t<div class=\"vd-layout-nav-list-content\" cdkScrollable>\r\n\t\t\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t\t\t</div>\r\n\t\t</mat-sidenav>\r\n\t\t<div class=\"vd-layout-nav-list-main\">\r\n\t\t\t<mat-toolbar [color]=\"color\">\r\n\t\t\t\t<ng-content select=\"[vd-toolbar-content]\"></ng-content>\r\n\t\t\t</mat-toolbar>\r\n\t\t\t<div class=\"vd-layout-nav-list-content\" cdkScrollable>\r\n\t\t\t\t<ng-content></ng-content>\r\n\t\t\t</div>\r\n\t\t\t<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t\t</div>\r\n\t</mat-sidenav-container>\r\n</div>\r\n<ng-content select=\"vd-layout-footer\"></ng-content>", styles: [":host{margin:0;width:100%;min-height:100%;height:100%;overflow:hidden;flex-direction:column;box-sizing:border-box;display:flex;flex:1}:host .vd-layout-nav-list-wrapper{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-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-list-wrapper .vd-layout-nav-list-content{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-main{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-main .vd-layout-nav-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list{flex:1}:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-opened,:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-opening,:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-closed,:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-closing{box-shadow:none}:host ::ng-deep mat-sidenav-container.vd-layout-nav-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-nav-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}\n"], components: [{ type: i2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutNavListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-layout-nav-list', template: "<div class=\"vd-layout-nav-list-wrapper\">\r\n\t<mat-sidenav-container fullscreen class=\"vd-layout-nav-list\">\r\n\t\t<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\"\r\n\t\t [style.min-width]=\"sidenavWidth\">\r\n\t\t\t<mat-toolbar [color]=\"color\">\r\n\t\t\t\t<ng-content select=\"[vd-menu-button]\"></ng-content>\r\n\t\t\t\t<span *ngIf=\"icon || logo || toolbarTitle\" class=\"vd-layout-nav-list-toolbar-content\" [class.cursor-pointer]=\"routerEnabled\"\r\n\t\t\t\t (click)=\"handleNavigationClick()\">\r\n\t\t\t\t\t<mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\r\n\t\t\t\t\t<mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\r\n\t\t\t\t\t<span *ngIf=\"toolbarTitle\">{{toolbarTitle}}</span>\r\n\t\t\t\t</span>\r\n\t\t\t\t<ng-content select=\"[vd-sidenav-toolbar-content]\"></ng-content>\r\n\t\t\t</mat-toolbar>\r\n\t\t\t<div class=\"vd-layout-nav-list-content\" cdkScrollable>\r\n\t\t\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t\t\t</div>\r\n\t\t</mat-sidenav>\r\n\t\t<div class=\"vd-layout-nav-list-main\">\r\n\t\t\t<mat-toolbar [color]=\"color\">\r\n\t\t\t\t<ng-content select=\"[vd-toolbar-content]\"></ng-content>\r\n\t\t\t</mat-toolbar>\r\n\t\t\t<div class=\"vd-layout-nav-list-content\" cdkScrollable>\r\n\t\t\t\t<ng-content></ng-content>\r\n\t\t\t</div>\r\n\t\t\t<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t\t</div>\r\n\t</mat-sidenav-container>\r\n</div>\r\n<ng-content select=\"vd-layout-footer\"></ng-content>", styles: [":host{margin:0;width:100%;min-height:100%;height:100%;overflow:hidden;flex-direction:column;box-sizing:border-box;display:flex;flex:1}:host .vd-layout-nav-list-wrapper{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-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-list-wrapper .vd-layout-nav-list-content{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-main{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-main .vd-layout-nav-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list{flex:1}:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-opened,:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-opening,:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-closed,:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-closing{box-shadow:none}:host ::ng-deep mat-sidenav-container.vd-layout-nav-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-nav-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}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.Router, decorators: [{