ecabs-components 1.1.83 → 1.1.85
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 +4 -1
- package/esm2022/lib/base/consts/buttons.consts.mjs +1 -1
- package/esm2022/lib/ecabs-buttons-v2/ecabs-buttons-v2.component.mjs +21 -17
- package/esm2022/lib/ecabs-loading/spinner/spinner.component.mjs +3 -3
- package/esm2022/lib/ecabs-place-autocomplete/ecabs-place-autocomplete.component.mjs +2 -2
- package/esm2022/lib/ecabs-place-autocomplete-v2/ecabs-place-autocomplete-v2.component.mjs +4 -4
- package/fesm2022/ecabs-components.mjs +25 -21
- package/fesm2022/ecabs-components.mjs.map +1 -1
- package/lib/base/consts/buttons.consts.d.ts +2 -0
- package/lib/ecabs-buttons-v2/ecabs-buttons-v2.component.d.ts +8 -9
- package/package.json +1 -1
- package/src/assets/styles/material/overrides/_button.scss +155 -134
- package/src/assets/styles/scss/modules/_button.scss +281 -272
- package/src/assets/styles/scss/utilities/_mixins.scss +97 -65
|
@@ -75,11 +75,11 @@ import { MatListModule } from '@angular/material/list';
|
|
|
75
75
|
class EcabsSpinnerComponent {
|
|
76
76
|
size = 'medium';
|
|
77
77
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
78
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: { size: "size" }, ngImport: i0, template: "<
|
|
78
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: { size: "size" }, ngImport: i0, template: "<span\r\n class=\"ecabs-spinner-rotate {{ size }}\"\r\n role=\"status\"\r\n aria-label=\"Loading\"\r\n></span>\r\n", styles: [":host{display:inline-block;line-height:0;--ecabs-spinner-color: var(--color-gray-400)}@keyframes ecabs-spinner-rotate{to{transform:rotate(360deg)}}.ecabs-spinner-rotate{box-sizing:border-box;display:inline-block;border-radius:50%;background:conic-gradient(from 90deg,transparent,var(--ecabs-spinner-color));mask:radial-gradient(farthest-side,transparent calc(100% - var(--ecabs-spinner-thickness)),#000 calc(100% - var(--ecabs-spinner-thickness)));animation:ecabs-spinner-rotate .8s linear infinite}.ecabs-spinner-rotate.tiny{width:18px;height:18px;--ecabs-spinner-thickness: 2px}.ecabs-spinner-rotate.medium{width:32px;height:32px;--ecabs-spinner-thickness: 3px}.ecabs-spinner-rotate.large{width:52px;height:52px;--ecabs-spinner-thickness: 4px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
79
79
|
}
|
|
80
80
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSpinnerComponent, decorators: [{
|
|
81
81
|
type: Component,
|
|
82
|
-
args: [{ selector: 'ecabs-loading-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<
|
|
82
|
+
args: [{ selector: 'ecabs-loading-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\r\n class=\"ecabs-spinner-rotate {{ size }}\"\r\n role=\"status\"\r\n aria-label=\"Loading\"\r\n></span>\r\n", styles: [":host{display:inline-block;line-height:0;--ecabs-spinner-color: var(--color-gray-400)}@keyframes ecabs-spinner-rotate{to{transform:rotate(360deg)}}.ecabs-spinner-rotate{box-sizing:border-box;display:inline-block;border-radius:50%;background:conic-gradient(from 90deg,transparent,var(--ecabs-spinner-color));mask:radial-gradient(farthest-side,transparent calc(100% - var(--ecabs-spinner-thickness)),#000 calc(100% - var(--ecabs-spinner-thickness)));animation:ecabs-spinner-rotate .8s linear infinite}.ecabs-spinner-rotate.tiny{width:18px;height:18px;--ecabs-spinner-thickness: 2px}.ecabs-spinner-rotate.medium{width:32px;height:32px;--ecabs-spinner-thickness: 3px}.ecabs-spinner-rotate.large{width:52px;height:52px;--ecabs-spinner-thickness: 4px}\n"] }]
|
|
83
83
|
}], propDecorators: { size: [{
|
|
84
84
|
type: Input
|
|
85
85
|
}] } });
|
|
@@ -194,42 +194,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
194
194
|
class ButtonsV2Component {
|
|
195
195
|
disabled = false;
|
|
196
196
|
loading = false;
|
|
197
|
+
loadingStyle = 'spinner-label';
|
|
197
198
|
size = 'medium';
|
|
198
199
|
type = 'button';
|
|
199
200
|
style = 'flat';
|
|
200
201
|
color = 'primary';
|
|
201
202
|
fullWidth = false;
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
ngOnChanges(changes) {
|
|
205
|
-
const disableInteraction = this.disabled || this.loading;
|
|
206
|
-
this.classAttr = disableInteraction ? 'pointer-events-none' : '';
|
|
207
|
-
if (changes['fullWidth']) {
|
|
208
|
-
this.updateHostWidth();
|
|
209
|
-
}
|
|
203
|
+
get isDisabled() {
|
|
204
|
+
return this.disabled || this.loading;
|
|
210
205
|
}
|
|
211
|
-
|
|
212
|
-
|
|
206
|
+
get hostWidth() {
|
|
207
|
+
return this.fullWidth ? '100%' : '';
|
|
213
208
|
}
|
|
214
209
|
get sizeClass() {
|
|
215
210
|
return `ecabs-button-v2--${this.size}`;
|
|
216
211
|
}
|
|
212
|
+
get matColor() {
|
|
213
|
+
return this.color === 'success' ? undefined : (this.color ?? undefined);
|
|
214
|
+
}
|
|
215
|
+
get showLabel() {
|
|
216
|
+
return !this.loading || this.loadingStyle === 'spinner-label';
|
|
217
|
+
}
|
|
217
218
|
get buttonClasses() {
|
|
218
219
|
return {
|
|
219
220
|
'!w-full': this.fullWidth,
|
|
220
221
|
'loading !leading-none': this.loading,
|
|
222
|
+
'mat-success': this.color === 'success',
|
|
221
223
|
};
|
|
222
224
|
}
|
|
223
225
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonsV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
224
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonsV2Component, selector: "ecabs-buttons-v2", inputs: { disabled: "disabled", loading: "loading", size: "size", type: "type", style: "style", color: "color", fullWidth: "fullWidth" }, host: { properties: { "
|
|
226
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonsV2Component, selector: "ecabs-buttons-v2", inputs: { disabled: "disabled", loading: "loading", loadingStyle: "loadingStyle", size: "size", type: "type", style: "style", color: "color", fullWidth: "fullWidth" }, host: { properties: { "class.pointer-events-none": "this.isDisabled", "style.width": "this.hostWidth" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"style\">\r\n <button\r\n mat-flat-button\r\n *ngSwitchCase=\"'flat'\"\r\n [ngClass]=\"buttonClasses\"\r\n [class]=\"sizeClass\"\r\n [color]=\"matColor\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-busy]=\"loading || null\"\r\n [type]=\"type\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n </button>\r\n <button\r\n mat-stroked-button\r\n *ngSwitchCase=\"'stroked'\"\r\n [ngClass]=\"buttonClasses\"\r\n [class]=\"sizeClass\"\r\n [color]=\"matColor\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-busy]=\"loading || null\"\r\n [type]=\"type\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n </button>\r\n <button\r\n mat-raised-button\r\n *ngSwitchCase=\"'raised'\"\r\n [ngClass]=\"buttonClasses\"\r\n [class]=\"sizeClass\"\r\n [color]=\"matColor\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-busy]=\"loading || null\"\r\n [type]=\"type\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n </button>\r\n <button\r\n mat-button\r\n *ngSwitchCase=\"'basic'\"\r\n [color]=\"matColor\"\r\n [ngClass]=\"buttonClasses\"\r\n [class]=\"sizeClass\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-busy]=\"loading || null\"\r\n [type]=\"type\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n </button>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n <ecabs-loading-spinner\r\n size=\"tiny\"\r\n *ngIf=\"loading\"\r\n >\r\n </ecabs-loading-spinner>\r\n <ng-container *ngIf=\"!loading\">\r\n <ng-content select=\"mat-icon\"></ng-content>\r\n </ng-container>\r\n <ng-container *ngIf=\"showLabel\">\r\n <ng-content></ng-content>\r\n </ng-container>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
225
227
|
}
|
|
226
228
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonsV2Component, decorators: [{
|
|
227
229
|
type: Component,
|
|
228
|
-
args: [{ selector: 'ecabs-buttons-v2', template: "<ng-container [ngSwitch]=\"style\">\n <button\n mat-flat-button\n *ngSwitchCase=\"'flat'\"\n [ngClass]=\"buttonClasses\"\n [class]=\"sizeClass\"\n [color]=\"
|
|
230
|
+
args: [{ selector: 'ecabs-buttons-v2', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"style\">\r\n <button\r\n mat-flat-button\r\n *ngSwitchCase=\"'flat'\"\r\n [ngClass]=\"buttonClasses\"\r\n [class]=\"sizeClass\"\r\n [color]=\"matColor\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-busy]=\"loading || null\"\r\n [type]=\"type\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n </button>\r\n <button\r\n mat-stroked-button\r\n *ngSwitchCase=\"'stroked'\"\r\n [ngClass]=\"buttonClasses\"\r\n [class]=\"sizeClass\"\r\n [color]=\"matColor\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-busy]=\"loading || null\"\r\n [type]=\"type\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n </button>\r\n <button\r\n mat-raised-button\r\n *ngSwitchCase=\"'raised'\"\r\n [ngClass]=\"buttonClasses\"\r\n [class]=\"sizeClass\"\r\n [color]=\"matColor\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-busy]=\"loading || null\"\r\n [type]=\"type\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n </button>\r\n <button\r\n mat-button\r\n *ngSwitchCase=\"'basic'\"\r\n [color]=\"matColor\"\r\n [ngClass]=\"buttonClasses\"\r\n [class]=\"sizeClass\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-busy]=\"loading || null\"\r\n [type]=\"type\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n </button>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n <ecabs-loading-spinner\r\n size=\"tiny\"\r\n *ngIf=\"loading\"\r\n >\r\n </ecabs-loading-spinner>\r\n <ng-container *ngIf=\"!loading\">\r\n <ng-content select=\"mat-icon\"></ng-content>\r\n </ng-container>\r\n <ng-container *ngIf=\"showLabel\">\r\n <ng-content></ng-content>\r\n </ng-container>\r\n</ng-template>\r\n" }]
|
|
229
231
|
}], propDecorators: { disabled: [{
|
|
230
232
|
type: Input
|
|
231
233
|
}], loading: [{
|
|
232
234
|
type: Input
|
|
235
|
+
}], loadingStyle: [{
|
|
236
|
+
type: Input
|
|
233
237
|
}], size: [{
|
|
234
238
|
type: Input
|
|
235
239
|
}], type: [{
|
|
@@ -240,12 +244,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
240
244
|
type: Input
|
|
241
245
|
}], fullWidth: [{
|
|
242
246
|
type: Input
|
|
247
|
+
}], isDisabled: [{
|
|
248
|
+
type: HostBinding,
|
|
249
|
+
args: ['class.pointer-events-none']
|
|
243
250
|
}], hostWidth: [{
|
|
244
251
|
type: HostBinding,
|
|
245
252
|
args: ['style.width']
|
|
246
|
-
}], classAttr: [{
|
|
247
|
-
type: HostBinding,
|
|
248
|
-
args: ['class']
|
|
249
253
|
}] } });
|
|
250
254
|
|
|
251
255
|
class EcabsButtonsV2Module {
|
|
@@ -8114,7 +8118,7 @@ class EcabsPlaceAutocompleteComponent extends EcabsElementBaseComponent {
|
|
|
8114
8118
|
const autocomplete = new google.maps.places.Autocomplete(this.getElement(), {
|
|
8115
8119
|
types: [],
|
|
8116
8120
|
componentRestrictions: { country: [this.countryCode] },
|
|
8117
|
-
fields: ['address_components', 'geometry.location', 'place_id'],
|
|
8121
|
+
fields: ['address_components', 'geometry.location', 'place_id', 'name'],
|
|
8118
8122
|
});
|
|
8119
8123
|
this.listener = autocomplete.addListener('place_changed', () => {
|
|
8120
8124
|
this.ngZone.run(() => {
|
|
@@ -8366,7 +8370,7 @@ class EcabsPlaceAutocompleteV2Component extends EcabsElementBaseComponent {
|
|
|
8366
8370
|
this.placesService.getDetails({
|
|
8367
8371
|
placeId,
|
|
8368
8372
|
sessionToken: this.sessionToken,
|
|
8369
|
-
fields: ['address_components', 'geometry.location', 'place_id'],
|
|
8373
|
+
fields: ['address_components', 'geometry.location', 'place_id', 'name'],
|
|
8370
8374
|
}, (place, status) => {
|
|
8371
8375
|
this.ngZone.run(() => {
|
|
8372
8376
|
if (status === google.maps.places.PlacesServiceStatus.OK && place) {
|
|
@@ -8456,7 +8460,7 @@ class EcabsPlaceAutocompleteV2Component extends EcabsElementBaseComponent {
|
|
|
8456
8460
|
useExisting: EcabsPlaceAutocompleteV2Component,
|
|
8457
8461
|
multi: true,
|
|
8458
8462
|
},
|
|
8459
|
-
], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomAutocompleteInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"autocomplete-ui w-full\">\r\n <section class=\"form-field__input--wrapper w-full\">\r\n <input #matCustomAutocompleteInput\r\n cdkOverlayOrigin\r\n #trigger=\"cdkOverlayOrigin\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [(ngModel)]=\"value\"\r\n [id]=\"name\"\r\n class=\"form-field__input w-full\"\r\n autocomplete=\"off\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"off\"\r\n (focus)=\"onFocus()\"\r\n (keydown)=\"onKeyDown($event)\"\r\n (ngModelChange)=\"onUserInput($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n <div *ngIf=\"showSuffix\"\r\n class=\"form-field__input--suffix\">\r\n <mat-icon *ngIf=\"showDeleteItem\"\r\n class=\"suffix cursor-pointer delete-button\"\r\n (keydown.enter)=\"delete()\"\r\n (click)=\"delete()\">\r\n delete\r\n </mat-icon>\r\n <mat-icon *ngIf=\"!showDeleteItem && value\"\r\n class=\"suffix cursor-pointer\"\r\n (keydown.enter)=\"clear()\"\r\n (click)=\"clear()\">\r\n close\r\n </mat-icon>\r\n </div>\r\n </section>\r\n <!-- Custom dropdown -->\r\n <ng-template cdkConnectedOverlay\r\n [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\r\n [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n [cdkConnectedOverlayOrigin]=\"trigger\"\r\n [cdkConnectedOverlayOpen]=\"isFocused$ | async\">\r\n <ul class=\"autocomplete-ui__container\">\r\n <li *ngFor=\"let suggestion of waypointSuggestions$ | async; let i = index; trackBy: trackBySuggestion\"\r\n class=\"autocomplete-ui--item flex items-center justify-between hover:bg-gray-100\"\r\n [class.active]=\"i === selectedIndex\"\r\n (mousedown)=\"onSelectSuggestion(suggestion)\">\r\n <ng-container *ngIf=\"!suggestion?.prediction_term; else purePlaceResultTpl\">\r\n <div class=\"w-full truncate\">\r\n {{ suggestion?.additional_info }}\r\n </div>\r\n <mat-icon svgIcon=\"ph-regular:clock-counter\"\r\n class=\"w-5 h-5 text-xl text-gray-400 hover:!text-gray-400\">\r\n </mat-icon>\r\n </ng-container>\r\n\r\n <ng-template #purePlaceResultTpl>\r\n <ul class=\"w-full flex items-center gap-x-1 leading-0 overflow-hidden whitespace-nowrap\">\r\n <li>\r\n {{ suggestion?.prediction_term?.[0]?.value }}\r\n </li>\r\n <li *ngIf=\"suggestion?.prediction_term?.[1]?.value\"\r\n class=\"text-xs text-gray-600 truncate\">\r\n {{ suggestion?.prediction_term?.[1]?.value | separatorAppend: suggestion?.prediction_term?.[2]?.value }}\r\n </li>\r\n <li *ngIf=\"suggestion?.prediction_term?.[2]?.value\"\r\n class=\"text-xs text-gray-600 font-semibold truncate\">\r\n {{ suggestion?.prediction_term?.[2]?.value }}\r\n </li>\r\n </ul>\r\n </ng-template>\r\n </li>\r\n </ul>\r\n </ng-template>\r\n </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400)}mat-form-field{margin-bottom:0!important}.delete-button{color:var(--color-error)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SeparatorAppendPipe, name: "separatorAppend" }] });
|
|
8463
|
+
], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomAutocompleteInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"autocomplete-ui w-full\">\r\n <section class=\"form-field__input--wrapper w-full\">\r\n <input #matCustomAutocompleteInput\r\n cdkOverlayOrigin\r\n #trigger=\"cdkOverlayOrigin\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [(ngModel)]=\"value\"\r\n [id]=\"name\"\r\n class=\"form-field__input w-full\"\r\n autocomplete=\"off\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"off\"\r\n (focus)=\"onFocus()\"\r\n (keydown)=\"onKeyDown($event)\"\r\n (ngModelChange)=\"onUserInput($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n <div *ngIf=\"showSuffix\"\r\n class=\"form-field__input--suffix\">\r\n <mat-icon *ngIf=\"showDeleteItem\"\r\n class=\"suffix cursor-pointer delete-button\"\r\n (keydown.enter)=\"delete()\"\r\n (click)=\"delete()\">\r\n delete\r\n </mat-icon>\r\n <mat-icon *ngIf=\"!showDeleteItem && value\"\r\n class=\"suffix cursor-pointer\"\r\n (keydown.enter)=\"clear()\"\r\n (click)=\"clear()\">\r\n close\r\n </mat-icon>\r\n </div>\r\n </section>\r\n <!-- Custom dropdown -->\r\n <ng-template cdkConnectedOverlay\r\n [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\r\n [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n [cdkConnectedOverlayOrigin]=\"trigger\"\r\n [cdkConnectedOverlayOpen]=\"isFocused$ | async\">\r\n <ul class=\"autocomplete-ui__container\">\r\n <li *ngFor=\"let suggestion of waypointSuggestions$ | async; let i = index; trackBy: trackBySuggestion\"\r\n class=\"autocomplete-ui--item flex items-center justify-between hover:bg-gray-100\"\r\n [class.active]=\"i === selectedIndex\"\r\n (mousedown)=\"onSelectSuggestion(suggestion)\">\r\n <ng-container *ngIf=\"!suggestion?.prediction_term; else purePlaceResultTpl\">\r\n <div class=\"w-full truncate\">\r\n {{ suggestion?.additional_info }}\r\n </div>\r\n <mat-icon svgIcon=\"ph-regular:clock-counter\"\r\n class=\"w-5 h-5 text-xl text-gray-400 hover:!text-gray-400\">\r\n </mat-icon>\r\n </ng-container>\r\n\r\n <ng-template #purePlaceResultTpl>\r\n <ul class=\"w-full flex items-center gap-x-1 leading-0 overflow-hidden whitespace-nowrap\">\r\n <li class=\"leading-none\">\r\n {{ suggestion?.prediction_term?.[0]?.value }}\r\n </li>\r\n <li *ngIf=\"suggestion?.prediction_term?.[1]?.value\"\r\n class=\"text-xs text-gray-600 truncate\">\r\n {{ suggestion?.prediction_term?.[1]?.value | separatorAppend: suggestion?.prediction_term?.[2]?.value }}\r\n </li>\r\n <li *ngIf=\"suggestion?.prediction_term?.[2]?.value\"\r\n class=\"text-xs text-gray-600 font-semibold truncate\">\r\n {{ suggestion?.prediction_term?.[2]?.value }}\r\n </li>\r\n </ul>\r\n </ng-template>\r\n </li>\r\n </ul>\r\n </ng-template>\r\n </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400)}mat-form-field{margin-bottom:0!important}.delete-button{color:var(--color-error)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SeparatorAppendPipe, name: "separatorAppend" }] });
|
|
8460
8464
|
}
|
|
8461
8465
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsPlaceAutocompleteV2Component, decorators: [{
|
|
8462
8466
|
type: Component,
|
|
@@ -8466,7 +8470,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
8466
8470
|
useExisting: EcabsPlaceAutocompleteV2Component,
|
|
8467
8471
|
multi: true,
|
|
8468
8472
|
},
|
|
8469
|
-
], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"autocomplete-ui w-full\">\r\n <section class=\"form-field__input--wrapper w-full\">\r\n <input #matCustomAutocompleteInput\r\n cdkOverlayOrigin\r\n #trigger=\"cdkOverlayOrigin\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [(ngModel)]=\"value\"\r\n [id]=\"name\"\r\n class=\"form-field__input w-full\"\r\n autocomplete=\"off\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"off\"\r\n (focus)=\"onFocus()\"\r\n (keydown)=\"onKeyDown($event)\"\r\n (ngModelChange)=\"onUserInput($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n <div *ngIf=\"showSuffix\"\r\n class=\"form-field__input--suffix\">\r\n <mat-icon *ngIf=\"showDeleteItem\"\r\n class=\"suffix cursor-pointer delete-button\"\r\n (keydown.enter)=\"delete()\"\r\n (click)=\"delete()\">\r\n delete\r\n </mat-icon>\r\n <mat-icon *ngIf=\"!showDeleteItem && value\"\r\n class=\"suffix cursor-pointer\"\r\n (keydown.enter)=\"clear()\"\r\n (click)=\"clear()\">\r\n close\r\n </mat-icon>\r\n </div>\r\n </section>\r\n <!-- Custom dropdown -->\r\n <ng-template cdkConnectedOverlay\r\n [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\r\n [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n [cdkConnectedOverlayOrigin]=\"trigger\"\r\n [cdkConnectedOverlayOpen]=\"isFocused$ | async\">\r\n <ul class=\"autocomplete-ui__container\">\r\n <li *ngFor=\"let suggestion of waypointSuggestions$ | async; let i = index; trackBy: trackBySuggestion\"\r\n class=\"autocomplete-ui--item flex items-center justify-between hover:bg-gray-100\"\r\n [class.active]=\"i === selectedIndex\"\r\n (mousedown)=\"onSelectSuggestion(suggestion)\">\r\n <ng-container *ngIf=\"!suggestion?.prediction_term; else purePlaceResultTpl\">\r\n <div class=\"w-full truncate\">\r\n {{ suggestion?.additional_info }}\r\n </div>\r\n <mat-icon svgIcon=\"ph-regular:clock-counter\"\r\n class=\"w-5 h-5 text-xl text-gray-400 hover:!text-gray-400\">\r\n </mat-icon>\r\n </ng-container>\r\n\r\n <ng-template #purePlaceResultTpl>\r\n <ul class=\"w-full flex items-center gap-x-1 leading-0 overflow-hidden whitespace-nowrap\">\r\n <li>\r\n {{ suggestion?.prediction_term?.[0]?.value }}\r\n </li>\r\n <li *ngIf=\"suggestion?.prediction_term?.[1]?.value\"\r\n class=\"text-xs text-gray-600 truncate\">\r\n {{ suggestion?.prediction_term?.[1]?.value | separatorAppend: suggestion?.prediction_term?.[2]?.value }}\r\n </li>\r\n <li *ngIf=\"suggestion?.prediction_term?.[2]?.value\"\r\n class=\"text-xs text-gray-600 font-semibold truncate\">\r\n {{ suggestion?.prediction_term?.[2]?.value }}\r\n </li>\r\n </ul>\r\n </ng-template>\r\n </li>\r\n </ul>\r\n </ng-template>\r\n </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400)}mat-form-field{margin-bottom:0!important}.delete-button{color:var(--color-error)}\n"] }]
|
|
8473
|
+
], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"autocomplete-ui w-full\">\r\n <section class=\"form-field__input--wrapper w-full\">\r\n <input #matCustomAutocompleteInput\r\n cdkOverlayOrigin\r\n #trigger=\"cdkOverlayOrigin\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [(ngModel)]=\"value\"\r\n [id]=\"name\"\r\n class=\"form-field__input w-full\"\r\n autocomplete=\"off\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"off\"\r\n (focus)=\"onFocus()\"\r\n (keydown)=\"onKeyDown($event)\"\r\n (ngModelChange)=\"onUserInput($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n <div *ngIf=\"showSuffix\"\r\n class=\"form-field__input--suffix\">\r\n <mat-icon *ngIf=\"showDeleteItem\"\r\n class=\"suffix cursor-pointer delete-button\"\r\n (keydown.enter)=\"delete()\"\r\n (click)=\"delete()\">\r\n delete\r\n </mat-icon>\r\n <mat-icon *ngIf=\"!showDeleteItem && value\"\r\n class=\"suffix cursor-pointer\"\r\n (keydown.enter)=\"clear()\"\r\n (click)=\"clear()\">\r\n close\r\n </mat-icon>\r\n </div>\r\n </section>\r\n <!-- Custom dropdown -->\r\n <ng-template cdkConnectedOverlay\r\n [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\r\n [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n [cdkConnectedOverlayOrigin]=\"trigger\"\r\n [cdkConnectedOverlayOpen]=\"isFocused$ | async\">\r\n <ul class=\"autocomplete-ui__container\">\r\n <li *ngFor=\"let suggestion of waypointSuggestions$ | async; let i = index; trackBy: trackBySuggestion\"\r\n class=\"autocomplete-ui--item flex items-center justify-between hover:bg-gray-100\"\r\n [class.active]=\"i === selectedIndex\"\r\n (mousedown)=\"onSelectSuggestion(suggestion)\">\r\n <ng-container *ngIf=\"!suggestion?.prediction_term; else purePlaceResultTpl\">\r\n <div class=\"w-full truncate\">\r\n {{ suggestion?.additional_info }}\r\n </div>\r\n <mat-icon svgIcon=\"ph-regular:clock-counter\"\r\n class=\"w-5 h-5 text-xl text-gray-400 hover:!text-gray-400\">\r\n </mat-icon>\r\n </ng-container>\r\n\r\n <ng-template #purePlaceResultTpl>\r\n <ul class=\"w-full flex items-center gap-x-1 leading-0 overflow-hidden whitespace-nowrap\">\r\n <li class=\"leading-none\">\r\n {{ suggestion?.prediction_term?.[0]?.value }}\r\n </li>\r\n <li *ngIf=\"suggestion?.prediction_term?.[1]?.value\"\r\n class=\"text-xs text-gray-600 truncate\">\r\n {{ suggestion?.prediction_term?.[1]?.value | separatorAppend: suggestion?.prediction_term?.[2]?.value }}\r\n </li>\r\n <li *ngIf=\"suggestion?.prediction_term?.[2]?.value\"\r\n class=\"text-xs text-gray-600 font-semibold truncate\">\r\n {{ suggestion?.prediction_term?.[2]?.value }}\r\n </li>\r\n </ul>\r\n </ng-template>\r\n </li>\r\n </ul>\r\n </ng-template>\r\n </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400)}mat-form-field{margin-bottom:0!important}.delete-button{color:var(--color-error)}\n"] }]
|
|
8470
8474
|
}], ctorParameters: function () { return []; }, propDecorators: { matCustomInput: [{
|
|
8471
8475
|
type: ViewChild,
|
|
8472
8476
|
args: ['matCustomAutocompleteInput', { static: false }]
|