@elderbyte/ngx-starter 14.4.0-beta.4 → 14.4.0-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component.mjs +3 -3
- package/esm2020/lib/components/select/single/elder-select/elder-select.component.mjs +3 -3
- package/fesm2015/elderbyte-ngx-starter.mjs +4 -4
- package/fesm2015/elderbyte-ngx-starter.mjs.map +1 -1
- package/fesm2020/elderbyte-ngx-starter.mjs +4 -4
- package/fesm2020/elderbyte-ngx-starter.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/components/select/_elder-select-base.scss +39 -0
- package/src/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component.scss +52 -17
- package/src/lib/components/select/single/elder-select/elder-select.component.scss +49 -41
- package/theming/_elder-common.scss +0 -38
- package/theming/_elder-typography-utils.scss +11 -0
|
@@ -22341,7 +22341,7 @@ ElderSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
|
|
|
22341
22341
|
provide: ELDER_SELECT_BASE,
|
|
22342
22342
|
useExisting: forwardRef(() => ElderSelectComponent)
|
|
22343
22343
|
}
|
|
22344
|
-
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n *ngIf=\"(entityWrapped$ | async) as entityWrapper\"\n class=\"elder-form-control elder-select-control\"\n fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n>\n <ng-container *ngIf=\"(mergedState$ | async) as state\">\n <div *ngIf=\"state?.error || icon\" fxFlex=\"none\"\n class=\"elder-input-prefix-icon-container\"\n >\n <mat-icon *ngIf=\"icon\" disabled\n class=\"elder-select-icon elder-icon-small noselect clickable-icon\"\n [class.loading]=\"state.loading\"\n [color]=\"state?.error ? 'warn' : (focused ? 'primary' : undefined)\"\n (click)=\"onCurrentClicked(entity)\"\n >\n {{icon}}\n </mat-icon>\n <mat-icon *ngIf=\"!icon && state?.error\"\n class=\"elder-select-icon elder-icon-small noselect\"\n color=\"warn\"\n [matTooltip]=\"state?.error\"\n >\n warning\n </mat-icon>\n </div>\n </ng-container>\n\n <!-- A dynamic input -->\n <input #input\n matInput type=\"text\" fxFlex=\"grow\"\n [disabled]=\"!!disabled\"\n [required]=\"!!required\"\n [readonly]=\"readonly || !autocomplete\"\n [name]=\"ngControl?.name + '-inner-input'\"\n [placeholder]=\"placeholder | translate\"\n [matAutocomplete] #autoTrigger=\"matAutocompleteTrigger\"\n [elderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n elderSelectOnTab\n [class.elder-select-dropdown-input]=\"!autocomplete\"\n [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true, updateOn: 'submit'}\"\n (blur)=\"onInputBlur($event)\"\n (focus)=\"onInputFocus(autoTrigger)\"\n (click)=\"onInputClicked(autoTrigger)\"\n >\n\n <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n <elder-autocomplete\n #elderAuto=\"elderAutocomplete\"\n [suggestionsDc]=\"dataContext$ | async\"\n [valueTemplate]=\"valueTemplate\"\n [enabled]=\"!!autocomplete\"\n [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n (optionSelected)=\"onOptionSelected($any($event))\"\n ></elder-autocomplete>\n\n <div fxLayout=\"row\" fxFlex=\"none\">\n\n <mat-icon\n *ngIf=\"!selectionPopup && !autocomplete\" class=\"elder-select-icon elder-select-arrow elder-icon-
|
|
22344
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n *ngIf=\"(entityWrapped$ | async) as entityWrapper\"\n class=\"elder-form-control elder-select-control\"\n fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n>\n <ng-container *ngIf=\"(mergedState$ | async) as state\">\n <div *ngIf=\"state?.error || icon\" fxFlex=\"none\"\n class=\"elder-input-prefix-icon-container\"\n >\n <mat-icon *ngIf=\"icon\" disabled\n class=\"elder-select-icon elder-icon-small noselect clickable-icon\"\n [class.loading]=\"state.loading\"\n [color]=\"state?.error ? 'warn' : (focused ? 'primary' : undefined)\"\n (click)=\"onCurrentClicked(entity)\"\n >\n {{icon}}\n </mat-icon>\n <mat-icon *ngIf=\"!icon && state?.error\"\n class=\"elder-select-icon elder-icon-small noselect\"\n color=\"warn\"\n [matTooltip]=\"state?.error\"\n >\n warning\n </mat-icon>\n </div>\n </ng-container>\n\n <!-- A dynamic input -->\n <input #input\n matInput type=\"text\" fxFlex=\"grow\" class=\"elder-select-input\"\n [disabled]=\"!!disabled\"\n [required]=\"!!required\"\n [readonly]=\"readonly || !autocomplete\"\n [name]=\"ngControl?.name + '-inner-input'\"\n [placeholder]=\"placeholder | translate\"\n [matAutocomplete] #autoTrigger=\"matAutocompleteTrigger\"\n [elderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n elderSelectOnTab\n [class.elder-select-dropdown-input]=\"!autocomplete\"\n [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true, updateOn: 'submit'}\"\n (blur)=\"onInputBlur($event)\"\n (focus)=\"onInputFocus(autoTrigger)\"\n (click)=\"onInputClicked(autoTrigger)\"\n >\n\n <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n <elder-autocomplete\n #elderAuto=\"elderAutocomplete\"\n [suggestionsDc]=\"dataContext$ | async\"\n [valueTemplate]=\"valueTemplate\"\n [enabled]=\"!!autocomplete\"\n [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n (optionSelected)=\"onOptionSelected($any($event))\"\n ></elder-autocomplete>\n\n <div fxLayout=\"row\" fxFlex=\"none\">\n\n <mat-icon\n *ngIf=\"!selectionPopup && !autocomplete\" class=\"elder-select-icon elder-select-arrow elder-icon-small noselect\"\n (click)=\"onInputClicked(autoTrigger)\">\n arrow_drop_down\n </mat-icon>\n\n <button mat-icon-button type=\"button\" class=\"elder-icon-button-small\"\n *ngIf=\"selectionPopup && (!entityWrapper.value || !allowNull)\"\n [disabled]=\"isLocked\"\n (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n elderStopEventPropagation\n tabIndex=\"-1\"\n >\n <mat-icon class=\"elder-select-icon\">search</mat-icon>\n </button>\n\n <button mat-icon-button type=\"button\" class=\"elder-icon-button-small\"\n *ngIf=\"entityWrapper.value && allowNull\"\n [disabled]=\"isLocked\"\n (click)=\"clear($event)\" aria-label=\"Clear\"\n elderStopEventPropagation\n tabIndex=\"-1\"\n >\n <mat-icon class=\"elder-select-icon\">close</mat-icon>\n </button>\n\n </div>\n</div>\n\n\n\n", styles: ["@-webkit-keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}@keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}.loading{animation:shrink .3s ease-in-out infinite alternate;-webkit-animation:shrink .3s ease-in-out infinite alternate}.clickable-icon{cursor:pointer}.full-width{width:100%}.elder-select-dropdown-input{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: ["isOptionDisabledFn", "isOptionHiddenFn", "enabled", "valueTemplate", "suggestionsDc", "displayPropertyResolver"], outputs: ["optionSelected"], exportAs: ["elderAutocomplete"] }, { kind: "directive", type: ElderAutocompleteDirective, selector: "[elderAutocomplete]", inputs: ["queryFilter", "filters", "sorts", "elderAutocomplete"] }, { kind: "directive", type: i4$5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: ElderSelectOnTabDirective, selector: "[elderSelectOnTab]" }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
22345
22345
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: ElderSelectComponent, decorators: [{
|
|
22346
22346
|
type: Component,
|
|
22347
22347
|
args: [{ selector: 'elder-select', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -22350,7 +22350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImpor
|
|
|
22350
22350
|
provide: ELDER_SELECT_BASE,
|
|
22351
22351
|
useExisting: forwardRef(() => ElderSelectComponent)
|
|
22352
22352
|
}
|
|
22353
|
-
], template: "<div\n *ngIf=\"(entityWrapped$ | async) as entityWrapper\"\n class=\"elder-form-control elder-select-control\"\n fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n>\n <ng-container *ngIf=\"(mergedState$ | async) as state\">\n <div *ngIf=\"state?.error || icon\" fxFlex=\"none\"\n class=\"elder-input-prefix-icon-container\"\n >\n <mat-icon *ngIf=\"icon\" disabled\n class=\"elder-select-icon elder-icon-small noselect clickable-icon\"\n [class.loading]=\"state.loading\"\n [color]=\"state?.error ? 'warn' : (focused ? 'primary' : undefined)\"\n (click)=\"onCurrentClicked(entity)\"\n >\n {{icon}}\n </mat-icon>\n <mat-icon *ngIf=\"!icon && state?.error\"\n class=\"elder-select-icon elder-icon-small noselect\"\n color=\"warn\"\n [matTooltip]=\"state?.error\"\n >\n warning\n </mat-icon>\n </div>\n </ng-container>\n\n <!-- A dynamic input -->\n <input #input\n matInput type=\"text\" fxFlex=\"grow\"\n [disabled]=\"!!disabled\"\n [required]=\"!!required\"\n [readonly]=\"readonly || !autocomplete\"\n [name]=\"ngControl?.name + '-inner-input'\"\n [placeholder]=\"placeholder | translate\"\n [matAutocomplete] #autoTrigger=\"matAutocompleteTrigger\"\n [elderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n elderSelectOnTab\n [class.elder-select-dropdown-input]=\"!autocomplete\"\n [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true, updateOn: 'submit'}\"\n (blur)=\"onInputBlur($event)\"\n (focus)=\"onInputFocus(autoTrigger)\"\n (click)=\"onInputClicked(autoTrigger)\"\n >\n\n <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n <elder-autocomplete\n #elderAuto=\"elderAutocomplete\"\n [suggestionsDc]=\"dataContext$ | async\"\n [valueTemplate]=\"valueTemplate\"\n [enabled]=\"!!autocomplete\"\n [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n (optionSelected)=\"onOptionSelected($any($event))\"\n ></elder-autocomplete>\n\n <div fxLayout=\"row\" fxFlex=\"none\">\n\n <mat-icon\n *ngIf=\"!selectionPopup && !autocomplete\" class=\"elder-select-icon elder-select-arrow elder-icon-
|
|
22353
|
+
], template: "<div\n *ngIf=\"(entityWrapped$ | async) as entityWrapper\"\n class=\"elder-form-control elder-select-control\"\n fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n>\n <ng-container *ngIf=\"(mergedState$ | async) as state\">\n <div *ngIf=\"state?.error || icon\" fxFlex=\"none\"\n class=\"elder-input-prefix-icon-container\"\n >\n <mat-icon *ngIf=\"icon\" disabled\n class=\"elder-select-icon elder-icon-small noselect clickable-icon\"\n [class.loading]=\"state.loading\"\n [color]=\"state?.error ? 'warn' : (focused ? 'primary' : undefined)\"\n (click)=\"onCurrentClicked(entity)\"\n >\n {{icon}}\n </mat-icon>\n <mat-icon *ngIf=\"!icon && state?.error\"\n class=\"elder-select-icon elder-icon-small noselect\"\n color=\"warn\"\n [matTooltip]=\"state?.error\"\n >\n warning\n </mat-icon>\n </div>\n </ng-container>\n\n <!-- A dynamic input -->\n <input #input\n matInput type=\"text\" fxFlex=\"grow\" class=\"elder-select-input\"\n [disabled]=\"!!disabled\"\n [required]=\"!!required\"\n [readonly]=\"readonly || !autocomplete\"\n [name]=\"ngControl?.name + '-inner-input'\"\n [placeholder]=\"placeholder | translate\"\n [matAutocomplete] #autoTrigger=\"matAutocompleteTrigger\"\n [elderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n elderSelectOnTab\n [class.elder-select-dropdown-input]=\"!autocomplete\"\n [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true, updateOn: 'submit'}\"\n (blur)=\"onInputBlur($event)\"\n (focus)=\"onInputFocus(autoTrigger)\"\n (click)=\"onInputClicked(autoTrigger)\"\n >\n\n <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n <elder-autocomplete\n #elderAuto=\"elderAutocomplete\"\n [suggestionsDc]=\"dataContext$ | async\"\n [valueTemplate]=\"valueTemplate\"\n [enabled]=\"!!autocomplete\"\n [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n (optionSelected)=\"onOptionSelected($any($event))\"\n ></elder-autocomplete>\n\n <div fxLayout=\"row\" fxFlex=\"none\">\n\n <mat-icon\n *ngIf=\"!selectionPopup && !autocomplete\" class=\"elder-select-icon elder-select-arrow elder-icon-small noselect\"\n (click)=\"onInputClicked(autoTrigger)\">\n arrow_drop_down\n </mat-icon>\n\n <button mat-icon-button type=\"button\" class=\"elder-icon-button-small\"\n *ngIf=\"selectionPopup && (!entityWrapper.value || !allowNull)\"\n [disabled]=\"isLocked\"\n (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n elderStopEventPropagation\n tabIndex=\"-1\"\n >\n <mat-icon class=\"elder-select-icon\">search</mat-icon>\n </button>\n\n <button mat-icon-button type=\"button\" class=\"elder-icon-button-small\"\n *ngIf=\"entityWrapper.value && allowNull\"\n [disabled]=\"isLocked\"\n (click)=\"clear($event)\" aria-label=\"Clear\"\n elderStopEventPropagation\n tabIndex=\"-1\"\n >\n <mat-icon class=\"elder-select-icon\">close</mat-icon>\n </button>\n\n </div>\n</div>\n\n\n\n", styles: ["@-webkit-keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}@keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}.loading{animation:shrink .3s ease-in-out infinite alternate;-webkit-animation:shrink .3s ease-in-out infinite alternate}.clickable-icon{cursor:pointer}.full-width{width:100%}.elder-select-dropdown-input{cursor:pointer}\n"] }]
|
|
22354
22354
|
}], ctorParameters: function () {
|
|
22355
22355
|
return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1$1.FocusMonitor }, { type: i2.NgControl, decorators: [{
|
|
22356
22356
|
type: Optional
|
|
@@ -22959,7 +22959,7 @@ ElderMultiSelectChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
|
22959
22959
|
provide: ELDER_SELECT_BASE,
|
|
22960
22960
|
useExisting: forwardRef(() => ElderMultiSelectChipsComponent)
|
|
22961
22961
|
}
|
|
22962
|
-
], queries: [{ propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "customInputTemplateQuery", first: true, predicate: ElderSelectCustomInputDirective, descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(selectChips$ | async) as chipValues\" fxFlex\n class=\"elder-form-control\"\n [matTooltip]=\"(state$ | async)?.error\"\n>\n <ng-container *ngIf=\"(mergedState$ | async) as state\">\n
|
|
22962
|
+
], queries: [{ propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "customInputTemplateQuery", first: true, predicate: ElderSelectCustomInputDirective, descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(selectChips$ | async) as chipValues\" fxFlex\n class=\"elder-form-control\"\n [matTooltip]=\"(state$ | async)?.error\"\n>\n\n <mat-chip-list [selectable]=\"chipColorEnabled\" multiple #chips>\n\n <ng-container *ngIf=\"(mergedState$ | async) as state\">\n <div *ngIf=\"icon\" fxFlex=\"none\"\n class=\"elder-input-prefix-icon-container\"\n >\n <mat-icon *ngIf=\"icon\" disabled\n class=\"elder-prefix-icon elder-select-icon elder-icon-small noselect\"\n [class.loading]=\"state.loading\"\n >\n {{icon}}\n </mat-icon>\n </div>\n </ng-container>\n\n\n <mat-chip *ngFor=\"let chipModel of chipValues\"\n class=\"noselect clickable-chip\"\n [value]=\"resolveChipValue(chipModel.value)\"\n [color]=\"chipModel.color\" [selectable]=\"chipColorEnabled\" [selected]=\"chipColorEnabled\"\n [removable]=\"chipModel.removeable\"\n (removed)=\"removeEntity(chipModel.value)\"\n (click)=\"onCurrentClicked(chipModel.value)\"\n >\n <mat-chip-avatar *ngIf=\"chipAvatarTemplate\">\n <ng-container\n *ngTemplateOutlet=\"chipAvatarTemplate; context: {$implicit: chipModel}\">\n </ng-container>\n </mat-chip-avatar>\n <ng-container\n *ngTemplateOutlet=\"chipTemplate || simpleChipTemplate; context: {$implicit: chipModel}\">\n </ng-container>\n <mat-icon matChipRemove *ngIf=\"chipModel.removeable\">cancel</mat-icon>\n </mat-chip>\n\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n style=\"padding-top: 7px; padding-bottom: 7px;\">\n\n <!-- [matChipInputFor]=\"chips\" -->\n <ng-container\n *ngTemplateOutlet=\"customInputTemplate || selectInput;\">\n </ng-container>\n\n <button mat-icon-button type=\"button\" class=\"elder-icon-button-small\"\n *ngIf=\"selectionPopup\"\n [disabled]=\"isLocked\"\n (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n elderStopEventPropagation\n tabIndex=\"-1\"\n >\n <mat-icon class=\"elder-select-icon\">search</mat-icon>\n </button>\n </div>\n </mat-chip-list>\n</div>\n\n<ng-template #selectInput>\n <elder-select autocomplete elderClearSelect fxFlex=\"nogrow\"\n class=\"elder-chip-input\"\n [data]=\"dataContext$ | async\"\n [disabled]=\"!!disabled\"\n [required]=\"!!required\"\n [readonly]=\"!!readonly\"\n [placeholder]=\"placeholder\"\n (entityUpdated)=\"appendEntity($event)\"\n [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n [valueTemplate]=\"valueTemplate\"\n [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n <span class=\"elder-chip-text\">{{chipModel.displayText | elderTruncate:20}}</span>\n</ng-template>\n\n", styles: [".clickable-chip{cursor:pointer}.elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: i6$1.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i6$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i6$1.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: i4$5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: ElderSelectComponent, selector: "elder-select", inputs: ["nullDisplay", "autocomplete", "allowNull", "entity", "entityId", "hintProperty", "hintPropertyResolver"], outputs: ["entityIdChange", "entityIdUpdated", "entityChange", "entityUpdated"] }, { kind: "directive", type: ElderClearSelectDirective, selector: "[elderClearSelect]" }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
22963
22963
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: ElderMultiSelectChipsComponent, decorators: [{
|
|
22964
22964
|
type: Component,
|
|
22965
22965
|
args: [{ selector: 'elder-multi-select-chips', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -22968,7 +22968,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImpor
|
|
|
22968
22968
|
provide: ELDER_SELECT_BASE,
|
|
22969
22969
|
useExisting: forwardRef(() => ElderMultiSelectChipsComponent)
|
|
22970
22970
|
}
|
|
22971
|
-
], template: "<div *ngIf=\"(selectChips$ | async) as chipValues\" fxFlex\n class=\"elder-form-control\"\n [matTooltip]=\"(state$ | async)?.error\"\n>\n <ng-container *ngIf=\"(mergedState$ | async) as state\">\n
|
|
22971
|
+
], template: "<div *ngIf=\"(selectChips$ | async) as chipValues\" fxFlex\n class=\"elder-form-control\"\n [matTooltip]=\"(state$ | async)?.error\"\n>\n\n <mat-chip-list [selectable]=\"chipColorEnabled\" multiple #chips>\n\n <ng-container *ngIf=\"(mergedState$ | async) as state\">\n <div *ngIf=\"icon\" fxFlex=\"none\"\n class=\"elder-input-prefix-icon-container\"\n >\n <mat-icon *ngIf=\"icon\" disabled\n class=\"elder-prefix-icon elder-select-icon elder-icon-small noselect\"\n [class.loading]=\"state.loading\"\n >\n {{icon}}\n </mat-icon>\n </div>\n </ng-container>\n\n\n <mat-chip *ngFor=\"let chipModel of chipValues\"\n class=\"noselect clickable-chip\"\n [value]=\"resolveChipValue(chipModel.value)\"\n [color]=\"chipModel.color\" [selectable]=\"chipColorEnabled\" [selected]=\"chipColorEnabled\"\n [removable]=\"chipModel.removeable\"\n (removed)=\"removeEntity(chipModel.value)\"\n (click)=\"onCurrentClicked(chipModel.value)\"\n >\n <mat-chip-avatar *ngIf=\"chipAvatarTemplate\">\n <ng-container\n *ngTemplateOutlet=\"chipAvatarTemplate; context: {$implicit: chipModel}\">\n </ng-container>\n </mat-chip-avatar>\n <ng-container\n *ngTemplateOutlet=\"chipTemplate || simpleChipTemplate; context: {$implicit: chipModel}\">\n </ng-container>\n <mat-icon matChipRemove *ngIf=\"chipModel.removeable\">cancel</mat-icon>\n </mat-chip>\n\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n style=\"padding-top: 7px; padding-bottom: 7px;\">\n\n <!-- [matChipInputFor]=\"chips\" -->\n <ng-container\n *ngTemplateOutlet=\"customInputTemplate || selectInput;\">\n </ng-container>\n\n <button mat-icon-button type=\"button\" class=\"elder-icon-button-small\"\n *ngIf=\"selectionPopup\"\n [disabled]=\"isLocked\"\n (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n elderStopEventPropagation\n tabIndex=\"-1\"\n >\n <mat-icon class=\"elder-select-icon\">search</mat-icon>\n </button>\n </div>\n </mat-chip-list>\n</div>\n\n<ng-template #selectInput>\n <elder-select autocomplete elderClearSelect fxFlex=\"nogrow\"\n class=\"elder-chip-input\"\n [data]=\"dataContext$ | async\"\n [disabled]=\"!!disabled\"\n [required]=\"!!required\"\n [readonly]=\"!!readonly\"\n [placeholder]=\"placeholder\"\n (entityUpdated)=\"appendEntity($event)\"\n [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n [valueTemplate]=\"valueTemplate\"\n [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n <span class=\"elder-chip-text\">{{chipModel.displayText | elderTruncate:20}}</span>\n</ng-template>\n\n", styles: [".clickable-chip{cursor:pointer}.elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
22972
22972
|
}], ctorParameters: function () {
|
|
22973
22973
|
return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1$1.FocusMonitor }, { type: i2.NgControl, decorators: [{
|
|
22974
22974
|
type: Optional
|