@elderbyte/ngx-starter 13.9.3 → 13.9.4
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 +21 -13
- package/esm2020/lib/components/select/elder-select-on-tab.directive.mjs +10 -4
- package/fesm2015/elderbyte-ngx-starter.mjs +29 -15
- package/fesm2015/elderbyte-ngx-starter.mjs.map +1 -1
- package/fesm2020/elderbyte-ngx-starter.mjs +29 -15
- package/fesm2020/elderbyte-ngx-starter.mjs.map +1 -1
- package/lib/components/select/elder-select/elder-select.component.d.ts +2 -0
- package/lib/components/select/elder-select-on-tab.directive.d.ts +1 -0
- package/package.json +1 -1
|
@@ -20798,6 +20798,7 @@ class ElderSelectOnTabDirective {
|
|
|
20798
20798
|
**************************************************************************/
|
|
20799
20799
|
constructor(autoTrigger, elderSelectBase) {
|
|
20800
20800
|
this.autoTrigger = autoTrigger;
|
|
20801
|
+
this.elderSelectBase = elderSelectBase;
|
|
20801
20802
|
/***************************************************************************
|
|
20802
20803
|
* *
|
|
20803
20804
|
* Fields *
|
|
@@ -20828,12 +20829,17 @@ class ElderSelectOnTabDirective {
|
|
|
20828
20829
|
if (!this.panelOpen) {
|
|
20829
20830
|
return;
|
|
20830
20831
|
}
|
|
20831
|
-
if (this.
|
|
20832
|
-
//
|
|
20833
|
-
if (
|
|
20832
|
+
if (!this.userInput) {
|
|
20833
|
+
// The user did not select anything in the auto-complete
|
|
20834
|
+
if (this.controlValueAccessor.value) {
|
|
20834
20835
|
this.logger.warn('Discarding TAB since the user did probably not intend to change the value! userInput:', this.userInput);
|
|
20835
20836
|
return;
|
|
20836
20837
|
}
|
|
20838
|
+
if (!this.elderSelectBase.required) {
|
|
20839
|
+
// The user did not select any option and no current value is present.
|
|
20840
|
+
// Since the input is NOT marked as required, we assume the user did not want to select a value
|
|
20841
|
+
return;
|
|
20842
|
+
}
|
|
20837
20843
|
}
|
|
20838
20844
|
const activeOption = this.autoTrigger.activeOption;
|
|
20839
20845
|
if (activeOption) {
|
|
@@ -21157,6 +21163,11 @@ class ElderSelectComponent extends ElderSelectBase {
|
|
|
21157
21163
|
input.value = null;
|
|
21158
21164
|
}
|
|
21159
21165
|
}
|
|
21166
|
+
onInputFocus(autoTrigger) {
|
|
21167
|
+
if (!this._autocomplete) {
|
|
21168
|
+
this.openPanel(autoTrigger);
|
|
21169
|
+
}
|
|
21170
|
+
}
|
|
21160
21171
|
get isOptionDisabledInternalFn() {
|
|
21161
21172
|
return (option) => {
|
|
21162
21173
|
if (!this.isEntitySelected(option)) {
|
|
@@ -21185,18 +21196,21 @@ class ElderSelectComponent extends ElderSelectBase {
|
|
|
21185
21196
|
autoTrigger.closePanel();
|
|
21186
21197
|
}
|
|
21187
21198
|
else {
|
|
21188
|
-
this.
|
|
21189
|
-
|
|
21190
|
-
|
|
21191
|
-
|
|
21192
|
-
|
|
21193
|
-
|
|
21194
|
-
|
|
21195
|
-
|
|
21196
|
-
|
|
21199
|
+
this.openPanel(autoTrigger);
|
|
21200
|
+
}
|
|
21201
|
+
}
|
|
21202
|
+
openPanel(autoTrigger) {
|
|
21203
|
+
this.logger.debug('Requesting to open auto-complete panel...', autoTrigger);
|
|
21204
|
+
if (this.suggestionsDc) {
|
|
21205
|
+
try {
|
|
21206
|
+
this.suggestionsDc.start(this.sorts, this.filters);
|
|
21207
|
+
}
|
|
21208
|
+
catch (err) {
|
|
21209
|
+
this.logger.error('Failed to start DC!', err);
|
|
21210
|
+
this.updateState(ElderSelectComponentState.error(err));
|
|
21197
21211
|
}
|
|
21198
|
-
autoTrigger.openPanel();
|
|
21199
21212
|
}
|
|
21213
|
+
autoTrigger.openPanel();
|
|
21200
21214
|
}
|
|
21201
21215
|
onInputClicked(autoTrigger) {
|
|
21202
21216
|
// this.logger.debug('onInputClicked, locked: ' + this.isLocked + ', autocomplete: ' + this.autocomplete, autoTrigger);
|
|
@@ -21355,7 +21369,7 @@ ElderSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
|
|
|
21355
21369
|
useExisting: forwardRef(() => ElderSelectComponent)
|
|
21356
21370
|
},
|
|
21357
21371
|
...buildFormIntegrationProviders(ElderSelectComponent)
|
|
21358
|
-
], 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\"
|
|
21372
|
+
], 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\"\n [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true, updateOn: 'submit'}\"\n (blur)=\"onInputBlur($event)\"\n (focus)=\"onInputFocus(autoTrigger)\"\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 suffix-icon noselect\"\n (click)=\"onInputClicked(autoTrigger)\">\n arrow_drop_down\n </mat-icon>\n\n <button mat-icon-button type=\"button\" class=\"suffix-icon\"\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\" class=\"suffix-icon\"\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,.suffix-icon,.suffix-icon .mat-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 });
|
|
21359
21373
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: ElderSelectComponent, decorators: [{
|
|
21360
21374
|
type: Component,
|
|
21361
21375
|
args: [{ selector: 'elder-select', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -21364,7 +21378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
|
|
|
21364
21378
|
useExisting: forwardRef(() => ElderSelectComponent)
|
|
21365
21379
|
},
|
|
21366
21380
|
...buildFormIntegrationProviders(ElderSelectComponent)
|
|
21367
|
-
], 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\"
|
|
21381
|
+
], 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\"\n [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true, updateOn: 'submit'}\"\n (blur)=\"onInputBlur($event)\"\n (focus)=\"onInputFocus(autoTrigger)\"\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 suffix-icon noselect\"\n (click)=\"onInputClicked(autoTrigger)\">\n arrow_drop_down\n </mat-icon>\n\n <button mat-icon-button type=\"button\" class=\"suffix-icon\"\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\" class=\"suffix-icon\"\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,.suffix-icon,.suffix-icon .mat-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"] }]
|
|
21368
21382
|
}], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { inputRef: [{
|
|
21369
21383
|
type: ViewChild,
|
|
21370
21384
|
args: ['input']
|