ecabs-components 1.1.64 → 1.1.66
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/README.md +2 -0
- package/esm2022/lib/base/pipes/phone-number-country-code.pipe.mjs +2 -2
- package/esm2022/lib/base/utils/phone-number.utils.mjs +2 -2
- package/esm2022/lib/ecabs-chip-autocomplete/ecabs-chip-autocomplete.component.mjs +35 -8
- package/esm2022/lib/ecabs-input-range/ecabs-input-range.component.mjs +3 -3
- package/esm2022/public-api.mjs +1 -1
- package/fesm2022/ecabs-components.mjs +34 -9
- package/fesm2022/ecabs-components.mjs.map +1 -1
- package/lib/base/utils/phone-number.utils.d.ts +1 -1
- package/lib/ecabs-chip-autocomplete/ecabs-chip-autocomplete.component.d.ts +8 -3
- package/package.json +1 -1
- package/src/assets/styles/tailwind/index.scss +1 -1
|
@@ -1427,7 +1427,7 @@ class EcabsInputRangeComponent extends EcabsElementBaseComponent {
|
|
|
1427
1427
|
useExisting: EcabsInputRangeComponent,
|
|
1428
1428
|
multi: true,
|
|
1429
1429
|
},
|
|
1430
|
-
], viewQueries: [{ propertyName: "toInput", first: true, predicate: ["toInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"
|
|
1430
|
+
], viewQueries: [{ propertyName: "toInput", first: true, predicate: ["toInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"rounded-xl flex flex-col gap-4\">\r\n <div\r\n class=\"form-field__range--wrapper\"\r\n [class.form-field--invalid]=\"hasAnyError\"\r\n >\r\n <input\r\n #fromInput\r\n ecabsDigitsOnly\r\n [digitsOnly]=\"digitsOnly\"\r\n [decimal]=\"allowDecimal\"\r\n [allowHyphen]=\"allowHyphen\"\r\n class=\"form-field__input text-center border-0 outline-none bg-transparent\"\r\n type=\"number\"\r\n [id]=\"name + '-from'\"\r\n [mini]=\"min\"\r\n [maxi]=\"max\"\r\n [step]=\"step\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"fromPlaceholder\"\r\n [ngModel]=\"value.from\"\r\n (ngModelChange)=\"updateValue('from', $event)\"\r\n (focus)=\"setFocus(true)\"\r\n (blur)=\"setFocus(false)\"\r\n (keydown.enter)=\"focusToInput()\"\r\n />\r\n <span class=\"text-gray-500 text-base mx-4\">{{separatorText}}</span>\r\n <input\r\n #toInput\r\n ecabsDigitsOnly\r\n [digitsOnly]=\"digitsOnly\"\r\n [decimal]=\"allowDecimal\"\r\n [allowHyphen]=\"allowHyphen\"\r\n class=\"form-field__input text-center border-0 outline-none bg-transparent\"\r\n type=\"number\"\r\n [id]=\"name + '-to'\"\r\n [mini]=\"value.from !== null ? value.from : min\"\r\n [maxi]=\"max\"\r\n [step]=\"step\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"toPlaceholder\"\r\n [ngModel]=\"value.to\"\r\n (ngModelChange)=\"updateValue('to', $event)\"\r\n (focus)=\"setFocus(true)\"\r\n (blur)=\"setFocus(false)\"\r\n />\r\n </div>\r\n </div>\r\n</ecabs-element-wrapper>", styles: [""], dependencies: [{ kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsMinDirective, selector: "[mini][formControlName],[mini][formControl],[mini][ngModel]", inputs: ["mini"] }, { kind: "directive", type: EcabsMaxDirective, selector: "[maxi][formControlName],[maxi][formControl],[maxi][ngModel]", inputs: ["maxi"] }] });
|
|
1431
1431
|
}
|
|
1432
1432
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsInputRangeComponent, decorators: [{
|
|
1433
1433
|
type: Component,
|
|
@@ -1442,7 +1442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1442
1442
|
useExisting: EcabsInputRangeComponent,
|
|
1443
1443
|
multi: true,
|
|
1444
1444
|
},
|
|
1445
|
-
], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"
|
|
1445
|
+
], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"rounded-xl flex flex-col gap-4\">\r\n <div\r\n class=\"form-field__range--wrapper\"\r\n [class.form-field--invalid]=\"hasAnyError\"\r\n >\r\n <input\r\n #fromInput\r\n ecabsDigitsOnly\r\n [digitsOnly]=\"digitsOnly\"\r\n [decimal]=\"allowDecimal\"\r\n [allowHyphen]=\"allowHyphen\"\r\n class=\"form-field__input text-center border-0 outline-none bg-transparent\"\r\n type=\"number\"\r\n [id]=\"name + '-from'\"\r\n [mini]=\"min\"\r\n [maxi]=\"max\"\r\n [step]=\"step\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"fromPlaceholder\"\r\n [ngModel]=\"value.from\"\r\n (ngModelChange)=\"updateValue('from', $event)\"\r\n (focus)=\"setFocus(true)\"\r\n (blur)=\"setFocus(false)\"\r\n (keydown.enter)=\"focusToInput()\"\r\n />\r\n <span class=\"text-gray-500 text-base mx-4\">{{separatorText}}</span>\r\n <input\r\n #toInput\r\n ecabsDigitsOnly\r\n [digitsOnly]=\"digitsOnly\"\r\n [decimal]=\"allowDecimal\"\r\n [allowHyphen]=\"allowHyphen\"\r\n class=\"form-field__input text-center border-0 outline-none bg-transparent\"\r\n type=\"number\"\r\n [id]=\"name + '-to'\"\r\n [mini]=\"value.from !== null ? value.from : min\"\r\n [maxi]=\"max\"\r\n [step]=\"step\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"toPlaceholder\"\r\n [ngModel]=\"value.to\"\r\n (ngModelChange)=\"updateValue('to', $event)\"\r\n (focus)=\"setFocus(true)\"\r\n (blur)=\"setFocus(false)\"\r\n />\r\n </div>\r\n </div>\r\n</ecabs-element-wrapper>" }]
|
|
1446
1446
|
}], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.DestroyRef }]; }, propDecorators: { toInput: [{
|
|
1447
1447
|
type: ViewChild,
|
|
1448
1448
|
args: ['toInput']
|
|
@@ -8932,9 +8932,11 @@ class EcabsChipAutocompleteComponent extends EcabsElementBaseComponent {
|
|
|
8932
8932
|
visibleOptions = 8.5;
|
|
8933
8933
|
autoActiveFirstOption = true;
|
|
8934
8934
|
noResultsText = 'No results found';
|
|
8935
|
+
loadingText = 'Loading...';
|
|
8935
8936
|
compareFn = Object.is;
|
|
8936
8937
|
avatarTemplate;
|
|
8937
8938
|
truncateAt = 18;
|
|
8939
|
+
suppressNextTermOnRefocus = false;
|
|
8938
8940
|
set options(value) {
|
|
8939
8941
|
this._options.set(value);
|
|
8940
8942
|
}
|
|
@@ -8942,14 +8944,16 @@ class EcabsChipAutocompleteComponent extends EcabsElementBaseComponent {
|
|
|
8942
8944
|
termChange = new EventEmitter();
|
|
8943
8945
|
inputControl = new FormControl('');
|
|
8944
8946
|
normalizedTerm$ = this.inputControl.valueChanges.pipe(startWith(''), map((value) => value ?? ''), distinctUntilChanged());
|
|
8947
|
+
_loading = signal(false);
|
|
8945
8948
|
_options = signal([]);
|
|
8946
8949
|
_values = signal([]);
|
|
8950
|
+
_suppressNextTermOnRefocus = signal(false);
|
|
8947
8951
|
_term = toSignal(this.normalizedTerm$, { initialValue: '' });
|
|
8948
8952
|
destroyRef = inject(DestroyRef);
|
|
8949
8953
|
overlayPanelClass = 'ecabs-chip-autocomplete-overlay-panel';
|
|
8950
8954
|
selectedOptions = computed(() => this.setValidSelectedOptions(this._values(), this._options()));
|
|
8951
|
-
filteredOptions = computed(() => this.setFilteredOptions(this._term(), this._values(), this._options()));
|
|
8952
|
-
noMatchResult = computed(() => !!this._term().trim().length && !this.filteredOptions().length);
|
|
8955
|
+
filteredOptions = computed(() => this._loading() ? [] : this.setFilteredOptions(this._term(), this._values(), this._options()));
|
|
8956
|
+
noMatchResult = computed(() => !this._loading() && !!this._term().trim().length && !this.filteredOptions().length);
|
|
8953
8957
|
get options() {
|
|
8954
8958
|
return this._options();
|
|
8955
8959
|
}
|
|
@@ -8959,9 +8963,20 @@ class EcabsChipAutocompleteComponent extends EcabsElementBaseComponent {
|
|
|
8959
8963
|
this.normalizedTerm$
|
|
8960
8964
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
8961
8965
|
.subscribe((value) => {
|
|
8966
|
+
if (this.suppressNextTermOnRefocus && this._suppressNextTermOnRefocus() && value === '') {
|
|
8967
|
+
this._suppressNextTermOnRefocus.set(false);
|
|
8968
|
+
return;
|
|
8969
|
+
}
|
|
8962
8970
|
this.termChange.emit(value);
|
|
8971
|
+
this._suppressNextTermOnRefocus.set(false);
|
|
8963
8972
|
});
|
|
8964
8973
|
}
|
|
8974
|
+
ngOnChanges(changes) {
|
|
8975
|
+
const { loading } = changes ?? {};
|
|
8976
|
+
if (loading) {
|
|
8977
|
+
this._loading.set(this.loading);
|
|
8978
|
+
}
|
|
8979
|
+
}
|
|
8965
8980
|
setOverlayHeight() {
|
|
8966
8981
|
const panel = this.document.querySelector(`.${this.overlayPanelClass}`);
|
|
8967
8982
|
if (!panel) {
|
|
@@ -9015,14 +9030,19 @@ class EcabsChipAutocompleteComponent extends EcabsElementBaseComponent {
|
|
|
9015
9030
|
blur() {
|
|
9016
9031
|
this.onTouched();
|
|
9017
9032
|
}
|
|
9018
|
-
onChange = () => {
|
|
9019
|
-
|
|
9033
|
+
onChange = () => {
|
|
9034
|
+
};
|
|
9035
|
+
onTouched = () => {
|
|
9036
|
+
};
|
|
9020
9037
|
updateValues(values) {
|
|
9021
9038
|
this._values.set(values);
|
|
9022
9039
|
this.onChange(values);
|
|
9023
9040
|
this.selectionChange.emit(values);
|
|
9024
9041
|
}
|
|
9025
9042
|
clearAndRefocusInput() {
|
|
9043
|
+
if (this.suppressNextTermOnRefocus) {
|
|
9044
|
+
this._suppressNextTermOnRefocus.set(true);
|
|
9045
|
+
}
|
|
9026
9046
|
this.inputControl.setValue('');
|
|
9027
9047
|
this.inputRef?.nativeElement?.focus();
|
|
9028
9048
|
}
|
|
@@ -9047,13 +9067,13 @@ class EcabsChipAutocompleteComponent extends EcabsElementBaseComponent {
|
|
|
9047
9067
|
});
|
|
9048
9068
|
}
|
|
9049
9069
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsChipAutocompleteComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
|
|
9050
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsChipAutocompleteComponent, isStandalone: true, selector: "ecabs-chip-autocomplete", inputs: { visibleOptions: "visibleOptions", autoActiveFirstOption: "autoActiveFirstOption", noResultsText: "noResultsText", compareFn: "compareFn", avatarTemplate: "avatarTemplate", truncateAt: "truncateAt", options: "options" }, outputs: { selectionChange: "selectionChange", termChange: "termChange" }, providers: [
|
|
9070
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsChipAutocompleteComponent, isStandalone: true, selector: "ecabs-chip-autocomplete", inputs: { visibleOptions: "visibleOptions", autoActiveFirstOption: "autoActiveFirstOption", noResultsText: "noResultsText", loadingText: "loadingText", compareFn: "compareFn", avatarTemplate: "avatarTemplate", truncateAt: "truncateAt", suppressNextTermOnRefocus: "suppressNextTermOnRefocus", options: "options" }, outputs: { selectionChange: "selectionChange", termChange: "termChange" }, providers: [
|
|
9051
9071
|
{
|
|
9052
9072
|
provide: NG_VALUE_ACCESSOR,
|
|
9053
9073
|
useExisting: forwardRef(() => EcabsChipAutocompleteComponent),
|
|
9054
9074
|
multi: true,
|
|
9055
9075
|
},
|
|
9056
|
-
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"form-field__input--wrapper\">\r\n <input matInput\r\n [id]=\"label\"\r\n [name]=\"label\"\r\n class=\"form-field__input\"\r\n [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\r\n #inputElem\r\n [matChipInputFor]=\"chipGrid\"\r\n [matAutocomplete]=\"auto\"\r\n [formControl]=\"inputControl\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"placeholder\"\r\n (blur)=\"blur()\"/>\r\n </div>\r\n</ecabs-element-wrapper>\r\n\r\n<mat-autocomplete #auto=\"matAutocomplete\"\r\n [autoActiveFirstOption]=\"autoActiveFirstOption\"\r\n (optionSelected)=\"setSelection($event)\"\r\n (opened)=\"setOverlayHeight()\"\r\n [class]=\"overlayPanelClass\">\r\n <mat-option *ngFor=\"let option of filteredOptions(); trackBy: trackByFn\"\r\n [value]=\"option\"\r\n [disabled]=\"option.disabled ?? false\">\r\n <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n </ng-container>\r\n {{ option.label }}\r\n </mat-option>\r\n\r\n <mat-option disabled *ngIf=\"noMatchResult()\">\r\n {{ noResultsText }}\r\n </mat-option>\r\n</mat-autocomplete>\r\n\r\n<mat-chip-grid #chipGrid\r\n [disabled]=\"disabled\"\r\n [class.mt-4]=\"selectedOptions().length > 0\">\r\n <mat-chip-row *ngFor=\"let option of selectedOptions(); trackBy: trackByFn\"\r\n [disabled]=\"disabled || option.disabled\"\r\n (removed)=\"removeSelection(option)\">\r\n <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"option?.label as label\">\r\n <span [matTooltip]=\"label\"\r\n [matTooltipDisabled]=\"label.length <= truncateAt\">\r\n {{ label | truncate: truncateAt }}\r\n </span>\r\n </ng-container>\r\n <mat-icon matChipRemove\r\n svgIcon=\"ph-light:x\">\r\n </mat-icon>\r\n </mat-chip-row>\r\n</mat-chip-grid>\r\n\r\n<ng-template #avatarContext let-option>\r\n <ng-container *ngIf=\"avatarTemplate\">\r\n <ng-container [ngTemplateOutlet]=\"avatarTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n </ng-container>\r\n </ng-container>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: EcabsInputModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$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: "ngmodule", type: ElementWrapperModule }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "ngmodule", type: NgxPhosphorIconsLightFileModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "ngmodule", type: EcabsPipesModule }, { kind: "pipe", type: EcabsTruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9076
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElem"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"form-field__input--wrapper\">\r\n <input matInput\r\n [id]=\"label\"\r\n [name]=\"label\"\r\n class=\"form-field__input\"\r\n [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\r\n #inputElem\r\n [matChipInputFor]=\"chipGrid\"\r\n [matAutocomplete]=\"auto\"\r\n [formControl]=\"inputControl\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"placeholder\"\r\n (blur)=\"blur()\"/>\r\n </div>\r\n</ecabs-element-wrapper>\r\n\r\n<mat-autocomplete #auto=\"matAutocomplete\"\r\n [autoActiveFirstOption]=\"autoActiveFirstOption\"\r\n (optionSelected)=\"setSelection($event)\"\r\n (opened)=\"setOverlayHeight()\"\r\n [class]=\"overlayPanelClass\">\r\n <mat-option *ngFor=\"let option of filteredOptions(); trackBy: trackByFn\"\r\n [value]=\"option\"\r\n [disabled]=\"option.disabled ?? false\">\r\n <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n </ng-container>\r\n {{ option.label }}\r\n </mat-option>\r\n\r\n <mat-option *ngIf=\"loading\" disabled>\r\n <div class=\"flex items-center\">\r\n <div class=\"mr-2\">{{ loadingText }}</div>\r\n <ecabs-loading-spinner size=\"tiny\"></ecabs-loading-spinner>\r\n </div>\r\n </mat-option>\r\n\r\n <mat-option disabled *ngIf=\"noMatchResult()\">\r\n {{ noResultsText }}\r\n </mat-option>\r\n</mat-autocomplete>\r\n\r\n<mat-chip-grid #chipGrid\r\n [disabled]=\"disabled\"\r\n [class.mt-4]=\"selectedOptions().length > 0\">\r\n <mat-chip-row *ngFor=\"let option of selectedOptions(); trackBy: trackByFn\"\r\n [disabled]=\"disabled || option.disabled\"\r\n (removed)=\"removeSelection(option)\">\r\n <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"option?.label as label\">\r\n <span [matTooltip]=\"label\"\r\n [matTooltipDisabled]=\"label.length <= truncateAt\">\r\n {{ label | truncate: truncateAt }}\r\n </span>\r\n </ng-container>\r\n <mat-icon matChipRemove\r\n svgIcon=\"ph-light:x\">\r\n </mat-icon>\r\n </mat-chip-row>\r\n</mat-chip-grid>\r\n\r\n<ng-template #avatarContext let-option>\r\n <ng-container *ngIf=\"avatarTemplate\">\r\n <ng-container [ngTemplateOutlet]=\"avatarTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n </ng-container>\r\n </ng-container>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: EcabsInputModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$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: "ngmodule", type: ElementWrapperModule }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "ngmodule", type: NgxPhosphorIconsLightFileModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "ngmodule", type: EcabsPipesModule }, { kind: "pipe", type: EcabsTruncatePipe, name: "truncate" }, { kind: "ngmodule", type: EcabsLoadingModule }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9057
9077
|
}
|
|
9058
9078
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsChipAutocompleteComponent, decorators: [{
|
|
9059
9079
|
type: Component,
|
|
@@ -9069,13 +9089,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
9069
9089
|
NgxPhosphorIconsLightFileModule,
|
|
9070
9090
|
MatTooltipModule,
|
|
9071
9091
|
EcabsPipesModule,
|
|
9092
|
+
EcabsLoadingModule,
|
|
9072
9093
|
], providers: [
|
|
9073
9094
|
{
|
|
9074
9095
|
provide: NG_VALUE_ACCESSOR,
|
|
9075
9096
|
useExisting: forwardRef(() => EcabsChipAutocompleteComponent),
|
|
9076
9097
|
multi: true,
|
|
9077
9098
|
},
|
|
9078
|
-
], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"form-field__input--wrapper\">\r\n <input matInput\r\n [id]=\"label\"\r\n [name]=\"label\"\r\n class=\"form-field__input\"\r\n [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\r\n #inputElem\r\n [matChipInputFor]=\"chipGrid\"\r\n [matAutocomplete]=\"auto\"\r\n [formControl]=\"inputControl\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"placeholder\"\r\n (blur)=\"blur()\"/>\r\n </div>\r\n</ecabs-element-wrapper>\r\n\r\n<mat-autocomplete #auto=\"matAutocomplete\"\r\n [autoActiveFirstOption]=\"autoActiveFirstOption\"\r\n (optionSelected)=\"setSelection($event)\"\r\n (opened)=\"setOverlayHeight()\"\r\n [class]=\"overlayPanelClass\">\r\n <mat-option *ngFor=\"let option of filteredOptions(); trackBy: trackByFn\"\r\n [value]=\"option\"\r\n [disabled]=\"option.disabled ?? false\">\r\n <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n </ng-container>\r\n {{ option.label }}\r\n </mat-option>\r\n\r\n <mat-option disabled *ngIf=\"noMatchResult()\">\r\n {{ noResultsText }}\r\n </mat-option>\r\n</mat-autocomplete>\r\n\r\n<mat-chip-grid #chipGrid\r\n [disabled]=\"disabled\"\r\n [class.mt-4]=\"selectedOptions().length > 0\">\r\n <mat-chip-row *ngFor=\"let option of selectedOptions(); trackBy: trackByFn\"\r\n [disabled]=\"disabled || option.disabled\"\r\n (removed)=\"removeSelection(option)\">\r\n <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"option?.label as label\">\r\n <span [matTooltip]=\"label\"\r\n [matTooltipDisabled]=\"label.length <= truncateAt\">\r\n {{ label | truncate: truncateAt }}\r\n </span>\r\n </ng-container>\r\n <mat-icon matChipRemove\r\n svgIcon=\"ph-light:x\">\r\n </mat-icon>\r\n </mat-chip-row>\r\n</mat-chip-grid>\r\n\r\n<ng-template #avatarContext let-option>\r\n <ng-container *ngIf=\"avatarTemplate\">\r\n <ng-container [ngTemplateOutlet]=\"avatarTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n </ng-container>\r\n </ng-container>\r\n</ng-template>\r\n" }]
|
|
9099
|
+
], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"form-field__input--wrapper\">\r\n <input matInput\r\n [id]=\"label\"\r\n [name]=\"label\"\r\n class=\"form-field__input\"\r\n [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\r\n #inputElem\r\n [matChipInputFor]=\"chipGrid\"\r\n [matAutocomplete]=\"auto\"\r\n [formControl]=\"inputControl\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"placeholder\"\r\n (blur)=\"blur()\"/>\r\n </div>\r\n</ecabs-element-wrapper>\r\n\r\n<mat-autocomplete #auto=\"matAutocomplete\"\r\n [autoActiveFirstOption]=\"autoActiveFirstOption\"\r\n (optionSelected)=\"setSelection($event)\"\r\n (opened)=\"setOverlayHeight()\"\r\n [class]=\"overlayPanelClass\">\r\n <mat-option *ngFor=\"let option of filteredOptions(); trackBy: trackByFn\"\r\n [value]=\"option\"\r\n [disabled]=\"option.disabled ?? false\">\r\n <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n </ng-container>\r\n {{ option.label }}\r\n </mat-option>\r\n\r\n <mat-option *ngIf=\"loading\" disabled>\r\n <div class=\"flex items-center\">\r\n <div class=\"mr-2\">{{ loadingText }}</div>\r\n <ecabs-loading-spinner size=\"tiny\"></ecabs-loading-spinner>\r\n </div>\r\n </mat-option>\r\n\r\n <mat-option disabled *ngIf=\"noMatchResult()\">\r\n {{ noResultsText }}\r\n </mat-option>\r\n</mat-autocomplete>\r\n\r\n<mat-chip-grid #chipGrid\r\n [disabled]=\"disabled\"\r\n [class.mt-4]=\"selectedOptions().length > 0\">\r\n <mat-chip-row *ngFor=\"let option of selectedOptions(); trackBy: trackByFn\"\r\n [disabled]=\"disabled || option.disabled\"\r\n (removed)=\"removeSelection(option)\">\r\n <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"option?.label as label\">\r\n <span [matTooltip]=\"label\"\r\n [matTooltipDisabled]=\"label.length <= truncateAt\">\r\n {{ label | truncate: truncateAt }}\r\n </span>\r\n </ng-container>\r\n <mat-icon matChipRemove\r\n svgIcon=\"ph-light:x\">\r\n </mat-icon>\r\n </mat-chip-row>\r\n</mat-chip-grid>\r\n\r\n<ng-template #avatarContext let-option>\r\n <ng-container *ngIf=\"avatarTemplate\">\r\n <ng-container [ngTemplateOutlet]=\"avatarTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n </ng-container>\r\n </ng-container>\r\n</ng-template>\r\n" }]
|
|
9079
9100
|
}], ctorParameters: function () { return [{ type: Document, decorators: [{
|
|
9080
9101
|
type: Inject,
|
|
9081
9102
|
args: [DOCUMENT]
|
|
@@ -9088,12 +9109,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
9088
9109
|
type: Input
|
|
9089
9110
|
}], noResultsText: [{
|
|
9090
9111
|
type: Input
|
|
9112
|
+
}], loadingText: [{
|
|
9113
|
+
type: Input
|
|
9091
9114
|
}], compareFn: [{
|
|
9092
9115
|
type: Input
|
|
9093
9116
|
}], avatarTemplate: [{
|
|
9094
9117
|
type: Input
|
|
9095
9118
|
}], truncateAt: [{
|
|
9096
9119
|
type: Input
|
|
9120
|
+
}], suppressNextTermOnRefocus: [{
|
|
9121
|
+
type: Input
|
|
9097
9122
|
}], options: [{
|
|
9098
9123
|
type: Input,
|
|
9099
9124
|
args: [{ required: true }]
|