@messaia/cdk 13.3.5-rc24 → 13.3.5-rc25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -384,12 +384,12 @@ export class VdChipsComponent extends AbstractMatFormField {
384
384
  /** @nocollapse */ /** @nocollapse */ VdChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdChipsComponent, deps: [{ token: i0.Injector }, { token: i1.NgControl, optional: true, self: true }, { token: i1.NgForm, optional: true }, { token: i1.FormGroupDirective, optional: true }, { token: i2.ErrorStateMatcher }, { token: i3.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
385
385
  /** @nocollapse */ /** @nocollapse */ VdChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdChipsComponent, selector: "vd-chips", inputs: { chips: "chips", endpoint: "endpoint", params: "params", projection: "projection", path: "path", context: "context", key: "key", searchField: "searchField", searchFields: "searchFields", termMinlength: "termMinlength", limit: "limit", removable: "removable", debounce: "debounce", suffixButtons: "suffixButtons", default: "default" }, outputs: { initSelect: "initSelect", selected: "selected", cleared: "cleared", onLaunch: "launch", chipFocus: "chipFocus" }, providers: [
386
386
  { provide: MatFormFieldControl, useExisting: VdChipsComponent }
387
- ], queries: [{ propertyName: "chipTemplate", first: true, predicate: VdChipDirective, descendants: true }, { propertyName: "autocompleteOptionTemplate", first: true, predicate: VdAutocompleteOptionDirective, descendants: true }], viewQueries: [{ propertyName: "chipInput", first: true, predicate: MatInput, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-chip-list #chipList [required]=\"required\" [disabled]=\"readonly\">\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}}\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [formControl]=\"autoCompleteChipList\" #chipInput />\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Progress -->\r\n\t<mat-spinner diameter=\"18\" *ngIf=\"loading\"></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, chipInput)\">\r\n\t<ng-template let-item let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\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</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{color:#000000a3}: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-button{display:inline-flex;justify-content:center;align-items:center;width:2.5em;height:2.5em;margin-top:-10px}:host ::ng-deep .mat-chip .mat-icon-button .mat-icon{font-size:24px}: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}mat-spinner{margin-top:-9px;margin-right:6px}\n"], components: [{ type: i4.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i5.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: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i8.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.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: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.MatChipRemove, selector: "[matChipRemove]" }, { type: i10.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: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i8.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"] }] });
387
+ ], queries: [{ propertyName: "chipTemplate", first: true, predicate: VdChipDirective, descendants: true }, { propertyName: "autocompleteOptionTemplate", first: true, predicate: VdAutocompleteOptionDirective, descendants: true }], viewQueries: [{ propertyName: "chipInput", first: true, predicate: MatInput, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-chip-list #chipList [required]=\"required\" [disabled]=\"readonly\">\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}}\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [formControl]=\"autoCompleteChipList\" #chipInput />\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Progress -->\r\n\t<mat-spinner diameter=\"18\" *ngIf=\"loading\"></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, chipInput)\">\r\n\t<ng-template let-item let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\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</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-button{display:inline-flex;justify-content:center;align-items:center;width:2.2em;height:2.2em;margin-top:-10px}:host ::ng-deep .mat-chip .mat-icon-button .mat-button-wrapper{line-height:20px}:host ::ng-deep .mat-chip .mat-icon-button .mat-button-wrapper .mat-icon{font-size:21px;line-height:21px}: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}mat-spinner{margin-top:-9px;margin-right:6px}\n"], components: [{ type: i4.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i5.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: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i8.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.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: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.MatChipRemove, selector: "[matChipRemove]" }, { type: i10.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: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i8.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"] }] });
388
388
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdChipsComponent, decorators: [{
389
389
  type: Component,
390
390
  args: [{ selector: 'vd-chips', providers: [
391
391
  { provide: MatFormFieldControl, useExisting: VdChipsComponent }
392
- ], template: "<mat-chip-list #chipList [required]=\"required\" [disabled]=\"readonly\">\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}}\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [formControl]=\"autoCompleteChipList\" #chipInput />\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Progress -->\r\n\t<mat-spinner diameter=\"18\" *ngIf=\"loading\"></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, chipInput)\">\r\n\t<ng-template let-item let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\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</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{color:#000000a3}: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-button{display:inline-flex;justify-content:center;align-items:center;width:2.5em;height:2.5em;margin-top:-10px}:host ::ng-deep .mat-chip .mat-icon-button .mat-icon{font-size:24px}: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}mat-spinner{margin-top:-9px;margin-right:6px}\n"] }]
392
+ ], template: "<mat-chip-list #chipList [required]=\"required\" [disabled]=\"readonly\">\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}}\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [formControl]=\"autoCompleteChipList\" #chipInput />\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Progress -->\r\n\t<mat-spinner diameter=\"18\" *ngIf=\"loading\"></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, chipInput)\">\r\n\t<ng-template let-item let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\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</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-button{display:inline-flex;justify-content:center;align-items:center;width:2.2em;height:2.2em;margin-top:-10px}:host ::ng-deep .mat-chip .mat-icon-button .mat-button-wrapper{line-height:20px}:host ::ng-deep .mat-chip .mat-icon-button .mat-button-wrapper .mat-icon{font-size:21px;line-height:21px}: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}mat-spinner{margin-top:-9px;margin-right:6px}\n"] }]
393
393
  }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.NgControl, decorators: [{
394
394
  type: Optional
395
395
  }, {
@@ -340,10 +340,10 @@ export class VdSelectComponent extends AbstractMatFormField {
340
340
  }
341
341
  }
342
342
  /** @nocollapse */ /** @nocollapse */ VdSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdSelectComponent, deps: [{ token: i0.Injector }, { token: i1.NgControl, optional: true, self: true }, { token: i1.NgForm, optional: true }, { token: i1.FormGroupDirective, optional: true }, { token: i2.ErrorStateMatcher }, { token: i3.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
343
- /** @nocollapse */ /** @nocollapse */ VdSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdSelectComponent, selector: "vd-select", inputs: { multiple: "multiple", disabled: "disabled", sorted: "sorted", textPrefix: "textPrefix", endpoint: "endpoint", params: "params", projection: "projection", enum: "enum", key: "key", text: "text", prefix: "prefix", options: "options", filteredOptions: "filteredOptions", filterable: "filterable", cache: "cache", sortBy: "sortBy", mapper: "mapper", compareWith: "compareWith", searchField: "searchField" }, outputs: { onValueChange: "change", onItemChange: "itemChange", onSelected: "selected", onItemSelected: "itemSelected", onLaunch: "launch" }, providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdSelectOptionDirective, descendants: true }, { propertyName: "triggerTemplate", first: true, predicate: VdSelectTriggerDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [disabled]=\"disabled\" flex>\r\n <!-- #region Filter input -->\r\n <input #filterInput *ngIf=\"filterable\" type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (keyup)=\"handleFilter($event.target.value)\">\r\n <!-- #endregion -->\r\n\r\n <!-- #region Trigger for launch button -->\r\n <mat-select-trigger *ngIf=\"onLaunch?.observers?.length > 0\">\r\n <span>{{getTriggerValues(select.selected)}}</span>\r\n <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n </mat-select-trigger>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Custom trigger template -->\r\n <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\">\r\n <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n </mat-select-trigger>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Option template as trigger -->\r\n <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\">\r\n <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n </mat-select-trigger>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Default option -->\r\n <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Options -->\r\n <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n <mat-option [value]=\"mapper ? option : option[key]\">\r\n <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], select, option {option} other {{{option[text]}}}}</span>\r\n <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n </mat-option>\r\n </ng-template>\r\n <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n <div *ngIf=\"currentValue\">\r\n <div class=\"readonly-value\">\r\n <span *ngIf=\"!optionTemplate?.templateRef && !triggerTemplate?.templateRef\">\r\n <span *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n <ng-container *ngIf=\"multiple\">\r\n <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n <span *ngIf=\"!last\">,&nbsp;</span>\r\n </span>\r\n </ng-container>\r\n </span>\r\n <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\r\n <ng-template *ngIf=\"optionTemplate?.templateRef && !triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n </div>\r\n <mat-icon *ngIf=\"onLaunch?.observers?.length > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n </div>\r\n <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>\r\n<!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;color:#000000a3;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0px;top:9px;font-size:18px;cursor:pointer}.vd-select-filter{position:sticky;top:0;z-index:100;font-size:inherit;box-shadow:none;border-radius:0;padding:16px;box-sizing:border-box;border:none;border-bottom:1px solid #dcdcdc;width:100%;background-color:#f5f5f5;outline:none}\n"], components: [{ type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
343
+ /** @nocollapse */ /** @nocollapse */ VdSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdSelectComponent, selector: "vd-select", inputs: { multiple: "multiple", disabled: "disabled", sorted: "sorted", textPrefix: "textPrefix", endpoint: "endpoint", params: "params", projection: "projection", enum: "enum", key: "key", text: "text", prefix: "prefix", options: "options", filteredOptions: "filteredOptions", filterable: "filterable", cache: "cache", sortBy: "sortBy", mapper: "mapper", compareWith: "compareWith", searchField: "searchField" }, outputs: { onValueChange: "change", onItemChange: "itemChange", onSelected: "selected", onItemSelected: "itemSelected", onLaunch: "launch" }, providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdSelectOptionDirective, descendants: true }, { propertyName: "triggerTemplate", first: true, predicate: VdSelectTriggerDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [disabled]=\"disabled\" flex>\r\n <!-- #region Filter input -->\r\n <input #filterInput *ngIf=\"filterable\" type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (keyup)=\"handleFilter($event.target.value)\">\r\n <!-- #endregion -->\r\n\r\n <!-- #region Trigger for launch button -->\r\n <mat-select-trigger *ngIf=\"onLaunch?.observers?.length > 0\">\r\n <span>{{getTriggerValues(select.selected)}}</span>\r\n <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n </mat-select-trigger>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Custom trigger template -->\r\n <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\">\r\n <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n </mat-select-trigger>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Option template as trigger -->\r\n <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\">\r\n <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n </mat-select-trigger>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Default option -->\r\n <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Options -->\r\n <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n <mat-option [value]=\"mapper ? option : option[key]\">\r\n <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], select, option {option} other {{{option[text]}}}}</span>\r\n <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n </mat-option>\r\n </ng-template>\r\n <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n <div *ngIf=\"currentValue\">\r\n <div class=\"readonly-value\">\r\n <span *ngIf=\"!optionTemplate?.templateRef && !triggerTemplate?.templateRef\">\r\n <span *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n <ng-container *ngIf=\"multiple\">\r\n <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n <span *ngIf=\"!last\">,&nbsp;</span>\r\n </span>\r\n </ng-container>\r\n </span>\r\n <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\r\n <ng-template *ngIf=\"optionTemplate?.templateRef && !triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n </div>\r\n <mat-icon *ngIf=\"onLaunch?.observers?.length > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n </div>\r\n <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>\r\n<!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0px;top:9px;font-size:18px;cursor:pointer}.vd-select-filter{position:sticky;top:0;z-index:100;font-size:inherit;box-shadow:none;border-radius:0;padding:16px;box-sizing:border-box;border:none;border-bottom:1px solid #dcdcdc;width:100%;background-color:#f5f5f5;outline:none}\n"], components: [{ type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
344
344
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdSelectComponent, decorators: [{
345
345
  type: Component,
346
- args: [{ selector: 'vd-select', providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [disabled]=\"disabled\" flex>\r\n <!-- #region Filter input -->\r\n <input #filterInput *ngIf=\"filterable\" type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (keyup)=\"handleFilter($event.target.value)\">\r\n <!-- #endregion -->\r\n\r\n <!-- #region Trigger for launch button -->\r\n <mat-select-trigger *ngIf=\"onLaunch?.observers?.length > 0\">\r\n <span>{{getTriggerValues(select.selected)}}</span>\r\n <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n </mat-select-trigger>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Custom trigger template -->\r\n <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\">\r\n <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n </mat-select-trigger>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Option template as trigger -->\r\n <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\">\r\n <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n </mat-select-trigger>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Default option -->\r\n <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Options -->\r\n <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n <mat-option [value]=\"mapper ? option : option[key]\">\r\n <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], select, option {option} other {{{option[text]}}}}</span>\r\n <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n </mat-option>\r\n </ng-template>\r\n <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n <div *ngIf=\"currentValue\">\r\n <div class=\"readonly-value\">\r\n <span *ngIf=\"!optionTemplate?.templateRef && !triggerTemplate?.templateRef\">\r\n <span *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n <ng-container *ngIf=\"multiple\">\r\n <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n <span *ngIf=\"!last\">,&nbsp;</span>\r\n </span>\r\n </ng-container>\r\n </span>\r\n <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\r\n <ng-template *ngIf=\"optionTemplate?.templateRef && !triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n </div>\r\n <mat-icon *ngIf=\"onLaunch?.observers?.length > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n </div>\r\n <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>\r\n<!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;color:#000000a3;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0px;top:9px;font-size:18px;cursor:pointer}.vd-select-filter{position:sticky;top:0;z-index:100;font-size:inherit;box-shadow:none;border-radius:0;padding:16px;box-sizing:border-box;border:none;border-bottom:1px solid #dcdcdc;width:100%;background-color:#f5f5f5;outline:none}\n"] }]
346
+ args: [{ selector: 'vd-select', providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [disabled]=\"disabled\" flex>\r\n <!-- #region Filter input -->\r\n <input #filterInput *ngIf=\"filterable\" type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (keyup)=\"handleFilter($event.target.value)\">\r\n <!-- #endregion -->\r\n\r\n <!-- #region Trigger for launch button -->\r\n <mat-select-trigger *ngIf=\"onLaunch?.observers?.length > 0\">\r\n <span>{{getTriggerValues(select.selected)}}</span>\r\n <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n </mat-select-trigger>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Custom trigger template -->\r\n <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\">\r\n <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n </mat-select-trigger>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Option template as trigger -->\r\n <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\">\r\n <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n </mat-select-trigger>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Default option -->\r\n <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Options -->\r\n <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n <mat-option [value]=\"mapper ? option : option[key]\">\r\n <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], select, option {option} other {{{option[text]}}}}</span>\r\n <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n </mat-option>\r\n </ng-template>\r\n <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n <div *ngIf=\"currentValue\">\r\n <div class=\"readonly-value\">\r\n <span *ngIf=\"!optionTemplate?.templateRef && !triggerTemplate?.templateRef\">\r\n <span *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n <ng-container *ngIf=\"multiple\">\r\n <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n <span *ngIf=\"!last\">,&nbsp;</span>\r\n </span>\r\n </ng-container>\r\n </span>\r\n <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\r\n <ng-template *ngIf=\"optionTemplate?.templateRef && !triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n </div>\r\n <mat-icon *ngIf=\"onLaunch?.observers?.length > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n </div>\r\n <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>\r\n<!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0px;top:9px;font-size:18px;cursor:pointer}.vd-select-filter{position:sticky;top:0;z-index:100;font-size:inherit;box-shadow:none;border-radius:0;padding:16px;box-sizing:border-box;border:none;border-bottom:1px solid #dcdcdc;width:100%;background-color:#f5f5f5;outline:none}\n"] }]
347
347
  }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.NgControl, decorators: [{
348
348
  type: Optional
349
349
  }, {