@elderbyte/ngx-starter 13.9.0 → 13.9.1
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/elder-select/elder-select.component.mjs +14 -5
- package/esm2020/lib/components/select/elder-select-base.mjs +1 -1
- package/esm2020/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component.mjs +7 -1
- package/fesm2015/elderbyte-ngx-starter.mjs +22 -3
- package/fesm2015/elderbyte-ngx-starter.mjs.map +1 -1
- package/fesm2020/elderbyte-ngx-starter.mjs +18 -3
- package/fesm2020/elderbyte-ngx-starter.mjs.map +1 -1
- package/lib/components/select/elder-select/elder-select.component.d.ts +4 -1
- package/lib/components/select/elder-select-base.d.ts +2 -0
- package/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component.d.ts +2 -0
- package/package.json +1 -1
|
@@ -21208,6 +21208,12 @@ class ElderSelectComponent extends ElderSelectBase {
|
|
|
21208
21208
|
this._entity$.next(entity);
|
|
21209
21209
|
this.updateValue(this.entityToValue(entity));
|
|
21210
21210
|
}
|
|
21211
|
+
focus(options) {
|
|
21212
|
+
this.inputRef?.nativeElement?.focus(options);
|
|
21213
|
+
}
|
|
21214
|
+
blur() {
|
|
21215
|
+
this.inputRef?.nativeElement?.blur();
|
|
21216
|
+
}
|
|
21211
21217
|
/***************************************************************************
|
|
21212
21218
|
* *
|
|
21213
21219
|
* Abstract Implementation *
|
|
@@ -21325,7 +21331,7 @@ ElderSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
|
|
|
21325
21331
|
useExisting: forwardRef(() => ElderSelectComponent)
|
|
21326
21332
|
},
|
|
21327
21333
|
...buildFormIntegrationProviders(ElderSelectComponent)
|
|
21328
|
-
], usesInheritance: true, ngImport: i0, template: "<mat-form-field *ngIf=\"(entityWrapped$ | async) as entityWrapper\" fxFlex\n class=\"elder-std-form-field\"\n [appearance]=\"appearance\"\n [floatLabel]=\"floatLabel\"\n [color]=\"color\"\n [elderDense]=\"dense\"\n [elderNoHint]=\"noHint\"\n>\n\n <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n\n <ng-container matPrefix *ngIf=\"(mergedState$ | async) as state\">\n\n <mat-icon *ngIf=\"icon\" disabled\n class=\"leading-icon prefix-padding noselect clickable-icon\"\n [class.loading]=\"state.loading\"\n [color]=\"state?.error ? 'warn' : color\"\n (click)=\"onCurrentClicked(entity)\"\n >\n {{icon}}\n </mat-icon>\n\n\n <mat-icon *ngIf=\"!icon && state?.error\"\n class=\"leading-icon prefix-padding noselect\"\n color=\"warn\">\n warning\n </mat-icon>\n </ng-container>\n\n <!-- A dynamic input -->\n <input\n matInput type=\"text\" fxFlex=\"grow\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [readonly]=\"readonly || !autocomplete\"\n [name]=\"name + '-inner-input'\"\n [placeholder]=\"placeholder | translate\"\n [matAutocomplete] #autoTrigger=\"matAutocompleteTrigger\"\n [elderElderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n elderSelectOnTab\n [class.select]=\"!autocomplete\" (click)=\"onInputClicked(autoTrigger)\"\n [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true, updateOn: 'submit'}\"\n (blur)=\"onInputBlur($event)\"\n >\n\n <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n <elder-autocomplete\n #elderAuto=\"elderAutocomplete\"\n [suggestionsDc]=\"suggestionsDc$ | 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\n <ng-container matSuffix>\n\n <mat-icon\n *ngIf=\"!selectionPopup && !autocomplete\" class=\"select-arrow noselect\"\n (click)=\"onInputClicked(autoTrigger)\">\n arrow_drop_down\n </mat-icon>\n\n <button mat-icon-button type=\"button\"\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>search</mat-icon>\n </button>\n\n <button mat-icon-button type=\"button\"\n *ngIf=\"entityWrapper.value && allowNull\"\n [disabled]=\"isLocked\"\n (click)=\"clear($event)\" aria-label=\"Clear\"\n elderStopEventPropagation\n tabIndex=\"-1\"\n >\n <mat-icon>close</mat-icon>\n </button>\n\n </ng-container>\n\n <mat-hint *ngIf=\"entityWrapper.hintText\">{{entityWrapper.hintText}}</mat-hint>\n\n</mat-form-field>\n\n\n\n", styles: [".prefix-container{width:24px;height:16px}@-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}.prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}.clickable-icon{cursor:pointer}.full-width{width:100%}.select{cursor:pointer;width:162px}.select-arrow{font-size:18px;width:18px;height:18px;cursor:pointer}\n"], components: [{ type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: ["isOptionDisabledFn", "isOptionHiddenFn", "enabled", "valueTemplate", "suggestionsDc", "displayPropertyResolver"], outputs: ["optionSelected"], exportAs: ["elderAutocomplete"] }, { type: i3.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"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense"] }, { type: ElderFormFieldNoHintDirective, selector: "mat-form-field[elderNoHint]", inputs: ["elderNoHint"] }, { type: i5.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"] }, { type: i1$5.MatLabel, selector: "mat-label" }, { type: i1$5.MatPrefix, selector: "[matPrefix]" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i5$1.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: ElderSelectOnTabDirective, selector: "[elderSelectOnTab]" }, { type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: ElderAutocompleteDirective, selector: "[elderElderAutocomplete]", inputs: ["queryFilter", "filters", "sorts", "elderElderAutocomplete"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$5.MatSuffix, selector: "[matSuffix]" }, { type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "async": i3$1.AsyncPipe, "translate": i1$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
21334
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field *ngIf=\"(entityWrapped$ | async) as entityWrapper\" fxFlex\n class=\"elder-std-form-field\"\n [appearance]=\"appearance\"\n [floatLabel]=\"floatLabel\"\n [color]=\"color\"\n [elderDense]=\"dense\"\n [elderNoHint]=\"noHint\"\n>\n\n <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n\n <ng-container matPrefix *ngIf=\"(mergedState$ | async) as state\">\n\n <mat-icon *ngIf=\"icon\" disabled\n class=\"leading-icon prefix-padding noselect clickable-icon\"\n [class.loading]=\"state.loading\"\n [color]=\"state?.error ? 'warn' : color\"\n (click)=\"onCurrentClicked(entity)\"\n >\n {{icon}}\n </mat-icon>\n\n\n <mat-icon *ngIf=\"!icon && state?.error\"\n class=\"leading-icon prefix-padding noselect\"\n color=\"warn\">\n warning\n </mat-icon>\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]=\"name + '-inner-input'\"\n [placeholder]=\"placeholder | translate\"\n [matAutocomplete] #autoTrigger=\"matAutocompleteTrigger\"\n [elderElderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n elderSelectOnTab\n [class.select]=\"!autocomplete\" (click)=\"onInputClicked(autoTrigger)\"\n [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true, updateOn: 'submit'}\"\n (blur)=\"onInputBlur($event)\"\n >\n\n <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n <elder-autocomplete\n #elderAuto=\"elderAutocomplete\"\n [suggestionsDc]=\"suggestionsDc$ | 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\n <ng-container matSuffix>\n\n <mat-icon\n *ngIf=\"!selectionPopup && !autocomplete\" class=\"select-arrow noselect\"\n (click)=\"onInputClicked(autoTrigger)\">\n arrow_drop_down\n </mat-icon>\n\n <button mat-icon-button type=\"button\"\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>search</mat-icon>\n </button>\n\n <button mat-icon-button type=\"button\"\n *ngIf=\"entityWrapper.value && allowNull\"\n [disabled]=\"isLocked\"\n (click)=\"clear($event)\" aria-label=\"Clear\"\n elderStopEventPropagation\n tabIndex=\"-1\"\n >\n <mat-icon>close</mat-icon>\n </button>\n\n </ng-container>\n\n <mat-hint *ngIf=\"entityWrapper.hintText\">{{entityWrapper.hintText}}</mat-hint>\n\n</mat-form-field>\n\n\n\n", styles: [".prefix-container{width:24px;height:16px}@-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}.prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}.clickable-icon{cursor:pointer}.full-width{width:100%}.select{cursor:pointer;width:162px}.select-arrow{font-size:18px;width:18px;height:18px;cursor:pointer}\n"], components: [{ type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: ["isOptionDisabledFn", "isOptionHiddenFn", "enabled", "valueTemplate", "suggestionsDc", "displayPropertyResolver"], outputs: ["optionSelected"], exportAs: ["elderAutocomplete"] }, { type: i3.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"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense"] }, { type: ElderFormFieldNoHintDirective, selector: "mat-form-field[elderNoHint]", inputs: ["elderNoHint"] }, { type: i5.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"] }, { type: i1$5.MatLabel, selector: "mat-label" }, { type: i1$5.MatPrefix, selector: "[matPrefix]" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i5$1.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: ElderSelectOnTabDirective, selector: "[elderSelectOnTab]" }, { type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: ElderAutocompleteDirective, selector: "[elderElderAutocomplete]", inputs: ["queryFilter", "filters", "sorts", "elderElderAutocomplete"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$5.MatSuffix, selector: "[matSuffix]" }, { type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "async": i3$1.AsyncPipe, "translate": i1$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
21329
21335
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: ElderSelectComponent, decorators: [{
|
|
21330
21336
|
type: Component,
|
|
21331
21337
|
args: [{ selector: 'elder-select', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -21334,8 +21340,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
|
|
|
21334
21340
|
useExisting: forwardRef(() => ElderSelectComponent)
|
|
21335
21341
|
},
|
|
21336
21342
|
...buildFormIntegrationProviders(ElderSelectComponent)
|
|
21337
|
-
], template: "<mat-form-field *ngIf=\"(entityWrapped$ | async) as entityWrapper\" fxFlex\n class=\"elder-std-form-field\"\n [appearance]=\"appearance\"\n [floatLabel]=\"floatLabel\"\n [color]=\"color\"\n [elderDense]=\"dense\"\n [elderNoHint]=\"noHint\"\n>\n\n <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n\n <ng-container matPrefix *ngIf=\"(mergedState$ | async) as state\">\n\n <mat-icon *ngIf=\"icon\" disabled\n class=\"leading-icon prefix-padding noselect clickable-icon\"\n [class.loading]=\"state.loading\"\n [color]=\"state?.error ? 'warn' : color\"\n (click)=\"onCurrentClicked(entity)\"\n >\n {{icon}}\n </mat-icon>\n\n\n <mat-icon *ngIf=\"!icon && state?.error\"\n class=\"leading-icon prefix-padding noselect\"\n color=\"warn\">\n warning\n </mat-icon>\n </ng-container>\n\n <!-- A dynamic input -->\n <input\n matInput type=\"text\" fxFlex=\"grow\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [readonly]=\"readonly || !autocomplete\"\n [name]=\"name + '-inner-input'\"\n [placeholder]=\"placeholder | translate\"\n [matAutocomplete] #autoTrigger=\"matAutocompleteTrigger\"\n [elderElderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n elderSelectOnTab\n [class.select]=\"!autocomplete\" (click)=\"onInputClicked(autoTrigger)\"\n [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true, updateOn: 'submit'}\"\n (blur)=\"onInputBlur($event)\"\n >\n\n <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n <elder-autocomplete\n #elderAuto=\"elderAutocomplete\"\n [suggestionsDc]=\"suggestionsDc$ | 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\n <ng-container matSuffix>\n\n <mat-icon\n *ngIf=\"!selectionPopup && !autocomplete\" class=\"select-arrow noselect\"\n (click)=\"onInputClicked(autoTrigger)\">\n arrow_drop_down\n </mat-icon>\n\n <button mat-icon-button type=\"button\"\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>search</mat-icon>\n </button>\n\n <button mat-icon-button type=\"button\"\n *ngIf=\"entityWrapper.value && allowNull\"\n [disabled]=\"isLocked\"\n (click)=\"clear($event)\" aria-label=\"Clear\"\n elderStopEventPropagation\n tabIndex=\"-1\"\n >\n <mat-icon>close</mat-icon>\n </button>\n\n </ng-container>\n\n <mat-hint *ngIf=\"entityWrapper.hintText\">{{entityWrapper.hintText}}</mat-hint>\n\n</mat-form-field>\n\n\n\n", styles: [".prefix-container{width:24px;height:16px}@-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}.prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}.clickable-icon{cursor:pointer}.full-width{width:100%}.select{cursor:pointer;width:162px}.select-arrow{font-size:18px;width:18px;height:18px;cursor:pointer}\n"] }]
|
|
21338
|
-
}], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: {
|
|
21343
|
+
], template: "<mat-form-field *ngIf=\"(entityWrapped$ | async) as entityWrapper\" fxFlex\n class=\"elder-std-form-field\"\n [appearance]=\"appearance\"\n [floatLabel]=\"floatLabel\"\n [color]=\"color\"\n [elderDense]=\"dense\"\n [elderNoHint]=\"noHint\"\n>\n\n <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n\n <ng-container matPrefix *ngIf=\"(mergedState$ | async) as state\">\n\n <mat-icon *ngIf=\"icon\" disabled\n class=\"leading-icon prefix-padding noselect clickable-icon\"\n [class.loading]=\"state.loading\"\n [color]=\"state?.error ? 'warn' : color\"\n (click)=\"onCurrentClicked(entity)\"\n >\n {{icon}}\n </mat-icon>\n\n\n <mat-icon *ngIf=\"!icon && state?.error\"\n class=\"leading-icon prefix-padding noselect\"\n color=\"warn\">\n warning\n </mat-icon>\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]=\"name + '-inner-input'\"\n [placeholder]=\"placeholder | translate\"\n [matAutocomplete] #autoTrigger=\"matAutocompleteTrigger\"\n [elderElderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n elderSelectOnTab\n [class.select]=\"!autocomplete\" (click)=\"onInputClicked(autoTrigger)\"\n [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true, updateOn: 'submit'}\"\n (blur)=\"onInputBlur($event)\"\n >\n\n <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n <elder-autocomplete\n #elderAuto=\"elderAutocomplete\"\n [suggestionsDc]=\"suggestionsDc$ | 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\n <ng-container matSuffix>\n\n <mat-icon\n *ngIf=\"!selectionPopup && !autocomplete\" class=\"select-arrow noselect\"\n (click)=\"onInputClicked(autoTrigger)\">\n arrow_drop_down\n </mat-icon>\n\n <button mat-icon-button type=\"button\"\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>search</mat-icon>\n </button>\n\n <button mat-icon-button type=\"button\"\n *ngIf=\"entityWrapper.value && allowNull\"\n [disabled]=\"isLocked\"\n (click)=\"clear($event)\" aria-label=\"Clear\"\n elderStopEventPropagation\n tabIndex=\"-1\"\n >\n <mat-icon>close</mat-icon>\n </button>\n\n </ng-container>\n\n <mat-hint *ngIf=\"entityWrapper.hintText\">{{entityWrapper.hintText}}</mat-hint>\n\n</mat-form-field>\n\n\n\n", styles: [".prefix-container{width:24px;height:16px}@-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}.prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}.clickable-icon{cursor:pointer}.full-width{width:100%}.select{cursor:pointer;width:162px}.select-arrow{font-size:18px;width:18px;height:18px;cursor:pointer}\n"] }]
|
|
21344
|
+
}], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { inputRef: [{
|
|
21345
|
+
type: ViewChild,
|
|
21346
|
+
args: ['input']
|
|
21347
|
+
}], nullDisplay: [{
|
|
21339
21348
|
type: Input
|
|
21340
21349
|
}], entityIdChange: [{
|
|
21341
21350
|
type: Output
|
|
@@ -21758,6 +21767,12 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
|
|
|
21758
21767
|
this.appendEntity(selectedValue);
|
|
21759
21768
|
}
|
|
21760
21769
|
}
|
|
21770
|
+
focus(options) {
|
|
21771
|
+
this.inputControl?.nativeElement?.focus(options);
|
|
21772
|
+
}
|
|
21773
|
+
blur() {
|
|
21774
|
+
this.inputControl?.nativeElement?.blur();
|
|
21775
|
+
}
|
|
21761
21776
|
/***************************************************************************
|
|
21762
21777
|
* *
|
|
21763
21778
|
* Private methods *
|