@messaia/cdk 13.3.6-rc17 → 13.3.6

package/esm2020/lib/chips/components/chips.component.mjs

@@ -397,10 +397,10 @@ export class VdChipsComponent extends AbstractMatFormField {
     }
 }
 /** @nocollapse */ VdChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdChipsComponent, deps: [{ token: i0.Injector }, { token: i1.VdMediaService }, { token: i0.ChangeDetectorRef }, { token: i2.NgControl, optional: true, self: true }, { token: i2.NgForm, optional: true }, { token: i2.FormGroupDirective, optional: true }, { token: i3.ErrorStateMatcher }, { token: i4.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdChipsComponent, selector: "vd-chips", inputs: { classType: "classType", chips: "chips", endpoint: "endpoint", params: "params", projection: "projection", paginated: "paginated", context: "context", key: "key", searchField: "searchField", searchFields: "searchFields", removable: "removable", debounce: "debounce", autocompleteCssClass: "autocompleteCssClass", suffixButtons: "suffixButtons" }, outputs: { initSelect: "initSelect", selected: "selected", cleared: "cleared", onLaunch: "launch", chipFocus: "chipFocus" }, providers: [{ provide: MatFormFieldControl, useExisting: VdChipsComponent }], queries: [{ propertyName: "chipTemplate", first: true, predicate: VdChipDirective, descendants: true }, { propertyName: "autocompleteOptionTemplate", first: true, predicate: VdAutocompleteOptionDirective, descendants: true }], viewQueries: [{ propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-chip-list #chipList [required]=\"required\" [disabled]=\"readonly\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\r\n\t<!-- #region Chips -->\r\n\t<ng-template let-chip let-first=\"first\" let-index=\"index\" ngFor [ngForOf]=\"chips\">\r\n\t\t<mat-basic-chip [selectable]=\"!readonly\" [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n\t\t\t<span class=\"vd-chip-content\">\r\n\t\t\t\t<span *ngIf=\"!chipTemplate?.templateRef\">\r\n\t\t\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{ chip }}</span>\r\n\t\t\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n\t\t\t\t</span>\r\n\t\t\t\t<ng-template *ngIf=\"chipTemplate?.templateRef\" [ngTemplateOutlet]=\"chipTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n\t\t\t</span>\r\n\t\t\t<ng-template let-button let-first=\"first\" ngFor [ngForOf]=\"suffixButtons\">\r\n\t\t\t\t<a mat-icon-button *ngIf=\"!button.hide || !button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n\t\t\t\t\t<mat-icon>{{button.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-template>\r\n\t\t\t<a mat-icon-button *ngIf=\"onLaunch?.observers?.length > 0\" (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n\t\t\t\t<mat-icon>launch</mat-icon>\r\n\t\t\t</a>\r\n\t\t\t<a mat-icon-button *ngIf=\"!readonly\">\r\n\t\t\t\t<mat-icon matChipRemove>close</mat-icon>\r\n\t\t\t</a>\r\n\t\t</mat-basic-chip>\r\n\t</ng-template>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Search box -->\r\n\t<input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" #filterInput />\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Reset button -->\r\n\t<a mat-icon-button trailingIcon *ngIf=\"filterInput.value\" class=\"reset-input\" (click)=\"filterInput.value = ''\">\r\n\t\t<mat-icon>close</mat-icon>\r\n\t</a>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Progress -->\r\n\t<mat-spinner diameter=\"18\" *ngIf=\"dataSource?.isLoading\"></mat-spinner>\r\n\t<!-- #endregion -->\r\n</mat-chip-list>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n\t<ng-template *ngIf=\"!classType && opened\" let-item let-first=\"first\" ngFor [ngForOf]=\"dataSource?.items\">\r\n\t\t<mat-option [value]=\"item\">\r\n\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{item}}</span>\r\n\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n\t\t</mat-option>\r\n\t</ng-template>\r\n\t<ng-container *ngIf=\"classType && opened\">\r\n\t\t<mat-option hide=\"true\"></mat-option>\r\n\t\t<vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n\t</ng-container>\r\n\t<mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n</mat-autocomplete>\r\n<!-- #endregion -->", styles: [":host ::ng-deep .mat-chip-list-wrapper{min-height:24px}:host ::ng-deep .mat-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center}:host ::ng-deep .mat-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-chip .vd-chip-content{flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-chip .mat-icon{cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-icon-button{display:inline-flex;justify-content:center;align-items:center;width:2.2em;height:2.2em;margin-top:-10px}:host ::ng-deep .mat-icon-button .mat-button-wrapper{line-height:20px}:host ::ng-deep .mat-icon-button .mat-button-wrapper .mat-icon{font-size:21px;line-height:21px}::ng-deep .mat-autocomplete-panel{margin-top:9px}::ng-deep .mat-autocomplete-panel .mat-paginator{position:sticky;bottom:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container{padding:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions{align-items:baseline}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions .mat-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-autocomplete-panel.table-autocomplete{max-height:400px}mat-spinner{margin-top:-9px;margin-right:6px}\n"], components: [{ type: i5.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i6.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i9.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i10.VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "classType", "context", "dataSourceFilter", "static", "filterable", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "columns", "rowMenuItems", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }, { type: i11.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i9.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.MatChipRemove, selector: "[matChipRemove]" }, { type: i13.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: i5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i9.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+/** @nocollapse */ VdChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdChipsComponent, selector: "vd-chips", inputs: { classType: "classType", chips: "chips", endpoint: "endpoint", params: "params", projection: "projection", paginated: "paginated", context: "context", key: "key", searchField: "searchField", searchFields: "searchFields", removable: "removable", debounce: "debounce", autocompleteCssClass: "autocompleteCssClass", suffixButtons: "suffixButtons" }, outputs: { initSelect: "initSelect", selected: "selected", cleared: "cleared", onLaunch: "launch", chipFocus: "chipFocus" }, providers: [{ provide: MatFormFieldControl, useExisting: VdChipsComponent }], queries: [{ propertyName: "chipTemplate", first: true, predicate: VdChipDirective, descendants: true }, { propertyName: "autocompleteOptionTemplate", first: true, predicate: VdAutocompleteOptionDirective, descendants: true }], viewQueries: [{ propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-chip-list #chipList [required]=\"required\" [disabled]=\"readonly\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\r\n\t<!-- #region Chips -->\r\n\t<ng-template let-chip let-first=\"first\" let-index=\"index\" ngFor [ngForOf]=\"chips\">\r\n\t\t<mat-basic-chip [selectable]=\"!readonly\" [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n\t\t\t<span class=\"vd-chip-content\">\r\n\t\t\t\t<span *ngIf=\"!chipTemplate?.templateRef\">\r\n\t\t\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{ chip }}</span>\r\n\t\t\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n\t\t\t\t</span>\r\n\t\t\t\t<ng-template *ngIf=\"chipTemplate?.templateRef\" [ngTemplateOutlet]=\"chipTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n\t\t\t</span>\r\n\t\t\t<ng-template let-button let-first=\"first\" ngFor [ngForOf]=\"suffixButtons\">\r\n\t\t\t\t<a mat-icon-button *ngIf=\"!button.hide || !button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n\t\t\t\t\t<mat-icon>{{button.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-template>\r\n\t\t\t<a mat-icon-button *ngIf=\"onLaunch?.observers?.length > 0\" (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n\t\t\t\t<mat-icon>launch</mat-icon>\r\n\t\t\t</a>\r\n\t\t\t<a mat-icon-button *ngIf=\"!readonly\">\r\n\t\t\t\t<mat-icon matChipRemove>close</mat-icon>\r\n\t\t\t</a>\r\n\t\t</mat-basic-chip>\r\n\t</ng-template>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Search box -->\r\n\t<input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" #filterInput />\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Reset button -->\r\n\t<a mat-icon-button trailingIcon *ngIf=\"filterInput.value\" class=\"reset-input\" (click)=\"filterInput.value = ''\">\r\n\t\t<mat-icon>close</mat-icon>\r\n\t</a>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Progress -->\r\n\t<mat-spinner diameter=\"18\" *ngIf=\"dataSource?.isLoading\"></mat-spinner>\r\n\t<!-- #endregion -->\r\n</mat-chip-list>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n\t<ng-template *ngIf=\"!classType && opened\" let-item let-first=\"first\" ngFor [ngForOf]=\"dataSource?.items\">\r\n\t\t<mat-option [value]=\"item\">\r\n\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{item}}</span>\r\n\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n\t\t</mat-option>\r\n\t</ng-template>\r\n\t<ng-container *ngIf=\"classType && opened\">\r\n\t\t<mat-option hide=\"true\"></mat-option>\r\n\t\t<vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n\t</ng-container>\r\n\t<mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n</mat-autocomplete>\r\n<!-- #endregion -->", styles: [":host ::ng-deep .mat-chip-list-wrapper{min-height:24px}:host ::ng-deep .mat-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center}:host ::ng-deep .mat-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-chip .vd-chip-content{flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-chip .mat-icon{cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-icon-button{display:inline-flex;justify-content:center;align-items:center;width:2em;height:2em;margin-top:-6px}:host ::ng-deep .mat-icon-button .mat-button-wrapper{line-height:20px}:host ::ng-deep .mat-icon-button .mat-button-wrapper .mat-icon{font-size:21px;line-height:21px}::ng-deep .mat-autocomplete-panel{margin-top:9px}::ng-deep .mat-autocomplete-panel .mat-paginator{position:sticky;bottom:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container{padding:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions{align-items:baseline}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions .mat-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-autocomplete-panel.table-autocomplete{max-height:400px}mat-spinner{margin-top:-9px;margin-right:6px}::ng-deep mat-form-field.mat-form-field-type-app-vd-chips .mat-form-field-infix{padding:0;min-height:44px;display:flex;align-items:center;flex-direction:row}\n"], components: [{ type: i5.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i6.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i9.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i10.VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "classType", "context", "dataSourceFilter", "static", "filterable", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "columns", "rowMenuItems", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }, { type: i11.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i9.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.MatChipRemove, selector: "[matChipRemove]" }, { type: i13.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: i5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i9.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdChipsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vd-chips', providers: [{ provide: MatFormFieldControl, useExisting: VdChipsComponent }], template: "<mat-chip-list #chipList [required]=\"required\" [disabled]=\"readonly\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\r\n\t<!-- #region Chips -->\r\n\t<ng-template let-chip let-first=\"first\" let-index=\"index\" ngFor [ngForOf]=\"chips\">\r\n\t\t<mat-basic-chip [selectable]=\"!readonly\" [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n\t\t\t<span class=\"vd-chip-content\">\r\n\t\t\t\t<span *ngIf=\"!chipTemplate?.templateRef\">\r\n\t\t\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{ chip }}</span>\r\n\t\t\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n\t\t\t\t</span>\r\n\t\t\t\t<ng-template *ngIf=\"chipTemplate?.templateRef\" [ngTemplateOutlet]=\"chipTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n\t\t\t</span>\r\n\t\t\t<ng-template let-button let-first=\"first\" ngFor [ngForOf]=\"suffixButtons\">\r\n\t\t\t\t<a mat-icon-button *ngIf=\"!button.hide || !button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n\t\t\t\t\t<mat-icon>{{button.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-template>\r\n\t\t\t<a mat-icon-button *ngIf=\"onLaunch?.observers?.length > 0\" (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n\t\t\t\t<mat-icon>launch</mat-icon>\r\n\t\t\t</a>\r\n\t\t\t<a mat-icon-button *ngIf=\"!readonly\">\r\n\t\t\t\t<mat-icon matChipRemove>close</mat-icon>\r\n\t\t\t</a>\r\n\t\t</mat-basic-chip>\r\n\t</ng-template>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Search box -->\r\n\t<input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" #filterInput />\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Reset button -->\r\n\t<a mat-icon-button trailingIcon *ngIf=\"filterInput.value\" class=\"reset-input\" (click)=\"filterInput.value = ''\">\r\n\t\t<mat-icon>close</mat-icon>\r\n\t</a>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Progress -->\r\n\t<mat-spinner diameter=\"18\" *ngIf=\"dataSource?.isLoading\"></mat-spinner>\r\n\t<!-- #endregion -->\r\n</mat-chip-list>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n\t<ng-template *ngIf=\"!classType && opened\" let-item let-first=\"first\" ngFor [ngForOf]=\"dataSource?.items\">\r\n\t\t<mat-option [value]=\"item\">\r\n\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{item}}</span>\r\n\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n\t\t</mat-option>\r\n\t</ng-template>\r\n\t<ng-container *ngIf=\"classType && opened\">\r\n\t\t<mat-option hide=\"true\"></mat-option>\r\n\t\t<vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n\t</ng-container>\r\n\t<mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n</mat-autocomplete>\r\n<!-- #endregion -->", styles: [":host ::ng-deep .mat-chip-list-wrapper{min-height:24px}:host ::ng-deep .mat-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center}:host ::ng-deep .mat-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-chip .vd-chip-content{flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-chip .mat-icon{cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-icon-button{display:inline-flex;justify-content:center;align-items:center;width:2.2em;height:2.2em;margin-top:-10px}:host ::ng-deep .mat-icon-button .mat-button-wrapper{line-height:20px}:host ::ng-deep .mat-icon-button .mat-button-wrapper .mat-icon{font-size:21px;line-height:21px}::ng-deep .mat-autocomplete-panel{margin-top:9px}::ng-deep .mat-autocomplete-panel .mat-paginator{position:sticky;bottom:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container{padding:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions{align-items:baseline}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions .mat-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-autocomplete-panel.table-autocomplete{max-height:400px}mat-spinner{margin-top:-9px;margin-right:6px}\n"] }]
+            args: [{ selector: 'vd-chips', providers: [{ provide: MatFormFieldControl, useExisting: VdChipsComponent }], template: "<mat-chip-list #chipList [required]=\"required\" [disabled]=\"readonly\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\r\n\t<!-- #region Chips -->\r\n\t<ng-template let-chip let-first=\"first\" let-index=\"index\" ngFor [ngForOf]=\"chips\">\r\n\t\t<mat-basic-chip [selectable]=\"!readonly\" [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n\t\t\t<span class=\"vd-chip-content\">\r\n\t\t\t\t<span *ngIf=\"!chipTemplate?.templateRef\">\r\n\t\t\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{ chip }}</span>\r\n\t\t\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n\t\t\t\t</span>\r\n\t\t\t\t<ng-template *ngIf=\"chipTemplate?.templateRef\" [ngTemplateOutlet]=\"chipTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n\t\t\t</span>\r\n\t\t\t<ng-template let-button let-first=\"first\" ngFor [ngForOf]=\"suffixButtons\">\r\n\t\t\t\t<a mat-icon-button *ngIf=\"!button.hide || !button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n\t\t\t\t\t<mat-icon>{{button.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-template>\r\n\t\t\t<a mat-icon-button *ngIf=\"onLaunch?.observers?.length > 0\" (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n\t\t\t\t<mat-icon>launch</mat-icon>\r\n\t\t\t</a>\r\n\t\t\t<a mat-icon-button *ngIf=\"!readonly\">\r\n\t\t\t\t<mat-icon matChipRemove>close</mat-icon>\r\n\t\t\t</a>\r\n\t\t</mat-basic-chip>\r\n\t</ng-template>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Search box -->\r\n\t<input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" #filterInput />\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Reset button -->\r\n\t<a mat-icon-button trailingIcon *ngIf=\"filterInput.value\" class=\"reset-input\" (click)=\"filterInput.value = ''\">\r\n\t\t<mat-icon>close</mat-icon>\r\n\t</a>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Progress -->\r\n\t<mat-spinner diameter=\"18\" *ngIf=\"dataSource?.isLoading\"></mat-spinner>\r\n\t<!-- #endregion -->\r\n</mat-chip-list>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n\t<ng-template *ngIf=\"!classType && opened\" let-item let-first=\"first\" ngFor [ngForOf]=\"dataSource?.items\">\r\n\t\t<mat-option [value]=\"item\">\r\n\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{item}}</span>\r\n\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n\t\t</mat-option>\r\n\t</ng-template>\r\n\t<ng-container *ngIf=\"classType && opened\">\r\n\t\t<mat-option hide=\"true\"></mat-option>\r\n\t\t<vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n\t</ng-container>\r\n\t<mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n</mat-autocomplete>\r\n<!-- #endregion -->", styles: [":host ::ng-deep .mat-chip-list-wrapper{min-height:24px}:host ::ng-deep .mat-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center}:host ::ng-deep .mat-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-chip .vd-chip-content{flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-chip .mat-icon{cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-icon-button{display:inline-flex;justify-content:center;align-items:center;width:2em;height:2em;margin-top:-6px}:host ::ng-deep .mat-icon-button .mat-button-wrapper{line-height:20px}:host ::ng-deep .mat-icon-button .mat-button-wrapper .mat-icon{font-size:21px;line-height:21px}::ng-deep .mat-autocomplete-panel{margin-top:9px}::ng-deep .mat-autocomplete-panel .mat-paginator{position:sticky;bottom:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container{padding:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions{align-items:baseline}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions .mat-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-autocomplete-panel.table-autocomplete{max-height:400px}mat-spinner{margin-top:-9px;margin-right:6px}::ng-deep mat-form-field.mat-form-field-type-app-vd-chips .mat-form-field-infix{padding:0;min-height:44px;display:flex;align-items:center;flex-direction:row}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.VdMediaService }, { type: i0.ChangeDetectorRef }, { type: i2.NgControl, decorators: [{
                     type: Optional
                 }, {

package/fesm2015/messaia-cdk.mjs

@@ -15079,10 +15079,10 @@ class VdChipsComponent extends AbstractMatFormField {
     }
 }
 /** @nocollapse */ VdChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdChipsComponent, deps: [{ token: i0.Injector }, { token: VdMediaService }, { token: i0.ChangeDetectorRef }, { token: i1.NgControl, optional: true, self: true }, { token: i1.NgForm, optional: true }, { token: i1.FormGroupDirective, optional: true }, { token: i2.ErrorStateMatcher }, { token: i3$4.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdChipsComponent, selector: "vd-chips", inputs: { classType: "classType", chips: "chips", endpoint: "endpoint", params: "params", projection: "projection", paginated: "paginated", context: "context", key: "key", searchField: "searchField", searchFields: "searchFields", removable: "removable", debounce: "debounce", autocompleteCssClass: "autocompleteCssClass", suffixButtons: "suffixButtons" }, outputs: { initSelect: "initSelect", selected: "selected", cleared: "cleared", onLaunch: "launch", chipFocus: "chipFocus" }, providers: [{ provide: MatFormFieldControl, useExisting: VdChipsComponent }], queries: [{ propertyName: "chipTemplate", first: true, predicate: VdChipDirective, descendants: true }, { propertyName: "autocompleteOptionTemplate", first: true, predicate: VdAutocompleteOptionDirective, descendants: true }], viewQueries: [{ propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-chip-list #chipList [required]=\"required\" [disabled]=\"readonly\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\r\n\t<!-- #region Chips -->\r\n\t<ng-template let-chip let-first=\"first\" let-index=\"index\" ngFor [ngForOf]=\"chips\">\r\n\t\t<mat-basic-chip [selectable]=\"!readonly\" [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n\t\t\t<span class=\"vd-chip-content\">\r\n\t\t\t\t<span *ngIf=\"!chipTemplate?.templateRef\">\r\n\t\t\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{ chip }}</span>\r\n\t\t\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n\t\t\t\t</span>\r\n\t\t\t\t<ng-template *ngIf=\"chipTemplate?.templateRef\" [ngTemplateOutlet]=\"chipTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n\t\t\t</span>\r\n\t\t\t<ng-template let-button let-first=\"first\" ngFor [ngForOf]=\"suffixButtons\">\r\n\t\t\t\t<a mat-icon-button *ngIf=\"!button.hide || !button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n\t\t\t\t\t<mat-icon>{{button.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-template>\r\n\t\t\t<a mat-icon-button *ngIf=\"onLaunch?.observers?.length > 0\" (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n\t\t\t\t<mat-icon>launch</mat-icon>\r\n\t\t\t</a>\r\n\t\t\t<a mat-icon-button *ngIf=\"!readonly\">\r\n\t\t\t\t<mat-icon matChipRemove>close</mat-icon>\r\n\t\t\t</a>\r\n\t\t</mat-basic-chip>\r\n\t</ng-template>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Search box -->\r\n\t<input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" #filterInput />\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Reset button -->\r\n\t<a mat-icon-button trailingIcon *ngIf=\"filterInput.value\" class=\"reset-input\" (click)=\"filterInput.value = ''\">\r\n\t\t<mat-icon>close</mat-icon>\r\n\t</a>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Progress -->\r\n\t<mat-spinner diameter=\"18\" *ngIf=\"dataSource?.isLoading\"></mat-spinner>\r\n\t<!-- #endregion -->\r\n</mat-chip-list>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n\t<ng-template *ngIf=\"!classType && opened\" let-item let-first=\"first\" ngFor [ngForOf]=\"dataSource?.items\">\r\n\t\t<mat-option [value]=\"item\">\r\n\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{item}}</span>\r\n\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n\t\t</mat-option>\r\n\t</ng-template>\r\n\t<ng-container *ngIf=\"classType && opened\">\r\n\t\t<mat-option hide=\"true\"></mat-option>\r\n\t\t<vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n\t</ng-container>\r\n\t<mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n</mat-autocomplete>\r\n<!-- #endregion -->", styles: [":host ::ng-deep .mat-chip-list-wrapper{min-height:24px}:host ::ng-deep .mat-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center}:host ::ng-deep .mat-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-chip .vd-chip-content{flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-chip .mat-icon{cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-icon-button{display:inline-flex;justify-content:center;align-items:center;width:2.2em;height:2.2em;margin-top:-10px}:host ::ng-deep .mat-icon-button .mat-button-wrapper{line-height:20px}:host ::ng-deep .mat-icon-button .mat-button-wrapper .mat-icon{font-size:21px;line-height:21px}::ng-deep .mat-autocomplete-panel{margin-top:9px}::ng-deep .mat-autocomplete-panel .mat-paginator{position:sticky;bottom:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container{padding:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions{align-items:baseline}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions .mat-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-autocomplete-panel.table-autocomplete{max-height:400px}mat-spinner{margin-top:-9px;margin-right:6px}\n"], components: [{ type: i5$2.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i4$2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i9$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "classType", "context", "dataSourceFilter", "static", "filterable", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "columns", "rowMenuItems", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }, { type: i13.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i9$1.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5$2.MatChipRemove, selector: "[matChipRemove]" }, { type: i7.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: i5$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i9$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+/** @nocollapse */ VdChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdChipsComponent, selector: "vd-chips", inputs: { classType: "classType", chips: "chips", endpoint: "endpoint", params: "params", projection: "projection", paginated: "paginated", context: "context", key: "key", searchField: "searchField", searchFields: "searchFields", removable: "removable", debounce: "debounce", autocompleteCssClass: "autocompleteCssClass", suffixButtons: "suffixButtons" }, outputs: { initSelect: "initSelect", selected: "selected", cleared: "cleared", onLaunch: "launch", chipFocus: "chipFocus" }, providers: [{ provide: MatFormFieldControl, useExisting: VdChipsComponent }], queries: [{ propertyName: "chipTemplate", first: true, predicate: VdChipDirective, descendants: true }, { propertyName: "autocompleteOptionTemplate", first: true, predicate: VdAutocompleteOptionDirective, descendants: true }], viewQueries: [{ propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-chip-list #chipList [required]=\"required\" [disabled]=\"readonly\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\r\n\t<!-- #region Chips -->\r\n\t<ng-template let-chip let-first=\"first\" let-index=\"index\" ngFor [ngForOf]=\"chips\">\r\n\t\t<mat-basic-chip [selectable]=\"!readonly\" [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n\t\t\t<span class=\"vd-chip-content\">\r\n\t\t\t\t<span *ngIf=\"!chipTemplate?.templateRef\">\r\n\t\t\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{ chip }}</span>\r\n\t\t\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n\t\t\t\t</span>\r\n\t\t\t\t<ng-template *ngIf=\"chipTemplate?.templateRef\" [ngTemplateOutlet]=\"chipTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n\t\t\t</span>\r\n\t\t\t<ng-template let-button let-first=\"first\" ngFor [ngForOf]=\"suffixButtons\">\r\n\t\t\t\t<a mat-icon-button *ngIf=\"!button.hide || !button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n\t\t\t\t\t<mat-icon>{{button.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-template>\r\n\t\t\t<a mat-icon-button *ngIf=\"onLaunch?.observers?.length > 0\" (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n\t\t\t\t<mat-icon>launch</mat-icon>\r\n\t\t\t</a>\r\n\t\t\t<a mat-icon-button *ngIf=\"!readonly\">\r\n\t\t\t\t<mat-icon matChipRemove>close</mat-icon>\r\n\t\t\t</a>\r\n\t\t</mat-basic-chip>\r\n\t</ng-template>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Search box -->\r\n\t<input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" #filterInput />\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Reset button -->\r\n\t<a mat-icon-button trailingIcon *ngIf=\"filterInput.value\" class=\"reset-input\" (click)=\"filterInput.value = ''\">\r\n\t\t<mat-icon>close</mat-icon>\r\n\t</a>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Progress -->\r\n\t<mat-spinner diameter=\"18\" *ngIf=\"dataSource?.isLoading\"></mat-spinner>\r\n\t<!-- #endregion -->\r\n</mat-chip-list>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n\t<ng-template *ngIf=\"!classType && opened\" let-item let-first=\"first\" ngFor [ngForOf]=\"dataSource?.items\">\r\n\t\t<mat-option [value]=\"item\">\r\n\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{item}}</span>\r\n\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n\t\t</mat-option>\r\n\t</ng-template>\r\n\t<ng-container *ngIf=\"classType && opened\">\r\n\t\t<mat-option hide=\"true\"></mat-option>\r\n\t\t<vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n\t</ng-container>\r\n\t<mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n</mat-autocomplete>\r\n<!-- #endregion -->", styles: [":host ::ng-deep .mat-chip-list-wrapper{min-height:24px}:host ::ng-deep .mat-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center}:host ::ng-deep .mat-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-chip .vd-chip-content{flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-chip .mat-icon{cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-icon-button{display:inline-flex;justify-content:center;align-items:center;width:2em;height:2em;margin-top:-6px}:host ::ng-deep .mat-icon-button .mat-button-wrapper{line-height:20px}:host ::ng-deep .mat-icon-button .mat-button-wrapper .mat-icon{font-size:21px;line-height:21px}::ng-deep .mat-autocomplete-panel{margin-top:9px}::ng-deep .mat-autocomplete-panel .mat-paginator{position:sticky;bottom:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container{padding:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions{align-items:baseline}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions .mat-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-autocomplete-panel.table-autocomplete{max-height:400px}mat-spinner{margin-top:-9px;margin-right:6px}::ng-deep mat-form-field.mat-form-field-type-app-vd-chips .mat-form-field-infix{padding:0;min-height:44px;display:flex;align-items:center;flex-direction:row}\n"], components: [{ type: i5$2.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i4$2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i9$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "classType", "context", "dataSourceFilter", "static", "filterable", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "columns", "rowMenuItems", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }, { type: i13.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i9$1.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5$2.MatChipRemove, selector: "[matChipRemove]" }, { type: i7.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: i5$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i9$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdChipsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vd-chips', providers: [{ provide: MatFormFieldControl, useExisting: VdChipsComponent }], template: "<mat-chip-list #chipList [required]=\"required\" [disabled]=\"readonly\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\r\n\t<!-- #region Chips -->\r\n\t<ng-template let-chip let-first=\"first\" let-index=\"index\" ngFor [ngForOf]=\"chips\">\r\n\t\t<mat-basic-chip [selectable]=\"!readonly\" [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n\t\t\t<span class=\"vd-chip-content\">\r\n\t\t\t\t<span *ngIf=\"!chipTemplate?.templateRef\">\r\n\t\t\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{ chip }}</span>\r\n\t\t\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n\t\t\t\t</span>\r\n\t\t\t\t<ng-template *ngIf=\"chipTemplate?.templateRef\" [ngTemplateOutlet]=\"chipTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n\t\t\t</span>\r\n\t\t\t<ng-template let-button let-first=\"first\" ngFor [ngForOf]=\"suffixButtons\">\r\n\t\t\t\t<a mat-icon-button *ngIf=\"!button.hide || !button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n\t\t\t\t\t<mat-icon>{{button.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-template>\r\n\t\t\t<a mat-icon-button *ngIf=\"onLaunch?.observers?.length > 0\" (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n\t\t\t\t<mat-icon>launch</mat-icon>\r\n\t\t\t</a>\r\n\t\t\t<a mat-icon-button *ngIf=\"!readonly\">\r\n\t\t\t\t<mat-icon matChipRemove>close</mat-icon>\r\n\t\t\t</a>\r\n\t\t</mat-basic-chip>\r\n\t</ng-template>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Search box -->\r\n\t<input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" #filterInput />\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Reset button -->\r\n\t<a mat-icon-button trailingIcon *ngIf=\"filterInput.value\" class=\"reset-input\" (click)=\"filterInput.value = ''\">\r\n\t\t<mat-icon>close</mat-icon>\r\n\t</a>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Progress -->\r\n\t<mat-spinner diameter=\"18\" *ngIf=\"dataSource?.isLoading\"></mat-spinner>\r\n\t<!-- #endregion -->\r\n</mat-chip-list>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n\t<ng-template *ngIf=\"!classType && opened\" let-item let-first=\"first\" ngFor [ngForOf]=\"dataSource?.items\">\r\n\t\t<mat-option [value]=\"item\">\r\n\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{item}}</span>\r\n\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n\t\t</mat-option>\r\n\t</ng-template>\r\n\t<ng-container *ngIf=\"classType && opened\">\r\n\t\t<mat-option hide=\"true\"></mat-option>\r\n\t\t<vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n\t</ng-container>\r\n\t<mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n</mat-autocomplete>\r\n<!-- #endregion -->", styles: [":host ::ng-deep .mat-chip-list-wrapper{min-height:24px}:host ::ng-deep .mat-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center}:host ::ng-deep .mat-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-chip .vd-chip-content{flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-chip .mat-icon{cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-icon-button{display:inline-flex;justify-content:center;align-items:center;width:2.2em;height:2.2em;margin-top:-10px}:host ::ng-deep .mat-icon-button .mat-button-wrapper{line-height:20px}:host ::ng-deep .mat-icon-button .mat-button-wrapper .mat-icon{font-size:21px;line-height:21px}::ng-deep .mat-autocomplete-panel{margin-top:9px}::ng-deep .mat-autocomplete-panel .mat-paginator{position:sticky;bottom:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container{padding:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions{align-items:baseline}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions .mat-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-autocomplete-panel.table-autocomplete{max-height:400px}mat-spinner{margin-top:-9px;margin-right:6px}\n"] }]
+            args: [{ selector: 'vd-chips', providers: [{ provide: MatFormFieldControl, useExisting: VdChipsComponent }], template: "<mat-chip-list #chipList [required]=\"required\" [disabled]=\"readonly\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\r\n\t<!-- #region Chips -->\r\n\t<ng-template let-chip let-first=\"first\" let-index=\"index\" ngFor [ngForOf]=\"chips\">\r\n\t\t<mat-basic-chip [selectable]=\"!readonly\" [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n\t\t\t<span class=\"vd-chip-content\">\r\n\t\t\t\t<span *ngIf=\"!chipTemplate?.templateRef\">\r\n\t\t\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{ chip }}</span>\r\n\t\t\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n\t\t\t\t</span>\r\n\t\t\t\t<ng-template *ngIf=\"chipTemplate?.templateRef\" [ngTemplateOutlet]=\"chipTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n\t\t\t</span>\r\n\t\t\t<ng-template let-button let-first=\"first\" ngFor [ngForOf]=\"suffixButtons\">\r\n\t\t\t\t<a mat-icon-button *ngIf=\"!button.hide || !button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n\t\t\t\t\t<mat-icon>{{button.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-template>\r\n\t\t\t<a mat-icon-button *ngIf=\"onLaunch?.observers?.length > 0\" (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n\t\t\t\t<mat-icon>launch</mat-icon>\r\n\t\t\t</a>\r\n\t\t\t<a mat-icon-button *ngIf=\"!readonly\">\r\n\t\t\t\t<mat-icon matChipRemove>close</mat-icon>\r\n\t\t\t</a>\r\n\t\t</mat-basic-chip>\r\n\t</ng-template>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Search box -->\r\n\t<input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" #filterInput />\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Reset button -->\r\n\t<a mat-icon-button trailingIcon *ngIf=\"filterInput.value\" class=\"reset-input\" (click)=\"filterInput.value = ''\">\r\n\t\t<mat-icon>close</mat-icon>\r\n\t</a>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Progress -->\r\n\t<mat-spinner diameter=\"18\" *ngIf=\"dataSource?.isLoading\"></mat-spinner>\r\n\t<!-- #endregion -->\r\n</mat-chip-list>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n\t<ng-template *ngIf=\"!classType && opened\" let-item let-first=\"first\" ngFor [ngForOf]=\"dataSource?.items\">\r\n\t\t<mat-option [value]=\"item\">\r\n\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{item}}</span>\r\n\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n\t\t</mat-option>\r\n\t</ng-template>\r\n\t<ng-container *ngIf=\"classType && opened\">\r\n\t\t<mat-option hide=\"true\"></mat-option>\r\n\t\t<vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n\t</ng-container>\r\n\t<mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n</mat-autocomplete>\r\n<!-- #endregion -->", styles: [":host ::ng-deep .mat-chip-list-wrapper{min-height:24px}:host ::ng-deep .mat-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center}:host ::ng-deep .mat-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-chip .vd-chip-content{flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-chip .mat-icon{cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-icon-button{display:inline-flex;justify-content:center;align-items:center;width:2em;height:2em;margin-top:-6px}:host ::ng-deep .mat-icon-button .mat-button-wrapper{line-height:20px}:host ::ng-deep .mat-icon-button .mat-button-wrapper .mat-icon{font-size:21px;line-height:21px}::ng-deep .mat-autocomplete-panel{margin-top:9px}::ng-deep .mat-autocomplete-panel .mat-paginator{position:sticky;bottom:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container{padding:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions{align-items:baseline}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions .mat-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-autocomplete-panel.table-autocomplete{max-height:400px}mat-spinner{margin-top:-9px;margin-right:6px}::ng-deep mat-form-field.mat-form-field-type-app-vd-chips .mat-form-field-infix{padding:0;min-height:44px;display:flex;align-items:center;flex-direction:row}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.Injector }, { type: VdMediaService }, { type: i0.ChangeDetectorRef }, { type: i1.NgControl, decorators: [{
                         type: Optional

package/fesm2020/messaia-cdk.mjs

@@ -15007,10 +15007,10 @@ class VdChipsComponent extends AbstractMatFormField {
     }
 }
 /** @nocollapse */ VdChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdChipsComponent, deps: [{ token: i0.Injector }, { token: VdMediaService }, { token: i0.ChangeDetectorRef }, { token: i1.NgControl, optional: true, self: true }, { token: i1.NgForm, optional: true }, { token: i1.FormGroupDirective, optional: true }, { token: i2.ErrorStateMatcher }, { token: i3$4.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdChipsComponent, selector: "vd-chips", inputs: { classType: "classType", chips: "chips", endpoint: "endpoint", params: "params", projection: "projection", paginated: "paginated", context: "context", key: "key", searchField: "searchField", searchFields: "searchFields", removable: "removable", debounce: "debounce", autocompleteCssClass: "autocompleteCssClass", suffixButtons: "suffixButtons" }, outputs: { initSelect: "initSelect", selected: "selected", cleared: "cleared", onLaunch: "launch", chipFocus: "chipFocus" }, providers: [{ provide: MatFormFieldControl, useExisting: VdChipsComponent }], queries: [{ propertyName: "chipTemplate", first: true, predicate: VdChipDirective, descendants: true }, { propertyName: "autocompleteOptionTemplate", first: true, predicate: VdAutocompleteOptionDirective, descendants: true }], viewQueries: [{ propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-chip-list #chipList [required]=\"required\" [disabled]=\"readonly\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\r\n\t<!-- #region Chips -->\r\n\t<ng-template let-chip let-first=\"first\" let-index=\"index\" ngFor [ngForOf]=\"chips\">\r\n\t\t<mat-basic-chip [selectable]=\"!readonly\" [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n\t\t\t<span class=\"vd-chip-content\">\r\n\t\t\t\t<span *ngIf=\"!chipTemplate?.templateRef\">\r\n\t\t\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{ chip }}</span>\r\n\t\t\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n\t\t\t\t</span>\r\n\t\t\t\t<ng-template *ngIf=\"chipTemplate?.templateRef\" [ngTemplateOutlet]=\"chipTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n\t\t\t</span>\r\n\t\t\t<ng-template let-button let-first=\"first\" ngFor [ngForOf]=\"suffixButtons\">\r\n\t\t\t\t<a mat-icon-button *ngIf=\"!button.hide || !button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n\t\t\t\t\t<mat-icon>{{button.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-template>\r\n\t\t\t<a mat-icon-button *ngIf=\"onLaunch?.observers?.length > 0\" (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n\t\t\t\t<mat-icon>launch</mat-icon>\r\n\t\t\t</a>\r\n\t\t\t<a mat-icon-button *ngIf=\"!readonly\">\r\n\t\t\t\t<mat-icon matChipRemove>close</mat-icon>\r\n\t\t\t</a>\r\n\t\t</mat-basic-chip>\r\n\t</ng-template>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Search box -->\r\n\t<input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" #filterInput />\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Reset button -->\r\n\t<a mat-icon-button trailingIcon *ngIf=\"filterInput.value\" class=\"reset-input\" (click)=\"filterInput.value = ''\">\r\n\t\t<mat-icon>close</mat-icon>\r\n\t</a>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Progress -->\r\n\t<mat-spinner diameter=\"18\" *ngIf=\"dataSource?.isLoading\"></mat-spinner>\r\n\t<!-- #endregion -->\r\n</mat-chip-list>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n\t<ng-template *ngIf=\"!classType && opened\" let-item let-first=\"first\" ngFor [ngForOf]=\"dataSource?.items\">\r\n\t\t<mat-option [value]=\"item\">\r\n\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{item}}</span>\r\n\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n\t\t</mat-option>\r\n\t</ng-template>\r\n\t<ng-container *ngIf=\"classType && opened\">\r\n\t\t<mat-option hide=\"true\"></mat-option>\r\n\t\t<vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n\t</ng-container>\r\n\t<mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n</mat-autocomplete>\r\n<!-- #endregion -->", styles: [":host ::ng-deep .mat-chip-list-wrapper{min-height:24px}:host ::ng-deep .mat-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center}:host ::ng-deep .mat-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-chip .vd-chip-content{flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-chip .mat-icon{cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-icon-button{display:inline-flex;justify-content:center;align-items:center;width:2.2em;height:2.2em;margin-top:-10px}:host ::ng-deep .mat-icon-button .mat-button-wrapper{line-height:20px}:host ::ng-deep .mat-icon-button .mat-button-wrapper .mat-icon{font-size:21px;line-height:21px}::ng-deep .mat-autocomplete-panel{margin-top:9px}::ng-deep .mat-autocomplete-panel .mat-paginator{position:sticky;bottom:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container{padding:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions{align-items:baseline}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions .mat-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-autocomplete-panel.table-autocomplete{max-height:400px}mat-spinner{margin-top:-9px;margin-right:6px}\n"], components: [{ type: i5$2.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i4$2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i9$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "classType", "context", "dataSourceFilter", "static", "filterable", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "columns", "rowMenuItems", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }, { type: i13.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i9$1.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5$2.MatChipRemove, selector: "[matChipRemove]" }, { type: i7.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: i5$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i9$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+/** @nocollapse */ VdChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdChipsComponent, selector: "vd-chips", inputs: { classType: "classType", chips: "chips", endpoint: "endpoint", params: "params", projection: "projection", paginated: "paginated", context: "context", key: "key", searchField: "searchField", searchFields: "searchFields", removable: "removable", debounce: "debounce", autocompleteCssClass: "autocompleteCssClass", suffixButtons: "suffixButtons" }, outputs: { initSelect: "initSelect", selected: "selected", cleared: "cleared", onLaunch: "launch", chipFocus: "chipFocus" }, providers: [{ provide: MatFormFieldControl, useExisting: VdChipsComponent }], queries: [{ propertyName: "chipTemplate", first: true, predicate: VdChipDirective, descendants: true }, { propertyName: "autocompleteOptionTemplate", first: true, predicate: VdAutocompleteOptionDirective, descendants: true }], viewQueries: [{ propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-chip-list #chipList [required]=\"required\" [disabled]=\"readonly\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\r\n\t<!-- #region Chips -->\r\n\t<ng-template let-chip let-first=\"first\" let-index=\"index\" ngFor [ngForOf]=\"chips\">\r\n\t\t<mat-basic-chip [selectable]=\"!readonly\" [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n\t\t\t<span class=\"vd-chip-content\">\r\n\t\t\t\t<span *ngIf=\"!chipTemplate?.templateRef\">\r\n\t\t\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{ chip }}</span>\r\n\t\t\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n\t\t\t\t</span>\r\n\t\t\t\t<ng-template *ngIf=\"chipTemplate?.templateRef\" [ngTemplateOutlet]=\"chipTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n\t\t\t</span>\r\n\t\t\t<ng-template let-button let-first=\"first\" ngFor [ngForOf]=\"suffixButtons\">\r\n\t\t\t\t<a mat-icon-button *ngIf=\"!button.hide || !button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n\t\t\t\t\t<mat-icon>{{button.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-template>\r\n\t\t\t<a mat-icon-button *ngIf=\"onLaunch?.observers?.length > 0\" (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n\t\t\t\t<mat-icon>launch</mat-icon>\r\n\t\t\t</a>\r\n\t\t\t<a mat-icon-button *ngIf=\"!readonly\">\r\n\t\t\t\t<mat-icon matChipRemove>close</mat-icon>\r\n\t\t\t</a>\r\n\t\t</mat-basic-chip>\r\n\t</ng-template>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Search box -->\r\n\t<input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" #filterInput />\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Reset button -->\r\n\t<a mat-icon-button trailingIcon *ngIf=\"filterInput.value\" class=\"reset-input\" (click)=\"filterInput.value = ''\">\r\n\t\t<mat-icon>close</mat-icon>\r\n\t</a>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Progress -->\r\n\t<mat-spinner diameter=\"18\" *ngIf=\"dataSource?.isLoading\"></mat-spinner>\r\n\t<!-- #endregion -->\r\n</mat-chip-list>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n\t<ng-template *ngIf=\"!classType && opened\" let-item let-first=\"first\" ngFor [ngForOf]=\"dataSource?.items\">\r\n\t\t<mat-option [value]=\"item\">\r\n\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{item}}</span>\r\n\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n\t\t</mat-option>\r\n\t</ng-template>\r\n\t<ng-container *ngIf=\"classType && opened\">\r\n\t\t<mat-option hide=\"true\"></mat-option>\r\n\t\t<vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n\t</ng-container>\r\n\t<mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n</mat-autocomplete>\r\n<!-- #endregion -->", styles: [":host ::ng-deep .mat-chip-list-wrapper{min-height:24px}:host ::ng-deep .mat-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center}:host ::ng-deep .mat-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-chip .vd-chip-content{flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-chip .mat-icon{cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-icon-button{display:inline-flex;justify-content:center;align-items:center;width:2em;height:2em;margin-top:-6px}:host ::ng-deep .mat-icon-button .mat-button-wrapper{line-height:20px}:host ::ng-deep .mat-icon-button .mat-button-wrapper .mat-icon{font-size:21px;line-height:21px}::ng-deep .mat-autocomplete-panel{margin-top:9px}::ng-deep .mat-autocomplete-panel .mat-paginator{position:sticky;bottom:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container{padding:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions{align-items:baseline}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions .mat-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-autocomplete-panel.table-autocomplete{max-height:400px}mat-spinner{margin-top:-9px;margin-right:6px}::ng-deep mat-form-field.mat-form-field-type-app-vd-chips .mat-form-field-infix{padding:0;min-height:44px;display:flex;align-items:center;flex-direction:row}\n"], components: [{ type: i5$2.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i4$2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i9$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "classType", "context", "dataSourceFilter", "static", "filterable", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "columns", "rowMenuItems", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }, { type: i13.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i9$1.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5$2.MatChipRemove, selector: "[matChipRemove]" }, { type: i7.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: i5$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i9$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdChipsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vd-chips', providers: [{ provide: MatFormFieldControl, useExisting: VdChipsComponent }], template: "<mat-chip-list #chipList [required]=\"required\" [disabled]=\"readonly\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\r\n\t<!-- #region Chips -->\r\n\t<ng-template let-chip let-first=\"first\" let-index=\"index\" ngFor [ngForOf]=\"chips\">\r\n\t\t<mat-basic-chip [selectable]=\"!readonly\" [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n\t\t\t<span class=\"vd-chip-content\">\r\n\t\t\t\t<span *ngIf=\"!chipTemplate?.templateRef\">\r\n\t\t\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{ chip }}</span>\r\n\t\t\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n\t\t\t\t</span>\r\n\t\t\t\t<ng-template *ngIf=\"chipTemplate?.templateRef\" [ngTemplateOutlet]=\"chipTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n\t\t\t</span>\r\n\t\t\t<ng-template let-button let-first=\"first\" ngFor [ngForOf]=\"suffixButtons\">\r\n\t\t\t\t<a mat-icon-button *ngIf=\"!button.hide || !button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n\t\t\t\t\t<mat-icon>{{button.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-template>\r\n\t\t\t<a mat-icon-button *ngIf=\"onLaunch?.observers?.length > 0\" (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n\t\t\t\t<mat-icon>launch</mat-icon>\r\n\t\t\t</a>\r\n\t\t\t<a mat-icon-button *ngIf=\"!readonly\">\r\n\t\t\t\t<mat-icon matChipRemove>close</mat-icon>\r\n\t\t\t</a>\r\n\t\t</mat-basic-chip>\r\n\t</ng-template>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Search box -->\r\n\t<input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" #filterInput />\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Reset button -->\r\n\t<a mat-icon-button trailingIcon *ngIf=\"filterInput.value\" class=\"reset-input\" (click)=\"filterInput.value = ''\">\r\n\t\t<mat-icon>close</mat-icon>\r\n\t</a>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Progress -->\r\n\t<mat-spinner diameter=\"18\" *ngIf=\"dataSource?.isLoading\"></mat-spinner>\r\n\t<!-- #endregion -->\r\n</mat-chip-list>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n\t<ng-template *ngIf=\"!classType && opened\" let-item let-first=\"first\" ngFor [ngForOf]=\"dataSource?.items\">\r\n\t\t<mat-option [value]=\"item\">\r\n\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{item}}</span>\r\n\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n\t\t</mat-option>\r\n\t</ng-template>\r\n\t<ng-container *ngIf=\"classType && opened\">\r\n\t\t<mat-option hide=\"true\"></mat-option>\r\n\t\t<vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n\t</ng-container>\r\n\t<mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n</mat-autocomplete>\r\n<!-- #endregion -->", styles: [":host ::ng-deep .mat-chip-list-wrapper{min-height:24px}:host ::ng-deep .mat-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center}:host ::ng-deep .mat-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-chip .vd-chip-content{flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-chip .mat-icon{cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-icon-button{display:inline-flex;justify-content:center;align-items:center;width:2.2em;height:2.2em;margin-top:-10px}:host ::ng-deep .mat-icon-button .mat-button-wrapper{line-height:20px}:host ::ng-deep .mat-icon-button .mat-button-wrapper .mat-icon{font-size:21px;line-height:21px}::ng-deep .mat-autocomplete-panel{margin-top:9px}::ng-deep .mat-autocomplete-panel .mat-paginator{position:sticky;bottom:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container{padding:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions{align-items:baseline}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions .mat-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-autocomplete-panel.table-autocomplete{max-height:400px}mat-spinner{margin-top:-9px;margin-right:6px}\n"] }]
+            args: [{ selector: 'vd-chips', providers: [{ provide: MatFormFieldControl, useExisting: VdChipsComponent }], template: "<mat-chip-list #chipList [required]=\"required\" [disabled]=\"readonly\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\r\n\t<!-- #region Chips -->\r\n\t<ng-template let-chip let-first=\"first\" let-index=\"index\" ngFor [ngForOf]=\"chips\">\r\n\t\t<mat-basic-chip [selectable]=\"!readonly\" [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n\t\t\t<span class=\"vd-chip-content\">\r\n\t\t\t\t<span *ngIf=\"!chipTemplate?.templateRef\">\r\n\t\t\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{ chip }}</span>\r\n\t\t\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n\t\t\t\t</span>\r\n\t\t\t\t<ng-template *ngIf=\"chipTemplate?.templateRef\" [ngTemplateOutlet]=\"chipTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n\t\t\t</span>\r\n\t\t\t<ng-template let-button let-first=\"first\" ngFor [ngForOf]=\"suffixButtons\">\r\n\t\t\t\t<a mat-icon-button *ngIf=\"!button.hide || !button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n\t\t\t\t\t<mat-icon>{{button.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-template>\r\n\t\t\t<a mat-icon-button *ngIf=\"onLaunch?.observers?.length > 0\" (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n\t\t\t\t<mat-icon>launch</mat-icon>\r\n\t\t\t</a>\r\n\t\t\t<a mat-icon-button *ngIf=\"!readonly\">\r\n\t\t\t\t<mat-icon matChipRemove>close</mat-icon>\r\n\t\t\t</a>\r\n\t\t</mat-basic-chip>\r\n\t</ng-template>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Search box -->\r\n\t<input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" #filterInput />\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Reset button -->\r\n\t<a mat-icon-button trailingIcon *ngIf=\"filterInput.value\" class=\"reset-input\" (click)=\"filterInput.value = ''\">\r\n\t\t<mat-icon>close</mat-icon>\r\n\t</a>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Progress -->\r\n\t<mat-spinner diameter=\"18\" *ngIf=\"dataSource?.isLoading\"></mat-spinner>\r\n\t<!-- #endregion -->\r\n</mat-chip-list>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n\t<ng-template *ngIf=\"!classType && opened\" let-item let-first=\"first\" ngFor [ngForOf]=\"dataSource?.items\">\r\n\t\t<mat-option [value]=\"item\">\r\n\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{item}}</span>\r\n\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n\t\t</mat-option>\r\n\t</ng-template>\r\n\t<ng-container *ngIf=\"classType && opened\">\r\n\t\t<mat-option hide=\"true\"></mat-option>\r\n\t\t<vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n\t</ng-container>\r\n\t<mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n</mat-autocomplete>\r\n<!-- #endregion -->", styles: [":host ::ng-deep .mat-chip-list-wrapper{min-height:24px}:host ::ng-deep .mat-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center}:host ::ng-deep .mat-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-chip .vd-chip-content{flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-chip .mat-icon{cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-icon-button{display:inline-flex;justify-content:center;align-items:center;width:2em;height:2em;margin-top:-6px}:host ::ng-deep .mat-icon-button .mat-button-wrapper{line-height:20px}:host ::ng-deep .mat-icon-button .mat-button-wrapper .mat-icon{font-size:21px;line-height:21px}::ng-deep .mat-autocomplete-panel{margin-top:9px}::ng-deep .mat-autocomplete-panel .mat-paginator{position:sticky;bottom:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container{padding:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions{align-items:baseline}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions .mat-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-autocomplete-panel.table-autocomplete{max-height:400px}mat-spinner{margin-top:-9px;margin-right:6px}::ng-deep mat-form-field.mat-form-field-type-app-vd-chips .mat-form-field-infix{padding:0;min-height:44px;display:flex;align-items:center;flex-direction:row}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: VdMediaService }, { type: i0.ChangeDetectorRef }, { type: i1.NgControl, decorators: [{
                     type: Optional
                 }, {

package/lib/common/styles/utilities/_general.scss

@@ -211,6 +211,12 @@ vd-layout-footer-inner {
 /* #region MatFormField  */
 
 mat-form-field {
+    min-width: auto !important;
+
+    .mat-form-field-infix {
+        width: auto;
+    }
+
     &.mat-form-field-appearance-outline {
 
         &.mat-form-field-disabled,
@@ -345,7 +351,7 @@ mat-expansion-panel {
 
 /* #region  MatStep */
 
-mat-step {
+.mat-step {
     font-size: 0.9rem;
 
     .wrap {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@messaia/cdk",
-  "version": "13.3.6-rc17",
+  "version": "13.3.6",
   "peerDependencies": {},
   "publishConfig": {
     "registry": "https://registry.npmjs.org"