ecabs-components 1.1.90 → 1.1.93

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.
Files changed (58) hide show
  1. package/README.md +19 -0
  2. package/esm2022/lib/base/consts/badge.consts.mjs +2 -0
  3. package/esm2022/lib/base/consts/icon.consts.mjs +2 -0
  4. package/esm2022/lib/base/consts/status-badge.consts.mjs +53 -0
  5. package/esm2022/lib/base/directives/action-menu-trigger.directive.mjs +17 -0
  6. package/esm2022/lib/base/directives/badge.directive.mjs +106 -0
  7. package/esm2022/lib/base/directives/badge.directive.module.mjs +18 -0
  8. package/esm2022/lib/base/directives/tooltip-if-truncated.directive.module.mjs +6 -5
  9. package/esm2022/lib/base/models/action-menu.models.mjs +2 -0
  10. package/esm2022/lib/base/models/select.models.mjs +1 -1
  11. package/esm2022/lib/base/pipes/status-badge-variant.pipe.mjs +17 -0
  12. package/esm2022/lib/base/utils/icon.utils.mjs +4 -0
  13. package/esm2022/lib/base/utils/select.utils.mjs +3 -4
  14. package/esm2022/lib/ecabs-action-menu/ecabs-action-menu.component.mjs +79 -0
  15. package/esm2022/lib/ecabs-action-menu/ecabs-action-menu.module.mjs +37 -0
  16. package/esm2022/lib/ecabs-badge/ecabs-badge.component.mjs +74 -0
  17. package/esm2022/lib/ecabs-badge/ecabs-badge.module.mjs +46 -0
  18. package/esm2022/lib/ecabs-button-toggle/ecabs-button-toggle.component.mjs +2 -2
  19. package/esm2022/lib/ecabs-checkbox-toggle/ecabs-checkbox-toggle.component.mjs +2 -2
  20. package/esm2022/lib/ecabs-checkbox-v2/ecabs-checkbox-v2.component.mjs +2 -2
  21. package/esm2022/lib/ecabs-date-range-picker/ecabs-date-range-picker.component.mjs +2 -2
  22. package/esm2022/lib/ecabs-dialog-message/ecabs-dialog-message.component.mjs +2 -2
  23. package/esm2022/lib/ecabs-increment/ecabs-increment.component.mjs +2 -2
  24. package/esm2022/lib/ecabs-language-selector/ecabs-language-selector.component.mjs +2 -2
  25. package/esm2022/lib/ecabs-multiple-dates-picker/ecabs-multiple-dates-picker.component.mjs +2 -2
  26. package/esm2022/lib/ecabs-note/ecabs-note.component.mjs +2 -2
  27. package/esm2022/lib/ecabs-picker-header/ecabs-picker-header.component.mjs +2 -2
  28. package/esm2022/lib/ecabs-table/ecabs-table-filter-wrapper/ecabs-table-filter-wrapper.component.mjs +2 -2
  29. package/esm2022/public-api.mjs +14 -1
  30. package/fesm2022/ecabs-components.mjs +476 -78
  31. package/fesm2022/ecabs-components.mjs.map +1 -1
  32. package/lib/base/consts/badge.consts.d.ts +5 -0
  33. package/lib/base/consts/icon.consts.d.ts +1 -0
  34. package/lib/base/consts/status-badge.consts.d.ts +3 -0
  35. package/lib/base/directives/action-menu-trigger.directive.d.ts +8 -0
  36. package/lib/base/directives/badge.directive.d.ts +26 -0
  37. package/lib/base/directives/badge.directive.module.d.ts +8 -0
  38. package/lib/base/directives/tooltip-if-truncated.directive.module.d.ts +2 -1
  39. package/lib/base/models/action-menu.models.d.ts +13 -0
  40. package/lib/base/models/select.models.d.ts +1 -1
  41. package/lib/base/pipes/status-badge-variant.pipe.d.ts +8 -0
  42. package/lib/base/utils/icon.utils.d.ts +2 -0
  43. package/lib/ecabs-action-menu/ecabs-action-menu.component.d.ts +26 -0
  44. package/lib/ecabs-action-menu/ecabs-action-menu.module.d.ts +13 -0
  45. package/lib/ecabs-badge/ecabs-badge.component.d.ts +41 -0
  46. package/lib/ecabs-badge/ecabs-badge.module.d.ts +13 -0
  47. package/package.json +1 -1
  48. package/public-api.d.ts +13 -0
  49. package/src/assets/styles/material/overrides/_badge.scss +120 -0
  50. package/src/assets/styles/material/overrides/_menu.scss +50 -2
  51. package/src/assets/styles/material/overrides/index.scss +1 -0
  52. package/src/assets/styles/scss/modules/_badge.scss +128 -0
  53. package/src/assets/styles/scss/modules/_button.scss +1 -0
  54. package/src/assets/styles/scss/modules/_menu.scss +48 -0
  55. package/src/assets/styles/scss/modules/index.scss +2 -0
  56. package/src/assets/styles/scss/utilities/_colors.scss +6 -0
  57. package/src/assets/styles/scss/utilities/_mixins.scss +7 -0
  58. package/src/assets/styles/tailwind/index.scss +1 -1
package/fesm2022/ecabs-components.mjs CHANGED
@@ -4,7 +4,7 @@ import * as i1 from '@angular/common';
4
4
  import { CommonModule, DecimalPipe, getLocaleFirstDayOfWeek, DOCUMENT } from '@angular/common';
5
5
  import * as i2 from '@angular/material/button';
6
6
  import { MatButton, MatButtonModule } from '@angular/material/button';
7
- import * as i2$2 from '@angular/material/icon';
7
+ import * as i4 from '@angular/material/icon';
8
8
  import { MatIconModule } from '@angular/material/icon';
9
9
  import * as i3 from '@angular/forms';
10
10
  import { NG_VALUE_ACCESSOR, Validators, NG_VALIDATORS, NgControl, FormsModule, UntypedFormControl, ReactiveFormsModule, UntypedFormGroup, FormControl } from '@angular/forms';
@@ -18,19 +18,19 @@ import * as i7 from '@angular/material/form-field';
18
18
  import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldControl } from '@angular/material/form-field';
19
19
  import * as i5 from '@angular/cdk/overlay';
20
20
  import { Overlay, CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
21
- import * as i4 from '@angular/material/select';
21
+ import * as i4$1 from '@angular/material/select';
22
22
  import { MAT_SELECT_SCROLL_STRATEGY, MatSelectModule } from '@angular/material/select';
23
23
  import * as i6$1 from '@angular/material/input';
24
24
  import { MatInputModule } from '@angular/material/input';
25
25
  import * as i9 from 'ngx-mat-select-search';
26
26
  import { MatSelectSearchComponent, NgxMatSelectSearchModule } from 'ngx-mat-select-search';
27
- import * as i4$1 from '@angular/material/core';
27
+ import * as i4$2 from '@angular/material/core';
28
28
  import { mixinErrorState, ErrorStateMatcher, NativeDateAdapter } from '@angular/material/core';
29
- import * as i4$3 from '@ng-select/ng-select';
29
+ import * as i4$4 from '@ng-select/ng-select';
30
30
  import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select';
31
31
  import * as i3$1 from '@angular/material/checkbox';
32
32
  import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
33
- import * as i4$2 from '@angular/material/slide-toggle';
33
+ import * as i4$3 from '@angular/material/slide-toggle';
34
34
  import { MatSlideToggle, MatSlideToggleModule } from '@angular/material/slide-toggle';
35
35
  import { format, isValid, isEqual, parse, setSeconds, setMinutes, setHours, isSameMinute } from 'date-fns';
36
36
  import Holidays from 'date-holidays';
@@ -41,34 +41,34 @@ import { Maskito } from '@maskito/core';
41
41
  import { parsePhoneNumber, getExampleNumber, parsePhoneNumberFromString, AsYouType, getCountries, getCountryCallingCode } from 'libphonenumber-js';
42
42
  import { coerceBooleanProperty } from '@angular/cdk/coercion';
43
43
  import * as i7$1 from '@angular/material/menu';
44
- import { MatMenu, MatMenuModule } from '@angular/material/menu';
45
- import * as i2$3 from '@angular/cdk/a11y';
46
- import * as i9$1 from '@angular/material/divider';
44
+ import { MatMenu, MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
45
+ import * as i2$2 from '@angular/cdk/a11y';
46
+ import * as i3$2 from '@angular/material/divider';
47
47
  import { MatDividerModule } from '@angular/material/divider';
48
- import * as i4$4 from '@angular/router';
48
+ import * as i4$5 from '@angular/router';
49
49
  import { RouterModule, NavigationStart, RouterLink, RouterLinkActive } from '@angular/router';
50
- import * as i3$2 from '@angular/material/radio';
50
+ import * as i3$3 from '@angular/material/radio';
51
51
  import { MatRadioGroup, MatRadioModule } from '@angular/material/radio';
52
- import * as i3$3 from '@angular/material/expansion';
52
+ import * as i3$4 from '@angular/material/expansion';
53
53
  import { MatExpansionPanel, MatExpansionModule } from '@angular/material/expansion';
54
- import * as i2$4 from '@angular/material/chips';
54
+ import * as i2$3 from '@angular/material/chips';
55
55
  import { MatChipsModule } from '@angular/material/chips';
56
56
  import { MatTable, MatTableModule } from '@angular/material/table';
57
- import * as i2$5 from '@angular/material/progress-bar';
57
+ import * as i2$4 from '@angular/material/progress-bar';
58
58
  import { MatProgressBarModule } from '@angular/material/progress-bar';
59
59
  import * as i1$2 from '@angular/material/dialog';
60
60
  import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
61
61
  import * as i1$3 from '@angular/material/paginator';
62
62
  import { map as map$1, switchMap, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs/operators';
63
- import * as i3$4 from '@angular-slider/ngx-slider';
63
+ import * as i3$5 from '@angular-slider/ngx-slider';
64
64
  import { NgxSliderModule } from '@angular-slider/ngx-slider';
65
- import * as i3$5 from '@angular/platform-browser';
65
+ import * as i3$6 from '@angular/platform-browser';
66
66
  import { MatSidenavModule } from '@angular/material/sidenav';
67
67
  import { Platform } from '@angular/cdk/platform';
68
68
  import { isEqual as isEqual$1 } from 'lodash';
69
- import * as i4$5 from '@angular/material/autocomplete';
69
+ import * as i4$6 from '@angular/material/autocomplete';
70
70
  import { MatAutocompleteModule } from '@angular/material/autocomplete';
71
- import * as i2$6 from '@angular/material/card';
71
+ import * as i2$5 from '@angular/material/card';
72
72
  import { MatCardModule } from '@angular/material/card';
73
73
  import { MatListModule } from '@angular/material/list';
74
74
 
@@ -309,7 +309,7 @@ class EcabsButtonToggleComponent {
309
309
  useExisting: forwardRef(() => EcabsButtonToggleComponent),
310
310
  multi: true,
311
311
  },
312
- ], ngImport: i0, template: "<mat-button-toggle-group\r\n class=\"ecabs-button-toggle\"\r\n [ngClass]=\"'ecabs-button-toggle--' + size\"\r\n [multiple]=\"multiple\"\r\n [value]=\"value\" \r\n [disabled]=\"isDisabled\"\r\n (change)=\"onGroupChange($event)\"\r\n> \r\n <mat-button-toggle\r\n *ngFor=\"let option of options; trackBy: trackByOptionValue\"\r\n [value]=\"option.value\"\r\n [disabled]=\"option.disabled\">\r\n {{ option.label }}\r\n </mat-button-toggle>\r\n</mat-button-toggle-group>", 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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.ecabs-button-toggle{border-radius:.5rem;box-shadow:none;border:none;background-color:var(--color-gray-100);padding:6px;display:inline-flex;align-items:center}.ecabs-button-toggle.mat-button-toggle-group-appearance-standard{border:none}.ecabs-button-toggle .mat-button-toggle{border:none!important;background:transparent;color:var(--color-gray-500);border-radius:.5rem;transition:background-color .2s ease,color .2s ease}.ecabs-button-toggle .mat-button-toggle:hover{background-color:var(--color-gray-100)}.ecabs-button-toggle .mat-button-toggle+.mat-button-toggle{border-left:none}.ecabs-button-toggle .mat-button-toggle-checked{color:var(--color-gray-900)}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-button{background-color:var(--color-white);border-color:var(--color-gray-200);box-shadow:0 1px 2px #0000000f}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-label-content{color:var(--color-gray-900)}.ecabs-button-toggle .mat-button-toggle-disabled{color:var(--color-gray-400)}.ecabs-button-toggle .mat-button-toggle-disabled .mat-button-toggle-button{cursor:not-allowed;opacity:.6}.ecabs-button-toggle .mat-button-toggle-button{border-radius:.5rem;border:1px solid transparent;display:flex;align-items:center;justify-content:center}.ecabs-button-toggle .mat-button-toggle-label-content{font-weight:500;font-family:inherit;line-height:1;display:inline-flex;align-items:center;justify-content:center}.ecabs-button-toggle--small .mat-button-toggle{height:32px}.ecabs-button-toggle--small .mat-button-toggle .mat-button-toggle-button{height:32px;min-width:72px}.ecabs-button-toggle--small .mat-button-toggle .mat-button-toggle-label-content{font-size:13px;padding:0 12px}.ecabs-button-toggle--medium .mat-button-toggle{height:40px}.ecabs-button-toggle--medium .mat-button-toggle .mat-button-toggle-button{height:40px;min-width:120px}.ecabs-button-toggle--medium .mat-button-toggle .mat-button-toggle-label-content{font-size:14px;padding:0 20px}.ecabs-button-toggle--large .mat-button-toggle{height:48px}.ecabs-button-toggle--large .mat-button-toggle .mat-button-toggle-button{height:48px;min-width:168px}.ecabs-button-toggle--large .mat-button-toggle .mat-button-toggle-label-content{font-size:16px;padding:0 28px}\n"], dependencies: [{ 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: i2$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
312
+ ], ngImport: i0, template: "<mat-button-toggle-group\r\n class=\"ecabs-button-toggle\"\r\n [ngClass]=\"'ecabs-button-toggle--' + size\"\r\n [multiple]=\"multiple\"\r\n [value]=\"value\" \r\n [disabled]=\"isDisabled\"\r\n (change)=\"onGroupChange($event)\"\r\n> \r\n <mat-button-toggle\r\n *ngFor=\"let option of options; trackBy: trackByOptionValue\"\r\n [value]=\"option.value\"\r\n [disabled]=\"option.disabled\">\r\n {{ option.label }}\r\n </mat-button-toggle>\r\n</mat-button-toggle-group>", 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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-border: #FFCDC6;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-info-border: #D1D8F7;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-warning-border: #FBE5B6;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-border: #CEEAD5;--color-success-rgb: 7, 81, 69;--color-default-border: #D5E1ED;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.ecabs-button-toggle{border-radius:.5rem;box-shadow:none;border:none;background-color:var(--color-gray-100);padding:6px;display:inline-flex;align-items:center}.ecabs-button-toggle.mat-button-toggle-group-appearance-standard{border:none}.ecabs-button-toggle .mat-button-toggle{border:none!important;background:transparent;color:var(--color-gray-500);border-radius:.5rem;transition:background-color .2s ease,color .2s ease}.ecabs-button-toggle .mat-button-toggle:hover{background-color:var(--color-gray-100)}.ecabs-button-toggle .mat-button-toggle+.mat-button-toggle{border-left:none}.ecabs-button-toggle .mat-button-toggle-checked{color:var(--color-gray-900)}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-button{background-color:var(--color-white);border-color:var(--color-gray-200);box-shadow:0 1px 2px #0000000f}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-label-content{color:var(--color-gray-900)}.ecabs-button-toggle .mat-button-toggle-disabled{color:var(--color-gray-400)}.ecabs-button-toggle .mat-button-toggle-disabled .mat-button-toggle-button{cursor:not-allowed;opacity:.6}.ecabs-button-toggle .mat-button-toggle-button{border-radius:.5rem;border:1px solid transparent;display:flex;align-items:center;justify-content:center}.ecabs-button-toggle .mat-button-toggle-label-content{font-weight:500;font-family:inherit;line-height:1;display:inline-flex;align-items:center;justify-content:center}.ecabs-button-toggle--small .mat-button-toggle{height:32px}.ecabs-button-toggle--small .mat-button-toggle .mat-button-toggle-button{height:32px;min-width:72px}.ecabs-button-toggle--small .mat-button-toggle .mat-button-toggle-label-content{font-size:13px;padding:0 12px}.ecabs-button-toggle--medium .mat-button-toggle{height:40px}.ecabs-button-toggle--medium .mat-button-toggle .mat-button-toggle-button{height:40px;min-width:120px}.ecabs-button-toggle--medium .mat-button-toggle .mat-button-toggle-label-content{font-size:14px;padding:0 20px}.ecabs-button-toggle--large .mat-button-toggle{height:48px}.ecabs-button-toggle--large .mat-button-toggle .mat-button-toggle-button{height:48px;min-width:168px}.ecabs-button-toggle--large .mat-button-toggle .mat-button-toggle-label-content{font-size:16px;padding:0 28px}\n"], dependencies: [{ 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: i2$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
313
313
  }
314
314
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsButtonToggleComponent, decorators: [{
315
315
  type: Component,
@@ -319,7 +319,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
319
319
  useExisting: forwardRef(() => EcabsButtonToggleComponent),
320
320
  multi: true,
321
321
  },
322
- ], template: "<mat-button-toggle-group\r\n class=\"ecabs-button-toggle\"\r\n [ngClass]=\"'ecabs-button-toggle--' + size\"\r\n [multiple]=\"multiple\"\r\n [value]=\"value\" \r\n [disabled]=\"isDisabled\"\r\n (change)=\"onGroupChange($event)\"\r\n> \r\n <mat-button-toggle\r\n *ngFor=\"let option of options; trackBy: trackByOptionValue\"\r\n [value]=\"option.value\"\r\n [disabled]=\"option.disabled\">\r\n {{ option.label }}\r\n </mat-button-toggle>\r\n</mat-button-toggle-group>", 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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.ecabs-button-toggle{border-radius:.5rem;box-shadow:none;border:none;background-color:var(--color-gray-100);padding:6px;display:inline-flex;align-items:center}.ecabs-button-toggle.mat-button-toggle-group-appearance-standard{border:none}.ecabs-button-toggle .mat-button-toggle{border:none!important;background:transparent;color:var(--color-gray-500);border-radius:.5rem;transition:background-color .2s ease,color .2s ease}.ecabs-button-toggle .mat-button-toggle:hover{background-color:var(--color-gray-100)}.ecabs-button-toggle .mat-button-toggle+.mat-button-toggle{border-left:none}.ecabs-button-toggle .mat-button-toggle-checked{color:var(--color-gray-900)}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-button{background-color:var(--color-white);border-color:var(--color-gray-200);box-shadow:0 1px 2px #0000000f}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-label-content{color:var(--color-gray-900)}.ecabs-button-toggle .mat-button-toggle-disabled{color:var(--color-gray-400)}.ecabs-button-toggle .mat-button-toggle-disabled .mat-button-toggle-button{cursor:not-allowed;opacity:.6}.ecabs-button-toggle .mat-button-toggle-button{border-radius:.5rem;border:1px solid transparent;display:flex;align-items:center;justify-content:center}.ecabs-button-toggle .mat-button-toggle-label-content{font-weight:500;font-family:inherit;line-height:1;display:inline-flex;align-items:center;justify-content:center}.ecabs-button-toggle--small .mat-button-toggle{height:32px}.ecabs-button-toggle--small .mat-button-toggle .mat-button-toggle-button{height:32px;min-width:72px}.ecabs-button-toggle--small .mat-button-toggle .mat-button-toggle-label-content{font-size:13px;padding:0 12px}.ecabs-button-toggle--medium .mat-button-toggle{height:40px}.ecabs-button-toggle--medium .mat-button-toggle .mat-button-toggle-button{height:40px;min-width:120px}.ecabs-button-toggle--medium .mat-button-toggle .mat-button-toggle-label-content{font-size:14px;padding:0 20px}.ecabs-button-toggle--large .mat-button-toggle{height:48px}.ecabs-button-toggle--large .mat-button-toggle .mat-button-toggle-button{height:48px;min-width:168px}.ecabs-button-toggle--large .mat-button-toggle .mat-button-toggle-label-content{font-size:16px;padding:0 28px}\n"] }]
322
+ ], template: "<mat-button-toggle-group\r\n class=\"ecabs-button-toggle\"\r\n [ngClass]=\"'ecabs-button-toggle--' + size\"\r\n [multiple]=\"multiple\"\r\n [value]=\"value\" \r\n [disabled]=\"isDisabled\"\r\n (change)=\"onGroupChange($event)\"\r\n> \r\n <mat-button-toggle\r\n *ngFor=\"let option of options; trackBy: trackByOptionValue\"\r\n [value]=\"option.value\"\r\n [disabled]=\"option.disabled\">\r\n {{ option.label }}\r\n </mat-button-toggle>\r\n</mat-button-toggle-group>", 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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-border: #FFCDC6;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-info-border: #D1D8F7;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-warning-border: #FBE5B6;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-border: #CEEAD5;--color-success-rgb: 7, 81, 69;--color-default-border: #D5E1ED;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.ecabs-button-toggle{border-radius:.5rem;box-shadow:none;border:none;background-color:var(--color-gray-100);padding:6px;display:inline-flex;align-items:center}.ecabs-button-toggle.mat-button-toggle-group-appearance-standard{border:none}.ecabs-button-toggle .mat-button-toggle{border:none!important;background:transparent;color:var(--color-gray-500);border-radius:.5rem;transition:background-color .2s ease,color .2s ease}.ecabs-button-toggle .mat-button-toggle:hover{background-color:var(--color-gray-100)}.ecabs-button-toggle .mat-button-toggle+.mat-button-toggle{border-left:none}.ecabs-button-toggle .mat-button-toggle-checked{color:var(--color-gray-900)}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-button{background-color:var(--color-white);border-color:var(--color-gray-200);box-shadow:0 1px 2px #0000000f}.ecabs-button-toggle .mat-button-toggle-checked .mat-button-toggle-label-content{color:var(--color-gray-900)}.ecabs-button-toggle .mat-button-toggle-disabled{color:var(--color-gray-400)}.ecabs-button-toggle .mat-button-toggle-disabled .mat-button-toggle-button{cursor:not-allowed;opacity:.6}.ecabs-button-toggle .mat-button-toggle-button{border-radius:.5rem;border:1px solid transparent;display:flex;align-items:center;justify-content:center}.ecabs-button-toggle .mat-button-toggle-label-content{font-weight:500;font-family:inherit;line-height:1;display:inline-flex;align-items:center;justify-content:center}.ecabs-button-toggle--small .mat-button-toggle{height:32px}.ecabs-button-toggle--small .mat-button-toggle .mat-button-toggle-button{height:32px;min-width:72px}.ecabs-button-toggle--small .mat-button-toggle .mat-button-toggle-label-content{font-size:13px;padding:0 12px}.ecabs-button-toggle--medium .mat-button-toggle{height:40px}.ecabs-button-toggle--medium .mat-button-toggle .mat-button-toggle-button{height:40px;min-width:120px}.ecabs-button-toggle--medium .mat-button-toggle .mat-button-toggle-label-content{font-size:14px;padding:0 20px}.ecabs-button-toggle--large .mat-button-toggle{height:48px}.ecabs-button-toggle--large .mat-button-toggle .mat-button-toggle-button{height:48px;min-width:168px}.ecabs-button-toggle--large .mat-button-toggle .mat-button-toggle-label-content{font-size:16px;padding:0 28px}\n"] }]
323
323
  }], propDecorators: { options: [{
324
324
  type: Input
325
325
  }], multiple: [{
@@ -809,7 +809,7 @@ class EcabsElementWrapperComponent {
809
809
  this.decrease.emit();
810
810
  }
811
811
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsElementWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
812
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: { data: "data", showCloseIcon: "showCloseIcon", focusedFlag: "focusedFlag", showPassword: "showPassword", control: "control" }, outputs: { showHidePassword: "showHidePassword", clear: "clear", increase: "increase", decrease: "decrease" }, ngImport: i0, template: "<div\r\n class=\"form-field\"\r\n [ngClass]=\"{\r\n 'form-field--invalid':\r\n data?.showValidation && (data?.control?.touched || data?.showValidationOnNotTouched) && data?.control?.invalid,\r\n disabled: data?.disabled,\r\n 'form-field--required': data?.required && data?.showAsterisk\r\n }\"\r\n>\r\n <div class=\"flex\">\r\n <label *ngIf=\"data?.label && data?.showLabel\"\r\n class=\"form-field__label\"\r\n [attr.for]=\"data?.name || data?.label\">\r\n <span [innerHTML]=\"data?.label\"></span>\r\n </label>\r\n <mat-icon class=\"icon ml-4 mat-icon-input-tooltip\" matTooltipClass=\"break-line-tooltip\" *ngIf=\"data?.tooltip\"\r\n [matTooltip]=\"data?.tooltip\">error_outline\r\n </mat-icon>\r\n </div>\r\n\r\n <div class=\"form-field__label-note\" *ngIf=\"data?.labelNote\" [innerHTML]=\"data?.labelNote\"></div>\r\n\r\n <ng-content></ng-content>\r\n\r\n <ecabs-loading-spinner *ngIf=\"data?.showLocalLoading && data?.loading\"\r\n class=\"spinner\" size=\"tiny\"></ecabs-loading-spinner>\r\n\r\n <ecabs-hint [element]=\"data?.control\" [showHint]=\"data?.showHint\" [maxValue]=\"data?.maxLength\"></ecabs-hint>\r\n\r\n <ecabs-validations-messages\r\n *ngIf=\"data?.showValidation && !data?.hideValidationMessage\"\r\n [element]=\"data?.control\"\r\n [label]=\"data?.label ? data?.label : data?.placeholder ? data.placeholder : data?.validationLabel\"\r\n [showValidationOnNotTouched]=\"data?.showValidationOnNotTouched\"\r\n >\r\n </ecabs-validations-messages>\r\n</div>\r\n", styles: [":host ::ng-deep .break-line-tooltip{white-space:pre-line}:host ::ng-deep .mat-icon-input-tooltip{font-size:18px;height:18px;width:18px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }, { kind: "component", type: ValidationComponent, selector: "ecabs-validations-messages", inputs: ["element", "label", "showValidationOnNotTouched", "updatedErrors"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: EcabsHintComponent, selector: "ecabs-hint", inputs: ["element", "maxValue", "showHint"] }] });
812
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: { data: "data", showCloseIcon: "showCloseIcon", focusedFlag: "focusedFlag", showPassword: "showPassword", control: "control" }, outputs: { showHidePassword: "showHidePassword", clear: "clear", increase: "increase", decrease: "decrease" }, ngImport: i0, template: "<div\r\n class=\"form-field\"\r\n [ngClass]=\"{\r\n 'form-field--invalid':\r\n data?.showValidation && (data?.control?.touched || data?.showValidationOnNotTouched) && data?.control?.invalid,\r\n disabled: data?.disabled,\r\n 'form-field--required': data?.required && data?.showAsterisk\r\n }\"\r\n>\r\n <div class=\"flex\">\r\n <label *ngIf=\"data?.label && data?.showLabel\"\r\n class=\"form-field__label\"\r\n [attr.for]=\"data?.name || data?.label\">\r\n <span [innerHTML]=\"data?.label\"></span>\r\n </label>\r\n <mat-icon class=\"icon ml-4 mat-icon-input-tooltip\" matTooltipClass=\"break-line-tooltip\" *ngIf=\"data?.tooltip\"\r\n [matTooltip]=\"data?.tooltip\">error_outline\r\n </mat-icon>\r\n </div>\r\n\r\n <div class=\"form-field__label-note\" *ngIf=\"data?.labelNote\" [innerHTML]=\"data?.labelNote\"></div>\r\n\r\n <ng-content></ng-content>\r\n\r\n <ecabs-loading-spinner *ngIf=\"data?.showLocalLoading && data?.loading\"\r\n class=\"spinner\" size=\"tiny\"></ecabs-loading-spinner>\r\n\r\n <ecabs-hint [element]=\"data?.control\" [showHint]=\"data?.showHint\" [maxValue]=\"data?.maxLength\"></ecabs-hint>\r\n\r\n <ecabs-validations-messages\r\n *ngIf=\"data?.showValidation && !data?.hideValidationMessage\"\r\n [element]=\"data?.control\"\r\n [label]=\"data?.label ? data?.label : data?.placeholder ? data.placeholder : data?.validationLabel\"\r\n [showValidationOnNotTouched]=\"data?.showValidationOnNotTouched\"\r\n >\r\n </ecabs-validations-messages>\r\n</div>\r\n", styles: [":host ::ng-deep .break-line-tooltip{white-space:pre-line}:host ::ng-deep .mat-icon-input-tooltip{font-size:18px;height:18px;width:18px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }, { kind: "component", type: ValidationComponent, selector: "ecabs-validations-messages", inputs: ["element", "label", "showValidationOnNotTouched", "updatedErrors"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: EcabsHintComponent, selector: "ecabs-hint", inputs: ["element", "maxValue", "showHint"] }] });
813
813
  }
814
814
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsElementWrapperComponent, decorators: [{
815
815
  type: Component,
@@ -1673,10 +1673,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
1673
1673
  }]
1674
1674
  }] });
1675
1675
 
1676
+ function buildPhosphorSvgIcon(name, weight) {
1677
+ return name ? `ph-${weight ?? 'regular'}:${name}` : '';
1678
+ }
1679
+
1676
1680
  function getPhosphorSvgIcon(option) {
1677
- return option?.phosphorIcon
1678
- ? `ph-${option.phosphorWeight ?? 'regular'}:${option.phosphorIcon}`
1679
- : '';
1681
+ return buildPhosphorSvgIcon(option?.phosphorIcon, option?.phosphorWeight);
1680
1682
  }
1681
1683
 
1682
1684
  class EcabsSelectIconComponent {
@@ -1685,7 +1687,7 @@ class EcabsSelectIconComponent {
1685
1687
  this.svgIcon = getPhosphorSvgIcon(option);
1686
1688
  }
1687
1689
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSelectIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1688
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsSelectIconComponent, selector: "ecabs-select-icon", inputs: { option: "option" }, ngImport: i0, template: "<mat-icon *ngIf=\"svgIcon\"\r\n [svgIcon]=\"svgIcon\"\r\n class=\"!w-5 !h-5 !text-xl !leading-5 translate-y-1 mr-2\"></mat-icon>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
1690
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsSelectIconComponent, selector: "ecabs-select-icon", inputs: { option: "option" }, ngImport: i0, template: "<mat-icon *ngIf=\"svgIcon\"\r\n [svgIcon]=\"svgIcon\"\r\n class=\"!w-5 !h-5 !text-xl !leading-5 translate-y-1 mr-2\"></mat-icon>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
1689
1691
  }
1690
1692
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSelectIconComponent, decorators: [{
1691
1693
  type: Component,
@@ -1739,15 +1741,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
1739
1741
 
1740
1742
  class EcabsTooltipIfTruncatedDirectiveModule {
1741
1743
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTooltipIfTruncatedDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1742
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsTooltipIfTruncatedDirectiveModule, declarations: [EcabsTooltipIfTruncatedDirective], imports: [CommonModule], exports: [EcabsTooltipIfTruncatedDirective] });
1743
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTooltipIfTruncatedDirectiveModule, imports: [CommonModule] });
1744
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsTooltipIfTruncatedDirectiveModule, declarations: [EcabsTooltipIfTruncatedDirective], imports: [CommonModule, MatTooltipModule], exports: [EcabsTooltipIfTruncatedDirective, MatTooltipModule] });
1745
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTooltipIfTruncatedDirectiveModule, imports: [CommonModule, MatTooltipModule, MatTooltipModule] });
1744
1746
  }
1745
1747
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTooltipIfTruncatedDirectiveModule, decorators: [{
1746
1748
  type: NgModule,
1747
1749
  args: [{
1748
- imports: [CommonModule],
1750
+ imports: [CommonModule, MatTooltipModule],
1749
1751
  declarations: [EcabsTooltipIfTruncatedDirective],
1750
- exports: [EcabsTooltipIfTruncatedDirective],
1752
+ exports: [EcabsTooltipIfTruncatedDirective, MatTooltipModule],
1751
1753
  }]
1752
1754
  }] });
1753
1755
 
@@ -2053,7 +2055,7 @@ class EcabsSelectComponent extends EcabsElementBaseComponent {
2053
2055
  useExisting: EcabsSelectComponent,
2054
2056
  multi: true,
2055
2057
  },
2056
- ], viewQueries: [{ propertyName: "allSelected", first: true, predicate: ["allSelected"], descendants: true }, { propertyName: "matSelectSearchComponent", first: true, predicate: MatSelectSearchComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <mat-form-field [ngClass]=\"{ disabled: useOnlyDisabledClass }\">\r\n <mat-select class=\"form-field__select\"\r\n [(ngModel)]=\"value\"\r\n (closed)=\"onTouch()\"\r\n [id]=\"name\"\r\n [multiple]=\"multiple\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"placeholder\"\r\n [disableRipple]=\"true\"\r\n (selectionChange)=\"onSelectionChanged($event)\"\r\n [matTooltip]=\"trigger\"\r\n ecabsTooltipIfTruncated\r\n [classNameTruncatedTooltip]=\"'mat-select-value'\">\r\n <mat-select-trigger>\r\n <ecabs-select-icon [option]=\"triggerOption\"></ecabs-select-icon>\r\n <span>{{ trigger }}</span>\r\n </mat-select-trigger>\r\n\r\n <mat-option *ngIf=\"useSearchOption\">\r\n <ngx-mat-select-search [formControl]=\"itemFilterCtrl\"\r\n [placeholderLabel]=\"searchFieldPlaceholder\"\r\n [noEntriesFoundLabel]=\"noEntriesFoundLabel\">\r\n </ngx-mat-select-search>\r\n </mat-option>\r\n\r\n <mat-option *ngIf=\"useNoneOption\"\r\n (click)=\"toggleNone()\"\r\n (keydown.enter)=\"toggleNone()\">\r\n {{ noneLabel }}\r\n </mat-option>\r\n\r\n <mat-option #allSelected\r\n *ngIf=\"useSelectAllOption && showFilteredAllOption\"\r\n (click)=\"toggleAllSelection()\"\r\n (keydown.enter)=\"toggleAllSelection()\"\r\n [value]=\"selectAllValue\">\r\n {{ allLabel }}\r\n </mat-option>\r\n\r\n <mat-option *ngFor=\"let item of filteredItems$ | async\"\r\n [value]=\"item.value\"\r\n (click)=\"togglePerOne()\"\r\n (keydown.enter)=\"togglePerOne()\"\r\n [matTooltip]=\"item.label\"\r\n ecabsTooltipIfTruncated\r\n [classNameTruncatedTooltip]=\"'mdc-list-item__primary-text'\">\r\n \r\n <ecabs-select-icon [option]=\"item\"></ecabs-select-icon>\r\n {{ item.label }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n</ecabs-element-wrapper>\r\n", dependencies: [{ 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: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: EcabsSelectIconComponent, selector: "ecabs-select-icon", inputs: ["option"] }, { 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: i9.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: EcabsTooltipIfTruncatedDirective, selector: "[matTooltip][ecabsTooltipIfTruncated]", inputs: ["classNameTruncatedTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
2058
+ ], viewQueries: [{ propertyName: "allSelected", first: true, predicate: ["allSelected"], descendants: true }, { propertyName: "matSelectSearchComponent", first: true, predicate: MatSelectSearchComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <mat-form-field [ngClass]=\"{ disabled: useOnlyDisabledClass }\">\r\n <mat-select class=\"form-field__select\"\r\n [(ngModel)]=\"value\"\r\n (closed)=\"onTouch()\"\r\n [id]=\"name\"\r\n [multiple]=\"multiple\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"placeholder\"\r\n [disableRipple]=\"true\"\r\n (selectionChange)=\"onSelectionChanged($event)\"\r\n [matTooltip]=\"trigger\"\r\n ecabsTooltipIfTruncated\r\n [classNameTruncatedTooltip]=\"'mat-select-value'\">\r\n <mat-select-trigger>\r\n <ecabs-select-icon [option]=\"triggerOption\"></ecabs-select-icon>\r\n <span>{{ trigger }}</span>\r\n </mat-select-trigger>\r\n\r\n <mat-option *ngIf=\"useSearchOption\">\r\n <ngx-mat-select-search [formControl]=\"itemFilterCtrl\"\r\n [placeholderLabel]=\"searchFieldPlaceholder\"\r\n [noEntriesFoundLabel]=\"noEntriesFoundLabel\">\r\n </ngx-mat-select-search>\r\n </mat-option>\r\n\r\n <mat-option *ngIf=\"useNoneOption\"\r\n (click)=\"toggleNone()\"\r\n (keydown.enter)=\"toggleNone()\">\r\n {{ noneLabel }}\r\n </mat-option>\r\n\r\n <mat-option #allSelected\r\n *ngIf=\"useSelectAllOption && showFilteredAllOption\"\r\n (click)=\"toggleAllSelection()\"\r\n (keydown.enter)=\"toggleAllSelection()\"\r\n [value]=\"selectAllValue\">\r\n {{ allLabel }}\r\n </mat-option>\r\n\r\n <mat-option *ngFor=\"let item of filteredItems$ | async\"\r\n [value]=\"item.value\"\r\n (click)=\"togglePerOne()\"\r\n (keydown.enter)=\"togglePerOne()\"\r\n [matTooltip]=\"item.label\"\r\n ecabsTooltipIfTruncated\r\n [classNameTruncatedTooltip]=\"'mdc-list-item__primary-text'\">\r\n \r\n <ecabs-select-icon [option]=\"item\"></ecabs-select-icon>\r\n {{ item.label }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n</ecabs-element-wrapper>\r\n", dependencies: [{ 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: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: EcabsSelectIconComponent, selector: "ecabs-select-icon", inputs: ["option"] }, { 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: i9.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: EcabsTooltipIfTruncatedDirective, selector: "[matTooltip][ecabsTooltipIfTruncated]", inputs: ["classNameTruncatedTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
2057
2059
  }
2058
2060
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSelectComponent, decorators: [{
2059
2061
  type: Component,
@@ -2238,7 +2240,7 @@ class EcabsCheckboxToggleComponent extends EcabsElementBaseComponent {
2238
2240
  useExisting: EcabsCheckboxToggleComponent,
2239
2241
  multi: true,
2240
2242
  },
2241
- ], viewQueries: [{ propertyName: "matCheckbox", first: true, predicate: MatCheckbox, descendants: true }, { propertyName: "matSlideToggle", first: true, predicate: MatSlideToggle, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <ng-container [ngSwitch]=\"type\">\r\n <mat-checkbox\r\n (change)=\"change($event)\"\r\n (click)=\"onClick($event)\"\r\n (blur)=\"onBlur()\"\r\n [checked]=\"checked\"\r\n [indeterminate]=\"indeterminate\"\r\n [disabled]=\"disabled\"\r\n [(ngModel)]=\"value\"\r\n [id]=\"name\"\r\n [labelPosition]=\"labelPosition\"\r\n [ngClass]=\"{ 'indeterminate': indeterminate }\"\r\n *ngSwitchCase=\"'checkbox'\"\r\n >\r\n {{ text }}\r\n </mat-checkbox>\r\n\r\n <mat-slide-toggle\r\n (change)=\"change($event)\"\r\n [disabled]=\"disabled\"\r\n [(ngModel)]=\"value\"\r\n [labelPosition]=\"labelPosition\"\r\n *ngSwitchCase=\"'toggle'\"\r\n >{{ text }}</mat-slide-toggle\r\n >\r\n </ng-container>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.form-field__subscript--wrapper,form-field__subscript--wrapper,.form-field--required .form-field__label:after,form-field--required .form-field__label:after{position:absolute;content:\"\"}.form-field--required .form-field__label:after,form-field--required .form-field__label:after{content:\"*\"!important;margin-left:.2rem;margin-top:2px;color:var(--color-error)}.form-field,form-field{margin-bottom:1rem;position:relative}.form-field__label,form-field__label{font-size:12px;font-size:.75rem;display:inline-block;margin-bottom:.25rem;color:var(--color-gray-500);cursor:pointer}.form-field__label .icon,form-field__label .icon{font-size:16px;font-size:1rem;display:inline;vertical-align:middle;margin-left:.375rem}.form-field__label-note,form-field__label-note{font-size:14px;font-size:.875rem;display:inline-block;margin-bottom:.25rem;color:var(--color-gray-400);cursor:pointer}.form-field__input,form-field__input{font-size:16px;font-size:1rem;display:block;width:100%;padding:.5rem 1rem;border-radius:6px;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}.form-field__input:focus,form-field__input:focus{border-color:var(--color-brand-dark)}.form-field__input:focus-visible,form-field__input:focus-visible{outline:none}.form-field__input--wrapper,form-field__input--wrapper{display:flex;position:relative;line-height:1}.form-field__input--wrapper--fluid,form-field__input--wrapper--fluid{width:-moz-fit-content;width:fit-content;max-width:100%;margin-left:auto;align-items:stretch;overflow:hidden;border:1px solid var(--color-gray-300);border-radius:6px;background-color:var(--color-white, #fff)}.form-field__input--wrapper--fluid:focus-within,form-field__input--wrapper--fluid:focus-within{border-color:var(--color-brand-dark)}.form-field__input--wrapper--fluid .form-field__input,form-field__input--wrapper--fluid .form-field__input{width:auto;min-width:0;flex:0 0 auto;box-sizing:border-box;border:0;border-radius:0;padding-right:0;text-align:right;background-color:transparent}.form-field__input--wrapper--fluid .form-field__input:focus,form-field__input--wrapper--fluid .form-field__input:focus{border-color:transparent}.form-field__input--wrapper--fluid .form-field__input--suffix,.form-field__input--wrapper--fluid .form-field__textarea--prefix,.form-field__input--wrapper--fluid form-field__textarea--prefix,.form-field__input--wrapper--fluid .form-field__input--prefix,.form-field__input--wrapper--fluid form-field__input--prefix,form-field__input--wrapper--fluid .form-field__input--suffix,form-field__input--wrapper--fluid .form-field__textarea--prefix,form-field__input--wrapper--fluid form-field__textarea--prefix,form-field__input--wrapper--fluid .form-field__input--prefix,form-field__input--wrapper--fluid form-field__input--prefix{position:static!important;top:auto;right:auto;flex:0 0 auto;display:inline-flex;align-items:center;transform:none;margin-left:.25rem;padding-right:1rem;white-space:nowrap;pointer-events:none}.form-field__input--wrapper--fluid .form-field__input--suffix,.form-field__input--wrapper--fluid .form-field__textarea--prefix,.form-field__input--wrapper--fluid form-field__textarea--prefix,.form-field__input--wrapper--fluid .form-field__input--prefix,.form-field__input--wrapper--fluid form-field__input--prefix,.form-field__input--wrapper--fluid .form-field__input--suffix i,.form-field__input--wrapper--fluid .form-field__textarea--prefix i,.form-field__input--wrapper--fluid form-field__textarea--prefix i,.form-field__input--wrapper--fluid .form-field__input--prefix i,.form-field__input--wrapper--fluid form-field__input--prefix i,.form-field__input--wrapper--fluid .form-field__input--suffix .mat-icon,.form-field__input--wrapper--fluid .form-field__textarea--prefix .mat-icon,.form-field__input--wrapper--fluid form-field__textarea--prefix .mat-icon,.form-field__input--wrapper--fluid .form-field__input--prefix .mat-icon,.form-field__input--wrapper--fluid form-field__input--prefix .mat-icon,form-field__input--wrapper--fluid .form-field__input--suffix,form-field__input--wrapper--fluid .form-field__textarea--prefix,form-field__input--wrapper--fluid form-field__textarea--prefix,form-field__input--wrapper--fluid .form-field__input--prefix,form-field__input--wrapper--fluid form-field__input--prefix,form-field__input--wrapper--fluid .form-field__input--suffix i,form-field__input--wrapper--fluid .form-field__textarea--prefix i,form-field__input--wrapper--fluid form-field__textarea--prefix i,form-field__input--wrapper--fluid .form-field__input--prefix i,form-field__input--wrapper--fluid form-field__input--prefix i,form-field__input--wrapper--fluid .form-field__input--suffix .mat-icon,form-field__input--wrapper--fluid .form-field__textarea--prefix .mat-icon,form-field__input--wrapper--fluid form-field__textarea--prefix .mat-icon,form-field__input--wrapper--fluid .form-field__input--prefix .mat-icon,form-field__input--wrapper--fluid form-field__input--prefix .mat-icon{font-size:16px;font-size:1rem;width:auto;height:auto}.form-field__input--sizer,form-field__input--sizer{font-size:16px;font-size:1rem;position:absolute;top:0;left:0;height:0;padding:0 0 0 1rem;border:0;box-sizing:border-box;overflow:hidden;visibility:hidden;pointer-events:none;white-space:pre;line-height:1.5}.form-field__input--suffix,.form-field__textarea--prefix,form-field__textarea--prefix,.form-field__input--prefix,form-field__input--prefix,form-field__input--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-300);transform:translateY(-50%)}.form-field__input--suffix,.form-field__textarea--prefix,form-field__textarea--prefix,.form-field__input--prefix,form-field__input--prefix,.form-field__input--suffix i,.form-field__textarea--prefix i,form-field__textarea--prefix i,.form-field__input--prefix i,form-field__input--prefix i,.form-field__input--suffix .mat-icon,.form-field__textarea--prefix .mat-icon,form-field__textarea--prefix .mat-icon,.form-field__input--prefix .mat-icon,form-field__input--prefix .mat-icon,form-field__input--suffix,form-field__input--suffix i,form-field__input--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__input--prefix,form-field__input--prefix{right:unset;left:1rem}.form-field__input--disabled,form-field__input--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__input--invalid,form-field__input--invalid{border-color:var(--color-error);color:var(--color-error)}.form-field__textarea,form-field__textarea{font-size:16px;font-size:1rem;display:block;width:100%;padding:1rem;border-radius:6px;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}.form-field__textarea:focus,form-field__textarea:focus{border-color:var(--color-brand-dark)}.form-field__textarea--wrapper,form-field__textarea--wrapper{display:flex;position:relative;line-height:1}.form-field__textarea--suffix,form-field__textarea--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-100);transform:translateY(-50%)}.form-field__textarea--suffix,.form-field__textarea--suffix i,.form-field__textarea--suffix .mat-icon,form-field__textarea--suffix,form-field__textarea--suffix i,form-field__textarea--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__textarea--prefix,form-field__textarea--prefix{right:unset;left:1rem}.form-field__textarea--disabled,form-field__textarea--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__range,form-field__range{font-size:16px;font-size:1rem;display:block;width:100%;padding:.5rem 1rem;color:var(--color-black);line-height:1.5;border:none}.form-field__range:focus-visible,form-field__range:focus-visible{outline:none}.form-field__range--wrapper,form-field__range--wrapper{display:grid;grid-template-columns:1fr auto 1fr;border-radius:.5rem;border:1px solid var(--color-gray-300);align-items:center;line-height:1;background-color:var(--color-white)}.form-field__range--wrapper:focus-within,form-field__range--wrapper:focus-within{border-color:var(--color-brand-dark)}.form-field__range--suffix,.form-field__range--prefix,form-field__range--prefix,form-field__range--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-100);transform:translateY(-50%)}.form-field__range--suffix,.form-field__range--prefix,form-field__range--prefix,.form-field__range--suffix i,.form-field__range--prefix i,form-field__range--prefix i,.form-field__range--suffix .mat-icon,.form-field__range--prefix .mat-icon,form-field__range--prefix .mat-icon,form-field__range--suffix,form-field__range--suffix i,form-field__range--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__range--prefix,form-field__range--prefix{right:unset;left:1rem}.form-field__range--disabled,form-field__range--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__range--invalid,form-field__range--invalid{border-color:var(--color-error)!important;color:var(--color-error)!important}.form-field--invalid,.form-field--invalid .form-field__input,.form-field--invalid .form-field__textarea,.form-field--invalid .form-field__range,form-field--invalid,form-field--invalid .form-field__input,form-field--invalid .form-field__textarea,form-field--invalid .form-field__range{color:var(--color-error);border-color:var(--color-error)}.form-field--invalid,.form-field--invalid .form-field__range--wrapper,form-field--invalid,form-field--invalid .form-field__range--wrapper{border-color:var(--color-error)}.form-field__validation,form-field__validation{font-size:12px;font-size:.75rem;padding-top:.5rem;color:var(--color-error)}.form-field__validation--item,form-field__validation--item{padding-bottom:.6rem}.form-field__validation--item:last-of-type,form-field__validation--item:last-of-type{padding-bottom:0}.form-field__subscript--wrapper,form-field__subscript--wrapper{margin-top:1.2rem}.form-field .spinner,form-field .spinner{position:absolute;right:.25rem;top:1.85rem}.form-field .hint,form-field .hint{font-size:10px;text-align:right;margin-right:1.0625rem;transform:translateY(-1rem);margin-bottom:-1rem}.form .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex,form .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex{padding-top:0}.form .mat-mdc-form-field-infix,form .mat-mdc-form-field-infix{border-top:0}.form .mat-mdc-form-field .mat-mdc-form-field-flex,form .mat-mdc-form-field .mat-mdc-form-field-flex{padding-top:0}.mat-mdc-form-field-type-mat-date-range-input .mat-mdc-form-field-infix{width:auto}.mat-mdc-text-field-wrapper{padding-bottom:0}:host::ng-deep .form-field{display:flex;margin:0}:host::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:14px;font-size:.875rem}:host::ng-deep .mat-mdc-slide-toggle{margin-right:.96rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { 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"] }] });
2243
+ ], viewQueries: [{ propertyName: "matCheckbox", first: true, predicate: MatCheckbox, descendants: true }, { propertyName: "matSlideToggle", first: true, predicate: MatSlideToggle, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <ng-container [ngSwitch]=\"type\">\r\n <mat-checkbox\r\n (change)=\"change($event)\"\r\n (click)=\"onClick($event)\"\r\n (blur)=\"onBlur()\"\r\n [checked]=\"checked\"\r\n [indeterminate]=\"indeterminate\"\r\n [disabled]=\"disabled\"\r\n [(ngModel)]=\"value\"\r\n [id]=\"name\"\r\n [labelPosition]=\"labelPosition\"\r\n [ngClass]=\"{ 'indeterminate': indeterminate }\"\r\n *ngSwitchCase=\"'checkbox'\"\r\n >\r\n {{ text }}\r\n </mat-checkbox>\r\n\r\n <mat-slide-toggle\r\n (change)=\"change($event)\"\r\n [disabled]=\"disabled\"\r\n [(ngModel)]=\"value\"\r\n [labelPosition]=\"labelPosition\"\r\n *ngSwitchCase=\"'toggle'\"\r\n >{{ text }}</mat-slide-toggle\r\n >\r\n </ng-container>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-border: #FFCDC6;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-info-border: #D1D8F7;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-warning-border: #FBE5B6;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-border: #CEEAD5;--color-success-rgb: 7, 81, 69;--color-default-border: #D5E1ED;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.form-field__subscript--wrapper,form-field__subscript--wrapper,.form-field--required .form-field__label:after,form-field--required .form-field__label:after{position:absolute;content:\"\"}.form-field--required .form-field__label:after,form-field--required .form-field__label:after{content:\"*\"!important;margin-left:.2rem;margin-top:2px;color:var(--color-error)}.form-field,form-field{margin-bottom:1rem;position:relative}.form-field__label,form-field__label{font-size:12px;font-size:.75rem;display:inline-block;margin-bottom:.25rem;color:var(--color-gray-500);cursor:pointer}.form-field__label .icon,form-field__label .icon{font-size:16px;font-size:1rem;display:inline;vertical-align:middle;margin-left:.375rem}.form-field__label-note,form-field__label-note{font-size:14px;font-size:.875rem;display:inline-block;margin-bottom:.25rem;color:var(--color-gray-400);cursor:pointer}.form-field__input,form-field__input{font-size:16px;font-size:1rem;display:block;width:100%;padding:.5rem 1rem;border-radius:6px;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}.form-field__input:focus,form-field__input:focus{border-color:var(--color-brand-dark)}.form-field__input:focus-visible,form-field__input:focus-visible{outline:none}.form-field__input--wrapper,form-field__input--wrapper{display:flex;position:relative;line-height:1}.form-field__input--wrapper--fluid,form-field__input--wrapper--fluid{width:-moz-fit-content;width:fit-content;max-width:100%;margin-left:auto;align-items:stretch;overflow:hidden;border:1px solid var(--color-gray-300);border-radius:6px;background-color:var(--color-white, #fff)}.form-field__input--wrapper--fluid:focus-within,form-field__input--wrapper--fluid:focus-within{border-color:var(--color-brand-dark)}.form-field__input--wrapper--fluid .form-field__input,form-field__input--wrapper--fluid .form-field__input{width:auto;min-width:0;flex:0 0 auto;box-sizing:border-box;border:0;border-radius:0;padding-right:0;text-align:right;background-color:transparent}.form-field__input--wrapper--fluid .form-field__input:focus,form-field__input--wrapper--fluid .form-field__input:focus{border-color:transparent}.form-field__input--wrapper--fluid .form-field__input--suffix,.form-field__input--wrapper--fluid .form-field__textarea--prefix,.form-field__input--wrapper--fluid form-field__textarea--prefix,.form-field__input--wrapper--fluid .form-field__input--prefix,.form-field__input--wrapper--fluid form-field__input--prefix,form-field__input--wrapper--fluid .form-field__input--suffix,form-field__input--wrapper--fluid .form-field__textarea--prefix,form-field__input--wrapper--fluid form-field__textarea--prefix,form-field__input--wrapper--fluid .form-field__input--prefix,form-field__input--wrapper--fluid form-field__input--prefix{position:static!important;top:auto;right:auto;flex:0 0 auto;display:inline-flex;align-items:center;transform:none;margin-left:.25rem;padding-right:1rem;white-space:nowrap;pointer-events:none}.form-field__input--wrapper--fluid .form-field__input--suffix,.form-field__input--wrapper--fluid .form-field__textarea--prefix,.form-field__input--wrapper--fluid form-field__textarea--prefix,.form-field__input--wrapper--fluid .form-field__input--prefix,.form-field__input--wrapper--fluid form-field__input--prefix,.form-field__input--wrapper--fluid .form-field__input--suffix i,.form-field__input--wrapper--fluid .form-field__textarea--prefix i,.form-field__input--wrapper--fluid form-field__textarea--prefix i,.form-field__input--wrapper--fluid .form-field__input--prefix i,.form-field__input--wrapper--fluid form-field__input--prefix i,.form-field__input--wrapper--fluid .form-field__input--suffix .mat-icon,.form-field__input--wrapper--fluid .form-field__textarea--prefix .mat-icon,.form-field__input--wrapper--fluid form-field__textarea--prefix .mat-icon,.form-field__input--wrapper--fluid .form-field__input--prefix .mat-icon,.form-field__input--wrapper--fluid form-field__input--prefix .mat-icon,form-field__input--wrapper--fluid .form-field__input--suffix,form-field__input--wrapper--fluid .form-field__textarea--prefix,form-field__input--wrapper--fluid form-field__textarea--prefix,form-field__input--wrapper--fluid .form-field__input--prefix,form-field__input--wrapper--fluid form-field__input--prefix,form-field__input--wrapper--fluid .form-field__input--suffix i,form-field__input--wrapper--fluid .form-field__textarea--prefix i,form-field__input--wrapper--fluid form-field__textarea--prefix i,form-field__input--wrapper--fluid .form-field__input--prefix i,form-field__input--wrapper--fluid form-field__input--prefix i,form-field__input--wrapper--fluid .form-field__input--suffix .mat-icon,form-field__input--wrapper--fluid .form-field__textarea--prefix .mat-icon,form-field__input--wrapper--fluid form-field__textarea--prefix .mat-icon,form-field__input--wrapper--fluid .form-field__input--prefix .mat-icon,form-field__input--wrapper--fluid form-field__input--prefix .mat-icon{font-size:16px;font-size:1rem;width:auto;height:auto}.form-field__input--sizer,form-field__input--sizer{font-size:16px;font-size:1rem;position:absolute;top:0;left:0;height:0;padding:0 0 0 1rem;border:0;box-sizing:border-box;overflow:hidden;visibility:hidden;pointer-events:none;white-space:pre;line-height:1.5}.form-field__input--suffix,.form-field__textarea--prefix,form-field__textarea--prefix,.form-field__input--prefix,form-field__input--prefix,form-field__input--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-300);transform:translateY(-50%)}.form-field__input--suffix,.form-field__textarea--prefix,form-field__textarea--prefix,.form-field__input--prefix,form-field__input--prefix,.form-field__input--suffix i,.form-field__textarea--prefix i,form-field__textarea--prefix i,.form-field__input--prefix i,form-field__input--prefix i,.form-field__input--suffix .mat-icon,.form-field__textarea--prefix .mat-icon,form-field__textarea--prefix .mat-icon,.form-field__input--prefix .mat-icon,form-field__input--prefix .mat-icon,form-field__input--suffix,form-field__input--suffix i,form-field__input--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__input--prefix,form-field__input--prefix{right:unset;left:1rem}.form-field__input--disabled,form-field__input--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__input--invalid,form-field__input--invalid{border-color:var(--color-error);color:var(--color-error)}.form-field__textarea,form-field__textarea{font-size:16px;font-size:1rem;display:block;width:100%;padding:1rem;border-radius:6px;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}.form-field__textarea:focus,form-field__textarea:focus{border-color:var(--color-brand-dark)}.form-field__textarea--wrapper,form-field__textarea--wrapper{display:flex;position:relative;line-height:1}.form-field__textarea--suffix,form-field__textarea--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-100);transform:translateY(-50%)}.form-field__textarea--suffix,.form-field__textarea--suffix i,.form-field__textarea--suffix .mat-icon,form-field__textarea--suffix,form-field__textarea--suffix i,form-field__textarea--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__textarea--prefix,form-field__textarea--prefix{right:unset;left:1rem}.form-field__textarea--disabled,form-field__textarea--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__range,form-field__range{font-size:16px;font-size:1rem;display:block;width:100%;padding:.5rem 1rem;color:var(--color-black);line-height:1.5;border:none}.form-field__range:focus-visible,form-field__range:focus-visible{outline:none}.form-field__range--wrapper,form-field__range--wrapper{display:grid;grid-template-columns:1fr auto 1fr;border-radius:.5rem;border:1px solid var(--color-gray-300);align-items:center;line-height:1;background-color:var(--color-white)}.form-field__range--wrapper:focus-within,form-field__range--wrapper:focus-within{border-color:var(--color-brand-dark)}.form-field__range--suffix,.form-field__range--prefix,form-field__range--prefix,form-field__range--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-100);transform:translateY(-50%)}.form-field__range--suffix,.form-field__range--prefix,form-field__range--prefix,.form-field__range--suffix i,.form-field__range--prefix i,form-field__range--prefix i,.form-field__range--suffix .mat-icon,.form-field__range--prefix .mat-icon,form-field__range--prefix .mat-icon,form-field__range--suffix,form-field__range--suffix i,form-field__range--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__range--prefix,form-field__range--prefix{right:unset;left:1rem}.form-field__range--disabled,form-field__range--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__range--invalid,form-field__range--invalid{border-color:var(--color-error)!important;color:var(--color-error)!important}.form-field--invalid,.form-field--invalid .form-field__input,.form-field--invalid .form-field__textarea,.form-field--invalid .form-field__range,form-field--invalid,form-field--invalid .form-field__input,form-field--invalid .form-field__textarea,form-field--invalid .form-field__range{color:var(--color-error);border-color:var(--color-error)}.form-field--invalid,.form-field--invalid .form-field__range--wrapper,form-field--invalid,form-field--invalid .form-field__range--wrapper{border-color:var(--color-error)}.form-field__validation,form-field__validation{font-size:12px;font-size:.75rem;padding-top:.5rem;color:var(--color-error)}.form-field__validation--item,form-field__validation--item{padding-bottom:.6rem}.form-field__validation--item:last-of-type,form-field__validation--item:last-of-type{padding-bottom:0}.form-field__subscript--wrapper,form-field__subscript--wrapper{margin-top:1.2rem}.form-field .spinner,form-field .spinner{position:absolute;right:.25rem;top:1.85rem}.form-field .hint,form-field .hint{font-size:10px;text-align:right;margin-right:1.0625rem;transform:translateY(-1rem);margin-bottom:-1rem}.form .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex,form .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex{padding-top:0}.form .mat-mdc-form-field-infix,form .mat-mdc-form-field-infix{border-top:0}.form .mat-mdc-form-field .mat-mdc-form-field-flex,form .mat-mdc-form-field .mat-mdc-form-field-flex{padding-top:0}.mat-mdc-form-field-type-mat-date-range-input .mat-mdc-form-field-infix{width:auto}.mat-mdc-text-field-wrapper{padding-bottom:0}:host::ng-deep .form-field{display:flex;margin:0}:host::ng-deep .mat-mdc-slide-toggle{margin-right:.96rem}:host::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:14px;font-size:.875rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { 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"] }] });
2242
2244
  }
2243
2245
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsCheckboxToggleComponent, decorators: [{
2244
2246
  type: Component,
@@ -2248,7 +2250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
2248
2250
  useExisting: EcabsCheckboxToggleComponent,
2249
2251
  multi: true,
2250
2252
  },
2251
- ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <ng-container [ngSwitch]=\"type\">\r\n <mat-checkbox\r\n (change)=\"change($event)\"\r\n (click)=\"onClick($event)\"\r\n (blur)=\"onBlur()\"\r\n [checked]=\"checked\"\r\n [indeterminate]=\"indeterminate\"\r\n [disabled]=\"disabled\"\r\n [(ngModel)]=\"value\"\r\n [id]=\"name\"\r\n [labelPosition]=\"labelPosition\"\r\n [ngClass]=\"{ 'indeterminate': indeterminate }\"\r\n *ngSwitchCase=\"'checkbox'\"\r\n >\r\n {{ text }}\r\n </mat-checkbox>\r\n\r\n <mat-slide-toggle\r\n (change)=\"change($event)\"\r\n [disabled]=\"disabled\"\r\n [(ngModel)]=\"value\"\r\n [labelPosition]=\"labelPosition\"\r\n *ngSwitchCase=\"'toggle'\"\r\n >{{ text }}</mat-slide-toggle\r\n >\r\n </ng-container>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.form-field__subscript--wrapper,form-field__subscript--wrapper,.form-field--required .form-field__label:after,form-field--required .form-field__label:after{position:absolute;content:\"\"}.form-field--required .form-field__label:after,form-field--required .form-field__label:after{content:\"*\"!important;margin-left:.2rem;margin-top:2px;color:var(--color-error)}.form-field,form-field{margin-bottom:1rem;position:relative}.form-field__label,form-field__label{font-size:12px;font-size:.75rem;display:inline-block;margin-bottom:.25rem;color:var(--color-gray-500);cursor:pointer}.form-field__label .icon,form-field__label .icon{font-size:16px;font-size:1rem;display:inline;vertical-align:middle;margin-left:.375rem}.form-field__label-note,form-field__label-note{font-size:14px;font-size:.875rem;display:inline-block;margin-bottom:.25rem;color:var(--color-gray-400);cursor:pointer}.form-field__input,form-field__input{font-size:16px;font-size:1rem;display:block;width:100%;padding:.5rem 1rem;border-radius:6px;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}.form-field__input:focus,form-field__input:focus{border-color:var(--color-brand-dark)}.form-field__input:focus-visible,form-field__input:focus-visible{outline:none}.form-field__input--wrapper,form-field__input--wrapper{display:flex;position:relative;line-height:1}.form-field__input--wrapper--fluid,form-field__input--wrapper--fluid{width:-moz-fit-content;width:fit-content;max-width:100%;margin-left:auto;align-items:stretch;overflow:hidden;border:1px solid var(--color-gray-300);border-radius:6px;background-color:var(--color-white, #fff)}.form-field__input--wrapper--fluid:focus-within,form-field__input--wrapper--fluid:focus-within{border-color:var(--color-brand-dark)}.form-field__input--wrapper--fluid .form-field__input,form-field__input--wrapper--fluid .form-field__input{width:auto;min-width:0;flex:0 0 auto;box-sizing:border-box;border:0;border-radius:0;padding-right:0;text-align:right;background-color:transparent}.form-field__input--wrapper--fluid .form-field__input:focus,form-field__input--wrapper--fluid .form-field__input:focus{border-color:transparent}.form-field__input--wrapper--fluid .form-field__input--suffix,.form-field__input--wrapper--fluid .form-field__textarea--prefix,.form-field__input--wrapper--fluid form-field__textarea--prefix,.form-field__input--wrapper--fluid .form-field__input--prefix,.form-field__input--wrapper--fluid form-field__input--prefix,form-field__input--wrapper--fluid .form-field__input--suffix,form-field__input--wrapper--fluid .form-field__textarea--prefix,form-field__input--wrapper--fluid form-field__textarea--prefix,form-field__input--wrapper--fluid .form-field__input--prefix,form-field__input--wrapper--fluid form-field__input--prefix{position:static!important;top:auto;right:auto;flex:0 0 auto;display:inline-flex;align-items:center;transform:none;margin-left:.25rem;padding-right:1rem;white-space:nowrap;pointer-events:none}.form-field__input--wrapper--fluid .form-field__input--suffix,.form-field__input--wrapper--fluid .form-field__textarea--prefix,.form-field__input--wrapper--fluid form-field__textarea--prefix,.form-field__input--wrapper--fluid .form-field__input--prefix,.form-field__input--wrapper--fluid form-field__input--prefix,.form-field__input--wrapper--fluid .form-field__input--suffix i,.form-field__input--wrapper--fluid .form-field__textarea--prefix i,.form-field__input--wrapper--fluid form-field__textarea--prefix i,.form-field__input--wrapper--fluid .form-field__input--prefix i,.form-field__input--wrapper--fluid form-field__input--prefix i,.form-field__input--wrapper--fluid .form-field__input--suffix .mat-icon,.form-field__input--wrapper--fluid .form-field__textarea--prefix .mat-icon,.form-field__input--wrapper--fluid form-field__textarea--prefix .mat-icon,.form-field__input--wrapper--fluid .form-field__input--prefix .mat-icon,.form-field__input--wrapper--fluid form-field__input--prefix .mat-icon,form-field__input--wrapper--fluid .form-field__input--suffix,form-field__input--wrapper--fluid .form-field__textarea--prefix,form-field__input--wrapper--fluid form-field__textarea--prefix,form-field__input--wrapper--fluid .form-field__input--prefix,form-field__input--wrapper--fluid form-field__input--prefix,form-field__input--wrapper--fluid .form-field__input--suffix i,form-field__input--wrapper--fluid .form-field__textarea--prefix i,form-field__input--wrapper--fluid form-field__textarea--prefix i,form-field__input--wrapper--fluid .form-field__input--prefix i,form-field__input--wrapper--fluid form-field__input--prefix i,form-field__input--wrapper--fluid .form-field__input--suffix .mat-icon,form-field__input--wrapper--fluid .form-field__textarea--prefix .mat-icon,form-field__input--wrapper--fluid form-field__textarea--prefix .mat-icon,form-field__input--wrapper--fluid .form-field__input--prefix .mat-icon,form-field__input--wrapper--fluid form-field__input--prefix .mat-icon{font-size:16px;font-size:1rem;width:auto;height:auto}.form-field__input--sizer,form-field__input--sizer{font-size:16px;font-size:1rem;position:absolute;top:0;left:0;height:0;padding:0 0 0 1rem;border:0;box-sizing:border-box;overflow:hidden;visibility:hidden;pointer-events:none;white-space:pre;line-height:1.5}.form-field__input--suffix,.form-field__textarea--prefix,form-field__textarea--prefix,.form-field__input--prefix,form-field__input--prefix,form-field__input--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-300);transform:translateY(-50%)}.form-field__input--suffix,.form-field__textarea--prefix,form-field__textarea--prefix,.form-field__input--prefix,form-field__input--prefix,.form-field__input--suffix i,.form-field__textarea--prefix i,form-field__textarea--prefix i,.form-field__input--prefix i,form-field__input--prefix i,.form-field__input--suffix .mat-icon,.form-field__textarea--prefix .mat-icon,form-field__textarea--prefix .mat-icon,.form-field__input--prefix .mat-icon,form-field__input--prefix .mat-icon,form-field__input--suffix,form-field__input--suffix i,form-field__input--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__input--prefix,form-field__input--prefix{right:unset;left:1rem}.form-field__input--disabled,form-field__input--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__input--invalid,form-field__input--invalid{border-color:var(--color-error);color:var(--color-error)}.form-field__textarea,form-field__textarea{font-size:16px;font-size:1rem;display:block;width:100%;padding:1rem;border-radius:6px;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}.form-field__textarea:focus,form-field__textarea:focus{border-color:var(--color-brand-dark)}.form-field__textarea--wrapper,form-field__textarea--wrapper{display:flex;position:relative;line-height:1}.form-field__textarea--suffix,form-field__textarea--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-100);transform:translateY(-50%)}.form-field__textarea--suffix,.form-field__textarea--suffix i,.form-field__textarea--suffix .mat-icon,form-field__textarea--suffix,form-field__textarea--suffix i,form-field__textarea--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__textarea--prefix,form-field__textarea--prefix{right:unset;left:1rem}.form-field__textarea--disabled,form-field__textarea--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__range,form-field__range{font-size:16px;font-size:1rem;display:block;width:100%;padding:.5rem 1rem;color:var(--color-black);line-height:1.5;border:none}.form-field__range:focus-visible,form-field__range:focus-visible{outline:none}.form-field__range--wrapper,form-field__range--wrapper{display:grid;grid-template-columns:1fr auto 1fr;border-radius:.5rem;border:1px solid var(--color-gray-300);align-items:center;line-height:1;background-color:var(--color-white)}.form-field__range--wrapper:focus-within,form-field__range--wrapper:focus-within{border-color:var(--color-brand-dark)}.form-field__range--suffix,.form-field__range--prefix,form-field__range--prefix,form-field__range--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-100);transform:translateY(-50%)}.form-field__range--suffix,.form-field__range--prefix,form-field__range--prefix,.form-field__range--suffix i,.form-field__range--prefix i,form-field__range--prefix i,.form-field__range--suffix .mat-icon,.form-field__range--prefix .mat-icon,form-field__range--prefix .mat-icon,form-field__range--suffix,form-field__range--suffix i,form-field__range--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__range--prefix,form-field__range--prefix{right:unset;left:1rem}.form-field__range--disabled,form-field__range--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__range--invalid,form-field__range--invalid{border-color:var(--color-error)!important;color:var(--color-error)!important}.form-field--invalid,.form-field--invalid .form-field__input,.form-field--invalid .form-field__textarea,.form-field--invalid .form-field__range,form-field--invalid,form-field--invalid .form-field__input,form-field--invalid .form-field__textarea,form-field--invalid .form-field__range{color:var(--color-error);border-color:var(--color-error)}.form-field--invalid,.form-field--invalid .form-field__range--wrapper,form-field--invalid,form-field--invalid .form-field__range--wrapper{border-color:var(--color-error)}.form-field__validation,form-field__validation{font-size:12px;font-size:.75rem;padding-top:.5rem;color:var(--color-error)}.form-field__validation--item,form-field__validation--item{padding-bottom:.6rem}.form-field__validation--item:last-of-type,form-field__validation--item:last-of-type{padding-bottom:0}.form-field__subscript--wrapper,form-field__subscript--wrapper{margin-top:1.2rem}.form-field .spinner,form-field .spinner{position:absolute;right:.25rem;top:1.85rem}.form-field .hint,form-field .hint{font-size:10px;text-align:right;margin-right:1.0625rem;transform:translateY(-1rem);margin-bottom:-1rem}.form .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex,form .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex{padding-top:0}.form .mat-mdc-form-field-infix,form .mat-mdc-form-field-infix{border-top:0}.form .mat-mdc-form-field .mat-mdc-form-field-flex,form .mat-mdc-form-field .mat-mdc-form-field-flex{padding-top:0}.mat-mdc-form-field-type-mat-date-range-input .mat-mdc-form-field-infix{width:auto}.mat-mdc-text-field-wrapper{padding-bottom:0}:host::ng-deep .form-field{display:flex;margin:0}:host::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:14px;font-size:.875rem}:host::ng-deep .mat-mdc-slide-toggle{margin-right:.96rem}\n"] }]
2253
+ ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <ng-container [ngSwitch]=\"type\">\r\n <mat-checkbox\r\n (change)=\"change($event)\"\r\n (click)=\"onClick($event)\"\r\n (blur)=\"onBlur()\"\r\n [checked]=\"checked\"\r\n [indeterminate]=\"indeterminate\"\r\n [disabled]=\"disabled\"\r\n [(ngModel)]=\"value\"\r\n [id]=\"name\"\r\n [labelPosition]=\"labelPosition\"\r\n [ngClass]=\"{ 'indeterminate': indeterminate }\"\r\n *ngSwitchCase=\"'checkbox'\"\r\n >\r\n {{ text }}\r\n </mat-checkbox>\r\n\r\n <mat-slide-toggle\r\n (change)=\"change($event)\"\r\n [disabled]=\"disabled\"\r\n [(ngModel)]=\"value\"\r\n [labelPosition]=\"labelPosition\"\r\n *ngSwitchCase=\"'toggle'\"\r\n >{{ text }}</mat-slide-toggle\r\n >\r\n </ng-container>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-border: #FFCDC6;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-info-border: #D1D8F7;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-warning-border: #FBE5B6;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-border: #CEEAD5;--color-success-rgb: 7, 81, 69;--color-default-border: #D5E1ED;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.form-field__subscript--wrapper,form-field__subscript--wrapper,.form-field--required .form-field__label:after,form-field--required .form-field__label:after{position:absolute;content:\"\"}.form-field--required .form-field__label:after,form-field--required .form-field__label:after{content:\"*\"!important;margin-left:.2rem;margin-top:2px;color:var(--color-error)}.form-field,form-field{margin-bottom:1rem;position:relative}.form-field__label,form-field__label{font-size:12px;font-size:.75rem;display:inline-block;margin-bottom:.25rem;color:var(--color-gray-500);cursor:pointer}.form-field__label .icon,form-field__label .icon{font-size:16px;font-size:1rem;display:inline;vertical-align:middle;margin-left:.375rem}.form-field__label-note,form-field__label-note{font-size:14px;font-size:.875rem;display:inline-block;margin-bottom:.25rem;color:var(--color-gray-400);cursor:pointer}.form-field__input,form-field__input{font-size:16px;font-size:1rem;display:block;width:100%;padding:.5rem 1rem;border-radius:6px;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}.form-field__input:focus,form-field__input:focus{border-color:var(--color-brand-dark)}.form-field__input:focus-visible,form-field__input:focus-visible{outline:none}.form-field__input--wrapper,form-field__input--wrapper{display:flex;position:relative;line-height:1}.form-field__input--wrapper--fluid,form-field__input--wrapper--fluid{width:-moz-fit-content;width:fit-content;max-width:100%;margin-left:auto;align-items:stretch;overflow:hidden;border:1px solid var(--color-gray-300);border-radius:6px;background-color:var(--color-white, #fff)}.form-field__input--wrapper--fluid:focus-within,form-field__input--wrapper--fluid:focus-within{border-color:var(--color-brand-dark)}.form-field__input--wrapper--fluid .form-field__input,form-field__input--wrapper--fluid .form-field__input{width:auto;min-width:0;flex:0 0 auto;box-sizing:border-box;border:0;border-radius:0;padding-right:0;text-align:right;background-color:transparent}.form-field__input--wrapper--fluid .form-field__input:focus,form-field__input--wrapper--fluid .form-field__input:focus{border-color:transparent}.form-field__input--wrapper--fluid .form-field__input--suffix,.form-field__input--wrapper--fluid .form-field__textarea--prefix,.form-field__input--wrapper--fluid form-field__textarea--prefix,.form-field__input--wrapper--fluid .form-field__input--prefix,.form-field__input--wrapper--fluid form-field__input--prefix,form-field__input--wrapper--fluid .form-field__input--suffix,form-field__input--wrapper--fluid .form-field__textarea--prefix,form-field__input--wrapper--fluid form-field__textarea--prefix,form-field__input--wrapper--fluid .form-field__input--prefix,form-field__input--wrapper--fluid form-field__input--prefix{position:static!important;top:auto;right:auto;flex:0 0 auto;display:inline-flex;align-items:center;transform:none;margin-left:.25rem;padding-right:1rem;white-space:nowrap;pointer-events:none}.form-field__input--wrapper--fluid .form-field__input--suffix,.form-field__input--wrapper--fluid .form-field__textarea--prefix,.form-field__input--wrapper--fluid form-field__textarea--prefix,.form-field__input--wrapper--fluid .form-field__input--prefix,.form-field__input--wrapper--fluid form-field__input--prefix,.form-field__input--wrapper--fluid .form-field__input--suffix i,.form-field__input--wrapper--fluid .form-field__textarea--prefix i,.form-field__input--wrapper--fluid form-field__textarea--prefix i,.form-field__input--wrapper--fluid .form-field__input--prefix i,.form-field__input--wrapper--fluid form-field__input--prefix i,.form-field__input--wrapper--fluid .form-field__input--suffix .mat-icon,.form-field__input--wrapper--fluid .form-field__textarea--prefix .mat-icon,.form-field__input--wrapper--fluid form-field__textarea--prefix .mat-icon,.form-field__input--wrapper--fluid .form-field__input--prefix .mat-icon,.form-field__input--wrapper--fluid form-field__input--prefix .mat-icon,form-field__input--wrapper--fluid .form-field__input--suffix,form-field__input--wrapper--fluid .form-field__textarea--prefix,form-field__input--wrapper--fluid form-field__textarea--prefix,form-field__input--wrapper--fluid .form-field__input--prefix,form-field__input--wrapper--fluid form-field__input--prefix,form-field__input--wrapper--fluid .form-field__input--suffix i,form-field__input--wrapper--fluid .form-field__textarea--prefix i,form-field__input--wrapper--fluid form-field__textarea--prefix i,form-field__input--wrapper--fluid .form-field__input--prefix i,form-field__input--wrapper--fluid form-field__input--prefix i,form-field__input--wrapper--fluid .form-field__input--suffix .mat-icon,form-field__input--wrapper--fluid .form-field__textarea--prefix .mat-icon,form-field__input--wrapper--fluid form-field__textarea--prefix .mat-icon,form-field__input--wrapper--fluid .form-field__input--prefix .mat-icon,form-field__input--wrapper--fluid form-field__input--prefix .mat-icon{font-size:16px;font-size:1rem;width:auto;height:auto}.form-field__input--sizer,form-field__input--sizer{font-size:16px;font-size:1rem;position:absolute;top:0;left:0;height:0;padding:0 0 0 1rem;border:0;box-sizing:border-box;overflow:hidden;visibility:hidden;pointer-events:none;white-space:pre;line-height:1.5}.form-field__input--suffix,.form-field__textarea--prefix,form-field__textarea--prefix,.form-field__input--prefix,form-field__input--prefix,form-field__input--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-300);transform:translateY(-50%)}.form-field__input--suffix,.form-field__textarea--prefix,form-field__textarea--prefix,.form-field__input--prefix,form-field__input--prefix,.form-field__input--suffix i,.form-field__textarea--prefix i,form-field__textarea--prefix i,.form-field__input--prefix i,form-field__input--prefix i,.form-field__input--suffix .mat-icon,.form-field__textarea--prefix .mat-icon,form-field__textarea--prefix .mat-icon,.form-field__input--prefix .mat-icon,form-field__input--prefix .mat-icon,form-field__input--suffix,form-field__input--suffix i,form-field__input--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__input--prefix,form-field__input--prefix{right:unset;left:1rem}.form-field__input--disabled,form-field__input--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__input--invalid,form-field__input--invalid{border-color:var(--color-error);color:var(--color-error)}.form-field__textarea,form-field__textarea{font-size:16px;font-size:1rem;display:block;width:100%;padding:1rem;border-radius:6px;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}.form-field__textarea:focus,form-field__textarea:focus{border-color:var(--color-brand-dark)}.form-field__textarea--wrapper,form-field__textarea--wrapper{display:flex;position:relative;line-height:1}.form-field__textarea--suffix,form-field__textarea--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-100);transform:translateY(-50%)}.form-field__textarea--suffix,.form-field__textarea--suffix i,.form-field__textarea--suffix .mat-icon,form-field__textarea--suffix,form-field__textarea--suffix i,form-field__textarea--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__textarea--prefix,form-field__textarea--prefix{right:unset;left:1rem}.form-field__textarea--disabled,form-field__textarea--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__range,form-field__range{font-size:16px;font-size:1rem;display:block;width:100%;padding:.5rem 1rem;color:var(--color-black);line-height:1.5;border:none}.form-field__range:focus-visible,form-field__range:focus-visible{outline:none}.form-field__range--wrapper,form-field__range--wrapper{display:grid;grid-template-columns:1fr auto 1fr;border-radius:.5rem;border:1px solid var(--color-gray-300);align-items:center;line-height:1;background-color:var(--color-white)}.form-field__range--wrapper:focus-within,form-field__range--wrapper:focus-within{border-color:var(--color-brand-dark)}.form-field__range--suffix,.form-field__range--prefix,form-field__range--prefix,form-field__range--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-100);transform:translateY(-50%)}.form-field__range--suffix,.form-field__range--prefix,form-field__range--prefix,.form-field__range--suffix i,.form-field__range--prefix i,form-field__range--prefix i,.form-field__range--suffix .mat-icon,.form-field__range--prefix .mat-icon,form-field__range--prefix .mat-icon,form-field__range--suffix,form-field__range--suffix i,form-field__range--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__range--prefix,form-field__range--prefix{right:unset;left:1rem}.form-field__range--disabled,form-field__range--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__range--invalid,form-field__range--invalid{border-color:var(--color-error)!important;color:var(--color-error)!important}.form-field--invalid,.form-field--invalid .form-field__input,.form-field--invalid .form-field__textarea,.form-field--invalid .form-field__range,form-field--invalid,form-field--invalid .form-field__input,form-field--invalid .form-field__textarea,form-field--invalid .form-field__range{color:var(--color-error);border-color:var(--color-error)}.form-field--invalid,.form-field--invalid .form-field__range--wrapper,form-field--invalid,form-field--invalid .form-field__range--wrapper{border-color:var(--color-error)}.form-field__validation,form-field__validation{font-size:12px;font-size:.75rem;padding-top:.5rem;color:var(--color-error)}.form-field__validation--item,form-field__validation--item{padding-bottom:.6rem}.form-field__validation--item:last-of-type,form-field__validation--item:last-of-type{padding-bottom:0}.form-field__subscript--wrapper,form-field__subscript--wrapper{margin-top:1.2rem}.form-field .spinner,form-field .spinner{position:absolute;right:.25rem;top:1.85rem}.form-field .hint,form-field .hint{font-size:10px;text-align:right;margin-right:1.0625rem;transform:translateY(-1rem);margin-bottom:-1rem}.form .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex,form .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex{padding-top:0}.form .mat-mdc-form-field-infix,form .mat-mdc-form-field-infix{border-top:0}.form .mat-mdc-form-field .mat-mdc-form-field-flex,form .mat-mdc-form-field .mat-mdc-form-field-flex{padding-top:0}.mat-mdc-form-field-type-mat-date-range-input .mat-mdc-form-field-infix{width:auto}.mat-mdc-text-field-wrapper{padding-bottom:0}:host::ng-deep .form-field{display:flex;margin:0}:host::ng-deep .mat-mdc-slide-toggle{margin-right:.96rem}:host::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:14px;font-size:.875rem}\n"] }]
2252
2254
  }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.DestroyRef }]; }, propDecorators: { matCheckbox: [{
2253
2255
  type: ViewChild,
2254
2256
  args: [MatCheckbox, { static: false }]
@@ -2424,7 +2426,7 @@ class EcabsSelectV2Component extends EcabsElementBaseComponent {
2424
2426
  };
2425
2427
  }
2426
2428
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSelectV2Component, deps: [{ token: i3.NgControl, optional: true, self: true }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
2427
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsSelectV2Component, selector: "ecabs-select-v2", inputs: { appearance: "appearance", appendTo: "appendTo", items: "items", bindLabel: "bindLabel", bindValue: "bindValue", editableSearchTerm: "editableSearchTerm", searchable: "searchable", clearable: "clearable", multiple: "multiple", notFoundText: "notFoundText", hideSelected: "hideSelected", clearOnBackspace: "clearOnBackspace", clearSearchOnAdd: "clearSearchOnAdd", trackByFn: "trackByFn", minLength: "minLength", searchPlaceholder: "searchPlaceholder", typeahead: "typeahead", closeOnSelect: "closeOnSelect", clearAllText: "clearAllText", selectAllLabel: "selectAllLabel", otherLabel: "otherLabel", othersLabel: "othersLabel" }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <ng-select class=\"form-field__select\"\r\n [appearance]=\"appearance\"\r\n [appendTo]=\"appendTo\"\r\n [labelForId]=\"name\"\r\n [bindLabel]=\"bindLabel || null\"\r\n [bindValue]=\"bindValue || null\"\r\n [searchable]=\"searchable\"\r\n [clearable]=\"clearable\"\r\n [clearSearchOnAdd]=\"clearSearchOnAdd\"\r\n [groupBy]=\"groupByKey\"\r\n [selectableGroup]=\"true\"\r\n [selectableGroupAsModel]=\"false\"\r\n [items]=\"itemsList\"\r\n [multiple]=\"multiple\"\r\n [(ngModel)]=\"value\"\r\n [placeholder]=\"placeholder\"\r\n (blur)=\"onBlur()\"\r\n [hideSelected]=\"hideSelected\"\r\n [trackByFn]=\"trackByFn\"\r\n [minTermLength]=\"minLength\"\r\n [typeToSearchText]=\"searchPlaceholder\"\r\n [typeahead]=\"typeahead\"\r\n [loading]=\"loading\"\r\n [closeOnSelect]=\"closeOnSelect\"\r\n [clearOnBackspace]=\"clearOnBackspace\"\r\n [editableSearchTerm]=\"editableSearchTerm\"\r\n (open)=\"this.isOpen = true\"\r\n (close)=\"this.isOpen = false\"\r\n (change)=\"changed($event)\"\r\n [notFoundText]=\"notFoundText\"\r\n [clearAllText]=\"clearAllText\"\r\n [readonly]=\"this.disabled\">\r\n\r\n <ng-template ng-loadingspinner-tmp>\r\n <ecabs-loading-spinner size=\"tiny\"></ecabs-loading-spinner>\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"!multiple\">\r\n <ng-template ng-label-tmp let-item=\"item\" let-label=\"label\">\r\n <ecabs-select-icon [option]=\"item\"></ecabs-select-icon>\r\n {{ label }}\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!!bindValue && !!bindLabel\">\r\n <ng-template ng-multi-label-tmp let-items=\"items\">\r\n <!--#Custom display of first selected item and (+1 more) pattern -->\r\n <ng-container *ngIf=\"!isOpen\">\r\n <div *ngFor=\"let item of items | slice:0:1\"\r\n class=\"inline-flex items-center\">\r\n <ng-container *ngIf=\"asOption(item) as option\">\r\n <ecabs-select-icon [option]=\"option\"></ecabs-select-icon>\r\n <span>\r\n {{ option.label }} <span *ngIf=\"items.length > 1\">\r\n (+{{ items.length - 1 }}\r\n {{ (items?.length === 2 ? otherLabel : othersLabel) }})\r\n </span>\r\n </span>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <ecabs-checkbox *ngIf=\"multiple\"\r\n [ngModel]=\"item$.selected\"\r\n [name]=\"index\">\r\n </ecabs-checkbox>\r\n <ecabs-select-icon [option]=\"item\"></ecabs-select-icon>\r\n {{ item$?.['label'] }}\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"multiple\">\r\n <!--#Add selectAll and individual checkboxes for multiple-enabled list -->\r\n <ng-template ng-optgroup-tmp let-item$=\"item$\" let-index=\"index\">\r\n <ecabs-checkbox [ngModel]=\"item$.selected\"\r\n [name]=\"index\"\r\n [text]=\"selectAllLabel\">\r\n </ecabs-checkbox>\r\n </ng-template>\r\n </ng-container>\r\n </ng-select>\r\n</ecabs-element-wrapper>\r\n", styles: [""], 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.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$3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i4$3.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i4$3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i4$3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i4$3.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i4$3.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }, { kind: "component", type: EcabsCheckboxToggleComponent, selector: "ecabs-checkbox", inputs: ["type", "text", "label", "labelPosition", "indeterminate", "checked"], outputs: ["click", "changed"] }, { kind: "component", type: EcabsSelectIconComponent, selector: "ecabs-select-icon", inputs: ["option"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] });
2429
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsSelectV2Component, selector: "ecabs-select-v2", inputs: { appearance: "appearance", appendTo: "appendTo", items: "items", bindLabel: "bindLabel", bindValue: "bindValue", editableSearchTerm: "editableSearchTerm", searchable: "searchable", clearable: "clearable", multiple: "multiple", notFoundText: "notFoundText", hideSelected: "hideSelected", clearOnBackspace: "clearOnBackspace", clearSearchOnAdd: "clearSearchOnAdd", trackByFn: "trackByFn", minLength: "minLength", searchPlaceholder: "searchPlaceholder", typeahead: "typeahead", closeOnSelect: "closeOnSelect", clearAllText: "clearAllText", selectAllLabel: "selectAllLabel", otherLabel: "otherLabel", othersLabel: "othersLabel" }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <ng-select class=\"form-field__select\"\r\n [appearance]=\"appearance\"\r\n [appendTo]=\"appendTo\"\r\n [labelForId]=\"name\"\r\n [bindLabel]=\"bindLabel || null\"\r\n [bindValue]=\"bindValue || null\"\r\n [searchable]=\"searchable\"\r\n [clearable]=\"clearable\"\r\n [clearSearchOnAdd]=\"clearSearchOnAdd\"\r\n [groupBy]=\"groupByKey\"\r\n [selectableGroup]=\"true\"\r\n [selectableGroupAsModel]=\"false\"\r\n [items]=\"itemsList\"\r\n [multiple]=\"multiple\"\r\n [(ngModel)]=\"value\"\r\n [placeholder]=\"placeholder\"\r\n (blur)=\"onBlur()\"\r\n [hideSelected]=\"hideSelected\"\r\n [trackByFn]=\"trackByFn\"\r\n [minTermLength]=\"minLength\"\r\n [typeToSearchText]=\"searchPlaceholder\"\r\n [typeahead]=\"typeahead\"\r\n [loading]=\"loading\"\r\n [closeOnSelect]=\"closeOnSelect\"\r\n [clearOnBackspace]=\"clearOnBackspace\"\r\n [editableSearchTerm]=\"editableSearchTerm\"\r\n (open)=\"this.isOpen = true\"\r\n (close)=\"this.isOpen = false\"\r\n (change)=\"changed($event)\"\r\n [notFoundText]=\"notFoundText\"\r\n [clearAllText]=\"clearAllText\"\r\n [readonly]=\"this.disabled\">\r\n\r\n <ng-template ng-loadingspinner-tmp>\r\n <ecabs-loading-spinner size=\"tiny\"></ecabs-loading-spinner>\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"!multiple\">\r\n <ng-template ng-label-tmp let-item=\"item\" let-label=\"label\">\r\n <ecabs-select-icon [option]=\"item\"></ecabs-select-icon>\r\n {{ label }}\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!!bindValue && !!bindLabel\">\r\n <ng-template ng-multi-label-tmp let-items=\"items\">\r\n <!--#Custom display of first selected item and (+1 more) pattern -->\r\n <ng-container *ngIf=\"!isOpen\">\r\n <div *ngFor=\"let item of items | slice:0:1\"\r\n class=\"inline-flex items-center\">\r\n <ng-container *ngIf=\"asOption(item) as option\">\r\n <ecabs-select-icon [option]=\"option\"></ecabs-select-icon>\r\n <span>\r\n {{ option.label }} <span *ngIf=\"items.length > 1\">\r\n (+{{ items.length - 1 }}\r\n {{ (items?.length === 2 ? otherLabel : othersLabel) }})\r\n </span>\r\n </span>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <ecabs-checkbox *ngIf=\"multiple\"\r\n [ngModel]=\"item$.selected\"\r\n [name]=\"index\">\r\n </ecabs-checkbox>\r\n <ecabs-select-icon [option]=\"item\"></ecabs-select-icon>\r\n {{ item$?.['label'] }}\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"multiple\">\r\n <!--#Add selectAll and individual checkboxes for multiple-enabled list -->\r\n <ng-template ng-optgroup-tmp let-item$=\"item$\" let-index=\"index\">\r\n <ecabs-checkbox [ngModel]=\"item$.selected\"\r\n [name]=\"index\"\r\n [text]=\"selectAllLabel\">\r\n </ecabs-checkbox>\r\n </ng-template>\r\n </ng-container>\r\n </ng-select>\r\n</ecabs-element-wrapper>\r\n", styles: [""], 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.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$4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i4$4.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i4$4.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i4$4.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i4$4.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i4$4.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }, { kind: "component", type: EcabsCheckboxToggleComponent, selector: "ecabs-checkbox", inputs: ["type", "text", "label", "labelPosition", "indeterminate", "checked"], outputs: ["click", "changed"] }, { kind: "component", type: EcabsSelectIconComponent, selector: "ecabs-select-icon", inputs: ["option"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] });
2428
2430
  }
2429
2431
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSelectV2Component, decorators: [{
2430
2432
  type: Component,
@@ -2737,7 +2739,7 @@ class EcabsCheckboxV2Component extends EcabsElementBaseComponent {
2737
2739
  useExisting: forwardRef(() => EcabsCheckboxV2Component),
2738
2740
  multi: true,
2739
2741
  },
2740
- ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div\r\n class=\"ecabs-checkbox-v2\"\r\n [class.ecabs-checkbox-v2--checked]=\"value\"\r\n [class.ecabs-checkbox-v2--disabled]=\"disabled\"\r\n [class.ecabs-checkbox-v2--error]=\"hasError\"\r\n [attr.tabindex]=\"disabled ? null : 0\"\r\n (click)=\"onRowClick()\"\r\n (keydown)=\"onKeyDown($event)\"\r\n >\r\n <span class=\"form-field__label text-sm pl-2\"\r\n [ngClass]=\"value ? 'font-semibold' : 'font-medium'\">\r\n {{ label }}\r\n </span>\r\n\r\n <mat-checkbox\r\n class=\"ecabs-checkbox-v2__control\"\r\n [id]=\"name\"\r\n [name]=\"name\"\r\n [disabled]=\"disabled\"\r\n [checked]=\"value\"\r\n color=\"primary\"\r\n [disableRipple]=\"true\"\r\n (change)=\"toggle($event)\"\r\n (blur)=\"onBlur()\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown.enter)=\"$event.stopPropagation()\"\r\n >\r\n </mat-checkbox>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.ecabs-checkbox-v2{display:flex;align-items:center;justify-content:space-between;width:100%;padding:4px 8px;border:1px solid var(--color-gray-200);border-radius:.5rem;background-color:var(--color-white);cursor:pointer}.ecabs-checkbox-v2 .form-field__label{margin-bottom:0}.ecabs-checkbox-v2:hover{border-color:var(--color-gray-300);background-color:var(--color-gray-50)}.ecabs-checkbox-v2--checked{background-color:var(--color-gray-50);border-color:var(--color-brand-dark)}.ecabs-checkbox-v2--error{border-color:var(--color-error)}.ecabs-checkbox-v2--error:hover{border-color:var(--color-error);background-color:var(--color-white)}.ecabs-checkbox-v2--disabled{opacity:.5;cursor:default;border-color:var(--color-gray-200);background-color:var(--color-white)}.ecabs-checkbox-v2--disabled:hover{border-color:var(--color-gray-200);background-color:var(--color-white)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
2742
+ ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div\r\n class=\"ecabs-checkbox-v2\"\r\n [class.ecabs-checkbox-v2--checked]=\"value\"\r\n [class.ecabs-checkbox-v2--disabled]=\"disabled\"\r\n [class.ecabs-checkbox-v2--error]=\"hasError\"\r\n [attr.tabindex]=\"disabled ? null : 0\"\r\n (click)=\"onRowClick()\"\r\n (keydown)=\"onKeyDown($event)\"\r\n >\r\n <span class=\"form-field__label text-sm pl-2\"\r\n [ngClass]=\"value ? 'font-semibold' : 'font-medium'\">\r\n {{ label }}\r\n </span>\r\n\r\n <mat-checkbox\r\n class=\"ecabs-checkbox-v2__control\"\r\n [id]=\"name\"\r\n [name]=\"name\"\r\n [disabled]=\"disabled\"\r\n [checked]=\"value\"\r\n color=\"primary\"\r\n [disableRipple]=\"true\"\r\n (change)=\"toggle($event)\"\r\n (blur)=\"onBlur()\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown.enter)=\"$event.stopPropagation()\"\r\n >\r\n </mat-checkbox>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-border: #FFCDC6;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-info-border: #D1D8F7;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-warning-border: #FBE5B6;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-border: #CEEAD5;--color-success-rgb: 7, 81, 69;--color-default-border: #D5E1ED;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.ecabs-checkbox-v2{display:flex;align-items:center;justify-content:space-between;width:100%;padding:4px 8px;border:1px solid var(--color-gray-200);border-radius:.5rem;background-color:var(--color-white);cursor:pointer}.ecabs-checkbox-v2 .form-field__label{margin-bottom:0}.ecabs-checkbox-v2:hover{border-color:var(--color-gray-300);background-color:var(--color-gray-50)}.ecabs-checkbox-v2--checked{background-color:var(--color-gray-50);border-color:var(--color-brand-dark)}.ecabs-checkbox-v2--error{border-color:var(--color-error)}.ecabs-checkbox-v2--error:hover{border-color:var(--color-error);background-color:var(--color-white)}.ecabs-checkbox-v2--disabled{opacity:.5;cursor:default;border-color:var(--color-gray-200);background-color:var(--color-white)}.ecabs-checkbox-v2--disabled:hover{border-color:var(--color-gray-200);background-color:var(--color-white)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
2741
2743
  }
2742
2744
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsCheckboxV2Component, decorators: [{
2743
2745
  type: Component,
@@ -2747,7 +2749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
2747
2749
  useExisting: forwardRef(() => EcabsCheckboxV2Component),
2748
2750
  multi: true,
2749
2751
  },
2750
- ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div\r\n class=\"ecabs-checkbox-v2\"\r\n [class.ecabs-checkbox-v2--checked]=\"value\"\r\n [class.ecabs-checkbox-v2--disabled]=\"disabled\"\r\n [class.ecabs-checkbox-v2--error]=\"hasError\"\r\n [attr.tabindex]=\"disabled ? null : 0\"\r\n (click)=\"onRowClick()\"\r\n (keydown)=\"onKeyDown($event)\"\r\n >\r\n <span class=\"form-field__label text-sm pl-2\"\r\n [ngClass]=\"value ? 'font-semibold' : 'font-medium'\">\r\n {{ label }}\r\n </span>\r\n\r\n <mat-checkbox\r\n class=\"ecabs-checkbox-v2__control\"\r\n [id]=\"name\"\r\n [name]=\"name\"\r\n [disabled]=\"disabled\"\r\n [checked]=\"value\"\r\n color=\"primary\"\r\n [disableRipple]=\"true\"\r\n (change)=\"toggle($event)\"\r\n (blur)=\"onBlur()\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown.enter)=\"$event.stopPropagation()\"\r\n >\r\n </mat-checkbox>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.ecabs-checkbox-v2{display:flex;align-items:center;justify-content:space-between;width:100%;padding:4px 8px;border:1px solid var(--color-gray-200);border-radius:.5rem;background-color:var(--color-white);cursor:pointer}.ecabs-checkbox-v2 .form-field__label{margin-bottom:0}.ecabs-checkbox-v2:hover{border-color:var(--color-gray-300);background-color:var(--color-gray-50)}.ecabs-checkbox-v2--checked{background-color:var(--color-gray-50);border-color:var(--color-brand-dark)}.ecabs-checkbox-v2--error{border-color:var(--color-error)}.ecabs-checkbox-v2--error:hover{border-color:var(--color-error);background-color:var(--color-white)}.ecabs-checkbox-v2--disabled{opacity:.5;cursor:default;border-color:var(--color-gray-200);background-color:var(--color-white)}.ecabs-checkbox-v2--disabled:hover{border-color:var(--color-gray-200);background-color:var(--color-white)}\n"] }]
2752
+ ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div\r\n class=\"ecabs-checkbox-v2\"\r\n [class.ecabs-checkbox-v2--checked]=\"value\"\r\n [class.ecabs-checkbox-v2--disabled]=\"disabled\"\r\n [class.ecabs-checkbox-v2--error]=\"hasError\"\r\n [attr.tabindex]=\"disabled ? null : 0\"\r\n (click)=\"onRowClick()\"\r\n (keydown)=\"onKeyDown($event)\"\r\n >\r\n <span class=\"form-field__label text-sm pl-2\"\r\n [ngClass]=\"value ? 'font-semibold' : 'font-medium'\">\r\n {{ label }}\r\n </span>\r\n\r\n <mat-checkbox\r\n class=\"ecabs-checkbox-v2__control\"\r\n [id]=\"name\"\r\n [name]=\"name\"\r\n [disabled]=\"disabled\"\r\n [checked]=\"value\"\r\n color=\"primary\"\r\n [disableRipple]=\"true\"\r\n (change)=\"toggle($event)\"\r\n (blur)=\"onBlur()\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown.enter)=\"$event.stopPropagation()\"\r\n >\r\n </mat-checkbox>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-border: #FFCDC6;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-info-border: #D1D8F7;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-warning-border: #FBE5B6;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-border: #CEEAD5;--color-success-rgb: 7, 81, 69;--color-default-border: #D5E1ED;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.ecabs-checkbox-v2{display:flex;align-items:center;justify-content:space-between;width:100%;padding:4px 8px;border:1px solid var(--color-gray-200);border-radius:.5rem;background-color:var(--color-white);cursor:pointer}.ecabs-checkbox-v2 .form-field__label{margin-bottom:0}.ecabs-checkbox-v2:hover{border-color:var(--color-gray-300);background-color:var(--color-gray-50)}.ecabs-checkbox-v2--checked{background-color:var(--color-gray-50);border-color:var(--color-brand-dark)}.ecabs-checkbox-v2--error{border-color:var(--color-error)}.ecabs-checkbox-v2--error:hover{border-color:var(--color-error);background-color:var(--color-white)}.ecabs-checkbox-v2--disabled{opacity:.5;cursor:default;border-color:var(--color-gray-200);background-color:var(--color-white)}.ecabs-checkbox-v2--disabled:hover{border-color:var(--color-gray-200);background-color:var(--color-white)}\n"] }]
2751
2753
  }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.DestroyRef }]; }, propDecorators: { label: [{
2752
2754
  type: Input
2753
2755
  }], showLabel: [{
@@ -2898,13 +2900,13 @@ class EcabsPickerHeaderComponent {
2898
2900
  this.calendar.currentView =
2899
2901
  this.calendar.currentView === 'month' ? 'multi-year' : 'month';
2900
2902
  }
2901
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsPickerHeaderComponent, deps: [{ token: i6.MatCalendar }, { token: i4$1.DateAdapter }, { token: i0.ChangeDetectorRef }, { token: EcabsDatePickerHeaderService }, { token: UnsubscribeService }], target: i0.ɵɵFactoryTarget.Component });
2902
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsPickerHeaderComponent, selector: "ecabs-picker-header", providers: [UnsubscribeService], ngImport: i0, template: "<div class=\"header\">\r\n <button mat-icon-button (click)=\"previousClicked()\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </button>\r\n <button mat-flat-button (click)=\"currentPeriodClicked()\">\r\n <span >{{ periodLabel }}</span>\r\n </button>\r\n\r\n <button mat-icon-button (click)=\"nextClicked()\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </button>\r\n</div>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.header{display:flex;align-items:center;justify-content:space-between;padding:1rem}.select-date-label{color:var(--color-brand-dark)}button{background-color:inherit}\n"], dependencies: [{ kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2903
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsPickerHeaderComponent, deps: [{ token: i6.MatCalendar }, { token: i4$2.DateAdapter }, { token: i0.ChangeDetectorRef }, { token: EcabsDatePickerHeaderService }, { token: UnsubscribeService }], target: i0.ɵɵFactoryTarget.Component });
2904
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsPickerHeaderComponent, selector: "ecabs-picker-header", providers: [UnsubscribeService], ngImport: i0, template: "<div class=\"header\">\r\n <button mat-icon-button (click)=\"previousClicked()\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </button>\r\n <button mat-flat-button (click)=\"currentPeriodClicked()\">\r\n <span >{{ periodLabel }}</span>\r\n </button>\r\n\r\n <button mat-icon-button (click)=\"nextClicked()\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </button>\r\n</div>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-border: #FFCDC6;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-info-border: #D1D8F7;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-warning-border: #FBE5B6;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-border: #CEEAD5;--color-success-rgb: 7, 81, 69;--color-default-border: #D5E1ED;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.header{display:flex;align-items:center;justify-content:space-between;padding:1rem}.select-date-label{color:var(--color-brand-dark)}button{background-color:inherit}\n"], dependencies: [{ kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2903
2905
  }
2904
2906
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsPickerHeaderComponent, decorators: [{
2905
2907
  type: Component,
2906
- args: [{ selector: 'ecabs-picker-header', changeDetection: ChangeDetectionStrategy.OnPush, providers: [UnsubscribeService], template: "<div class=\"header\">\r\n <button mat-icon-button (click)=\"previousClicked()\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </button>\r\n <button mat-flat-button (click)=\"currentPeriodClicked()\">\r\n <span >{{ periodLabel }}</span>\r\n </button>\r\n\r\n <button mat-icon-button (click)=\"nextClicked()\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </button>\r\n</div>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.header{display:flex;align-items:center;justify-content:space-between;padding:1rem}.select-date-label{color:var(--color-brand-dark)}button{background-color:inherit}\n"] }]
2907
- }], ctorParameters: function () { return [{ type: i6.MatCalendar }, { type: i4$1.DateAdapter }, { type: i0.ChangeDetectorRef }, { type: EcabsDatePickerHeaderService }, { type: UnsubscribeService }]; } });
2908
+ args: [{ selector: 'ecabs-picker-header', changeDetection: ChangeDetectionStrategy.OnPush, providers: [UnsubscribeService], template: "<div class=\"header\">\r\n <button mat-icon-button (click)=\"previousClicked()\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </button>\r\n <button mat-flat-button (click)=\"currentPeriodClicked()\">\r\n <span >{{ periodLabel }}</span>\r\n </button>\r\n\r\n <button mat-icon-button (click)=\"nextClicked()\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </button>\r\n</div>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-border: #FFCDC6;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-info-border: #D1D8F7;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-warning-border: #FBE5B6;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-border: #CEEAD5;--color-success-rgb: 7, 81, 69;--color-default-border: #D5E1ED;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.header{display:flex;align-items:center;justify-content:space-between;padding:1rem}.select-date-label{color:var(--color-brand-dark)}button{background-color:inherit}\n"] }]
2909
+ }], ctorParameters: function () { return [{ type: i6.MatCalendar }, { type: i4$2.DateAdapter }, { type: i0.ChangeDetectorRef }, { type: EcabsDatePickerHeaderService }, { type: UnsubscribeService }]; } });
2908
2910
 
2909
2911
  class EcabsDatePickerHeaderComponent {
2910
2912
  ecabsDatePickerHeaderService;
@@ -3058,7 +3060,7 @@ class EcabsDatePickerComponent extends EcabsElementBaseComponent {
3058
3060
  multi: true,
3059
3061
  },
3060
3062
  UnsubscribeService,
3061
- ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"form-field__input--wrapper\">\r\n <input\r\n class=\"form-field__input date-input\"\r\n [id]=\"name\"\r\n [(ngModel)]=\"value\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [matDatepicker]=\"picker\"\r\n [min]=\"minDate\"\r\n [max]=\"maxDate\"\r\n [matDatepickerFilter]=\"filterDateRange\"\r\n (blur)=\"onTouch()\"\r\n />\r\n <mat-datepicker-toggle\r\n matSuffix [for]=\"picker\"\r\n class=\"text-gray-500\"\r\n >\r\n <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\r\n </mat-datepicker-toggle>\r\n <mat-datepicker #picker\r\n [calendarHeaderComponent]=\"header\"\r\n [touchUi]=\"touchUi\"\r\n >\r\n <mat-datepicker-actions>\r\n <ecabs-date-picker-actions\r\n [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n [disabledApplyButton]=\"disabledApplyButton\"\r\n >\r\n </ecabs-date-picker-actions>\r\n </mat-datepicker-actions>\r\n </mat-datepicker>\r\n </div>\r\n</ecabs-element-wrapper>\r\n", styles: [""], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { 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: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }] });
3063
+ ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"form-field__input--wrapper\">\r\n <input\r\n class=\"form-field__input date-input\"\r\n [id]=\"name\"\r\n [(ngModel)]=\"value\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [matDatepicker]=\"picker\"\r\n [min]=\"minDate\"\r\n [max]=\"maxDate\"\r\n [matDatepickerFilter]=\"filterDateRange\"\r\n (blur)=\"onTouch()\"\r\n />\r\n <mat-datepicker-toggle\r\n matSuffix [for]=\"picker\"\r\n class=\"text-gray-500\"\r\n >\r\n <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\r\n </mat-datepicker-toggle>\r\n <mat-datepicker #picker\r\n [calendarHeaderComponent]=\"header\"\r\n [touchUi]=\"touchUi\"\r\n >\r\n <mat-datepicker-actions>\r\n <ecabs-date-picker-actions\r\n [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n [disabledApplyButton]=\"disabledApplyButton\"\r\n >\r\n </ecabs-date-picker-actions>\r\n </mat-datepicker-actions>\r\n </mat-datepicker>\r\n </div>\r\n</ecabs-element-wrapper>\r\n", styles: [""], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { 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: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }] });
3062
3064
  }
3063
3065
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDatePickerComponent, decorators: [{
3064
3066
  type: Component,
@@ -3544,7 +3546,7 @@ class EcabsDateTimePickerComponent extends EcabsElementBaseComponent {
3544
3546
  },
3545
3547
  DecimalPipe,
3546
3548
  UnsubscribeService,
3547
- ], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomInput"], descendants: true }, { propertyName: "matCustomPicker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"form-field__input--wrapper w-full\">\r\n <input\r\n class=\"fake-input\"\r\n [id]=\"_date\"\r\n [(ngModel)]=\"_date\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [matDatepicker]=\"picker\"\r\n [min]=\"minDate\"\r\n [max]=\"maxDate\"\r\n (blur)=\"onTouch()\"\r\n />\r\n <mat-datepicker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\" class=\"datepicker-ui\">\r\n <mat-datepicker-actions>\r\n <div class=\"actions\">\r\n <div class=\"time--inputs\">\r\n <input\r\n class=\"form-field__input time\"\r\n ecabsDigitsOnly\r\n ecabsNumberBorder\r\n [digitsOnly]=\"true\"\r\n [id]=\"hours\"\r\n [value]=\"_hours\"\r\n [maxValue]=\"maxValueHours\"\r\n [(ngModel)]=\"hours\"\r\n />\r\n <span class=\"font-bold\">:</span>\r\n <input\r\n class=\"form-field__input time\"\r\n [id]=\"minutes\"\r\n [(ngModel)]=\"minutes\"\r\n ecabsDigitsOnly\r\n ecabsNumberBorder\r\n [digitsOnly]=\"true\"\r\n [maxValue]=\"maxValueMinutesSeconds\"\r\n />\r\n\r\n <ng-container *ngIf=\"!hideSeconds\">\r\n <span class=\"font-bold\">:</span>\r\n <input\r\n class=\"form-field__input time\"\r\n [id]=\"seconds\"\r\n [(ngModel)]=\"seconds\"\r\n ecabsDigitsOnly\r\n ecabsNumberBorder\r\n [digitsOnly]=\"true\"\r\n [maxValue]=\"maxValueMinutesSeconds\"\r\n />\r\n </ng-container>\r\n </div>\r\n\r\n <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n (apply)=\"onApply()\">\r\n </ecabs-date-picker-actions>\r\n </div>\r\n </mat-datepicker-actions>\r\n </mat-datepicker>\r\n <input #matCustomInput\r\n class=\"form-field__input w-full date-input\"\r\n [id]=\"name\"\r\n [(ngModel)]=\"pickerValue\"\r\n placeholder=\"dd/MM/yyyy, HH:mm\"\r\n [disabled]=\"disabled\"\r\n ecabsMaskDate\r\n [isDateTimeMask]=\"true\"\r\n [considerSeconds]=\"!hideSeconds\"\r\n (blur)=\"onTouch()\"\r\n />\r\n\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n <mat-icon matDatepickerToggleIcon\r\n class=\"text-gray-500\">\r\n calendar_today\r\n </mat-icon>\r\n </mat-datepicker-toggle>\r\n </div>\r\n</ecabs-element-wrapper>\r\n", styles: [".time--inputs:before,.time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0;margin:0}.time--inputs{position:relative;display:flex;gap:.5rem;justify-content:center;align-items:center;margin-top:2.4rem;margin-bottom:2.4rem}.time--inputs:before,.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300)}.time--inputs:before{top:-1.6rem}.time--inputs:after{bottom:-1.6rem}.font-bold{font-weight:700}.actions{display:flex;flex-direction:column;width:100%!important;row-gap:1rem}\n"], dependencies: [{ 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: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { 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: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "allowRange", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsNumberBorderDirective, selector: "[ecabsNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "directive", type: EcabsMaskDateDirective, selector: "[ecabsMaskDate]", inputs: ["isDateTimeMask", "considerSeconds"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }] });
3549
+ ], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomInput"], descendants: true }, { propertyName: "matCustomPicker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"form-field__input--wrapper w-full\">\r\n <input\r\n class=\"fake-input\"\r\n [id]=\"_date\"\r\n [(ngModel)]=\"_date\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [matDatepicker]=\"picker\"\r\n [min]=\"minDate\"\r\n [max]=\"maxDate\"\r\n (blur)=\"onTouch()\"\r\n />\r\n <mat-datepicker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\" class=\"datepicker-ui\">\r\n <mat-datepicker-actions>\r\n <div class=\"actions\">\r\n <div class=\"time--inputs\">\r\n <input\r\n class=\"form-field__input time\"\r\n ecabsDigitsOnly\r\n ecabsNumberBorder\r\n [digitsOnly]=\"true\"\r\n [id]=\"hours\"\r\n [value]=\"_hours\"\r\n [maxValue]=\"maxValueHours\"\r\n [(ngModel)]=\"hours\"\r\n />\r\n <span class=\"font-bold\">:</span>\r\n <input\r\n class=\"form-field__input time\"\r\n [id]=\"minutes\"\r\n [(ngModel)]=\"minutes\"\r\n ecabsDigitsOnly\r\n ecabsNumberBorder\r\n [digitsOnly]=\"true\"\r\n [maxValue]=\"maxValueMinutesSeconds\"\r\n />\r\n\r\n <ng-container *ngIf=\"!hideSeconds\">\r\n <span class=\"font-bold\">:</span>\r\n <input\r\n class=\"form-field__input time\"\r\n [id]=\"seconds\"\r\n [(ngModel)]=\"seconds\"\r\n ecabsDigitsOnly\r\n ecabsNumberBorder\r\n [digitsOnly]=\"true\"\r\n [maxValue]=\"maxValueMinutesSeconds\"\r\n />\r\n </ng-container>\r\n </div>\r\n\r\n <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n (apply)=\"onApply()\">\r\n </ecabs-date-picker-actions>\r\n </div>\r\n </mat-datepicker-actions>\r\n </mat-datepicker>\r\n <input #matCustomInput\r\n class=\"form-field__input w-full date-input\"\r\n [id]=\"name\"\r\n [(ngModel)]=\"pickerValue\"\r\n placeholder=\"dd/MM/yyyy, HH:mm\"\r\n [disabled]=\"disabled\"\r\n ecabsMaskDate\r\n [isDateTimeMask]=\"true\"\r\n [considerSeconds]=\"!hideSeconds\"\r\n (blur)=\"onTouch()\"\r\n />\r\n\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n <mat-icon matDatepickerToggleIcon\r\n class=\"text-gray-500\">\r\n calendar_today\r\n </mat-icon>\r\n </mat-datepicker-toggle>\r\n </div>\r\n</ecabs-element-wrapper>\r\n", styles: [".time--inputs:before,.time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0;margin:0}.time--inputs{position:relative;display:flex;gap:.5rem;justify-content:center;align-items:center;margin-top:2.4rem;margin-bottom:2.4rem}.time--inputs:before,.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300)}.time--inputs:before{top:-1.6rem}.time--inputs:after{bottom:-1.6rem}.font-bold{font-weight:700}.actions{display:flex;flex-direction:column;width:100%!important;row-gap:1rem}\n"], dependencies: [{ 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: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { 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: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "allowRange", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsNumberBorderDirective, selector: "[ecabsNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "directive", type: EcabsMaskDateDirective, selector: "[ecabsMaskDate]", inputs: ["isDateTimeMask", "considerSeconds"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }] });
3548
3550
  }
3549
3551
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateTimePickerComponent, decorators: [{
3550
3552
  type: Component,
@@ -3880,7 +3882,7 @@ class EcabsDateRangePickerComponent extends EcabsElementBaseComponent {
3880
3882
  multi: true,
3881
3883
  },
3882
3884
  UnsubscribeService,
3883
- ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"form-field__input--wrapper\">\r\n <mat-date-range-input \r\n [rangePicker]=\"picker\" \r\n [min]=\"minDate\"\r\n [max]=\"maxDate\" \r\n (blur)=\"onTouch()\">\r\n <input matStartDate class=\"form-field__input\" [placeholder]=\"startDatePlaceholder ?? translationConfig?.startDatePlaceholder\" [value]=\"dateFrom\" [(ngModel)]=\"dateFrom\" />\r\n <input matEndDate class=\"form-field__input\" [placeholder]=\"endDatePlaceholder ?? translationConfig?.endDatePlaceholder\" [value]=\"dateTo\" [(ngModel)]=\"dateTo\" />\r\n </mat-date-range-input>\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n <mat-icon matDatepickerToggleIcon class=\"text-gray-500\">calendar_today</mat-icon>\r\n </mat-datepicker-toggle>\r\n <mat-date-range-picker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\">\r\n <mat-datepicker-actions>\r\n <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n [isDateRange]=\"true\"\r\n [disabledApplyButton]=\"disabledApplyButton\"\r\n (apply)=\"onApply()\">\r\n </ecabs-date-picker-actions>\r\n </mat-datepicker-actions>\r\n </mat-date-range-picker>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.header{display:flex;align-items:center;padding:.5em}.datepicker-ui__toggle.mat-mdc-icon-button.mat-mdc-button-base,.mat-mdc-icon-button.mat-mdc-button-base.mat-datepicker-toggle{padding:0;width:2.5rem;height:2.5rem;line-height:2}.header-label{flex:1;height:1em;font-weight:500;text-align:center}.select-date-label{color:var(--color-brand-dark);padding-top:1.6rem;padding-left:1.6rem}.mat-calendar-table .mat-calendar-body tr:first-child[aria-hidden=true]{display:none}.mat-calendar-body-label{visibility:hidden}.mat-calendar-body-cell-content{border-radius:.25rem!important}.mat-calendar-body-active .mat-calendar-body-today{color:var(--color-brand-light)!important;background-color:var(--color-brand-light2)!important}.mat-calendar{align-self:center}.mat-calendar .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--color-brand-light2);color:var(--color-black)}.mat-calendar .mat-calendar-body-cell.mat-calendar-body-active .mat-calendar-body-cell-content.mat-calendar-body-selected,.mat-calendar .mat-calendar-body-cell.mat-calendar-body-active:hover .mat-calendar-body-cell-content.mat-calendar-body-selected{background-color:var(--color-brand-light)!important;color:var(--color-white)!important}.mat-calendar .mat-calendar-body-selected{background-color:var(--color-brand-light);color:var(--color-white)!important}.mat-calendar .mat-calendar-body-selected .mat-calendar-body-today{color:var(--color-white)!important}.mat-calendar .mat-calendar-table-header,.mat-calendar .mat-calendar-body-label{color:var(--color-gray-500)}.mat-calendar .mat-calendar-body-cell>.mat-calendar-body-today{opacity:1}.mat-calendar .mat-calendar-body-cell-content,.mat-calendar .mat-date-range-input-separator{color:var(--color-black)}.mat-calendar .mat-calendar-content{padding:0 1.6rem}.mat-calendar .mat-calendar-table-header th{font-size:16px;font-size:1rem}.mat-calendar .mat-calendar-table-header-divider:after{display:none}.mat-calendar .mat-calendar-body{font-size:16px;font-size:1rem}.mat-calendar .mat-calendar-body-in-range:before{background-color:var(--color-brand-light2)}.mat-calendar .mat-calendar-body-in-range .mat-calendar-body-cell-content{color:var(--color-black)!important}.mat-calendar .mat-calendar-body-range-start .mat-calendar-body-cell-content,.mat-calendar .mat-calendar-body-range-end .mat-calendar-body-cell-content{color:var(--color-white)!important}.mat-datepicker-popup .mat-datepicker-content{color:var(--color-black);box-shadow:0 0 25px #0003}.mat-datepicker-popup .mat-datepicker-actions{display:unset;margin-top:1rem;padding:0 1.6rem 1.6rem}.mat-datepicker-popup .mat-datepicker-actions .mat-button-base+.mat-button-base{margin-left:unset}.mat-datepicker-popup .mat-datepicker-actions button.mat-button-base{min-width:100%}.mat-datepicker-popup .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:var(--color-gray-300)}.ecabs-date-range-picker-v2 .mat-calendar-content{padding:0 1.6rem 1.6rem}ecabs-date-range-picker-v2 .mat-datepicker-input{text-align:center}ecabs-date-range-picker-v2 input{border:none;box-shadow:none}ecabs-date-range-picker-v2 input:focus{outline:none;box-shadow:none}.datepicker-ui__toggle,.mat-datepicker-toggle{position:absolute!important;right:0;line-height:1.25;padding:0}.datepicker-ui__toggle mat-icon,.mat-datepicker-toggle mat-icon{color:var(--color-gray-500)}ecabs-date-picker .dateTimeWrapper{position:relative;display:flex;width:100%}ecabs-date-picker .dateTimeWrapper .datePart{flex:2}ecabs-date-picker .dateTimeWrapper .timePart{flex:1;padding-left:10px;vertical-align:top;max-width:10rem}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker .timeInputWrapper{display:block}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker{width:100%}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker .inputWrapper{display:block}ecabs-date-picker .dateTimeWrapper .dateInputWrapper{position:relative}ecabs-date-picker .dateTimeWrapper input{min-height:42px;width:100%;display:block;box-sizing:border-box;font-size:14px;font-weight:500;padding-left:10px;border-radius:4px;border:1px solid rgb(107,109,115);outline:none;transition:all .3s ease-in-out}ecabs-date-picker .dateTimeWrapper input:disabled{border-bottom-width:1px;background-color:var(--color-white-opacity-05)}ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-calendar-picker-indicator,ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-inner-spin-button{display:none}ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-clear-button{display:none}ecabs-date-picker .dateTimeWrapper .calendar-icon{float:right;margin-top:-38px;padding:5px 10px 5px 5px;display:block;font-size:13px;line-height:20px;color:var(--color-gray-500);position:relative;width:40px;height:30px;cursor:pointer;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjQuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0OCA0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNkI2RDczO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTksNDRjLTAuOCwwLTEuNS0wLjMtMi4xLTAuOUM2LjMsNDIuNSw2LDQxLjgsNiw0MVYxMGMwLTAuOCwwLjMtMS41LDAuOS0yLjFTOC4yLDcsOSw3aDMuMlY0aDMuMnYzaDE3VjRoMy4ydjMKCUgzOWMwLjgsMCwxLjUsMC4zLDIuMSwwLjlDNDEuNyw4LjUsNDIsOS4yLDQyLDEwdjMxYzAsMC44LTAuMywxLjUtMC45LDIuMUM0MC41LDQzLjcsMzkuOCw0NCwzOSw0NEg5eiBNOSw0MWgzMGwwLDBsMCwwVjE5LjVIOVY0MQoJTDksNDFMOSw0MXogTTksMTYuNWgzMFYxMGwwLDBsMCwwSDlsMCwwbDAsMFYxNi41eiBNOSwxNi41VjEwbDAsMGwwLDBsMCwwbDAsMFYxNi41eiIvPgo8L3N2Zz4K);background-position:center center;background-repeat:no-repeat;background-size:1.375rem}ecabs-date-picker .dateTimeWrapper .calendar-icon.disabled{cursor:not-allowed}ecabs-date-picker .ecabs-element-wrapper.focused label{color:#376bfb}ecabs-date-picker .ecabs-element-wrapper.focused input{border-bottom-width:2px;border-bottom-color:#376bfb}ecabs-date-picker .ecabs-element-wrapper.validationError label{color:#ff4c4c}ecabs-date-picker .ecabs-element-wrapper.validationError input{border-bottom-color:#ff4c4c;border-bottom-width:2px}.ng-mydp .myDpSelector{border:0;padding:0;box-shadow:0 4px 6px #162a4c14,0 2px 16px #162a4c0f,0 8px 12px #162a4c0a;border-radius:0 0 4px 4px;background:#fff}.ng-mydp .myDpSelector:focus{box-shadow:0 4px 6px #162a4c14,0 2px 16px #162a4c0f,0 8px 12px #162a4c0a}.ng-mydp .myDpSelector .myDpWeekDayTitle{background-color:#fff;font-weight:500;font-size:11px;color:#162a4cb3}.ng-mydp .myDpSelector .myDpNextBtn{margin-left:auto;margin-right:16px}.ng-mydp .myDpSelector .myDpNextBtn .myDpIconRightArrow{line-height:26px;height:25px}.ng-mydp .myDpSelector .myDpNextBtn .myDpIconRightArrow:before{color:#376bfb;font-size:13px}.ng-mydp .myDpSelector .myDpPrevBtn{margin-left:16px}.ng-mydp .myDpSelector .myDpPrevBtn .myDpIconLeftArrow{line-height:26px;height:25px}.ng-mydp .myDpSelector .myDpPrevBtn .myDpIconLeftArrow:before{color:#376bfb;font-size:13px}.ng-mydp .myDpSelector .myDpMonthYearSelBar{height:52px;padding-top:10px;border:0}.ng-mydp .myDpSelector .myDpMonthYearText button{font-weight:500;font-size:13px;line-height:20px;color:#376bfb}.ng-mydp .myDpSelector .myDpMonthYearText .myDpMonthBtn{padding-right:7px;position:relative;margin-right:15px}.ng-mydp .myDpSelector .myDpMonthYearText .myDpMonthBtn:after{position:absolute;content:\"\";height:14px;width:1px;right:-7px;top:6px;background:#162a4c80}.ng-mydp .myDpSelector .myDpMonthYearText .myDpYearBtn{padding-left:6px}.ng-mydp .myDpSelector .myDpCalTable{height:calc(100% - 54px);width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDayValue{border-radius:4px;background:#f0f2f5;display:inline-block;box-sizing:border-box;width:32px;height:28px;font-size:13px;line-height:28px;text-align:center;color:#162a4ce6}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDayValue.myDpMarkCurrDay{border-bottom:0;color:#376bfb}.ng-mydp .myDpSelector table.myDpCalTable td.myDpSelectedDay .myDpDayValue{color:#fff!important;background:#6ab72a!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled .myDpDayValue{background:unset!important;color:#162a4c80;cursor:not-allowed}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled .myDpDayValue:hover{background:unset!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor{background-color:#fff}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor .myDpDayValue{background:#bee39d!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor.myDpSelectedDay .myDpDayValue{color:#fff!important;background:#6ab72a!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDaycell:focus{box-shadow:unset;outline:unset}.ng-mydp .myDpSelector table.myDpCalTable td.myDpPrevMonth .myDpDayValue,.ng-mydp .myDpSelector table.myDpCalTable td.myDpNextMonth .myDpDayValue{background:#f6f7f9;color:#162a4c80}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDimDay{opacity:1}.ng-mydp .myDpSelector table.myDpCalTable .myDpTableSingleDay:hover{background-color:#fff}.ng-mydp .myDpSelector table.myDpCalTable .myDpTableSingleDay:hover .myDpDayValue{background:#bee39d;color:#162a4ce6}.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedDay,.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedMonth,.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedYear{background-color:#fff;border-radius:0}.ng-mydp .myDpSelector .myDpMonthTable{height:128px;width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue{display:inline-block;height:28px;width:80px;background:#f0f2f5;vertical-align:middle;text-align:center;line-height:28px;font-weight:400;font-size:13px;color:#162a4ce6;border-radius:4px}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue.myDpMarkCurrMonth{border:0;color:#376bfb}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue:hover{background:#bee39d}.ng-mydp .myDpSelector .myDpMonthTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector .myDpMonthTable td.myDpDisabled .myDpMonthValue{background:unset!important;color:#162a4c80!important;cursor:not-allowed}.ng-mydp .myDpSelector .myDpMonthTable td.myDpSelectedMonth{background-color:#fff}.ng-mydp .myDpSelector .myDpMonthTable td.myDpSelectedMonth .myDpMonthValue{background:#6ab72a!important;color:#fff!important}.ng-mydp .myDpSelector .myDpMonthTable td.myDpTableSingleMonth:hover{background-color:#fff}.ng-mydp .myDpSelector .myDpYearTable{height:160px;width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue{display:inline-block;height:28px;width:46px;background:#f0f2f5;vertical-align:middle;text-align:center;line-height:28px;font-weight:400;font-size:13px;color:#162a4ce6;border-radius:4px}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue.myDpMarkCurrYear{border:0;color:#376bfb}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue:hover{background:#bee39d}.ng-mydp .myDpSelector .myDpYearTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector .myDpYearTable td.myDpDisabled .myDpYearValue{background:unset!important;color:#162a4c80!important;cursor:not-allowed}.ng-mydp .myDpSelector .myDpYearTable td.myDpSelectedYear{background-color:#fff}.ng-mydp .myDpSelector .myDpYearTable td.myDpSelectedYear .myDpYearValue{background:#6ab72a!important;color:#fff!important}.ng-mydp .myDpSelector .myDpYearTable td.myDpTableSingleYear:hover{background-color:#fff}.ng-mydp .myDpSelectorArrow{height:272px!important;width:268px!important;margin-top:-12px}.ng-mydp .myDpSelectorArrow:after{display:none}.ng-mydp .myDpSelectorArrow:before{display:none}:root{--mat-standard-button-toggle-shape: .5rem;--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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.mat-date-range-input{display:block;width:100%;padding:.5rem 1rem;border-radius:.25rem;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}:host ::ng-deep .mat-mdc-icon-button{max-width:2.5rem;max-height:2.5rem}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i6.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i6.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i6.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { 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: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }] });
3885
+ ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"form-field__input--wrapper\">\r\n <mat-date-range-input \r\n [rangePicker]=\"picker\" \r\n [min]=\"minDate\"\r\n [max]=\"maxDate\" \r\n (blur)=\"onTouch()\">\r\n <input matStartDate class=\"form-field__input\" [placeholder]=\"startDatePlaceholder ?? translationConfig?.startDatePlaceholder\" [value]=\"dateFrom\" [(ngModel)]=\"dateFrom\" />\r\n <input matEndDate class=\"form-field__input\" [placeholder]=\"endDatePlaceholder ?? translationConfig?.endDatePlaceholder\" [value]=\"dateTo\" [(ngModel)]=\"dateTo\" />\r\n </mat-date-range-input>\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n <mat-icon matDatepickerToggleIcon class=\"text-gray-500\">calendar_today</mat-icon>\r\n </mat-datepicker-toggle>\r\n <mat-date-range-picker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\">\r\n <mat-datepicker-actions>\r\n <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n [isDateRange]=\"true\"\r\n [disabledApplyButton]=\"disabledApplyButton\"\r\n (apply)=\"onApply()\">\r\n </ecabs-date-picker-actions>\r\n </mat-datepicker-actions>\r\n </mat-date-range-picker>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-border: #FFCDC6;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-info-border: #D1D8F7;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-warning-border: #FBE5B6;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-border: #CEEAD5;--color-success-rgb: 7, 81, 69;--color-default-border: #D5E1ED;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.header{display:flex;align-items:center;padding:.5em}.datepicker-ui__toggle.mat-mdc-icon-button.mat-mdc-button-base,.mat-mdc-icon-button.mat-mdc-button-base.mat-datepicker-toggle{padding:0;width:2.5rem;height:2.5rem;line-height:2}.header-label{flex:1;height:1em;font-weight:500;text-align:center}.select-date-label{color:var(--color-brand-dark);padding-top:1.6rem;padding-left:1.6rem}.mat-calendar-table .mat-calendar-body tr:first-child[aria-hidden=true]{display:none}.mat-calendar-body-label{visibility:hidden}.mat-calendar-body-cell-content{border-radius:.25rem!important}.mat-calendar-body-active .mat-calendar-body-today{color:var(--color-brand-light)!important;background-color:var(--color-brand-light2)!important}.mat-calendar{align-self:center}.mat-calendar .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--color-brand-light2);color:var(--color-black)}.mat-calendar .mat-calendar-body-cell.mat-calendar-body-active .mat-calendar-body-cell-content.mat-calendar-body-selected,.mat-calendar .mat-calendar-body-cell.mat-calendar-body-active:hover .mat-calendar-body-cell-content.mat-calendar-body-selected{background-color:var(--color-brand-light)!important;color:var(--color-white)!important}.mat-calendar .mat-calendar-body-selected{background-color:var(--color-brand-light);color:var(--color-white)!important}.mat-calendar .mat-calendar-body-selected .mat-calendar-body-today{color:var(--color-white)!important}.mat-calendar .mat-calendar-table-header,.mat-calendar .mat-calendar-body-label{color:var(--color-gray-500)}.mat-calendar .mat-calendar-body-cell>.mat-calendar-body-today{opacity:1}.mat-calendar .mat-calendar-body-cell-content,.mat-calendar .mat-date-range-input-separator{color:var(--color-black)}.mat-calendar .mat-calendar-content{padding:0 1.6rem}.mat-calendar .mat-calendar-table-header th{font-size:16px;font-size:1rem}.mat-calendar .mat-calendar-table-header-divider:after{display:none}.mat-calendar .mat-calendar-body{font-size:16px;font-size:1rem}.mat-calendar .mat-calendar-body-in-range:before{background-color:var(--color-brand-light2)}.mat-calendar .mat-calendar-body-in-range .mat-calendar-body-cell-content{color:var(--color-black)!important}.mat-calendar .mat-calendar-body-range-start .mat-calendar-body-cell-content,.mat-calendar .mat-calendar-body-range-end .mat-calendar-body-cell-content{color:var(--color-white)!important}.mat-datepicker-popup .mat-datepicker-content{color:var(--color-black);box-shadow:0 0 25px #0003}.mat-datepicker-popup .mat-datepicker-actions{display:unset;margin-top:1rem;padding:0 1.6rem 1.6rem}.mat-datepicker-popup .mat-datepicker-actions .mat-button-base+.mat-button-base{margin-left:unset}.mat-datepicker-popup .mat-datepicker-actions button.mat-button-base{min-width:100%}.mat-datepicker-popup .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:var(--color-gray-300)}.ecabs-date-range-picker-v2 .mat-calendar-content{padding:0 1.6rem 1.6rem}ecabs-date-range-picker-v2 .mat-datepicker-input{text-align:center}ecabs-date-range-picker-v2 input{border:none;box-shadow:none}ecabs-date-range-picker-v2 input:focus{outline:none;box-shadow:none}.datepicker-ui__toggle,.mat-datepicker-toggle{position:absolute!important;right:0;line-height:1.25;padding:0}.datepicker-ui__toggle mat-icon,.mat-datepicker-toggle mat-icon{color:var(--color-gray-500)}ecabs-date-picker .dateTimeWrapper{position:relative;display:flex;width:100%}ecabs-date-picker .dateTimeWrapper .datePart{flex:2}ecabs-date-picker .dateTimeWrapper .timePart{flex:1;padding-left:10px;vertical-align:top;max-width:10rem}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker .timeInputWrapper{display:block}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker{width:100%}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker .inputWrapper{display:block}ecabs-date-picker .dateTimeWrapper .dateInputWrapper{position:relative}ecabs-date-picker .dateTimeWrapper input{min-height:42px;width:100%;display:block;box-sizing:border-box;font-size:14px;font-weight:500;padding-left:10px;border-radius:4px;border:1px solid rgb(107,109,115);outline:none;transition:all .3s ease-in-out}ecabs-date-picker .dateTimeWrapper input:disabled{border-bottom-width:1px;background-color:var(--color-white-opacity-05)}ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-calendar-picker-indicator,ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-inner-spin-button{display:none}ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-clear-button{display:none}ecabs-date-picker .dateTimeWrapper .calendar-icon{float:right;margin-top:-38px;padding:5px 10px 5px 5px;display:block;font-size:13px;line-height:20px;color:var(--color-gray-500);position:relative;width:40px;height:30px;cursor:pointer;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjQuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0OCA0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNkI2RDczO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTksNDRjLTAuOCwwLTEuNS0wLjMtMi4xLTAuOUM2LjMsNDIuNSw2LDQxLjgsNiw0MVYxMGMwLTAuOCwwLjMtMS41LDAuOS0yLjFTOC4yLDcsOSw3aDMuMlY0aDMuMnYzaDE3VjRoMy4ydjMKCUgzOWMwLjgsMCwxLjUsMC4zLDIuMSwwLjlDNDEuNyw4LjUsNDIsOS4yLDQyLDEwdjMxYzAsMC44LTAuMywxLjUtMC45LDIuMUM0MC41LDQzLjcsMzkuOCw0NCwzOSw0NEg5eiBNOSw0MWgzMGwwLDBsMCwwVjE5LjVIOVY0MQoJTDksNDFMOSw0MXogTTksMTYuNWgzMFYxMGwwLDBsMCwwSDlsMCwwbDAsMFYxNi41eiBNOSwxNi41VjEwbDAsMGwwLDBsMCwwbDAsMFYxNi41eiIvPgo8L3N2Zz4K);background-position:center center;background-repeat:no-repeat;background-size:1.375rem}ecabs-date-picker .dateTimeWrapper .calendar-icon.disabled{cursor:not-allowed}ecabs-date-picker .ecabs-element-wrapper.focused label{color:#376bfb}ecabs-date-picker .ecabs-element-wrapper.focused input{border-bottom-width:2px;border-bottom-color:#376bfb}ecabs-date-picker .ecabs-element-wrapper.validationError label{color:#ff4c4c}ecabs-date-picker .ecabs-element-wrapper.validationError input{border-bottom-color:#ff4c4c;border-bottom-width:2px}.ng-mydp .myDpSelector{border:0;padding:0;box-shadow:0 4px 6px #162a4c14,0 2px 16px #162a4c0f,0 8px 12px #162a4c0a;border-radius:0 0 4px 4px;background:#fff}.ng-mydp .myDpSelector:focus{box-shadow:0 4px 6px #162a4c14,0 2px 16px #162a4c0f,0 8px 12px #162a4c0a}.ng-mydp .myDpSelector .myDpWeekDayTitle{background-color:#fff;font-weight:500;font-size:11px;color:#162a4cb3}.ng-mydp .myDpSelector .myDpNextBtn{margin-left:auto;margin-right:16px}.ng-mydp .myDpSelector .myDpNextBtn .myDpIconRightArrow{line-height:26px;height:25px}.ng-mydp .myDpSelector .myDpNextBtn .myDpIconRightArrow:before{color:#376bfb;font-size:13px}.ng-mydp .myDpSelector .myDpPrevBtn{margin-left:16px}.ng-mydp .myDpSelector .myDpPrevBtn .myDpIconLeftArrow{line-height:26px;height:25px}.ng-mydp .myDpSelector .myDpPrevBtn .myDpIconLeftArrow:before{color:#376bfb;font-size:13px}.ng-mydp .myDpSelector .myDpMonthYearSelBar{height:52px;padding-top:10px;border:0}.ng-mydp .myDpSelector .myDpMonthYearText button{font-weight:500;font-size:13px;line-height:20px;color:#376bfb}.ng-mydp .myDpSelector .myDpMonthYearText .myDpMonthBtn{padding-right:7px;position:relative;margin-right:15px}.ng-mydp .myDpSelector .myDpMonthYearText .myDpMonthBtn:after{position:absolute;content:\"\";height:14px;width:1px;right:-7px;top:6px;background:#162a4c80}.ng-mydp .myDpSelector .myDpMonthYearText .myDpYearBtn{padding-left:6px}.ng-mydp .myDpSelector .myDpCalTable{height:calc(100% - 54px);width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDayValue{border-radius:4px;background:#f0f2f5;display:inline-block;box-sizing:border-box;width:32px;height:28px;font-size:13px;line-height:28px;text-align:center;color:#162a4ce6}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDayValue.myDpMarkCurrDay{border-bottom:0;color:#376bfb}.ng-mydp .myDpSelector table.myDpCalTable td.myDpSelectedDay .myDpDayValue{color:#fff!important;background:#6ab72a!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled .myDpDayValue{background:unset!important;color:#162a4c80;cursor:not-allowed}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled .myDpDayValue:hover{background:unset!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor{background-color:#fff}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor .myDpDayValue{background:#bee39d!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor.myDpSelectedDay .myDpDayValue{color:#fff!important;background:#6ab72a!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDaycell:focus{box-shadow:unset;outline:unset}.ng-mydp .myDpSelector table.myDpCalTable td.myDpPrevMonth .myDpDayValue,.ng-mydp .myDpSelector table.myDpCalTable td.myDpNextMonth .myDpDayValue{background:#f6f7f9;color:#162a4c80}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDimDay{opacity:1}.ng-mydp .myDpSelector table.myDpCalTable .myDpTableSingleDay:hover{background-color:#fff}.ng-mydp .myDpSelector table.myDpCalTable .myDpTableSingleDay:hover .myDpDayValue{background:#bee39d;color:#162a4ce6}.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedDay,.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedMonth,.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedYear{background-color:#fff;border-radius:0}.ng-mydp .myDpSelector .myDpMonthTable{height:128px;width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue{display:inline-block;height:28px;width:80px;background:#f0f2f5;vertical-align:middle;text-align:center;line-height:28px;font-weight:400;font-size:13px;color:#162a4ce6;border-radius:4px}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue.myDpMarkCurrMonth{border:0;color:#376bfb}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue:hover{background:#bee39d}.ng-mydp .myDpSelector .myDpMonthTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector .myDpMonthTable td.myDpDisabled .myDpMonthValue{background:unset!important;color:#162a4c80!important;cursor:not-allowed}.ng-mydp .myDpSelector .myDpMonthTable td.myDpSelectedMonth{background-color:#fff}.ng-mydp .myDpSelector .myDpMonthTable td.myDpSelectedMonth .myDpMonthValue{background:#6ab72a!important;color:#fff!important}.ng-mydp .myDpSelector .myDpMonthTable td.myDpTableSingleMonth:hover{background-color:#fff}.ng-mydp .myDpSelector .myDpYearTable{height:160px;width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue{display:inline-block;height:28px;width:46px;background:#f0f2f5;vertical-align:middle;text-align:center;line-height:28px;font-weight:400;font-size:13px;color:#162a4ce6;border-radius:4px}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue.myDpMarkCurrYear{border:0;color:#376bfb}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue:hover{background:#bee39d}.ng-mydp .myDpSelector .myDpYearTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector .myDpYearTable td.myDpDisabled .myDpYearValue{background:unset!important;color:#162a4c80!important;cursor:not-allowed}.ng-mydp .myDpSelector .myDpYearTable td.myDpSelectedYear{background-color:#fff}.ng-mydp .myDpSelector .myDpYearTable td.myDpSelectedYear .myDpYearValue{background:#6ab72a!important;color:#fff!important}.ng-mydp .myDpSelector .myDpYearTable td.myDpTableSingleYear:hover{background-color:#fff}.ng-mydp .myDpSelectorArrow{height:272px!important;width:268px!important;margin-top:-12px}.ng-mydp .myDpSelectorArrow:after{display:none}.ng-mydp .myDpSelectorArrow:before{display:none}:root{--mat-standard-button-toggle-shape: .5rem;--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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-border: #FFCDC6;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-info-border: #D1D8F7;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-warning-border: #FBE5B6;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-border: #CEEAD5;--color-success-rgb: 7, 81, 69;--color-default-border: #D5E1ED;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.mat-date-range-input{display:block;width:100%;padding:.5rem 1rem;border-radius:.25rem;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}:host ::ng-deep .mat-mdc-icon-button{max-width:2.5rem;max-height:2.5rem}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i6.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i6.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i6.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { 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: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }] });
3884
3886
  }
3885
3887
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateRangePickerComponent, decorators: [{
3886
3888
  type: Component,
@@ -3896,7 +3898,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
3896
3898
  multi: true,
3897
3899
  },
3898
3900
  UnsubscribeService,
3899
- ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"form-field__input--wrapper\">\r\n <mat-date-range-input \r\n [rangePicker]=\"picker\" \r\n [min]=\"minDate\"\r\n [max]=\"maxDate\" \r\n (blur)=\"onTouch()\">\r\n <input matStartDate class=\"form-field__input\" [placeholder]=\"startDatePlaceholder ?? translationConfig?.startDatePlaceholder\" [value]=\"dateFrom\" [(ngModel)]=\"dateFrom\" />\r\n <input matEndDate class=\"form-field__input\" [placeholder]=\"endDatePlaceholder ?? translationConfig?.endDatePlaceholder\" [value]=\"dateTo\" [(ngModel)]=\"dateTo\" />\r\n </mat-date-range-input>\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n <mat-icon matDatepickerToggleIcon class=\"text-gray-500\">calendar_today</mat-icon>\r\n </mat-datepicker-toggle>\r\n <mat-date-range-picker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\">\r\n <mat-datepicker-actions>\r\n <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n [isDateRange]=\"true\"\r\n [disabledApplyButton]=\"disabledApplyButton\"\r\n (apply)=\"onApply()\">\r\n </ecabs-date-picker-actions>\r\n </mat-datepicker-actions>\r\n </mat-date-range-picker>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.header{display:flex;align-items:center;padding:.5em}.datepicker-ui__toggle.mat-mdc-icon-button.mat-mdc-button-base,.mat-mdc-icon-button.mat-mdc-button-base.mat-datepicker-toggle{padding:0;width:2.5rem;height:2.5rem;line-height:2}.header-label{flex:1;height:1em;font-weight:500;text-align:center}.select-date-label{color:var(--color-brand-dark);padding-top:1.6rem;padding-left:1.6rem}.mat-calendar-table .mat-calendar-body tr:first-child[aria-hidden=true]{display:none}.mat-calendar-body-label{visibility:hidden}.mat-calendar-body-cell-content{border-radius:.25rem!important}.mat-calendar-body-active .mat-calendar-body-today{color:var(--color-brand-light)!important;background-color:var(--color-brand-light2)!important}.mat-calendar{align-self:center}.mat-calendar .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--color-brand-light2);color:var(--color-black)}.mat-calendar .mat-calendar-body-cell.mat-calendar-body-active .mat-calendar-body-cell-content.mat-calendar-body-selected,.mat-calendar .mat-calendar-body-cell.mat-calendar-body-active:hover .mat-calendar-body-cell-content.mat-calendar-body-selected{background-color:var(--color-brand-light)!important;color:var(--color-white)!important}.mat-calendar .mat-calendar-body-selected{background-color:var(--color-brand-light);color:var(--color-white)!important}.mat-calendar .mat-calendar-body-selected .mat-calendar-body-today{color:var(--color-white)!important}.mat-calendar .mat-calendar-table-header,.mat-calendar .mat-calendar-body-label{color:var(--color-gray-500)}.mat-calendar .mat-calendar-body-cell>.mat-calendar-body-today{opacity:1}.mat-calendar .mat-calendar-body-cell-content,.mat-calendar .mat-date-range-input-separator{color:var(--color-black)}.mat-calendar .mat-calendar-content{padding:0 1.6rem}.mat-calendar .mat-calendar-table-header th{font-size:16px;font-size:1rem}.mat-calendar .mat-calendar-table-header-divider:after{display:none}.mat-calendar .mat-calendar-body{font-size:16px;font-size:1rem}.mat-calendar .mat-calendar-body-in-range:before{background-color:var(--color-brand-light2)}.mat-calendar .mat-calendar-body-in-range .mat-calendar-body-cell-content{color:var(--color-black)!important}.mat-calendar .mat-calendar-body-range-start .mat-calendar-body-cell-content,.mat-calendar .mat-calendar-body-range-end .mat-calendar-body-cell-content{color:var(--color-white)!important}.mat-datepicker-popup .mat-datepicker-content{color:var(--color-black);box-shadow:0 0 25px #0003}.mat-datepicker-popup .mat-datepicker-actions{display:unset;margin-top:1rem;padding:0 1.6rem 1.6rem}.mat-datepicker-popup .mat-datepicker-actions .mat-button-base+.mat-button-base{margin-left:unset}.mat-datepicker-popup .mat-datepicker-actions button.mat-button-base{min-width:100%}.mat-datepicker-popup .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:var(--color-gray-300)}.ecabs-date-range-picker-v2 .mat-calendar-content{padding:0 1.6rem 1.6rem}ecabs-date-range-picker-v2 .mat-datepicker-input{text-align:center}ecabs-date-range-picker-v2 input{border:none;box-shadow:none}ecabs-date-range-picker-v2 input:focus{outline:none;box-shadow:none}.datepicker-ui__toggle,.mat-datepicker-toggle{position:absolute!important;right:0;line-height:1.25;padding:0}.datepicker-ui__toggle mat-icon,.mat-datepicker-toggle mat-icon{color:var(--color-gray-500)}ecabs-date-picker .dateTimeWrapper{position:relative;display:flex;width:100%}ecabs-date-picker .dateTimeWrapper .datePart{flex:2}ecabs-date-picker .dateTimeWrapper .timePart{flex:1;padding-left:10px;vertical-align:top;max-width:10rem}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker .timeInputWrapper{display:block}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker{width:100%}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker .inputWrapper{display:block}ecabs-date-picker .dateTimeWrapper .dateInputWrapper{position:relative}ecabs-date-picker .dateTimeWrapper input{min-height:42px;width:100%;display:block;box-sizing:border-box;font-size:14px;font-weight:500;padding-left:10px;border-radius:4px;border:1px solid rgb(107,109,115);outline:none;transition:all .3s ease-in-out}ecabs-date-picker .dateTimeWrapper input:disabled{border-bottom-width:1px;background-color:var(--color-white-opacity-05)}ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-calendar-picker-indicator,ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-inner-spin-button{display:none}ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-clear-button{display:none}ecabs-date-picker .dateTimeWrapper .calendar-icon{float:right;margin-top:-38px;padding:5px 10px 5px 5px;display:block;font-size:13px;line-height:20px;color:var(--color-gray-500);position:relative;width:40px;height:30px;cursor:pointer;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjQuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0OCA0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNkI2RDczO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTksNDRjLTAuOCwwLTEuNS0wLjMtMi4xLTAuOUM2LjMsNDIuNSw2LDQxLjgsNiw0MVYxMGMwLTAuOCwwLjMtMS41LDAuOS0yLjFTOC4yLDcsOSw3aDMuMlY0aDMuMnYzaDE3VjRoMy4ydjMKCUgzOWMwLjgsMCwxLjUsMC4zLDIuMSwwLjlDNDEuNyw4LjUsNDIsOS4yLDQyLDEwdjMxYzAsMC44LTAuMywxLjUtMC45LDIuMUM0MC41LDQzLjcsMzkuOCw0NCwzOSw0NEg5eiBNOSw0MWgzMGwwLDBsMCwwVjE5LjVIOVY0MQoJTDksNDFMOSw0MXogTTksMTYuNWgzMFYxMGwwLDBsMCwwSDlsMCwwbDAsMFYxNi41eiBNOSwxNi41VjEwbDAsMGwwLDBsMCwwbDAsMFYxNi41eiIvPgo8L3N2Zz4K);background-position:center center;background-repeat:no-repeat;background-size:1.375rem}ecabs-date-picker .dateTimeWrapper .calendar-icon.disabled{cursor:not-allowed}ecabs-date-picker .ecabs-element-wrapper.focused label{color:#376bfb}ecabs-date-picker .ecabs-element-wrapper.focused input{border-bottom-width:2px;border-bottom-color:#376bfb}ecabs-date-picker .ecabs-element-wrapper.validationError label{color:#ff4c4c}ecabs-date-picker .ecabs-element-wrapper.validationError input{border-bottom-color:#ff4c4c;border-bottom-width:2px}.ng-mydp .myDpSelector{border:0;padding:0;box-shadow:0 4px 6px #162a4c14,0 2px 16px #162a4c0f,0 8px 12px #162a4c0a;border-radius:0 0 4px 4px;background:#fff}.ng-mydp .myDpSelector:focus{box-shadow:0 4px 6px #162a4c14,0 2px 16px #162a4c0f,0 8px 12px #162a4c0a}.ng-mydp .myDpSelector .myDpWeekDayTitle{background-color:#fff;font-weight:500;font-size:11px;color:#162a4cb3}.ng-mydp .myDpSelector .myDpNextBtn{margin-left:auto;margin-right:16px}.ng-mydp .myDpSelector .myDpNextBtn .myDpIconRightArrow{line-height:26px;height:25px}.ng-mydp .myDpSelector .myDpNextBtn .myDpIconRightArrow:before{color:#376bfb;font-size:13px}.ng-mydp .myDpSelector .myDpPrevBtn{margin-left:16px}.ng-mydp .myDpSelector .myDpPrevBtn .myDpIconLeftArrow{line-height:26px;height:25px}.ng-mydp .myDpSelector .myDpPrevBtn .myDpIconLeftArrow:before{color:#376bfb;font-size:13px}.ng-mydp .myDpSelector .myDpMonthYearSelBar{height:52px;padding-top:10px;border:0}.ng-mydp .myDpSelector .myDpMonthYearText button{font-weight:500;font-size:13px;line-height:20px;color:#376bfb}.ng-mydp .myDpSelector .myDpMonthYearText .myDpMonthBtn{padding-right:7px;position:relative;margin-right:15px}.ng-mydp .myDpSelector .myDpMonthYearText .myDpMonthBtn:after{position:absolute;content:\"\";height:14px;width:1px;right:-7px;top:6px;background:#162a4c80}.ng-mydp .myDpSelector .myDpMonthYearText .myDpYearBtn{padding-left:6px}.ng-mydp .myDpSelector .myDpCalTable{height:calc(100% - 54px);width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDayValue{border-radius:4px;background:#f0f2f5;display:inline-block;box-sizing:border-box;width:32px;height:28px;font-size:13px;line-height:28px;text-align:center;color:#162a4ce6}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDayValue.myDpMarkCurrDay{border-bottom:0;color:#376bfb}.ng-mydp .myDpSelector table.myDpCalTable td.myDpSelectedDay .myDpDayValue{color:#fff!important;background:#6ab72a!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled .myDpDayValue{background:unset!important;color:#162a4c80;cursor:not-allowed}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled .myDpDayValue:hover{background:unset!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor{background-color:#fff}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor .myDpDayValue{background:#bee39d!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor.myDpSelectedDay .myDpDayValue{color:#fff!important;background:#6ab72a!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDaycell:focus{box-shadow:unset;outline:unset}.ng-mydp .myDpSelector table.myDpCalTable td.myDpPrevMonth .myDpDayValue,.ng-mydp .myDpSelector table.myDpCalTable td.myDpNextMonth .myDpDayValue{background:#f6f7f9;color:#162a4c80}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDimDay{opacity:1}.ng-mydp .myDpSelector table.myDpCalTable .myDpTableSingleDay:hover{background-color:#fff}.ng-mydp .myDpSelector table.myDpCalTable .myDpTableSingleDay:hover .myDpDayValue{background:#bee39d;color:#162a4ce6}.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedDay,.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedMonth,.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedYear{background-color:#fff;border-radius:0}.ng-mydp .myDpSelector .myDpMonthTable{height:128px;width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue{display:inline-block;height:28px;width:80px;background:#f0f2f5;vertical-align:middle;text-align:center;line-height:28px;font-weight:400;font-size:13px;color:#162a4ce6;border-radius:4px}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue.myDpMarkCurrMonth{border:0;color:#376bfb}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue:hover{background:#bee39d}.ng-mydp .myDpSelector .myDpMonthTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector .myDpMonthTable td.myDpDisabled .myDpMonthValue{background:unset!important;color:#162a4c80!important;cursor:not-allowed}.ng-mydp .myDpSelector .myDpMonthTable td.myDpSelectedMonth{background-color:#fff}.ng-mydp .myDpSelector .myDpMonthTable td.myDpSelectedMonth .myDpMonthValue{background:#6ab72a!important;color:#fff!important}.ng-mydp .myDpSelector .myDpMonthTable td.myDpTableSingleMonth:hover{background-color:#fff}.ng-mydp .myDpSelector .myDpYearTable{height:160px;width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue{display:inline-block;height:28px;width:46px;background:#f0f2f5;vertical-align:middle;text-align:center;line-height:28px;font-weight:400;font-size:13px;color:#162a4ce6;border-radius:4px}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue.myDpMarkCurrYear{border:0;color:#376bfb}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue:hover{background:#bee39d}.ng-mydp .myDpSelector .myDpYearTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector .myDpYearTable td.myDpDisabled .myDpYearValue{background:unset!important;color:#162a4c80!important;cursor:not-allowed}.ng-mydp .myDpSelector .myDpYearTable td.myDpSelectedYear{background-color:#fff}.ng-mydp .myDpSelector .myDpYearTable td.myDpSelectedYear .myDpYearValue{background:#6ab72a!important;color:#fff!important}.ng-mydp .myDpSelector .myDpYearTable td.myDpTableSingleYear:hover{background-color:#fff}.ng-mydp .myDpSelectorArrow{height:272px!important;width:268px!important;margin-top:-12px}.ng-mydp .myDpSelectorArrow:after{display:none}.ng-mydp .myDpSelectorArrow:before{display:none}:root{--mat-standard-button-toggle-shape: .5rem;--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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.mat-date-range-input{display:block;width:100%;padding:.5rem 1rem;border-radius:.25rem;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}:host ::ng-deep .mat-mdc-icon-button{max-width:2.5rem;max-height:2.5rem}\n"] }]
3901
+ ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"form-field__input--wrapper\">\r\n <mat-date-range-input \r\n [rangePicker]=\"picker\" \r\n [min]=\"minDate\"\r\n [max]=\"maxDate\" \r\n (blur)=\"onTouch()\">\r\n <input matStartDate class=\"form-field__input\" [placeholder]=\"startDatePlaceholder ?? translationConfig?.startDatePlaceholder\" [value]=\"dateFrom\" [(ngModel)]=\"dateFrom\" />\r\n <input matEndDate class=\"form-field__input\" [placeholder]=\"endDatePlaceholder ?? translationConfig?.endDatePlaceholder\" [value]=\"dateTo\" [(ngModel)]=\"dateTo\" />\r\n </mat-date-range-input>\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n <mat-icon matDatepickerToggleIcon class=\"text-gray-500\">calendar_today</mat-icon>\r\n </mat-datepicker-toggle>\r\n <mat-date-range-picker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\">\r\n <mat-datepicker-actions>\r\n <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n [isDateRange]=\"true\"\r\n [disabledApplyButton]=\"disabledApplyButton\"\r\n (apply)=\"onApply()\">\r\n </ecabs-date-picker-actions>\r\n </mat-datepicker-actions>\r\n </mat-date-range-picker>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-border: #FFCDC6;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-info-border: #D1D8F7;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-warning-border: #FBE5B6;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-border: #CEEAD5;--color-success-rgb: 7, 81, 69;--color-default-border: #D5E1ED;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.header{display:flex;align-items:center;padding:.5em}.datepicker-ui__toggle.mat-mdc-icon-button.mat-mdc-button-base,.mat-mdc-icon-button.mat-mdc-button-base.mat-datepicker-toggle{padding:0;width:2.5rem;height:2.5rem;line-height:2}.header-label{flex:1;height:1em;font-weight:500;text-align:center}.select-date-label{color:var(--color-brand-dark);padding-top:1.6rem;padding-left:1.6rem}.mat-calendar-table .mat-calendar-body tr:first-child[aria-hidden=true]{display:none}.mat-calendar-body-label{visibility:hidden}.mat-calendar-body-cell-content{border-radius:.25rem!important}.mat-calendar-body-active .mat-calendar-body-today{color:var(--color-brand-light)!important;background-color:var(--color-brand-light2)!important}.mat-calendar{align-self:center}.mat-calendar .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--color-brand-light2);color:var(--color-black)}.mat-calendar .mat-calendar-body-cell.mat-calendar-body-active .mat-calendar-body-cell-content.mat-calendar-body-selected,.mat-calendar .mat-calendar-body-cell.mat-calendar-body-active:hover .mat-calendar-body-cell-content.mat-calendar-body-selected{background-color:var(--color-brand-light)!important;color:var(--color-white)!important}.mat-calendar .mat-calendar-body-selected{background-color:var(--color-brand-light);color:var(--color-white)!important}.mat-calendar .mat-calendar-body-selected .mat-calendar-body-today{color:var(--color-white)!important}.mat-calendar .mat-calendar-table-header,.mat-calendar .mat-calendar-body-label{color:var(--color-gray-500)}.mat-calendar .mat-calendar-body-cell>.mat-calendar-body-today{opacity:1}.mat-calendar .mat-calendar-body-cell-content,.mat-calendar .mat-date-range-input-separator{color:var(--color-black)}.mat-calendar .mat-calendar-content{padding:0 1.6rem}.mat-calendar .mat-calendar-table-header th{font-size:16px;font-size:1rem}.mat-calendar .mat-calendar-table-header-divider:after{display:none}.mat-calendar .mat-calendar-body{font-size:16px;font-size:1rem}.mat-calendar .mat-calendar-body-in-range:before{background-color:var(--color-brand-light2)}.mat-calendar .mat-calendar-body-in-range .mat-calendar-body-cell-content{color:var(--color-black)!important}.mat-calendar .mat-calendar-body-range-start .mat-calendar-body-cell-content,.mat-calendar .mat-calendar-body-range-end .mat-calendar-body-cell-content{color:var(--color-white)!important}.mat-datepicker-popup .mat-datepicker-content{color:var(--color-black);box-shadow:0 0 25px #0003}.mat-datepicker-popup .mat-datepicker-actions{display:unset;margin-top:1rem;padding:0 1.6rem 1.6rem}.mat-datepicker-popup .mat-datepicker-actions .mat-button-base+.mat-button-base{margin-left:unset}.mat-datepicker-popup .mat-datepicker-actions button.mat-button-base{min-width:100%}.mat-datepicker-popup .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:var(--color-gray-300)}.ecabs-date-range-picker-v2 .mat-calendar-content{padding:0 1.6rem 1.6rem}ecabs-date-range-picker-v2 .mat-datepicker-input{text-align:center}ecabs-date-range-picker-v2 input{border:none;box-shadow:none}ecabs-date-range-picker-v2 input:focus{outline:none;box-shadow:none}.datepicker-ui__toggle,.mat-datepicker-toggle{position:absolute!important;right:0;line-height:1.25;padding:0}.datepicker-ui__toggle mat-icon,.mat-datepicker-toggle mat-icon{color:var(--color-gray-500)}ecabs-date-picker .dateTimeWrapper{position:relative;display:flex;width:100%}ecabs-date-picker .dateTimeWrapper .datePart{flex:2}ecabs-date-picker .dateTimeWrapper .timePart{flex:1;padding-left:10px;vertical-align:top;max-width:10rem}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker .timeInputWrapper{display:block}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker{width:100%}ecabs-date-picker .dateTimeWrapper .timePart ecabs-timepicker .inputWrapper{display:block}ecabs-date-picker .dateTimeWrapper .dateInputWrapper{position:relative}ecabs-date-picker .dateTimeWrapper input{min-height:42px;width:100%;display:block;box-sizing:border-box;font-size:14px;font-weight:500;padding-left:10px;border-radius:4px;border:1px solid rgb(107,109,115);outline:none;transition:all .3s ease-in-out}ecabs-date-picker .dateTimeWrapper input:disabled{border-bottom-width:1px;background-color:var(--color-white-opacity-05)}ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-calendar-picker-indicator,ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-inner-spin-button{display:none}ecabs-date-picker .dateTimeWrapper input[type=date]::-webkit-clear-button{display:none}ecabs-date-picker .dateTimeWrapper .calendar-icon{float:right;margin-top:-38px;padding:5px 10px 5px 5px;display:block;font-size:13px;line-height:20px;color:var(--color-gray-500);position:relative;width:40px;height:30px;cursor:pointer;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjQuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0OCA0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNkI2RDczO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTksNDRjLTAuOCwwLTEuNS0wLjMtMi4xLTAuOUM2LjMsNDIuNSw2LDQxLjgsNiw0MVYxMGMwLTAuOCwwLjMtMS41LDAuOS0yLjFTOC4yLDcsOSw3aDMuMlY0aDMuMnYzaDE3VjRoMy4ydjMKCUgzOWMwLjgsMCwxLjUsMC4zLDIuMSwwLjlDNDEuNyw4LjUsNDIsOS4yLDQyLDEwdjMxYzAsMC44LTAuMywxLjUtMC45LDIuMUM0MC41LDQzLjcsMzkuOCw0NCwzOSw0NEg5eiBNOSw0MWgzMGwwLDBsMCwwVjE5LjVIOVY0MQoJTDksNDFMOSw0MXogTTksMTYuNWgzMFYxMGwwLDBsMCwwSDlsMCwwbDAsMFYxNi41eiBNOSwxNi41VjEwbDAsMGwwLDBsMCwwbDAsMFYxNi41eiIvPgo8L3N2Zz4K);background-position:center center;background-repeat:no-repeat;background-size:1.375rem}ecabs-date-picker .dateTimeWrapper .calendar-icon.disabled{cursor:not-allowed}ecabs-date-picker .ecabs-element-wrapper.focused label{color:#376bfb}ecabs-date-picker .ecabs-element-wrapper.focused input{border-bottom-width:2px;border-bottom-color:#376bfb}ecabs-date-picker .ecabs-element-wrapper.validationError label{color:#ff4c4c}ecabs-date-picker .ecabs-element-wrapper.validationError input{border-bottom-color:#ff4c4c;border-bottom-width:2px}.ng-mydp .myDpSelector{border:0;padding:0;box-shadow:0 4px 6px #162a4c14,0 2px 16px #162a4c0f,0 8px 12px #162a4c0a;border-radius:0 0 4px 4px;background:#fff}.ng-mydp .myDpSelector:focus{box-shadow:0 4px 6px #162a4c14,0 2px 16px #162a4c0f,0 8px 12px #162a4c0a}.ng-mydp .myDpSelector .myDpWeekDayTitle{background-color:#fff;font-weight:500;font-size:11px;color:#162a4cb3}.ng-mydp .myDpSelector .myDpNextBtn{margin-left:auto;margin-right:16px}.ng-mydp .myDpSelector .myDpNextBtn .myDpIconRightArrow{line-height:26px;height:25px}.ng-mydp .myDpSelector .myDpNextBtn .myDpIconRightArrow:before{color:#376bfb;font-size:13px}.ng-mydp .myDpSelector .myDpPrevBtn{margin-left:16px}.ng-mydp .myDpSelector .myDpPrevBtn .myDpIconLeftArrow{line-height:26px;height:25px}.ng-mydp .myDpSelector .myDpPrevBtn .myDpIconLeftArrow:before{color:#376bfb;font-size:13px}.ng-mydp .myDpSelector .myDpMonthYearSelBar{height:52px;padding-top:10px;border:0}.ng-mydp .myDpSelector .myDpMonthYearText button{font-weight:500;font-size:13px;line-height:20px;color:#376bfb}.ng-mydp .myDpSelector .myDpMonthYearText .myDpMonthBtn{padding-right:7px;position:relative;margin-right:15px}.ng-mydp .myDpSelector .myDpMonthYearText .myDpMonthBtn:after{position:absolute;content:\"\";height:14px;width:1px;right:-7px;top:6px;background:#162a4c80}.ng-mydp .myDpSelector .myDpMonthYearText .myDpYearBtn{padding-left:6px}.ng-mydp .myDpSelector .myDpCalTable{height:calc(100% - 54px);width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDayValue{border-radius:4px;background:#f0f2f5;display:inline-block;box-sizing:border-box;width:32px;height:28px;font-size:13px;line-height:28px;text-align:center;color:#162a4ce6}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDayValue.myDpMarkCurrDay{border-bottom:0;color:#376bfb}.ng-mydp .myDpSelector table.myDpCalTable td.myDpSelectedDay .myDpDayValue{color:#fff!important;background:#6ab72a!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled .myDpDayValue{background:unset!important;color:#162a4c80;cursor:not-allowed}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDisabled .myDpDayValue:hover{background:unset!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor{background-color:#fff}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor .myDpDayValue{background:#bee39d!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpRangeColor.myDpSelectedDay .myDpDayValue{color:#fff!important;background:#6ab72a!important}.ng-mydp .myDpSelector table.myDpCalTable td.myDpDaycell:focus{box-shadow:unset;outline:unset}.ng-mydp .myDpSelector table.myDpCalTable td.myDpPrevMonth .myDpDayValue,.ng-mydp .myDpSelector table.myDpCalTable td.myDpNextMonth .myDpDayValue{background:#f6f7f9;color:#162a4c80}.ng-mydp .myDpSelector table.myDpCalTable td .myDpDimDay{opacity:1}.ng-mydp .myDpSelector table.myDpCalTable .myDpTableSingleDay:hover{background-color:#fff}.ng-mydp .myDpSelector table.myDpCalTable .myDpTableSingleDay:hover .myDpDayValue{background:#bee39d;color:#162a4ce6}.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedDay,.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedMonth,.ng-mydp .myDpSelector table.myDpCalTable .myDpSelectedYear{background-color:#fff;border-radius:0}.ng-mydp .myDpSelector .myDpMonthTable{height:128px;width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue{display:inline-block;height:28px;width:80px;background:#f0f2f5;vertical-align:middle;text-align:center;line-height:28px;font-weight:400;font-size:13px;color:#162a4ce6;border-radius:4px}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue.myDpMarkCurrMonth{border:0;color:#376bfb}.ng-mydp .myDpSelector .myDpMonthTable td .myDpMonthValue:hover{background:#bee39d}.ng-mydp .myDpSelector .myDpMonthTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector .myDpMonthTable td.myDpDisabled .myDpMonthValue{background:unset!important;color:#162a4c80!important;cursor:not-allowed}.ng-mydp .myDpSelector .myDpMonthTable td.myDpSelectedMonth{background-color:#fff}.ng-mydp .myDpSelector .myDpMonthTable td.myDpSelectedMonth .myDpMonthValue{background:#6ab72a!important;color:#fff!important}.ng-mydp .myDpSelector .myDpMonthTable td.myDpTableSingleMonth:hover{background-color:#fff}.ng-mydp .myDpSelector .myDpYearTable{height:160px;width:calc(100% - 20px);margin:0 10px}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue{display:inline-block;height:28px;width:46px;background:#f0f2f5;vertical-align:middle;text-align:center;line-height:28px;font-weight:400;font-size:13px;color:#162a4ce6;border-radius:4px}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue.myDpMarkCurrYear{border:0;color:#376bfb}.ng-mydp .myDpSelector .myDpYearTable td .myDpYearValue:hover{background:#bee39d}.ng-mydp .myDpSelector .myDpYearTable td.myDpDisabled{background:unset}.ng-mydp .myDpSelector .myDpYearTable td.myDpDisabled .myDpYearValue{background:unset!important;color:#162a4c80!important;cursor:not-allowed}.ng-mydp .myDpSelector .myDpYearTable td.myDpSelectedYear{background-color:#fff}.ng-mydp .myDpSelector .myDpYearTable td.myDpSelectedYear .myDpYearValue{background:#6ab72a!important;color:#fff!important}.ng-mydp .myDpSelector .myDpYearTable td.myDpTableSingleYear:hover{background-color:#fff}.ng-mydp .myDpSelectorArrow{height:272px!important;width:268px!important;margin-top:-12px}.ng-mydp .myDpSelectorArrow:after{display:none}.ng-mydp .myDpSelectorArrow:before{display:none}:root{--mat-standard-button-toggle-shape: .5rem;--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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-border: #FFCDC6;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-info-border: #D1D8F7;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-warning-border: #FBE5B6;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-border: #CEEAD5;--color-success-rgb: 7, 81, 69;--color-default-border: #D5E1ED;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.mat-date-range-input{display:block;width:100%;padding:.5rem 1rem;border-radius:.25rem;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}:host ::ng-deep .mat-mdc-icon-button{max-width:2.5rem;max-height:2.5rem}\n"] }]
3900
3902
  }], ctorParameters: function () { return [{ type: i0.Injector }, { type: EcabsDatePickerHeaderService }, { type: UnsubscribeService }]; }, propDecorators: { minDate: [{
3901
3903
  type: Input
3902
3904
  }], maxDate: [{
@@ -4283,7 +4285,7 @@ class EcabsDateTimeRangePickerComponent extends EcabsElementBaseComponent {
4283
4285
  },
4284
4286
  DecimalPipe,
4285
4287
  UnsubscribeService,
4286
- ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"form-field__input--wrapper w-full\">\r\n <input\r\n class=\"fake-input\"\r\n [id]=\"_date\"\r\n [(ngModel)]=\"_date\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled || controlDate?.disabled\"\r\n [matDatepicker]=\"picker\"\r\n (blur)=\"onTouch()\"\r\n />\r\n <mat-datepicker\r\n (opened)=\"opened()\"\r\n #picker\r\n [calendarHeaderComponent]=\"header\"\r\n [touchUi]=\"touchUi\"\r\n >\r\n <mat-datepicker-actions>\r\n <div class=\"flex flex-col w-full gap-y-4\">\r\n <div class=\"flex gap-2 justify-center items-center\">\r\n <div class=\"flex flex-col justify-center\">\r\n <div class=\"text-center\">{{ from ?? translationConfig?.from }}</div>\r\n <div class=\"flex gap-2 justify-center items-center\">\r\n <input\r\n class=\"block form-field__input time\"\r\n ecabsDigitsOnly\r\n ecabsNumberBorder\r\n [digitsOnly]=\"true\"\r\n [id]=\"hoursFrom\"\r\n [maxValue]=\"maxValueHours\"\r\n [(ngModel)]=\"hoursFrom\"\r\n />\r\n\r\n <span class=\"font-bold\">:</span>\r\n <input\r\n class=\"form-field__input time\"\r\n [id]=\"minutesFrom\"\r\n [(ngModel)]=\"minutesFrom\"\r\n ecabsDigitsOnly\r\n ecabsNumberBorder\r\n [digitsOnly]=\"true\"\r\n [maxValue]=\"maxValueMinutesSeconds\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"time--inputs\"></div>\r\n <div class=\"flex gap-2 justify-center items-center mb-5\">\r\n <div class=\"flex flex-col justify-center\">\r\n <div class=\"text-center\">{{ to ?? translationConfig?.to }}</div>\r\n <div class=\"flex gap-2 justify-center items-center\">\r\n <input\r\n class=\"form-field__input time\"\r\n ecabsDigitsOnly\r\n ecabsNumberBorder\r\n [digitsOnly]=\"true\"\r\n [id]=\"hoursTo\"\r\n [maxValue]=\"maxValueHours\"\r\n [(ngModel)]=\"hoursTo\"\r\n />\r\n <span class=\"font-bold\">:</span>\r\n <input\r\n class=\"form-field__input time\"\r\n [id]=\"minutesTo\"\r\n [(ngModel)]=\"minutesTo\"\r\n ecabsDigitsOnly\r\n ecabsNumberBorder\r\n [digitsOnly]=\"true\"\r\n [maxValue]=\"maxValueMinutesSeconds\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n (apply)=\"onApply()\">\r\n </ecabs-date-picker-actions>\r\n </div>\r\n </mat-datepicker-actions>\r\n </mat-datepicker>\r\n <input\r\n class=\"form-field__input w-full date-input\"\r\n [id]=\"name\"\r\n [(ngModel)]=\"pickerValue\"\r\n placeholder=\"00:00 - 00:00\"\r\n [disabled]=\"disabled || controlDate?.disabled\"\r\n ecabsTime\r\n [all]=\"allLabel\"\r\n [timeRange]=\"true\"\r\n (blur)=\"onTouch()\"\r\n (blur)=\"blurChange($event)\"\r\n (keyup)=\"blurChange($event)\"\r\n (keydown)=\"keydownChange($event)\"\r\n />\r\n <button type=\"button\" class=\"text-gray-500 -translate-x-9\" (click)=\"picker.open()\">\r\n <mat-icon>access_time</mat-icon>\r\n </button>\r\n </div>\r\n</ecabs-element-wrapper>\r\n", styles: [".time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0}.time--inputs{position:relative;margin-bottom:2.4rem}.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300);bottom:-1.6rem}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { 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: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "allowRange", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsNumberBorderDirective, selector: "[ecabsNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }, { kind: "directive", type: EcabsMaskTimeDirective, selector: "[ecabsTime]", inputs: ["timeRange", "all"] }] });
4288
+ ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"form-field__input--wrapper w-full\">\r\n <input\r\n class=\"fake-input\"\r\n [id]=\"_date\"\r\n [(ngModel)]=\"_date\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled || controlDate?.disabled\"\r\n [matDatepicker]=\"picker\"\r\n (blur)=\"onTouch()\"\r\n />\r\n <mat-datepicker\r\n (opened)=\"opened()\"\r\n #picker\r\n [calendarHeaderComponent]=\"header\"\r\n [touchUi]=\"touchUi\"\r\n >\r\n <mat-datepicker-actions>\r\n <div class=\"flex flex-col w-full gap-y-4\">\r\n <div class=\"flex gap-2 justify-center items-center\">\r\n <div class=\"flex flex-col justify-center\">\r\n <div class=\"text-center\">{{ from ?? translationConfig?.from }}</div>\r\n <div class=\"flex gap-2 justify-center items-center\">\r\n <input\r\n class=\"block form-field__input time\"\r\n ecabsDigitsOnly\r\n ecabsNumberBorder\r\n [digitsOnly]=\"true\"\r\n [id]=\"hoursFrom\"\r\n [maxValue]=\"maxValueHours\"\r\n [(ngModel)]=\"hoursFrom\"\r\n />\r\n\r\n <span class=\"font-bold\">:</span>\r\n <input\r\n class=\"form-field__input time\"\r\n [id]=\"minutesFrom\"\r\n [(ngModel)]=\"minutesFrom\"\r\n ecabsDigitsOnly\r\n ecabsNumberBorder\r\n [digitsOnly]=\"true\"\r\n [maxValue]=\"maxValueMinutesSeconds\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"time--inputs\"></div>\r\n <div class=\"flex gap-2 justify-center items-center mb-5\">\r\n <div class=\"flex flex-col justify-center\">\r\n <div class=\"text-center\">{{ to ?? translationConfig?.to }}</div>\r\n <div class=\"flex gap-2 justify-center items-center\">\r\n <input\r\n class=\"form-field__input time\"\r\n ecabsDigitsOnly\r\n ecabsNumberBorder\r\n [digitsOnly]=\"true\"\r\n [id]=\"hoursTo\"\r\n [maxValue]=\"maxValueHours\"\r\n [(ngModel)]=\"hoursTo\"\r\n />\r\n <span class=\"font-bold\">:</span>\r\n <input\r\n class=\"form-field__input time\"\r\n [id]=\"minutesTo\"\r\n [(ngModel)]=\"minutesTo\"\r\n ecabsDigitsOnly\r\n ecabsNumberBorder\r\n [digitsOnly]=\"true\"\r\n [maxValue]=\"maxValueMinutesSeconds\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n (apply)=\"onApply()\">\r\n </ecabs-date-picker-actions>\r\n </div>\r\n </mat-datepicker-actions>\r\n </mat-datepicker>\r\n <input\r\n class=\"form-field__input w-full date-input\"\r\n [id]=\"name\"\r\n [(ngModel)]=\"pickerValue\"\r\n placeholder=\"00:00 - 00:00\"\r\n [disabled]=\"disabled || controlDate?.disabled\"\r\n ecabsTime\r\n [all]=\"allLabel\"\r\n [timeRange]=\"true\"\r\n (blur)=\"onTouch()\"\r\n (blur)=\"blurChange($event)\"\r\n (keyup)=\"blurChange($event)\"\r\n (keydown)=\"keydownChange($event)\"\r\n />\r\n <button type=\"button\" class=\"text-gray-500 -translate-x-9\" (click)=\"picker.open()\">\r\n <mat-icon>access_time</mat-icon>\r\n </button>\r\n </div>\r\n</ecabs-element-wrapper>\r\n", styles: [".time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0}.time--inputs{position:relative;margin-bottom:2.4rem}.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300);bottom:-1.6rem}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { 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: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "allowRange", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsNumberBorderDirective, selector: "[ecabsNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }, { kind: "directive", type: EcabsMaskTimeDirective, selector: "[ecabsTime]", inputs: ["timeRange", "all"] }] });
4287
4289
  }
4288
4290
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateTimeRangePickerComponent, decorators: [{
4289
4291
  type: Component,
@@ -4443,7 +4445,7 @@ class EcabsIncrementComponent extends EcabsElementBaseComponent {
4443
4445
  useExisting: EcabsIncrementComponent,
4444
4446
  multi: true,
4445
4447
  },
4446
- ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"form-field__input--wrapper\">\r\n <input ecabsDigitsOnly [digitsOnly]=\"digitsOnly\" [decimal]=\"allowDecimal\" [allowHyphen]=\"allowHyphen\"\r\n class=\"form-field__input\"\r\n [type]=\"type\"\r\n [id]=\"name\"\r\n [(ngModel)]=\"value\"\r\n [placeholder]=\"placeholder\"\r\n (blur)=\"onTouch()\"\r\n [disabled]=\"disabled\"\r\n [maxlength]=\"maxLength\"/>\r\n\r\n <div class=\"incrementor\">\r\n <mat-icon (click)=\"increment()\">add</mat-icon>\r\n <mat-icon (click)=\"decrement()\">remove</mat-icon>\r\n </div>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host::ng-deep .incrementor{border-left:1px solid var(--color-gray-300);position:absolute;display:flex;flex-direction:column;top:1px;bottom:1px;right:1px}:host::ng-deep .incrementor .mat-icon{font-size:20px;font-size:1.25rem;margin-right:0;line-height:20px;cursor:pointer;text-align:center;flex:1}:host::ng-deep .incrementor .mat-icon:first-of-type{border-bottom:1px solid var(--color-gray-300)}:host::ng-deep .incrementor .mat-icon:hover{color:var(--color-brand-dark)}:host::ng-deep .form-field>div{line-height:1}\n"], dependencies: [{ kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "allowRange", "decimal", "decimalSeparator", "unit"] }] });
4448
+ ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"form-field__input--wrapper\">\r\n <input ecabsDigitsOnly [digitsOnly]=\"digitsOnly\" [decimal]=\"allowDecimal\" [allowHyphen]=\"allowHyphen\"\r\n class=\"form-field__input\"\r\n [type]=\"type\"\r\n [id]=\"name\"\r\n [(ngModel)]=\"value\"\r\n [placeholder]=\"placeholder\"\r\n (blur)=\"onTouch()\"\r\n [disabled]=\"disabled\"\r\n [maxlength]=\"maxLength\"/>\r\n\r\n <div class=\"incrementor\">\r\n <mat-icon (click)=\"increment()\">add</mat-icon>\r\n <mat-icon (click)=\"decrement()\">remove</mat-icon>\r\n </div>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-border: #FFCDC6;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-info-border: #D1D8F7;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-warning-border: #FBE5B6;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-border: #CEEAD5;--color-success-rgb: 7, 81, 69;--color-default-border: #D5E1ED;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host::ng-deep .incrementor{border-left:1px solid var(--color-gray-300);position:absolute;display:flex;flex-direction:column;top:1px;bottom:1px;right:1px}:host::ng-deep .incrementor .mat-icon{font-size:20px;font-size:1.25rem;margin-right:0;line-height:20px;cursor:pointer;text-align:center;flex:1}:host::ng-deep .incrementor .mat-icon:first-of-type{border-bottom:1px solid var(--color-gray-300)}:host::ng-deep .incrementor .mat-icon:hover{color:var(--color-brand-dark)}:host::ng-deep .form-field>div{line-height:1}\n"], dependencies: [{ kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "allowRange", "decimal", "decimalSeparator", "unit"] }] });
4447
4449
  }
4448
4450
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsIncrementComponent, decorators: [{
4449
4451
  type: Component,
@@ -4453,7 +4455,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
4453
4455
  useExisting: EcabsIncrementComponent,
4454
4456
  multi: true,
4455
4457
  },
4456
- ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"form-field__input--wrapper\">\r\n <input ecabsDigitsOnly [digitsOnly]=\"digitsOnly\" [decimal]=\"allowDecimal\" [allowHyphen]=\"allowHyphen\"\r\n class=\"form-field__input\"\r\n [type]=\"type\"\r\n [id]=\"name\"\r\n [(ngModel)]=\"value\"\r\n [placeholder]=\"placeholder\"\r\n (blur)=\"onTouch()\"\r\n [disabled]=\"disabled\"\r\n [maxlength]=\"maxLength\"/>\r\n\r\n <div class=\"incrementor\">\r\n <mat-icon (click)=\"increment()\">add</mat-icon>\r\n <mat-icon (click)=\"decrement()\">remove</mat-icon>\r\n </div>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host::ng-deep .incrementor{border-left:1px solid var(--color-gray-300);position:absolute;display:flex;flex-direction:column;top:1px;bottom:1px;right:1px}:host::ng-deep .incrementor .mat-icon{font-size:20px;font-size:1.25rem;margin-right:0;line-height:20px;cursor:pointer;text-align:center;flex:1}:host::ng-deep .incrementor .mat-icon:first-of-type{border-bottom:1px solid var(--color-gray-300)}:host::ng-deep .incrementor .mat-icon:hover{color:var(--color-brand-dark)}:host::ng-deep .form-field>div{line-height:1}\n"] }]
4458
+ ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"form-field__input--wrapper\">\r\n <input ecabsDigitsOnly [digitsOnly]=\"digitsOnly\" [decimal]=\"allowDecimal\" [allowHyphen]=\"allowHyphen\"\r\n class=\"form-field__input\"\r\n [type]=\"type\"\r\n [id]=\"name\"\r\n [(ngModel)]=\"value\"\r\n [placeholder]=\"placeholder\"\r\n (blur)=\"onTouch()\"\r\n [disabled]=\"disabled\"\r\n [maxlength]=\"maxLength\"/>\r\n\r\n <div class=\"incrementor\">\r\n <mat-icon (click)=\"increment()\">add</mat-icon>\r\n <mat-icon (click)=\"decrement()\">remove</mat-icon>\r\n </div>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-border: #FFCDC6;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-info-border: #D1D8F7;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-warning-border: #FBE5B6;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-border: #CEEAD5;--color-success-rgb: 7, 81, 69;--color-default-border: #D5E1ED;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host::ng-deep .incrementor{border-left:1px solid var(--color-gray-300);position:absolute;display:flex;flex-direction:column;top:1px;bottom:1px;right:1px}:host::ng-deep .incrementor .mat-icon{font-size:20px;font-size:1.25rem;margin-right:0;line-height:20px;cursor:pointer;text-align:center;flex:1}:host::ng-deep .incrementor .mat-icon:first-of-type{border-bottom:1px solid var(--color-gray-300)}:host::ng-deep .incrementor .mat-icon:hover{color:var(--color-brand-dark)}:host::ng-deep .form-field>div{line-height:1}\n"] }]
4457
4459
  }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { digitsOnly: [{
4458
4460
  type: Input
4459
4461
  }], allowDecimal: [{
@@ -5414,7 +5416,7 @@ class EcabsBasePhoneComponent extends _NgxMatIntlTelInputMixinBase {
5414
5416
  }
5415
5417
  this._previousFormattedNumber = this.phoneNumber?.toString();
5416
5418
  }
5417
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsBasePhoneComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CountryCode }, { token: i2$3.FocusMonitor }, { token: i0.ElementRef }, { token: i3.NgControl, optional: true, self: true }, { token: i3.NgForm, optional: true }, { token: i3.FormGroupDirective, optional: true }, { token: i4$1.ErrorStateMatcher }], target: i0.ɵɵFactoryTarget.Component });
5419
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsBasePhoneComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CountryCode }, { token: i2$2.FocusMonitor }, { token: i0.ElementRef }, { token: i3.NgControl, optional: true, self: true }, { token: i3.NgForm, optional: true }, { token: i3.FormGroupDirective, optional: true }, { token: i4$2.ErrorStateMatcher }], target: i0.ɵɵFactoryTarget.Component });
5418
5420
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsBasePhoneComponent, selector: "ecabs-base-phone", inputs: { preferredCountries: "preferredCountries", enablePlaceholder: "enablePlaceholder", inputPlaceholder: "inputPlaceholder", cssClass: "cssClass", name: "name", onlyCountries: "onlyCountries", errorStateMatcher: "errorStateMatcher", enableSearch: "enableSearch", searchPlaceholder: "searchPlaceholder", describedBy: "describedBy", debounceTimeMs: "debounceTimeMs", format: "format", placeholder: "placeholder", required: "required", disabled: "disabled" }, outputs: { countryChanged: "countryChanged" }, host: { properties: { "id": "this.id", "class.ngx-floating": "this.shouldLabelFloat" } }, providers: [
5419
5421
  CountryCode,
5420
5422
  { provide: MatFormFieldControl, useExisting: EcabsBasePhoneComponent },
@@ -5423,7 +5425,7 @@ class EcabsBasePhoneComponent extends _NgxMatIntlTelInputMixinBase {
5423
5425
  useValue: phoneNumberValidator,
5424
5426
  multi: true,
5425
5427
  },
5426
- ], viewQueries: [{ propertyName: "matMenu", first: true, predicate: MatMenu, descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "matCustomInput", first: true, predicate: ["matCustomInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecabs-tel-input-container\">\r\n <button\r\n type=\"button\"\r\n mat-button\r\n [matMenuTriggerFor]=\"menu\"\r\n class=\"country-selector\"\r\n [disabled]=\"disabled\"\r\n >\r\n <span\r\n class=\"country-selector-flag flag\"\r\n [ngClass]=\"flagClass(selectedCountry?.flagClass)\"\r\n ></span>\r\n <span class=\"country-selector-code\" *ngIf=\"selectedCountry?.dialCode\"\r\n >+{{ selectedCountry.dialCode }}</span\r\n >\r\n </button>\r\n <mat-menu #menu=\"matMenu\"\r\n class=\"ecabs-tel-input-mat-menu-panel\"\r\n backdropClass=\"ecabs-tel-input-overlay-backdrop\"\r\n overlayPanelClass=\"ecabs-tel-input-overlay-pane\">\r\n <input\r\n #searchInput\r\n *ngIf=\"enableSearch\"\r\n class=\"country-search\"\r\n [(ngModel)]=\"searchCriteria\"\r\n (ngModelChange)=\"onSearchInput()\"\r\n type=\"text\"\r\n [placeholder]=\"searchPlaceholder\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n <ng-container *ngIf=\"!searchCriteria\">\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n class=\"country-list-button\"\r\n *ngFor=\"let country of preferredCountriesInDropDown\"\r\n (click)=\"onCountrySelect(country)\"\r\n >\r\n <div class=\"icon-wrapper\">\r\n <div class=\"flag\"\r\n [ngClass]=\"flagClass(country.flagClass)\"></div>\r\n </div>\r\n <div class=\"label-wrapper\">\r\n {{ country.name }}\r\n <span *ngIf=\"country?.dialCode\">+{{ country.dialCode }}</span>\r\n </div>\r\n </button>\r\n <mat-divider *ngIf=\"preferredCountriesInDropDown?.length\"></mat-divider>\r\n </ng-container>\r\n <ng-container *ngFor=\"let country of allCountries\">\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n class=\"country-list-button\"\r\n *ngIf=\"country | search: searchCriteria\"\r\n (click)=\"onCountrySelect(country)\"\r\n >\r\n <div class=\"icon-wrapper\">\r\n <div class=\"flag\" [ngClass]=\"flagClass(country.flagClass)\"></div>\r\n </div>\r\n <div class=\"label-wrapper\">\r\n {{ country.name }} +{{ country.dialCode }}\r\n </div>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n\r\n <input #matCustomInput\r\n matInput\r\n type=\"tel\"\r\n autocomplete=\"tel\"\r\n [ngClass]=\"cssClass\"\r\n (blur)=\"onTouched()\"\r\n (keypress)=\"onInputKeyPress($event)\"\r\n [(ngModel)]=\"phoneNumber\"\r\n (ngModelChange)=\"onPhoneNumberChangeDebounce()\"\r\n [errorStateMatcher]=\"errorStateMatcher\"\r\n [placeholder]=\"inputPlaceholder\"\r\n [disabled]=\"disabled\"\r\n [aria-describedby]=\"describedBy\"\r\n />\r\n</div>\r\n", styles: ["input:not(.country-search){border:none;background:none;outline:none;font:inherit;width:100%;box-sizing:border-box;padding:0 6px 0 90px;position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;margin-right:0;margin-left:0}input.country-search{width:100%;height:34px;border:none;border-bottom:1px solid #ddd;font-size:14px;padding:20px 20px 24px;position:sticky;top:0;background-color:#fff;z-index:9}.icon-wrapper{padding-right:24px}.flag{background-size:100% auto;filter:drop-shadow(1px 1px 1px rgba(0,0,0,.54));height:14px;width:24px}.icon-wrapper,.label-wrapper{display:table-cell;vertical-align:middle}.country-selector{border-radius:0;color:#000000de;flex-shrink:0;height:initial;line-height:unset;width:90px;padding:1px;opacity:0;transition:opacity .2s;position:absolute;z-index:1;inset:0 auto 0 0;font-size:inherit;font-weight:inherit;background-position:right center;background-repeat:no-repeat;background-size:18px auto}.country-selector:disabled{color:#00000061}:host.ngx-floating .country-selector{opacity:1!important}.country-selector-flag{display:inline-block;margin-right:.5ex}.country-list-button{color:#000000de;direction:ltr;font-size:16px;font-weight:400;height:initial;line-height:normal;min-height:48px;padding:14px 24px;text-align:left;text-transform:none;width:100%}\n"], dependencies: [{ 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: 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: "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: "component", type: i7$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { 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: i9$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: SearchPipe, name: "search" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5428
+ ], viewQueries: [{ propertyName: "matMenu", first: true, predicate: MatMenu, descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "matCustomInput", first: true, predicate: ["matCustomInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecabs-tel-input-container\">\r\n <button\r\n type=\"button\"\r\n mat-button\r\n [matMenuTriggerFor]=\"menu\"\r\n class=\"country-selector\"\r\n [disabled]=\"disabled\"\r\n >\r\n <span\r\n class=\"country-selector-flag flag\"\r\n [ngClass]=\"flagClass(selectedCountry?.flagClass)\"\r\n ></span>\r\n <span class=\"country-selector-code\" *ngIf=\"selectedCountry?.dialCode\"\r\n >+{{ selectedCountry.dialCode }}</span\r\n >\r\n </button>\r\n <mat-menu #menu=\"matMenu\"\r\n class=\"ecabs-tel-input-mat-menu-panel\"\r\n backdropClass=\"ecabs-tel-input-overlay-backdrop\"\r\n overlayPanelClass=\"ecabs-tel-input-overlay-pane\">\r\n <input\r\n #searchInput\r\n *ngIf=\"enableSearch\"\r\n class=\"country-search\"\r\n [(ngModel)]=\"searchCriteria\"\r\n (ngModelChange)=\"onSearchInput()\"\r\n type=\"text\"\r\n [placeholder]=\"searchPlaceholder\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n <ng-container *ngIf=\"!searchCriteria\">\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n class=\"country-list-button\"\r\n *ngFor=\"let country of preferredCountriesInDropDown\"\r\n (click)=\"onCountrySelect(country)\"\r\n >\r\n <div class=\"icon-wrapper\">\r\n <div class=\"flag\"\r\n [ngClass]=\"flagClass(country.flagClass)\"></div>\r\n </div>\r\n <div class=\"label-wrapper\">\r\n {{ country.name }}\r\n <span *ngIf=\"country?.dialCode\">+{{ country.dialCode }}</span>\r\n </div>\r\n </button>\r\n <mat-divider *ngIf=\"preferredCountriesInDropDown?.length\"></mat-divider>\r\n </ng-container>\r\n <ng-container *ngFor=\"let country of allCountries\">\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n class=\"country-list-button\"\r\n *ngIf=\"country | search: searchCriteria\"\r\n (click)=\"onCountrySelect(country)\"\r\n >\r\n <div class=\"icon-wrapper\">\r\n <div class=\"flag\" [ngClass]=\"flagClass(country.flagClass)\"></div>\r\n </div>\r\n <div class=\"label-wrapper\">\r\n {{ country.name }} +{{ country.dialCode }}\r\n </div>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n\r\n <input #matCustomInput\r\n matInput\r\n type=\"tel\"\r\n autocomplete=\"tel\"\r\n [ngClass]=\"cssClass\"\r\n (blur)=\"onTouched()\"\r\n (keypress)=\"onInputKeyPress($event)\"\r\n [(ngModel)]=\"phoneNumber\"\r\n (ngModelChange)=\"onPhoneNumberChangeDebounce()\"\r\n [errorStateMatcher]=\"errorStateMatcher\"\r\n [placeholder]=\"inputPlaceholder\"\r\n [disabled]=\"disabled\"\r\n [aria-describedby]=\"describedBy\"\r\n />\r\n</div>\r\n", styles: ["input:not(.country-search){border:none;background:none;outline:none;font:inherit;width:100%;box-sizing:border-box;padding:0 6px 0 90px;position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;margin-right:0;margin-left:0}input.country-search{width:100%;height:34px;border:none;border-bottom:1px solid #ddd;font-size:14px;padding:20px 20px 24px;position:sticky;top:0;background-color:#fff;z-index:9}.icon-wrapper{padding-right:24px}.flag{background-size:100% auto;filter:drop-shadow(1px 1px 1px rgba(0,0,0,.54));height:14px;width:24px}.icon-wrapper,.label-wrapper{display:table-cell;vertical-align:middle}.country-selector{border-radius:0;color:#000000de;flex-shrink:0;height:initial;line-height:unset;width:90px;padding:1px;opacity:0;transition:opacity .2s;position:absolute;z-index:1;inset:0 auto 0 0;font-size:inherit;font-weight:inherit;background-position:right center;background-repeat:no-repeat;background-size:18px auto}.country-selector:disabled{color:#00000061}:host.ngx-floating .country-selector{opacity:1!important}.country-selector-flag{display:inline-block;margin-right:.5ex}.country-list-button{color:#000000de;direction:ltr;font-size:16px;font-weight:400;height:initial;line-height:normal;min-height:48px;padding:14px 24px;text-align:left;text-transform:none;width:100%}\n"], dependencies: [{ 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: 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: "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: "component", type: i7$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { 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: i3$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: SearchPipe, name: "search" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5427
5429
  }
5428
5430
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsBasePhoneComponent, decorators: [{
5429
5431
  type: Component,
@@ -5436,7 +5438,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
5436
5438
  multi: true,
5437
5439
  },
5438
5440
  ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ecabs-tel-input-container\">\r\n <button\r\n type=\"button\"\r\n mat-button\r\n [matMenuTriggerFor]=\"menu\"\r\n class=\"country-selector\"\r\n [disabled]=\"disabled\"\r\n >\r\n <span\r\n class=\"country-selector-flag flag\"\r\n [ngClass]=\"flagClass(selectedCountry?.flagClass)\"\r\n ></span>\r\n <span class=\"country-selector-code\" *ngIf=\"selectedCountry?.dialCode\"\r\n >+{{ selectedCountry.dialCode }}</span\r\n >\r\n </button>\r\n <mat-menu #menu=\"matMenu\"\r\n class=\"ecabs-tel-input-mat-menu-panel\"\r\n backdropClass=\"ecabs-tel-input-overlay-backdrop\"\r\n overlayPanelClass=\"ecabs-tel-input-overlay-pane\">\r\n <input\r\n #searchInput\r\n *ngIf=\"enableSearch\"\r\n class=\"country-search\"\r\n [(ngModel)]=\"searchCriteria\"\r\n (ngModelChange)=\"onSearchInput()\"\r\n type=\"text\"\r\n [placeholder]=\"searchPlaceholder\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n <ng-container *ngIf=\"!searchCriteria\">\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n class=\"country-list-button\"\r\n *ngFor=\"let country of preferredCountriesInDropDown\"\r\n (click)=\"onCountrySelect(country)\"\r\n >\r\n <div class=\"icon-wrapper\">\r\n <div class=\"flag\"\r\n [ngClass]=\"flagClass(country.flagClass)\"></div>\r\n </div>\r\n <div class=\"label-wrapper\">\r\n {{ country.name }}\r\n <span *ngIf=\"country?.dialCode\">+{{ country.dialCode }}</span>\r\n </div>\r\n </button>\r\n <mat-divider *ngIf=\"preferredCountriesInDropDown?.length\"></mat-divider>\r\n </ng-container>\r\n <ng-container *ngFor=\"let country of allCountries\">\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n class=\"country-list-button\"\r\n *ngIf=\"country | search: searchCriteria\"\r\n (click)=\"onCountrySelect(country)\"\r\n >\r\n <div class=\"icon-wrapper\">\r\n <div class=\"flag\" [ngClass]=\"flagClass(country.flagClass)\"></div>\r\n </div>\r\n <div class=\"label-wrapper\">\r\n {{ country.name }} +{{ country.dialCode }}\r\n </div>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n\r\n <input #matCustomInput\r\n matInput\r\n type=\"tel\"\r\n autocomplete=\"tel\"\r\n [ngClass]=\"cssClass\"\r\n (blur)=\"onTouched()\"\r\n (keypress)=\"onInputKeyPress($event)\"\r\n [(ngModel)]=\"phoneNumber\"\r\n (ngModelChange)=\"onPhoneNumberChangeDebounce()\"\r\n [errorStateMatcher]=\"errorStateMatcher\"\r\n [placeholder]=\"inputPlaceholder\"\r\n [disabled]=\"disabled\"\r\n [aria-describedby]=\"describedBy\"\r\n />\r\n</div>\r\n", styles: ["input:not(.country-search){border:none;background:none;outline:none;font:inherit;width:100%;box-sizing:border-box;padding:0 6px 0 90px;position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;margin-right:0;margin-left:0}input.country-search{width:100%;height:34px;border:none;border-bottom:1px solid #ddd;font-size:14px;padding:20px 20px 24px;position:sticky;top:0;background-color:#fff;z-index:9}.icon-wrapper{padding-right:24px}.flag{background-size:100% auto;filter:drop-shadow(1px 1px 1px rgba(0,0,0,.54));height:14px;width:24px}.icon-wrapper,.label-wrapper{display:table-cell;vertical-align:middle}.country-selector{border-radius:0;color:#000000de;flex-shrink:0;height:initial;line-height:unset;width:90px;padding:1px;opacity:0;transition:opacity .2s;position:absolute;z-index:1;inset:0 auto 0 0;font-size:inherit;font-weight:inherit;background-position:right center;background-repeat:no-repeat;background-size:18px auto}.country-selector:disabled{color:#00000061}:host.ngx-floating .country-selector{opacity:1!important}.country-selector-flag{display:inline-block;margin-right:.5ex}.country-list-button{color:#000000de;direction:ltr;font-size:16px;font-weight:400;height:initial;line-height:normal;min-height:48px;padding:14px 24px;text-align:left;text-transform:none;width:100%}\n"] }]
5439
- }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CountryCode }, { type: i2$3.FocusMonitor }, { type: i0.ElementRef }, { type: i3.NgControl, decorators: [{
5441
+ }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CountryCode }, { type: i2$2.FocusMonitor }, { type: i0.ElementRef }, { type: i3.NgControl, decorators: [{
5440
5442
  type: Optional
5441
5443
  }, {
5442
5444
  type: Self
@@ -5444,7 +5446,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
5444
5446
  type: Optional
5445
5447
  }] }, { type: i3.FormGroupDirective, decorators: [{
5446
5448
  type: Optional
5447
- }] }, { type: i4$1.ErrorStateMatcher }]; }, propDecorators: { preferredCountries: [{
5449
+ }] }, { type: i4$2.ErrorStateMatcher }]; }, propDecorators: { preferredCountries: [{
5448
5450
  type: Input
5449
5451
  }], enablePlaceholder: [{
5450
5452
  type: Input
@@ -5754,7 +5756,7 @@ class EcabsRadioButtonListComponent extends EcabsElementBaseComponent {
5754
5756
  useExisting: EcabsRadioButtonListComponent,
5755
5757
  multi: true,
5756
5758
  },
5757
- ], viewQueries: [{ propertyName: "matRadioGroup", first: true, predicate: MatRadioGroup, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <mat-radio-group\r\n [ngClass]=\"{ 'flex flex-col my-1': direction === 'vertical' }\"\r\n [(ngModel)]=\"value\"\r\n [disabled]=\"disabled\"\r\n [id]=\"name\"\r\n [name]=\"name\"\r\n (change)=\"changed.emit($event)\"\r\n >\r\n <mat-radio-button\r\n [disabled]=\"item.disabled\"\r\n [ngClass]=\"{ 'my-1': direction === 'vertical' }\"\r\n class=\"mr-4\"\r\n *ngFor=\"let item of items\"\r\n [value]=\"item.value\"\r\n >\r\n {{ item.label }}\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n</ecabs-element-wrapper>\r\n", styles: [".mr-4{margin-right:1rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.flex{display:flex}.flex-col{flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { 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"] }] });
5759
+ ], viewQueries: [{ propertyName: "matRadioGroup", first: true, predicate: MatRadioGroup, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <mat-radio-group\r\n [ngClass]=\"{ 'flex flex-col my-1': direction === 'vertical' }\"\r\n [(ngModel)]=\"value\"\r\n [disabled]=\"disabled\"\r\n [id]=\"name\"\r\n [name]=\"name\"\r\n (change)=\"changed.emit($event)\"\r\n >\r\n <mat-radio-button\r\n [disabled]=\"item.disabled\"\r\n [ngClass]=\"{ 'my-1': direction === 'vertical' }\"\r\n class=\"mr-4\"\r\n *ngFor=\"let item of items\"\r\n [value]=\"item.value\"\r\n >\r\n {{ item.label }}\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n</ecabs-element-wrapper>\r\n", styles: [".mr-4{margin-right:1rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.flex{display:flex}.flex-col{flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3$3.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$3.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { 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"] }] });
5758
5760
  }
5759
5761
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsRadioButtonListComponent, decorators: [{
5760
5762
  type: Component,
@@ -6255,7 +6257,7 @@ class EcabsEmptyPlaceholderComponent {
6255
6257
  }
6256
6258
  }
6257
6259
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsEmptyPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6258
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsEmptyPlaceholderComponent, selector: "ecabs-empty-placeholder", inputs: { title: "title", isEmptyMessage: "isEmptyMessage", redirectPath: "redirectPath", srcImage: "srcImage" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"w-full flex flex-col items-center justify-items-center text-center gap-2\">\r\n <img class=\"mt-10 w-60\" [src]=\"image\" alt=\"\" />\r\n\r\n <ng-container *ngIf=\"title\">\r\n <p class=\"text-lg font-bold leading-7 text-black\">{{ title }}</p>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"isEmptyMessage\">\r\n <p class=\"text-gray-400\">{{ isEmptyMessage }}</p>\r\n </ng-container>\r\n\r\n <ng-content></ng-content>\r\n\r\n <a *ngIf=\"redirectPath\" [routerLink]=\"redirectPath?.path && [redirectPath.path]\" class=\"text-sm mt-2\">\r\n {{ redirectPath.title }}\r\n </a>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
6260
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsEmptyPlaceholderComponent, selector: "ecabs-empty-placeholder", inputs: { title: "title", isEmptyMessage: "isEmptyMessage", redirectPath: "redirectPath", srcImage: "srcImage" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"w-full flex flex-col items-center justify-items-center text-center gap-2\">\r\n <img class=\"mt-10 w-60\" [src]=\"image\" alt=\"\" />\r\n\r\n <ng-container *ngIf=\"title\">\r\n <p class=\"text-lg font-bold leading-7 text-black\">{{ title }}</p>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"isEmptyMessage\">\r\n <p class=\"text-gray-400\">{{ isEmptyMessage }}</p>\r\n </ng-container>\r\n\r\n <ng-content></ng-content>\r\n\r\n <a *ngIf=\"redirectPath\" [routerLink]=\"redirectPath?.path && [redirectPath.path]\" class=\"text-sm mt-2\">\r\n {{ redirectPath.title }}\r\n </a>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
6259
6261
  }
6260
6262
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsEmptyPlaceholderComponent, decorators: [{
6261
6263
  type: Component,
@@ -6321,7 +6323,7 @@ class EcabsExpansionPanelComponent {
6321
6323
  this.checked.emit(this.expanded);
6322
6324
  }
6323
6325
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6324
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsExpansionPanelComponent, selector: "ecabs-expansion-panel", inputs: { title: "title", description: "description", actionTitle: "actionTitle", index: "index", expanded: "expanded", disabled: "disabled", errorMessage: "errorMessage", showErrorMessage: "showErrorMessage", closePanel: "closePanel", showIcon: "showIcon", iconName: "iconName", showCheckbox: "showCheckbox", showStatus: "showStatus", status: "status", hideToggle: "hideToggle" }, outputs: { checked: "checked", opened: "opened" }, viewQueries: [{ propertyName: "expansionPanel", first: true, predicate: MatExpansionPanel, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-accordion class=\"example-headers-align\" multi>\r\n <mat-expansion-panel [expanded]=\"expanded\" [disabled]=\"disabled\" (opened)=\"onOpened()\" [hideToggle]=\"hideToggle\">\r\n <mat-expansion-panel-header *ngIf=\"title\">\r\n <mat-panel-title>\r\n <div>\r\n <div class=\"flex flex-row\">\r\n <div *ngIf=\"index && !showErrorMessage\" class=\"border-current border-2 rounded-full mr-3 index\">\r\n {{ index }}\r\n </div>\r\n <div *ngIf=\"!showErrorMessage && showIcon\" class=\"mr-3 rounded\">\r\n <mat-icon class=\"rounded-icon !text-lg -mt-1\">{{ iconName }}</mat-icon>\r\n </div>\r\n <div *ngIf=\"showErrorMessage\" class=\"mt-1 mr-2\">\r\n <mat-icon color=\"warn\">warning</mat-icon>\r\n </div>\r\n {{ title }}\r\n <div *ngIf=\"showCheckbox\" class=\"ml-2 mt-1\">\r\n <ecabs-checkbox [type]=\"'toggle'\" [(ngModel)]=\"toggle\"\r\n (click)=\"toggleAction($event)\"></ecabs-checkbox>\r\n </div>\r\n </div>\r\n <div *ngIf=\"showErrorMessage\" class=\"error-message\">{{ errorMessage }}</div>\r\n </div>\r\n </mat-panel-title>\r\n <mat-panel-description>{{ description }}\r\n <mat-chip *ngIf=\"showStatus\" class=\"{{ status | lowercase }}\">\r\n {{ status | titlecase }}\r\n </mat-chip>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n\r\n <mat-expansion-panel-header *ngIf=\"actionTitle\">\r\n <ng-container *ngTemplateOutlet=\"actionTitle\"></ng-container>\r\n </mat-expansion-panel-header>\r\n <ng-content></ng-content>\r\n </mat-expansion-panel>\r\n</mat-accordion>\r\n", styles: [".example-action-buttons{padding-bottom:20px}.example-headers-align .mat-expansion-panel-header-title,.example-headers-align .mat-expansion-panel-header-description{flex-basis:0}.example-headers-align .mat-expansion-panel-header-description{justify-content:flex-end;align-items:center}.example-headers-align .mat-mdc-form-field+.mat-mdc-form-field{margin-left:8px}:host ::ng-deep .mat-expansion-indicator:after{border-color:var(--color-gray-500)}.index{height:28px;width:28px;display:flex;align-items:center;justify-content:center;text-align:center;padding-top:3px;font-size:16px}.error-message{font-size:.75rem!important;color:var(--color-error);margin-left:2.125rem;margin-top:-.75rem}.rounded{background-color:var(--color-brand-dark);border-radius:50%;height:28px;width:28px;display:flex;align-items:center;justify-content:center;text-align:center}.rounded-icon{color:var(--color-white)}\n"], dependencies: [{ 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: 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: "directive", type: i3$3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i3$3.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$4.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: EcabsCheckboxToggleComponent, selector: "ecabs-checkbox", inputs: ["type", "text", "label", "labelPosition", "indeterminate", "checked"], outputs: ["click", "changed"] }, { kind: "pipe", type: i1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
6326
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsExpansionPanelComponent, selector: "ecabs-expansion-panel", inputs: { title: "title", description: "description", actionTitle: "actionTitle", index: "index", expanded: "expanded", disabled: "disabled", errorMessage: "errorMessage", showErrorMessage: "showErrorMessage", closePanel: "closePanel", showIcon: "showIcon", iconName: "iconName", showCheckbox: "showCheckbox", showStatus: "showStatus", status: "status", hideToggle: "hideToggle" }, outputs: { checked: "checked", opened: "opened" }, viewQueries: [{ propertyName: "expansionPanel", first: true, predicate: MatExpansionPanel, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-accordion class=\"example-headers-align\" multi>\r\n <mat-expansion-panel [expanded]=\"expanded\" [disabled]=\"disabled\" (opened)=\"onOpened()\" [hideToggle]=\"hideToggle\">\r\n <mat-expansion-panel-header *ngIf=\"title\">\r\n <mat-panel-title>\r\n <div>\r\n <div class=\"flex flex-row\">\r\n <div *ngIf=\"index && !showErrorMessage\" class=\"border-current border-2 rounded-full mr-3 index\">\r\n {{ index }}\r\n </div>\r\n <div *ngIf=\"!showErrorMessage && showIcon\" class=\"mr-3 rounded\">\r\n <mat-icon class=\"rounded-icon !text-lg -mt-1\">{{ iconName }}</mat-icon>\r\n </div>\r\n <div *ngIf=\"showErrorMessage\" class=\"mt-1 mr-2\">\r\n <mat-icon color=\"warn\">warning</mat-icon>\r\n </div>\r\n {{ title }}\r\n <div *ngIf=\"showCheckbox\" class=\"ml-2 mt-1\">\r\n <ecabs-checkbox [type]=\"'toggle'\" [(ngModel)]=\"toggle\"\r\n (click)=\"toggleAction($event)\"></ecabs-checkbox>\r\n </div>\r\n </div>\r\n <div *ngIf=\"showErrorMessage\" class=\"error-message\">{{ errorMessage }}</div>\r\n </div>\r\n </mat-panel-title>\r\n <mat-panel-description>{{ description }}\r\n <mat-chip *ngIf=\"showStatus\" class=\"{{ status | lowercase }}\">\r\n {{ status | titlecase }}\r\n </mat-chip>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n\r\n <mat-expansion-panel-header *ngIf=\"actionTitle\">\r\n <ng-container *ngTemplateOutlet=\"actionTitle\"></ng-container>\r\n </mat-expansion-panel-header>\r\n <ng-content></ng-content>\r\n </mat-expansion-panel>\r\n</mat-accordion>\r\n", styles: [".example-action-buttons{padding-bottom:20px}.example-headers-align .mat-expansion-panel-header-title,.example-headers-align .mat-expansion-panel-header-description{flex-basis:0}.example-headers-align .mat-expansion-panel-header-description{justify-content:flex-end;align-items:center}.example-headers-align .mat-mdc-form-field+.mat-mdc-form-field{margin-left:8px}:host ::ng-deep .mat-expansion-indicator:after{border-color:var(--color-gray-500)}.index{height:28px;width:28px;display:flex;align-items:center;justify-content:center;text-align:center;padding-top:3px;font-size:16px}.error-message{font-size:.75rem!important;color:var(--color-error);margin-left:2.125rem;margin-top:-.75rem}.rounded{background-color:var(--color-brand-dark);border-radius:50%;height:28px;width:28px;display:flex;align-items:center;justify-content:center;text-align:center}.rounded-icon{color:var(--color-white)}\n"], dependencies: [{ 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: 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: "directive", type: i3$4.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i3$4.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: EcabsCheckboxToggleComponent, selector: "ecabs-checkbox", inputs: ["type", "text", "label", "labelPosition", "indeterminate", "checked"], outputs: ["click", "changed"] }, { kind: "pipe", type: i1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
6325
6327
  }
6326
6328
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsExpansionPanelComponent, decorators: [{
6327
6329
  type: Component,
@@ -6403,11 +6405,11 @@ class EcabsTableFilterWrapperComponent {
6403
6405
  title;
6404
6406
  actions;
6405
6407
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTableFilterWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6406
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsTableFilterWrapperComponent, selector: "ecabs-table-filter-wrapper", inputs: { title: "title", actions: "actions" }, ngImport: i0, template: "<ecabs-expansion-panel [title]=\"title\" class=\"block mb-5\" [expanded]=\"true\">\r\n <ng-content></ng-content>\r\n\r\n <div *ngIf=\"actions\" class=\"flex justify-end\">\r\n <ng-container *ngTemplateOutlet=\"actions\"></ng-container>\r\n </div>\r\n</ecabs-expansion-panel>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.mat-expansion-panel-header-title{font-size:22px}:host::ng-deep .btn__group{justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EcabsExpansionPanelComponent, selector: "ecabs-expansion-panel", inputs: ["title", "description", "actionTitle", "index", "expanded", "disabled", "errorMessage", "showErrorMessage", "closePanel", "showIcon", "iconName", "showCheckbox", "showStatus", "status", "hideToggle"], outputs: ["checked", "opened"] }] });
6408
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsTableFilterWrapperComponent, selector: "ecabs-table-filter-wrapper", inputs: { title: "title", actions: "actions" }, ngImport: i0, template: "<ecabs-expansion-panel [title]=\"title\" class=\"block mb-5\" [expanded]=\"true\">\r\n <ng-content></ng-content>\r\n\r\n <div *ngIf=\"actions\" class=\"flex justify-end\">\r\n <ng-container *ngTemplateOutlet=\"actions\"></ng-container>\r\n </div>\r\n</ecabs-expansion-panel>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-border: #FFCDC6;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-info-border: #D1D8F7;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-warning-border: #FBE5B6;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-border: #CEEAD5;--color-success-rgb: 7, 81, 69;--color-default-border: #D5E1ED;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.mat-expansion-panel-header-title{font-size:22px}:host::ng-deep .btn__group{justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EcabsExpansionPanelComponent, selector: "ecabs-expansion-panel", inputs: ["title", "description", "actionTitle", "index", "expanded", "disabled", "errorMessage", "showErrorMessage", "closePanel", "showIcon", "iconName", "showCheckbox", "showStatus", "status", "hideToggle"], outputs: ["checked", "opened"] }] });
6407
6409
  }
6408
6410
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTableFilterWrapperComponent, decorators: [{
6409
6411
  type: Component,
6410
- args: [{ selector: 'ecabs-table-filter-wrapper', template: "<ecabs-expansion-panel [title]=\"title\" class=\"block mb-5\" [expanded]=\"true\">\r\n <ng-content></ng-content>\r\n\r\n <div *ngIf=\"actions\" class=\"flex justify-end\">\r\n <ng-container *ngTemplateOutlet=\"actions\"></ng-container>\r\n </div>\r\n</ecabs-expansion-panel>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.mat-expansion-panel-header-title{font-size:22px}:host::ng-deep .btn__group{justify-content:flex-end}\n"] }]
6412
+ args: [{ selector: 'ecabs-table-filter-wrapper', template: "<ecabs-expansion-panel [title]=\"title\" class=\"block mb-5\" [expanded]=\"true\">\r\n <ng-content></ng-content>\r\n\r\n <div *ngIf=\"actions\" class=\"flex justify-end\">\r\n <ng-container *ngTemplateOutlet=\"actions\"></ng-container>\r\n </div>\r\n</ecabs-expansion-panel>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-border: #FFCDC6;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-info-border: #D1D8F7;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-warning-border: #FBE5B6;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-border: #CEEAD5;--color-success-rgb: 7, 81, 69;--color-default-border: #D5E1ED;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.mat-expansion-panel-header-title{font-size:22px}:host::ng-deep .btn__group{justify-content:flex-end}\n"] }]
6411
6413
  }], propDecorators: { title: [{
6412
6414
  type: Input
6413
6415
  }], actions: [{
@@ -6449,7 +6451,7 @@ class TableComponent {
6449
6451
  }
6450
6452
  }
6451
6453
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6452
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableComponent, selector: "ecabs-table", inputs: { header: "header", paginator: "paginator", bordered: "bordered", loading: "loading", isEmpty: "isEmpty", isEmptyMessage: "isEmptyMessage", isEmptyMessageTitle: "isEmptyMessageTitle", isEmptyExtrasTemplate: "isEmptyExtrasTemplate", redirectPath: "redirectPath", srcImageEmpty: "srcImageEmpty" }, queries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }], ngImport: i0, template: "<section class=\"table-ui table-ui--wrapper\" [ngClass]=\"{ 'table-ui__bordered': bordered, loading: loading }\">\r\n <mat-progress-bar *ngIf=\"loading\" mode=\"indeterminate\" class=\"table-ui__progress\"></mat-progress-bar>\r\n\r\n <div *ngIf=\"header\" class=\"table-ui__header\">\r\n <ng-container *ngTemplateOutlet=\"header\"></ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"showTableContent; else noDataTemplate\">\r\n <ng-content></ng-content>\r\n\r\n <div *ngIf=\"paginator\" class=\"table-ui__paginator\">\r\n <ng-container *ngTemplateOutlet=\"paginator\"></ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <!--#For Empty state -->\r\n <ng-template #noDataTemplate>\r\n <ecabs-empty-placeholder *ngIf=\"!loading\"\r\n [redirectPath]=\"redirectPath\"\r\n [title]=\"isEmptyMessageTitle\"\r\n [isEmptyMessage]=\"isEmptyMessage\"\r\n [srcImage]=\"srcImageEmpty\">\r\n <ng-container *ngIf=\"isEmptyExtrasTemplate\">\r\n <ng-container *ngTemplateOutlet=\"isEmptyExtrasTemplate\"></ng-container>\r\n </ng-container>\r\n </ecabs-empty-placeholder>\r\n </ng-template>\r\n</section>\r\n", styles: [":host mat-progress-bar{position:absolute;width:auto}\n"], 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: "component", type: i2$5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: EcabsEmptyPlaceholderComponent, selector: "ecabs-empty-placeholder", inputs: ["title", "isEmptyMessage", "redirectPath", "srcImage"] }] });
6454
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableComponent, selector: "ecabs-table", inputs: { header: "header", paginator: "paginator", bordered: "bordered", loading: "loading", isEmpty: "isEmpty", isEmptyMessage: "isEmptyMessage", isEmptyMessageTitle: "isEmptyMessageTitle", isEmptyExtrasTemplate: "isEmptyExtrasTemplate", redirectPath: "redirectPath", srcImageEmpty: "srcImageEmpty" }, queries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }], ngImport: i0, template: "<section class=\"table-ui table-ui--wrapper\" [ngClass]=\"{ 'table-ui__bordered': bordered, loading: loading }\">\r\n <mat-progress-bar *ngIf=\"loading\" mode=\"indeterminate\" class=\"table-ui__progress\"></mat-progress-bar>\r\n\r\n <div *ngIf=\"header\" class=\"table-ui__header\">\r\n <ng-container *ngTemplateOutlet=\"header\"></ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"showTableContent; else noDataTemplate\">\r\n <ng-content></ng-content>\r\n\r\n <div *ngIf=\"paginator\" class=\"table-ui__paginator\">\r\n <ng-container *ngTemplateOutlet=\"paginator\"></ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <!--#For Empty state -->\r\n <ng-template #noDataTemplate>\r\n <ecabs-empty-placeholder *ngIf=\"!loading\"\r\n [redirectPath]=\"redirectPath\"\r\n [title]=\"isEmptyMessageTitle\"\r\n [isEmptyMessage]=\"isEmptyMessage\"\r\n [srcImage]=\"srcImageEmpty\">\r\n <ng-container *ngIf=\"isEmptyExtrasTemplate\">\r\n <ng-container *ngTemplateOutlet=\"isEmptyExtrasTemplate\"></ng-container>\r\n </ng-container>\r\n </ecabs-empty-placeholder>\r\n </ng-template>\r\n</section>\r\n", styles: [":host mat-progress-bar{position:absolute;width:auto}\n"], 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: "component", type: i2$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: EcabsEmptyPlaceholderComponent, selector: "ecabs-empty-placeholder", inputs: ["title", "isEmptyMessage", "redirectPath", "srcImage"] }] });
6453
6455
  }
6454
6456
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableComponent, decorators: [{
6455
6457
  type: Component,
@@ -6519,11 +6521,11 @@ class EcabsNoteComponent {
6519
6521
  }
6520
6522
  }
6521
6523
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsNoteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6522
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsNoteComponent, selector: "ecabs-note", inputs: { type: "type" }, ngImport: i0, template: "<div class=\"flex flex-row px-2 py-4 note items-center\" [ngClass]=\"classByType\">\r\n <div class=\"flex ml-2\">\r\n <mat-icon>info_outline</mat-icon>\r\n </div>\r\n <div class=\"ml-4 w-full\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.note{border-radius:.25rem}.note .mat-icon{color:inherit}.note--danger{color:var(--color-error);background-color:var(--color-error-opacity)}.note--warn{background-color:var(--color-warning-opacity);color:var(--color-warning)}.note--success{background-color:var(--color-success--opacity);color:var(--color-success)}.note--default{background-color:rgba(var(--color-info-rgb),.06);color:var(--color-info)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
6524
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsNoteComponent, selector: "ecabs-note", inputs: { type: "type" }, ngImport: i0, template: "<div class=\"flex flex-row px-2 py-4 note items-center\" [ngClass]=\"classByType\">\r\n <div class=\"flex ml-2\">\r\n <mat-icon>info_outline</mat-icon>\r\n </div>\r\n <div class=\"ml-4 w-full\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-border: #FFCDC6;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-info-border: #D1D8F7;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-warning-border: #FBE5B6;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-border: #CEEAD5;--color-success-rgb: 7, 81, 69;--color-default-border: #D5E1ED;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.note{border-radius:.25rem}.note .mat-icon{color:inherit}.note--danger{color:var(--color-error);background-color:var(--color-error-opacity)}.note--warn{background-color:var(--color-warning-opacity);color:var(--color-warning)}.note--success{background-color:var(--color-success--opacity);color:var(--color-success)}.note--default{background-color:rgba(var(--color-info-rgb),.06);color:var(--color-info)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
6523
6525
  }
6524
6526
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsNoteComponent, decorators: [{
6525
6527
  type: Component,
6526
- args: [{ selector: 'ecabs-note', template: "<div class=\"flex flex-row px-2 py-4 note items-center\" [ngClass]=\"classByType\">\r\n <div class=\"flex ml-2\">\r\n <mat-icon>info_outline</mat-icon>\r\n </div>\r\n <div class=\"ml-4 w-full\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.note{border-radius:.25rem}.note .mat-icon{color:inherit}.note--danger{color:var(--color-error);background-color:var(--color-error-opacity)}.note--warn{background-color:var(--color-warning-opacity);color:var(--color-warning)}.note--success{background-color:var(--color-success--opacity);color:var(--color-success)}.note--default{background-color:rgba(var(--color-info-rgb),.06);color:var(--color-info)}\n"] }]
6528
+ args: [{ selector: 'ecabs-note', template: "<div class=\"flex flex-row px-2 py-4 note items-center\" [ngClass]=\"classByType\">\r\n <div class=\"flex ml-2\">\r\n <mat-icon>info_outline</mat-icon>\r\n </div>\r\n <div class=\"ml-4 w-full\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-border: #FFCDC6;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-info-border: #D1D8F7;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-warning-border: #FBE5B6;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-border: #CEEAD5;--color-success-rgb: 7, 81, 69;--color-default-border: #D5E1ED;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}.note{border-radius:.25rem}.note .mat-icon{color:inherit}.note--danger{color:var(--color-error);background-color:var(--color-error-opacity)}.note--warn{background-color:var(--color-warning-opacity);color:var(--color-warning)}.note--success{background-color:var(--color-success--opacity);color:var(--color-success)}.note--default{background-color:rgba(var(--color-info-rgb),.06);color:var(--color-info)}\n"] }]
6527
6529
  }], propDecorators: { type: [{
6528
6530
  type: Input
6529
6531
  }] } });
@@ -6542,6 +6544,402 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
6542
6544
  }]
6543
6545
  }] });
6544
6546
 
6547
+ const CHIP_LABEL_CLASS = 'mdc-evolution-chip__text-label';
6548
+
6549
+ class EcabsBadgeDirective {
6550
+ elementRef;
6551
+ chip;
6552
+ truncationTooltip;
6553
+ variant = 'default';
6554
+ size = 'medium';
6555
+ set bordered(value) {
6556
+ this.hasBorder = coerceBooleanProperty(value);
6557
+ }
6558
+ set disableRipple(value) {
6559
+ this.rippleDisabled = coerceBooleanProperty(value);
6560
+ this.syncChip();
6561
+ }
6562
+ set interactive(value) {
6563
+ this.isInteractive = coerceBooleanProperty(value);
6564
+ this.syncChip();
6565
+ }
6566
+ get badgeClasses() {
6567
+ return [
6568
+ 'badge',
6569
+ `badge--${this.variant}`,
6570
+ `badge--${this.size}`,
6571
+ this.hasBorder && 'badge--bordered',
6572
+ !!this.chip && this.noRipple && 'badge--no-ripple',
6573
+ this.isInteractive && 'badge--interactive',
6574
+ ]
6575
+ .filter(Boolean)
6576
+ .join(' ');
6577
+ }
6578
+ hasBorder = true;
6579
+ rippleDisabled;
6580
+ isInteractive = false;
6581
+ get noRipple() {
6582
+ return this.rippleDisabled ?? !this.isInteractive;
6583
+ }
6584
+ syncChip() {
6585
+ if (!this.chip) {
6586
+ return;
6587
+ }
6588
+ this.chip.role = this.isInteractive ? 'button' : null;
6589
+ this.chip.disableRipple = this.noRipple;
6590
+ if (this.isInteractive) {
6591
+ this.chip.tabIndex = 0;
6592
+ }
6593
+ }
6594
+ constructor(elementRef, menuTrigger, chip, truncationTooltip) {
6595
+ this.elementRef = elementRef;
6596
+ this.chip = chip;
6597
+ this.truncationTooltip = truncationTooltip;
6598
+ if (this.chip && this.truncationTooltip) {
6599
+ this.truncationTooltip.classNameTruncatedTooltip = CHIP_LABEL_CLASS;
6600
+ }
6601
+ this.interactive = !!menuTrigger;
6602
+ }
6603
+ onKeydown(event) {
6604
+ const element = this.elementRef.nativeElement;
6605
+ if (!this.isInteractive ||
6606
+ !this.chip ||
6607
+ event.target !== element ||
6608
+ (event.key !== 'Enter' && event.key !== ' ')) {
6609
+ return;
6610
+ }
6611
+ event.preventDefault();
6612
+ setTimeout(() => element.click());
6613
+ }
6614
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsBadgeDirective, deps: [{ token: i0.ElementRef }, { token: i7$1.MatMenuTrigger, optional: true, self: true }, { token: i2$3.MatChip, optional: true }, { token: EcabsTooltipIfTruncatedDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
6615
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsBadgeDirective, selector: "[ecabsBadge]", inputs: { variant: "variant", size: "size", bordered: "bordered", disableRipple: "disableRipple", interactive: "interactive" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "this.badgeClasses" } }, ngImport: i0 });
6616
+ }
6617
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsBadgeDirective, decorators: [{
6618
+ type: Directive,
6619
+ args: [{
6620
+ selector: '[ecabsBadge]',
6621
+ }]
6622
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i7$1.MatMenuTrigger, decorators: [{
6623
+ type: Optional
6624
+ }, {
6625
+ type: Self
6626
+ }] }, { type: i2$3.MatChip, decorators: [{
6627
+ type: Optional
6628
+ }] }, { type: EcabsTooltipIfTruncatedDirective, decorators: [{
6629
+ type: Optional
6630
+ }] }]; }, propDecorators: { variant: [{
6631
+ type: Input
6632
+ }], size: [{
6633
+ type: Input
6634
+ }], bordered: [{
6635
+ type: Input
6636
+ }], disableRipple: [{
6637
+ type: Input
6638
+ }], interactive: [{
6639
+ type: Input
6640
+ }], badgeClasses: [{
6641
+ type: HostBinding,
6642
+ args: ['class']
6643
+ }], onKeydown: [{
6644
+ type: HostListener,
6645
+ args: ['keydown', ['$event']]
6646
+ }] } });
6647
+
6648
+ class EcabsBadgeComponent {
6649
+ variant = 'default';
6650
+ size = 'medium';
6651
+ set bordered(value) {
6652
+ this.hasBorder = coerceBooleanProperty(value);
6653
+ }
6654
+ hasBorder = true;
6655
+ /**
6656
+ * Icon name, resolved through whichever icon set the library is on (Phosphor
6657
+ * today). Deliberately not named after the vendor so a future icon-set change
6658
+ * does not ripple out to every call site.
6659
+ */
6660
+ icon;
6661
+ /**
6662
+ * Defaults to `bold`: at badge icon sizes (12-18px) a `regular` stroke falls
6663
+ * below one device pixel and antialiases into a ragged edge. `bold` also
6664
+ * matches the ~26/256 ring thickness of the reference design.
6665
+ */
6666
+ iconWeight = 'bold';
6667
+ /**
6668
+ * Material icon ligature, for the cases that need a Material glyph
6669
+ * specifically. Used only when no `icon` is supplied.
6670
+ */
6671
+ materialIcon;
6672
+ /**
6673
+ * Static so it resolves before the first change detection run, keeping the
6674
+ * tooltip binding stable instead of changing after the view is checked.
6675
+ */
6676
+ labelRef;
6677
+ get svgIcon() {
6678
+ return buildPhosphorSvgIcon(this.icon, this.iconWeight);
6679
+ }
6680
+ /**
6681
+ * Tooltip message for a clipped label. Read from the DOM rather than an input
6682
+ * because the label is projected content. `ecabsTooltipIfTruncated` measures
6683
+ * on mouseover, and that host listener also marks this view dirty, so the
6684
+ * message is re-read on hover without any explicit change detection call.
6685
+ * The directive suppresses the tooltip unless the text is actually clipped.
6686
+ */
6687
+ get labelText() {
6688
+ return this.labelRef?.nativeElement?.textContent?.trim() ?? '';
6689
+ }
6690
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6691
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsBadgeComponent, selector: "ecabs-badge", inputs: { variant: "variant", size: "size", bordered: "bordered", icon: "icon", iconWeight: "iconWeight", materialIcon: "materialIcon" }, viewQueries: [{ propertyName: "labelRef", first: true, predicate: ["label"], descendants: true, static: true }], ngImport: i0, template: "<span ecabsBadge\r\n [variant]=\"variant\"\r\n [size]=\"size\"\r\n [bordered]=\"hasBorder\">\r\n <span class=\"badge__icon badge__icon--slot\">\r\n <ng-content select=\"[ecabsBadgeIcon]\"></ng-content>\r\n </span>\r\n\r\n <mat-icon *ngIf=\"svgIcon\"\r\n class=\"badge__icon\"\r\n [svgIcon]=\"svgIcon\">\r\n </mat-icon>\r\n\r\n <mat-icon *ngIf=\"!svgIcon && materialIcon\"\r\n class=\"badge__icon\">{{ materialIcon }}\r\n </mat-icon>\r\n\r\n <span #label\r\n ecabsTooltipIfTruncated\r\n class=\"badge__label\"\r\n [matTooltip]=\"labelText\">\r\n <ng-content></ng-content>\r\n </span>\r\n</span>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EcabsBadgeDirective, selector: "[ecabsBadge]", inputs: ["variant", "size", "bordered", "disableRipple", "interactive"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: EcabsTooltipIfTruncatedDirective, selector: "[matTooltip][ecabsTooltipIfTruncated]", inputs: ["classNameTruncatedTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6692
+ }
6693
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsBadgeComponent, decorators: [{
6694
+ type: Component,
6695
+ args: [{ selector: 'ecabs-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span ecabsBadge\r\n [variant]=\"variant\"\r\n [size]=\"size\"\r\n [bordered]=\"hasBorder\">\r\n <span class=\"badge__icon badge__icon--slot\">\r\n <ng-content select=\"[ecabsBadgeIcon]\"></ng-content>\r\n </span>\r\n\r\n <mat-icon *ngIf=\"svgIcon\"\r\n class=\"badge__icon\"\r\n [svgIcon]=\"svgIcon\">\r\n </mat-icon>\r\n\r\n <mat-icon *ngIf=\"!svgIcon && materialIcon\"\r\n class=\"badge__icon\">{{ materialIcon }}\r\n </mat-icon>\r\n\r\n <span #label\r\n ecabsTooltipIfTruncated\r\n class=\"badge__label\"\r\n [matTooltip]=\"labelText\">\r\n <ng-content></ng-content>\r\n </span>\r\n</span>\r\n" }]
6696
+ }], propDecorators: { variant: [{
6697
+ type: Input
6698
+ }], size: [{
6699
+ type: Input
6700
+ }], bordered: [{
6701
+ type: Input
6702
+ }], icon: [{
6703
+ type: Input
6704
+ }], iconWeight: [{
6705
+ type: Input
6706
+ }], materialIcon: [{
6707
+ type: Input
6708
+ }], labelRef: [{
6709
+ type: ViewChild,
6710
+ args: ['label', { static: true }]
6711
+ }] } });
6712
+
6713
+ class EcabsBadgeDirectiveModule {
6714
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsBadgeDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
6715
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsBadgeDirectiveModule, declarations: [EcabsBadgeDirective], imports: [CommonModule], exports: [EcabsBadgeDirective] });
6716
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsBadgeDirectiveModule, imports: [CommonModule] });
6717
+ }
6718
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsBadgeDirectiveModule, decorators: [{
6719
+ type: NgModule,
6720
+ args: [{
6721
+ imports: [CommonModule],
6722
+ declarations: [EcabsBadgeDirective],
6723
+ exports: [EcabsBadgeDirective],
6724
+ }]
6725
+ }] });
6726
+
6727
+ const STATUS_BADGE_VARIANTS = {
6728
+ /* #Neutral */
6729
+ PENDING: 'default',
6730
+ DRAFT: 'default',
6731
+ ARCHIVED: 'default',
6732
+ RECALLED: 'default',
6733
+ INITIALIZED: 'default',
6734
+ INACTIVE: 'default',
6735
+ /* #Awaiting something */
6736
+ RESERVED: 'warning',
6737
+ SCHEDULED: 'warning',
6738
+ ENDED: 'warning',
6739
+ PENDING_DATA: 'warning',
6740
+ PARTIAL: 'warning',
6741
+ /* #Under way */
6742
+ DISPATCHED: 'info',
6743
+ CAB_ARRIVED_AT_PICKUP: 'info',
6744
+ CAB_ARRIVED_AT_INTERMEDIARY_WAYPOINT: 'info',
6745
+ TRIP_STARTED: 'info',
6746
+ STARTED: 'info',
6747
+ DROPPED_OFF: 'info',
6748
+ TRIP_ONGOING: 'info',
6749
+ IN_PROGRESS: 'info',
6750
+ IN_PROGRESS_ADJUSTMENT: 'info',
6751
+ IN_PROGRESS_PAYOUT: 'info',
6752
+ PROCESSING: 'info',
6753
+ PUBLISHED: 'info',
6754
+ PENDING_REVIEW: 'info',
6755
+ /* #Landed well */
6756
+ ACCEPTED: 'success',
6757
+ CAB_ARRIVED_AT_DROPOFF: 'success',
6758
+ TRIP_ENDED: 'success',
6759
+ COMPLETED: 'success',
6760
+ ADJUSTMENT_COMPLETED: 'success',
6761
+ CASHED_IN: 'success',
6762
+ DONE: 'success',
6763
+ SUCCESS: 'success',
6764
+ ACTIVE: 'success',
6765
+ /* #Landed badly */
6766
+ CANCELLED: 'danger',
6767
+ REJECTED: 'danger',
6768
+ SUSPENDED: 'danger',
6769
+ SICK: 'danger',
6770
+ NO_SHOW: 'danger',
6771
+ UNABLE_TO_COMPLETE: 'danger',
6772
+ UNAVAILABLE: 'danger',
6773
+ FAILED: 'danger',
6774
+ EXPIRED: 'danger',
6775
+ BLACKLISTED: 'danger',
6776
+ };
6777
+ const normaliseStatusEnum = (status) => status.replace(/([a-z])([A-Z])/g, '$1_$2').toUpperCase();
6778
+ const resolveStatusBadgeVariant = (status) => (status && STATUS_BADGE_VARIANTS[normaliseStatusEnum(status)]) || 'default';
6779
+
6780
+ class EcabsStatusBadgeVariantPipe {
6781
+ transform(status) {
6782
+ return resolveStatusBadgeVariant(status);
6783
+ }
6784
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsStatusBadgeVariantPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
6785
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsStatusBadgeVariantPipe, name: "statusBadgeVariant" });
6786
+ }
6787
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsStatusBadgeVariantPipe, decorators: [{
6788
+ type: Pipe,
6789
+ args: [{
6790
+ name: 'statusBadgeVariant',
6791
+ }]
6792
+ }] });
6793
+
6794
+ class EcabsBadgeModule {
6795
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
6796
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsBadgeModule, declarations: [EcabsBadgeComponent, EcabsStatusBadgeVariantPipe], imports: [CommonModule,
6797
+ EcabsBadgeDirectiveModule,
6798
+ MatIconModule,
6799
+ MatTooltipModule,
6800
+ EcabsTooltipIfTruncatedDirectiveModule], exports: [EcabsBadgeComponent,
6801
+ EcabsBadgeDirectiveModule,
6802
+ EcabsStatusBadgeVariantPipe,
6803
+ EcabsTooltipIfTruncatedDirectiveModule] });
6804
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsBadgeModule, imports: [CommonModule,
6805
+ EcabsBadgeDirectiveModule,
6806
+ MatIconModule,
6807
+ MatTooltipModule,
6808
+ EcabsTooltipIfTruncatedDirectiveModule, EcabsBadgeDirectiveModule,
6809
+ EcabsTooltipIfTruncatedDirectiveModule] });
6810
+ }
6811
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsBadgeModule, decorators: [{
6812
+ type: NgModule,
6813
+ args: [{
6814
+ declarations: [EcabsBadgeComponent, EcabsStatusBadgeVariantPipe],
6815
+ imports: [
6816
+ CommonModule,
6817
+ EcabsBadgeDirectiveModule,
6818
+ MatIconModule,
6819
+ MatTooltipModule,
6820
+ EcabsTooltipIfTruncatedDirectiveModule,
6821
+ ],
6822
+ exports: [
6823
+ EcabsBadgeComponent,
6824
+ EcabsBadgeDirectiveModule,
6825
+ EcabsStatusBadgeVariantPipe,
6826
+ EcabsTooltipIfTruncatedDirectiveModule,
6827
+ ],
6828
+ }]
6829
+ }] });
6830
+
6831
+ class EcabsActionMenuTriggerDirective {
6832
+ templateRef;
6833
+ constructor(templateRef) {
6834
+ this.templateRef = templateRef;
6835
+ }
6836
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsActionMenuTriggerDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
6837
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsActionMenuTriggerDirective, selector: "[ecabsActionMenuTrigger]", ngImport: i0 });
6838
+ }
6839
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsActionMenuTriggerDirective, decorators: [{
6840
+ type: Directive,
6841
+ args: [{
6842
+ selector: '[ecabsActionMenuTrigger]',
6843
+ }]
6844
+ }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
6845
+
6846
+ class EcabsActionMenuComponent {
6847
+ groups = [];
6848
+ triggerIcon = 'dots-three-vertical';
6849
+ triggerIconWeight = 'bold';
6850
+ triggerAriaLabel;
6851
+ xPosition = 'before';
6852
+ menuClass = '';
6853
+ triggerFocusable = true;
6854
+ showTrigger = true;
6855
+ customTrigger;
6856
+ menu;
6857
+ menuTrigger;
6858
+ get panelClass() {
6859
+ return this.menuClass
6860
+ ? `action-menu-panel ${this.menuClass}`
6861
+ : 'action-menu-panel';
6862
+ }
6863
+ get triggerSvgIcon() {
6864
+ return buildPhosphorSvgIcon(this.triggerIcon, this.triggerIconWeight);
6865
+ }
6866
+ itemSvgIcon(item) {
6867
+ return buildPhosphorSvgIcon(item.icon, item.iconWeight);
6868
+ }
6869
+ triggerKeydown(event) {
6870
+ if (!this.triggerFocusable || event.target !== event.currentTarget) {
6871
+ return;
6872
+ }
6873
+ event.preventDefault();
6874
+ this.menuTrigger?.openMenu();
6875
+ }
6876
+ trackByGroup(index) {
6877
+ return index;
6878
+ }
6879
+ trackByItem(_, item) {
6880
+ return item.label;
6881
+ }
6882
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsActionMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6883
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsActionMenuComponent, selector: "ecabs-action-menu", inputs: { groups: "groups", triggerIcon: "triggerIcon", triggerIconWeight: "triggerIconWeight", triggerAriaLabel: "triggerAriaLabel", xPosition: "xPosition", menuClass: "menuClass", triggerFocusable: "triggerFocusable", showTrigger: "showTrigger" }, queries: [{ propertyName: "customTrigger", first: true, predicate: EcabsActionMenuTriggerDirective, descendants: true }], viewQueries: [{ propertyName: "menu", first: true, predicate: MatMenu, descendants: true, static: true }, { propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"showTrigger && groups.length\">\r\n <span *ngIf=\"customTrigger; else defaultTrigger\"\r\n class=\"action-menu__trigger\"\r\n [attr.tabindex]=\"triggerFocusable ? 0 : -1\"\r\n [attr.role]=\"triggerFocusable ? 'button' : null\"\r\n [matMenuTriggerFor]=\"menu\"\r\n (keydown.enter)=\"triggerKeydown($event)\"\r\n (keydown.space)=\"triggerKeydown($event)\">\r\n <ng-container *ngTemplateOutlet=\"customTrigger.templateRef\"></ng-container>\r\n </span>\r\n\r\n <ng-template #defaultTrigger>\r\n <button mat-icon-button\r\n type=\"button\"\r\n [attr.aria-label]=\"triggerAriaLabel || null\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon class=\"action-menu__trigger-icon\"\r\n [svgIcon]=\"triggerSvgIcon\"\r\n aria-hidden=\"true\">\r\n </mat-icon>\r\n </button>\r\n </ng-template>\r\n</ng-container>\r\n\r\n<mat-menu #menu=\"matMenu\"\r\n [class]=\"panelClass\"\r\n [xPosition]=\"xPosition\">\r\n <ng-container *ngFor=\"let group of groups; let isFirst = first; trackBy: trackByGroup\">\r\n <mat-divider *ngIf=\"!isFirst\"></mat-divider>\r\n <button *ngFor=\"let item of group; trackBy: trackByItem\"\r\n mat-menu-item\r\n type=\"button\"\r\n class=\"action-menu-item\"\r\n [class.action-menu-item--destructive]=\"item.isDestructive\"\r\n (click)=\"item.action()\">\r\n <mat-icon *ngIf=\"item.icon\"\r\n class=\"action-menu-item__icon\"\r\n [svgIcon]=\"itemSvgIcon(item)\"\r\n aria-hidden=\"true\">\r\n </mat-icon>\r\n <span class=\"action-menu-item__label\">{{ item.label }}</span>\r\n </button>\r\n </ng-container>\r\n</mat-menu>\r\n", styles: [""], 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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6884
+ }
6885
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsActionMenuComponent, decorators: [{
6886
+ type: Component,
6887
+ args: [{ selector: 'ecabs-action-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"showTrigger && groups.length\">\r\n <span *ngIf=\"customTrigger; else defaultTrigger\"\r\n class=\"action-menu__trigger\"\r\n [attr.tabindex]=\"triggerFocusable ? 0 : -1\"\r\n [attr.role]=\"triggerFocusable ? 'button' : null\"\r\n [matMenuTriggerFor]=\"menu\"\r\n (keydown.enter)=\"triggerKeydown($event)\"\r\n (keydown.space)=\"triggerKeydown($event)\">\r\n <ng-container *ngTemplateOutlet=\"customTrigger.templateRef\"></ng-container>\r\n </span>\r\n\r\n <ng-template #defaultTrigger>\r\n <button mat-icon-button\r\n type=\"button\"\r\n [attr.aria-label]=\"triggerAriaLabel || null\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon class=\"action-menu__trigger-icon\"\r\n [svgIcon]=\"triggerSvgIcon\"\r\n aria-hidden=\"true\">\r\n </mat-icon>\r\n </button>\r\n </ng-template>\r\n</ng-container>\r\n\r\n<mat-menu #menu=\"matMenu\"\r\n [class]=\"panelClass\"\r\n [xPosition]=\"xPosition\">\r\n <ng-container *ngFor=\"let group of groups; let isFirst = first; trackBy: trackByGroup\">\r\n <mat-divider *ngIf=\"!isFirst\"></mat-divider>\r\n <button *ngFor=\"let item of group; trackBy: trackByItem\"\r\n mat-menu-item\r\n type=\"button\"\r\n class=\"action-menu-item\"\r\n [class.action-menu-item--destructive]=\"item.isDestructive\"\r\n (click)=\"item.action()\">\r\n <mat-icon *ngIf=\"item.icon\"\r\n class=\"action-menu-item__icon\"\r\n [svgIcon]=\"itemSvgIcon(item)\"\r\n aria-hidden=\"true\">\r\n </mat-icon>\r\n <span class=\"action-menu-item__label\">{{ item.label }}</span>\r\n </button>\r\n </ng-container>\r\n</mat-menu>\r\n" }]
6888
+ }], propDecorators: { groups: [{
6889
+ type: Input
6890
+ }], triggerIcon: [{
6891
+ type: Input
6892
+ }], triggerIconWeight: [{
6893
+ type: Input
6894
+ }], triggerAriaLabel: [{
6895
+ type: Input
6896
+ }], xPosition: [{
6897
+ type: Input
6898
+ }], menuClass: [{
6899
+ type: Input
6900
+ }], triggerFocusable: [{
6901
+ type: Input
6902
+ }], showTrigger: [{
6903
+ type: Input
6904
+ }], customTrigger: [{
6905
+ type: ContentChild,
6906
+ args: [EcabsActionMenuTriggerDirective]
6907
+ }], menu: [{
6908
+ type: ViewChild,
6909
+ args: [MatMenu, { static: true }]
6910
+ }], menuTrigger: [{
6911
+ type: ViewChild,
6912
+ args: [MatMenuTrigger]
6913
+ }] } });
6914
+
6915
+ class EcabsActionMenuModule {
6916
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsActionMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
6917
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EcabsActionMenuModule, declarations: [EcabsActionMenuComponent, EcabsActionMenuTriggerDirective], imports: [CommonModule,
6918
+ MatButtonModule,
6919
+ MatDividerModule,
6920
+ MatIconModule,
6921
+ MatMenuModule], exports: [EcabsActionMenuComponent, EcabsActionMenuTriggerDirective] });
6922
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsActionMenuModule, imports: [CommonModule,
6923
+ MatButtonModule,
6924
+ MatDividerModule,
6925
+ MatIconModule,
6926
+ MatMenuModule] });
6927
+ }
6928
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsActionMenuModule, decorators: [{
6929
+ type: NgModule,
6930
+ args: [{
6931
+ declarations: [EcabsActionMenuComponent, EcabsActionMenuTriggerDirective],
6932
+ imports: [
6933
+ CommonModule,
6934
+ MatButtonModule,
6935
+ MatDividerModule,
6936
+ MatIconModule,
6937
+ MatMenuModule,
6938
+ ],
6939
+ exports: [EcabsActionMenuComponent, EcabsActionMenuTriggerDirective],
6940
+ }]
6941
+ }] });
6942
+
6545
6943
  class EcabsDialogConfirmComponent {
6546
6944
  data;
6547
6945
  dialogRef;
@@ -6599,7 +6997,7 @@ class EcabsDialogConfirmComponent {
6599
6997
  this.dialogRef.close(this.data.popoverResult ?? false);
6600
6998
  }
6601
6999
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDialogConfirmComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$2.MatDialogRef }, { token: UnsubscribeService }, { token: EcabsComponentsService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
6602
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDialogConfirmComponent, selector: "ecabs-dialog-confirm", providers: [UnsubscribeService], ngImport: i0, template: "<div matDialogTitle *ngIf=\"data?.titleTemplate; else title\">\r\n <div class=\"flex items-center justify-between modal-title\">\r\n <ng-container *ngTemplateOutlet=\"data?.titleTemplate\"></ng-container>\r\n\r\n <mat-icon *ngIf=\"!!data?.isPopover\" (click)=\"closeOnPopover()\"\r\n (keydown.enter)=\"closeOnPopover()\"\r\n class=\"mat-icon material-icons-outlined justify-end icon--close\">\r\n close\r\n </mat-icon>\r\n </div>\r\n</div>\r\n\r\n\r\n<ng-template #title>\r\n <div matDialogTitle *ngIf=\"data?.title || !!data?.isPopover\" class=\"flex flex-column\">\r\n <div *ngIf=\"!!data?.isPopover\" class=\"w-full flex justify-end\">\r\n <mat-icon (click)=\"closeOnPopover()\"\r\n (keydown.enter)=\"closeOnPopover()\"\r\n class=\"mat-icon material-icons-outlined float-right icon--close mb-2\">\r\n close\r\n </mat-icon>\r\n </div>\r\n\r\n <div class=\"font-semibold heading--xs modal-title {{ data.titleColor }}\" *ngIf=\"data.title\">\r\n {{ data.title }}\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<div mat-dialog-content>\r\n <div *ngIf=\"data?.content\">{{ data?.content }}</div>\r\n <ng-container *ngTemplateOutlet=\"data?.message\"></ng-container>\r\n</div>\r\n\r\n<div *ngIf=\"(!!data?.cancelLabel || !!data?.confirmLabel) && !data?.hideCtaButtons\">\r\n <div mat-dialog-actions\r\n [ngClass]=\"{'gap-y-4': data?.useFullButtonSize || data?.splitButtonsWidth}\"\r\n class=\"btn__group flex justify-end w-full\">\r\n <ecabs-buttons *ngIf=\"!!data?.cancelLabel\"\r\n [ngClass]=\"{'flex-1': data?.splitButtonsWidth}\"\r\n [full]=\"data?.useFullButtonSize\"\r\n (click)=\"closeFalsey()\"\r\n (keydown.enter)=\"closeFalsey()\"\r\n [style]=\"data?.cancelStyle || 'stroked'\">\r\n {{ data?.cancelLabel }}\r\n </ecabs-buttons>\r\n\r\n <ecabs-buttons *ngIf=\"!!data?.confirmLabel\"\r\n [ngClass]=\"{'flex-1': data?.splitButtonsWidth}\"\r\n [full]=\"data?.useFullButtonSize\"\r\n [color]=\"data?.color || color\"\r\n [style]=\"data?.confirmStyle || 'flat'\"\r\n [loading]=\"data?.loading$ | async\"\r\n (click)=\"closeDialog()\"\r\n [disabled]=\"data?.disableConfirm$ | async\"\r\n (keydown.enter)=\"closeDialog()\">\r\n {{ data?.confirmLabel }}\r\n </ecabs-buttons>\r\n </div>\r\n</div>\r\n", styles: [":host .mat-icon.icon--close,:host ::ng-deep .mat-icon.icon--close{cursor:pointer;color:var(--color-gray-500)}.modal-title.warn{color:var(--color-error)!important}\n"], 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$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: ButtonsComponent, selector: "ecabs-buttons", inputs: ["disabled", "loading", "size", "type", "style", "full", "color"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
7000
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDialogConfirmComponent, selector: "ecabs-dialog-confirm", providers: [UnsubscribeService], ngImport: i0, template: "<div matDialogTitle *ngIf=\"data?.titleTemplate; else title\">\r\n <div class=\"flex items-center justify-between modal-title\">\r\n <ng-container *ngTemplateOutlet=\"data?.titleTemplate\"></ng-container>\r\n\r\n <mat-icon *ngIf=\"!!data?.isPopover\" (click)=\"closeOnPopover()\"\r\n (keydown.enter)=\"closeOnPopover()\"\r\n class=\"mat-icon material-icons-outlined justify-end icon--close\">\r\n close\r\n </mat-icon>\r\n </div>\r\n</div>\r\n\r\n\r\n<ng-template #title>\r\n <div matDialogTitle *ngIf=\"data?.title || !!data?.isPopover\" class=\"flex flex-column\">\r\n <div *ngIf=\"!!data?.isPopover\" class=\"w-full flex justify-end\">\r\n <mat-icon (click)=\"closeOnPopover()\"\r\n (keydown.enter)=\"closeOnPopover()\"\r\n class=\"mat-icon material-icons-outlined float-right icon--close mb-2\">\r\n close\r\n </mat-icon>\r\n </div>\r\n\r\n <div class=\"font-semibold heading--xs modal-title {{ data.titleColor }}\" *ngIf=\"data.title\">\r\n {{ data.title }}\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<div mat-dialog-content>\r\n <div *ngIf=\"data?.content\">{{ data?.content }}</div>\r\n <ng-container *ngTemplateOutlet=\"data?.message\"></ng-container>\r\n</div>\r\n\r\n<div *ngIf=\"(!!data?.cancelLabel || !!data?.confirmLabel) && !data?.hideCtaButtons\">\r\n <div mat-dialog-actions\r\n [ngClass]=\"{'gap-y-4': data?.useFullButtonSize || data?.splitButtonsWidth}\"\r\n class=\"btn__group flex justify-end w-full\">\r\n <ecabs-buttons *ngIf=\"!!data?.cancelLabel\"\r\n [ngClass]=\"{'flex-1': data?.splitButtonsWidth}\"\r\n [full]=\"data?.useFullButtonSize\"\r\n (click)=\"closeFalsey()\"\r\n (keydown.enter)=\"closeFalsey()\"\r\n [style]=\"data?.cancelStyle || 'stroked'\">\r\n {{ data?.cancelLabel }}\r\n </ecabs-buttons>\r\n\r\n <ecabs-buttons *ngIf=\"!!data?.confirmLabel\"\r\n [ngClass]=\"{'flex-1': data?.splitButtonsWidth}\"\r\n [full]=\"data?.useFullButtonSize\"\r\n [color]=\"data?.color || color\"\r\n [style]=\"data?.confirmStyle || 'flat'\"\r\n [loading]=\"data?.loading$ | async\"\r\n (click)=\"closeDialog()\"\r\n [disabled]=\"data?.disableConfirm$ | async\"\r\n (keydown.enter)=\"closeDialog()\">\r\n {{ data?.confirmLabel }}\r\n </ecabs-buttons>\r\n </div>\r\n</div>\r\n", styles: [":host .mat-icon.icon--close,:host ::ng-deep .mat-icon.icon--close{cursor:pointer;color:var(--color-gray-500)}.modal-title.warn{color:var(--color-error)!important}\n"], 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$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: ButtonsComponent, selector: "ecabs-buttons", inputs: ["disabled", "loading", "size", "type", "style", "full", "color"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
6603
7001
  }
6604
7002
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDialogConfirmComponent, decorators: [{
6605
7003
  type: Component,
@@ -6664,11 +7062,11 @@ class EcabsDialogMessageComponent {
6664
7062
  }
6665
7063
  }
6666
7064
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDialogMessageComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
6667
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDialogMessageComponent, selector: "ecabs-dialog-message", ngImport: i0, template: "<div matDialogTitle *ngIf=\"data?.title || !!data?.isPopover\" class=\"flex flex-column\">\r\n <div *ngIf=\"!!data?.isPopover\" class=\"w-full flex justify-end\">\r\n <mat-icon\r\n (click)=\"dialogRef.close(false)\"\r\n class=\"mat-icon material-icons-outlined float-right icon--close mb-2\"\r\n role=\"button\"\r\n >\r\n close\r\n </mat-icon>\r\n </div>\r\n\r\n <div *ngIf=\"data.title\" class=\"font-semibold heading--xs\" [ngClass]=\"classByType\">\r\n {{ data.title }}\r\n </div>\r\n</div>\r\n\r\n<div mat-dialog-content>\r\n {{data?.message}}\r\n</div>\r\n\r\n<div class=\"pb-6\">\r\n <div mat-dialog-actions class=\"btn__group flex justify-end w-full\" *ngIf=\"!data?.isPopover\">\r\n <ecabs-buttons [color]=\"data?.color || color\" [full]=\"data?.isButtonBlock\" [loading]=\"data.loading$ | async\" (click)=\"closeDialog()\">\r\n {{ data?.confirmLabel }}\r\n </ecabs-buttons>\r\n </div>\r\n</div>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host .mat-mdc-dialog-title .mat-icon.icon--close,:host ::ng-deep .mat-mdc-dialog-title .mat-icon.icon--close{width:20px;height:20px;line-height:20px;font-size:20px}:host app-buttons,:host ::ng-deep app-buttons{width:calc(50% - .5rem)}:host button,:host ::ng-deep button{width:100%}.title--accent{color:var(--color-error)}.title--warn{color:var(--color-warning)}.title--success{color:var(--color-success)}.title--default{color:var(--color-info)}\n"], 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$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: ButtonsComponent, selector: "ecabs-buttons", inputs: ["disabled", "loading", "size", "type", "style", "full", "color"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
7065
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDialogMessageComponent, selector: "ecabs-dialog-message", ngImport: i0, template: "<div matDialogTitle *ngIf=\"data?.title || !!data?.isPopover\" class=\"flex flex-column\">\r\n <div *ngIf=\"!!data?.isPopover\" class=\"w-full flex justify-end\">\r\n <mat-icon\r\n (click)=\"dialogRef.close(false)\"\r\n class=\"mat-icon material-icons-outlined float-right icon--close mb-2\"\r\n role=\"button\"\r\n >\r\n close\r\n </mat-icon>\r\n </div>\r\n\r\n <div *ngIf=\"data.title\" class=\"font-semibold heading--xs\" [ngClass]=\"classByType\">\r\n {{ data.title }}\r\n </div>\r\n</div>\r\n\r\n<div mat-dialog-content>\r\n {{data?.message}}\r\n</div>\r\n\r\n<div class=\"pb-6\">\r\n <div mat-dialog-actions class=\"btn__group flex justify-end w-full\" *ngIf=\"!data?.isPopover\">\r\n <ecabs-buttons [color]=\"data?.color || color\" [full]=\"data?.isButtonBlock\" [loading]=\"data.loading$ | async\" (click)=\"closeDialog()\">\r\n {{ data?.confirmLabel }}\r\n </ecabs-buttons>\r\n </div>\r\n</div>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-border: #FFCDC6;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-info-border: #D1D8F7;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-warning-border: #FBE5B6;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-border: #CEEAD5;--color-success-rgb: 7, 81, 69;--color-default-border: #D5E1ED;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host .mat-mdc-dialog-title .mat-icon.icon--close,:host ::ng-deep .mat-mdc-dialog-title .mat-icon.icon--close{width:20px;height:20px;line-height:20px;font-size:20px}:host app-buttons,:host ::ng-deep app-buttons{width:calc(50% - .5rem)}:host button,:host ::ng-deep button{width:100%}.title--accent{color:var(--color-error)}.title--warn{color:var(--color-warning)}.title--success{color:var(--color-success)}.title--default{color:var(--color-info)}\n"], 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$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: ButtonsComponent, selector: "ecabs-buttons", inputs: ["disabled", "loading", "size", "type", "style", "full", "color"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
6668
7066
  }
6669
7067
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDialogMessageComponent, decorators: [{
6670
7068
  type: Component,
6671
- args: [{ selector: 'ecabs-dialog-message', template: "<div matDialogTitle *ngIf=\"data?.title || !!data?.isPopover\" class=\"flex flex-column\">\r\n <div *ngIf=\"!!data?.isPopover\" class=\"w-full flex justify-end\">\r\n <mat-icon\r\n (click)=\"dialogRef.close(false)\"\r\n class=\"mat-icon material-icons-outlined float-right icon--close mb-2\"\r\n role=\"button\"\r\n >\r\n close\r\n </mat-icon>\r\n </div>\r\n\r\n <div *ngIf=\"data.title\" class=\"font-semibold heading--xs\" [ngClass]=\"classByType\">\r\n {{ data.title }}\r\n </div>\r\n</div>\r\n\r\n<div mat-dialog-content>\r\n {{data?.message}}\r\n</div>\r\n\r\n<div class=\"pb-6\">\r\n <div mat-dialog-actions class=\"btn__group flex justify-end w-full\" *ngIf=\"!data?.isPopover\">\r\n <ecabs-buttons [color]=\"data?.color || color\" [full]=\"data?.isButtonBlock\" [loading]=\"data.loading$ | async\" (click)=\"closeDialog()\">\r\n {{ data?.confirmLabel }}\r\n </ecabs-buttons>\r\n </div>\r\n</div>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host .mat-mdc-dialog-title .mat-icon.icon--close,:host ::ng-deep .mat-mdc-dialog-title .mat-icon.icon--close{width:20px;height:20px;line-height:20px;font-size:20px}:host app-buttons,:host ::ng-deep app-buttons{width:calc(50% - .5rem)}:host button,:host ::ng-deep button{width:100%}.title--accent{color:var(--color-error)}.title--warn{color:var(--color-warning)}.title--success{color:var(--color-success)}.title--default{color:var(--color-info)}\n"] }]
7069
+ args: [{ selector: 'ecabs-dialog-message', template: "<div matDialogTitle *ngIf=\"data?.title || !!data?.isPopover\" class=\"flex flex-column\">\r\n <div *ngIf=\"!!data?.isPopover\" class=\"w-full flex justify-end\">\r\n <mat-icon\r\n (click)=\"dialogRef.close(false)\"\r\n class=\"mat-icon material-icons-outlined float-right icon--close mb-2\"\r\n role=\"button\"\r\n >\r\n close\r\n </mat-icon>\r\n </div>\r\n\r\n <div *ngIf=\"data.title\" class=\"font-semibold heading--xs\" [ngClass]=\"classByType\">\r\n {{ data.title }}\r\n </div>\r\n</div>\r\n\r\n<div mat-dialog-content>\r\n {{data?.message}}\r\n</div>\r\n\r\n<div class=\"pb-6\">\r\n <div mat-dialog-actions class=\"btn__group flex justify-end w-full\" *ngIf=\"!data?.isPopover\">\r\n <ecabs-buttons [color]=\"data?.color || color\" [full]=\"data?.isButtonBlock\" [loading]=\"data.loading$ | async\" (click)=\"closeDialog()\">\r\n {{ data?.confirmLabel }}\r\n </ecabs-buttons>\r\n </div>\r\n</div>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-border: #FFCDC6;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-info-border: #D1D8F7;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-warning-border: #FBE5B6;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-border: #CEEAD5;--color-success-rgb: 7, 81, 69;--color-default-border: #D5E1ED;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host .mat-mdc-dialog-title .mat-icon.icon--close,:host ::ng-deep .mat-mdc-dialog-title .mat-icon.icon--close{width:20px;height:20px;line-height:20px;font-size:20px}:host app-buttons,:host ::ng-deep app-buttons{width:calc(50% - .5rem)}:host button,:host ::ng-deep button{width:100%}.title--accent{color:var(--color-error)}.title--warn{color:var(--color-warning)}.title--success{color:var(--color-success)}.title--default{color:var(--color-info)}\n"] }]
6672
7070
  }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
6673
7071
  type: Inject,
6674
7072
  args: [MAT_DIALOG_DATA]
@@ -6690,7 +7088,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
6690
7088
  class EcabsBreadcrumbComponent {
6691
7089
  breadcrumb;
6692
7090
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6693
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsBreadcrumbComponent, selector: "ecabs-breadcrumb", inputs: { breadcrumb: "breadcrumb" }, ngImport: i0, template: "<ul class=\"flex text-gray-500 text-sm\">\r\n <li\r\n *ngFor=\"let item of breadcrumb; let counter = index\"\r\n [routerLink]=\"item.url\"\r\n [ngClass]=\"{ 'cursor-pointer': item.url }\"\r\n class=\"flex\"\r\n >\r\n <mat-icon class=\"!text-sm text-center text-gray-400\" *ngIf=\"counter !== 0\">keyboard_arrow_right</mat-icon>\r\n <span>{{ item.title }}</span>\r\n </li>\r\n</ul>\r\n", styles: [""], dependencies: [{ 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: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7091
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsBreadcrumbComponent, selector: "ecabs-breadcrumb", inputs: { breadcrumb: "breadcrumb" }, ngImport: i0, template: "<ul class=\"flex text-gray-500 text-sm\">\r\n <li\r\n *ngFor=\"let item of breadcrumb; let counter = index\"\r\n [routerLink]=\"item.url\"\r\n [ngClass]=\"{ 'cursor-pointer': item.url }\"\r\n class=\"flex\"\r\n >\r\n <mat-icon class=\"!text-sm text-center text-gray-400\" *ngIf=\"counter !== 0\">keyboard_arrow_right</mat-icon>\r\n <span>{{ item.title }}</span>\r\n </li>\r\n</ul>\r\n", styles: [""], dependencies: [{ 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: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6694
7092
  }
6695
7093
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsBreadcrumbComponent, decorators: [{
6696
7094
  type: Component,
@@ -6750,11 +7148,11 @@ class EcabsLanguageSelectorComponent {
6750
7148
  return lang.of(code);
6751
7149
  }
6752
7150
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsLanguageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6753
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsLanguageSelectorComponent, selector: "ecabs-language-selector", inputs: { languages: "languages", currentLanguage: "currentLanguage", showLabelTitle: "showLabelTitle", flagOnly: "flagOnly", tooltip: "tooltip" }, outputs: { languageChanged: "languageChanged" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field appearance=\"outline\"\r\n [ngClass]=\"{'flag-only': flagOnly}\">\r\n <mat-label></mat-label>\r\n <mat-select class=\"capitalize\"\r\n [(ngModel)]=\"selectedLang\"\r\n name=\"language\"\r\n (ngModelChange)=\"toggleLang()\"\r\n panelClass=\"wide-select\">\r\n <mat-select-trigger>\r\n <div class=\"flex items-center\" [matTooltip]=\"tooltip\">\r\n <span [ngClass]=\"flagClass(matchSelected())\"></span>\r\n <div *ngIf=\"!flagOnly\" class=\"ml-2\">{{ standardLang(matchSelected()) }}</div>\r\n </div>\r\n </mat-select-trigger>\r\n <mat-option class=\"capitalize\" *ngFor=\"let lang of languages\" [value]=\"lang\">\r\n <div class=\"flex items-center\">\r\n <span [ngClass]=\"flagClass(lang)\"></span>\r\n <div class=\"ml-2\">{{ standardLang(lang) }}</div>\r\n </div>\r\n </mat-option>\r\n </mat-select>\r\n</mat-form-field>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host::ng-deep .mat-mdc-select{padding:0;border:0}:host::ng-deep .mat-mdc-select .mat-mdc-select-arrow-wrapper{display:none}:host::ng-deep .mat-mdc-select,:host::ng-deep .mat-mdc-select .mdc-list-item{font-size:12px;font-size:.75rem}:host::ng-deep .mat-mdc-select-panel .mat-mdc-option.mdc-list-item{font-size:12px;font-size:.75rem}:host::ng-deep .mat-mdc-form-field{width:auto}:host::ng-deep .flag-only .mat-mdc-select .mat-mdc-select-arrow-wrapper{width:0}:host::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__leading,:host::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__notch,:host::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__trailing{border:0}\n"], dependencies: [{ 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: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { 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: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
7151
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsLanguageSelectorComponent, selector: "ecabs-language-selector", inputs: { languages: "languages", currentLanguage: "currentLanguage", showLabelTitle: "showLabelTitle", flagOnly: "flagOnly", tooltip: "tooltip" }, outputs: { languageChanged: "languageChanged" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field appearance=\"outline\"\r\n [ngClass]=\"{'flag-only': flagOnly}\">\r\n <mat-label></mat-label>\r\n <mat-select class=\"capitalize\"\r\n [(ngModel)]=\"selectedLang\"\r\n name=\"language\"\r\n (ngModelChange)=\"toggleLang()\"\r\n panelClass=\"wide-select\">\r\n <mat-select-trigger>\r\n <div class=\"flex items-center\" [matTooltip]=\"tooltip\">\r\n <span [ngClass]=\"flagClass(matchSelected())\"></span>\r\n <div *ngIf=\"!flagOnly\" class=\"ml-2\">{{ standardLang(matchSelected()) }}</div>\r\n </div>\r\n </mat-select-trigger>\r\n <mat-option class=\"capitalize\" *ngFor=\"let lang of languages\" [value]=\"lang\">\r\n <div class=\"flex items-center\">\r\n <span [ngClass]=\"flagClass(lang)\"></span>\r\n <div class=\"ml-2\">{{ standardLang(lang) }}</div>\r\n </div>\r\n </mat-option>\r\n </mat-select>\r\n</mat-form-field>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-border: #FFCDC6;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-info-border: #D1D8F7;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-warning-border: #FBE5B6;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-border: #CEEAD5;--color-success-rgb: 7, 81, 69;--color-default-border: #D5E1ED;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host::ng-deep .mat-mdc-select{padding:0;border:0}:host::ng-deep .mat-mdc-select .mat-mdc-select-arrow-wrapper{display:none}:host::ng-deep .mat-mdc-select,:host::ng-deep .mat-mdc-select .mdc-list-item{font-size:12px;font-size:.75rem}:host::ng-deep .mat-mdc-select-panel .mat-mdc-option.mdc-list-item{font-size:12px;font-size:.75rem}:host::ng-deep .mat-mdc-form-field{width:auto}:host::ng-deep .flag-only .mat-mdc-select .mat-mdc-select-arrow-wrapper{width:0}:host::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__leading,:host::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__notch,:host::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__trailing{border:0}\n"], dependencies: [{ 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: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { 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: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
6754
7152
  }
6755
7153
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsLanguageSelectorComponent, decorators: [{
6756
7154
  type: Component,
6757
- args: [{ selector: 'ecabs-language-selector', template: "<mat-form-field appearance=\"outline\"\r\n [ngClass]=\"{'flag-only': flagOnly}\">\r\n <mat-label></mat-label>\r\n <mat-select class=\"capitalize\"\r\n [(ngModel)]=\"selectedLang\"\r\n name=\"language\"\r\n (ngModelChange)=\"toggleLang()\"\r\n panelClass=\"wide-select\">\r\n <mat-select-trigger>\r\n <div class=\"flex items-center\" [matTooltip]=\"tooltip\">\r\n <span [ngClass]=\"flagClass(matchSelected())\"></span>\r\n <div *ngIf=\"!flagOnly\" class=\"ml-2\">{{ standardLang(matchSelected()) }}</div>\r\n </div>\r\n </mat-select-trigger>\r\n <mat-option class=\"capitalize\" *ngFor=\"let lang of languages\" [value]=\"lang\">\r\n <div class=\"flex items-center\">\r\n <span [ngClass]=\"flagClass(lang)\"></span>\r\n <div class=\"ml-2\">{{ standardLang(lang) }}</div>\r\n </div>\r\n </mat-option>\r\n </mat-select>\r\n</mat-form-field>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host::ng-deep .mat-mdc-select{padding:0;border:0}:host::ng-deep .mat-mdc-select .mat-mdc-select-arrow-wrapper{display:none}:host::ng-deep .mat-mdc-select,:host::ng-deep .mat-mdc-select .mdc-list-item{font-size:12px;font-size:.75rem}:host::ng-deep .mat-mdc-select-panel .mat-mdc-option.mdc-list-item{font-size:12px;font-size:.75rem}:host::ng-deep .mat-mdc-form-field{width:auto}:host::ng-deep .flag-only .mat-mdc-select .mat-mdc-select-arrow-wrapper{width:0}:host::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__leading,:host::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__notch,:host::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__trailing{border:0}\n"] }]
7155
+ args: [{ selector: 'ecabs-language-selector', template: "<mat-form-field appearance=\"outline\"\r\n [ngClass]=\"{'flag-only': flagOnly}\">\r\n <mat-label></mat-label>\r\n <mat-select class=\"capitalize\"\r\n [(ngModel)]=\"selectedLang\"\r\n name=\"language\"\r\n (ngModelChange)=\"toggleLang()\"\r\n panelClass=\"wide-select\">\r\n <mat-select-trigger>\r\n <div class=\"flex items-center\" [matTooltip]=\"tooltip\">\r\n <span [ngClass]=\"flagClass(matchSelected())\"></span>\r\n <div *ngIf=\"!flagOnly\" class=\"ml-2\">{{ standardLang(matchSelected()) }}</div>\r\n </div>\r\n </mat-select-trigger>\r\n <mat-option class=\"capitalize\" *ngFor=\"let lang of languages\" [value]=\"lang\">\r\n <div class=\"flex items-center\">\r\n <span [ngClass]=\"flagClass(lang)\"></span>\r\n <div class=\"ml-2\">{{ standardLang(lang) }}</div>\r\n </div>\r\n </mat-option>\r\n </mat-select>\r\n</mat-form-field>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-border: #FFCDC6;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-info-border: #D1D8F7;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-warning-border: #FBE5B6;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-border: #CEEAD5;--color-success-rgb: 7, 81, 69;--color-default-border: #D5E1ED;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host::ng-deep .mat-mdc-select{padding:0;border:0}:host::ng-deep .mat-mdc-select .mat-mdc-select-arrow-wrapper{display:none}:host::ng-deep .mat-mdc-select,:host::ng-deep .mat-mdc-select .mdc-list-item{font-size:12px;font-size:.75rem}:host::ng-deep .mat-mdc-select-panel .mat-mdc-option.mdc-list-item{font-size:12px;font-size:.75rem}:host::ng-deep .mat-mdc-form-field{width:auto}:host::ng-deep .flag-only .mat-mdc-select .mat-mdc-select-arrow-wrapper{width:0}:host::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__leading,:host::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__notch,:host::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__trailing{border:0}\n"] }]
6758
7156
  }], propDecorators: { languages: [{
6759
7157
  type: Input
6760
7158
  }], currentLanguage: [{
@@ -7397,7 +7795,7 @@ class EcabsActiveStatusFilterComponent {
7397
7795
  return this.initialStatus === status;
7398
7796
  }
7399
7797
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsActiveStatusFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7400
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsActiveStatusFilterComponent, selector: "ecabs-active-status-filter", inputs: { statuses: "statuses", initialStatus: "initialStatus" }, outputs: { statusChange: "statusChange" }, ngImport: i0, template: "<div class=\"mb-5 mt-10\">\r\n <mat-chip-listbox>\r\n <mat-chip-option *ngFor=\"let status of statuses\"\r\n class=\"!rounded-full\"\r\n [ngClass]=\"checkSelectableStatus(status?.value) ? 'chip--selected' : 'chip--not-selected'\"\r\n [selected]=\"checkSelectableStatus(status?.value)\"\r\n (keydown.enter)=\"onFilter(status?.value)\"\r\n (click)=\"onFilter(status?.value)\">\r\n {{ status.text }}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$4.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i2$4.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }] });
7798
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsActiveStatusFilterComponent, selector: "ecabs-active-status-filter", inputs: { statuses: "statuses", initialStatus: "initialStatus" }, outputs: { statusChange: "statusChange" }, ngImport: i0, template: "<div class=\"mb-5 mt-10\">\r\n <mat-chip-listbox>\r\n <mat-chip-option *ngFor=\"let status of statuses\"\r\n class=\"!rounded-full\"\r\n [ngClass]=\"checkSelectableStatus(status?.value) ? 'chip--selected' : 'chip--not-selected'\"\r\n [selected]=\"checkSelectableStatus(status?.value)\"\r\n (keydown.enter)=\"onFilter(status?.value)\"\r\n (click)=\"onFilter(status?.value)\">\r\n {{ status.text }}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$3.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i2$3.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }] });
7401
7799
  }
7402
7800
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsActiveStatusFilterComponent, decorators: [{
7403
7801
  type: Component,
@@ -7521,7 +7919,7 @@ class EcabsHeaderComponent {
7521
7919
  this.subscription.unsubscribe();
7522
7920
  }
7523
7921
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsHeaderComponent, deps: [{ token: HeaderService }], target: i0.ɵɵFactoryTarget.Component });
7524
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsHeaderComponent, selector: "ecabs-header", inputs: { header: "header", user: "user", avatar: "avatar", loading: "loading" }, outputs: { avatarChange: "avatarChange", toggleNav: "toggleNav" }, viewQueries: [{ propertyName: "basicHeader", first: true, predicate: ["basicHeader"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"{loading}\" class=\"progress-bar\"></div>\r\n\r\n<ul class=\"flex pb-4 pt-3 px-10\">\r\n <li class=\"flex flex-col flex-1 justify-center\">\r\n <div class=\"sm:hidden md:block\">\r\n <ecabs-breadcrumb [breadcrumb]=\"header?.breadcrumb\"></ecabs-breadcrumb>\r\n </div>\r\n\r\n <div class=\"heading--lg text-brand-dark font-medium\">\r\n <mat-icon class=\"mr-3 text-gray-500\" (click)=\"toggleNav.emit()\" role=\"button\">menu</mat-icon>\r\n\r\n <ng-container *ngTemplateOutlet=\"template\"></ng-container>\r\n <div #basicHeader></div>\r\n </div>\r\n </li>\r\n\r\n <li>\r\n <div class=\"flex items-center\">\r\n <ecabs-profile [name]=\"user?.name\" [title]=\"user?.title\" [avatar]=\"avatar\"\r\n (avatarChange)=\"avatarChange.emit()\"></ecabs-profile>\r\n </div>\r\n </li>\r\n</ul>\r\n", styles: ["@keyframes progressMove{0%{margin-left:0}to{margin-left:80%}}.progress-bar{height:4px}.progress-bar.loading:before{animation-name:progressMove;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:ease-out;display:inline-block;vertical-align:top;width:20%;content:\"\";background-color:var(--color-brand-dark);height:4px;animation-direction:alternate}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EcabsBreadcrumbComponent, selector: "ecabs-breadcrumb", inputs: ["breadcrumb"] }, { kind: "component", type: EcabsProfileComponent, selector: "ecabs-profile", inputs: ["avatar", "name", "title"], outputs: ["avatarChange"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
7922
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsHeaderComponent, selector: "ecabs-header", inputs: { header: "header", user: "user", avatar: "avatar", loading: "loading" }, outputs: { avatarChange: "avatarChange", toggleNav: "toggleNav" }, viewQueries: [{ propertyName: "basicHeader", first: true, predicate: ["basicHeader"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"{loading}\" class=\"progress-bar\"></div>\r\n\r\n<ul class=\"flex pb-4 pt-3 px-10\">\r\n <li class=\"flex flex-col flex-1 justify-center\">\r\n <div class=\"sm:hidden md:block\">\r\n <ecabs-breadcrumb [breadcrumb]=\"header?.breadcrumb\"></ecabs-breadcrumb>\r\n </div>\r\n\r\n <div class=\"heading--lg text-brand-dark font-medium\">\r\n <mat-icon class=\"mr-3 text-gray-500\" (click)=\"toggleNav.emit()\" role=\"button\">menu</mat-icon>\r\n\r\n <ng-container *ngTemplateOutlet=\"template\"></ng-container>\r\n <div #basicHeader></div>\r\n </div>\r\n </li>\r\n\r\n <li>\r\n <div class=\"flex items-center\">\r\n <ecabs-profile [name]=\"user?.name\" [title]=\"user?.title\" [avatar]=\"avatar\"\r\n (avatarChange)=\"avatarChange.emit()\"></ecabs-profile>\r\n </div>\r\n </li>\r\n</ul>\r\n", styles: ["@keyframes progressMove{0%{margin-left:0}to{margin-left:80%}}.progress-bar{height:4px}.progress-bar.loading:before{animation-name:progressMove;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:ease-out;display:inline-block;vertical-align:top;width:20%;content:\"\";background-color:var(--color-brand-dark);height:4px;animation-direction:alternate}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EcabsBreadcrumbComponent, selector: "ecabs-breadcrumb", inputs: ["breadcrumb"] }, { kind: "component", type: EcabsProfileComponent, selector: "ecabs-profile", inputs: ["avatar", "name", "title"], outputs: ["avatarChange"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
7525
7923
  }
7526
7924
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsHeaderComponent, decorators: [{
7527
7925
  type: Component,
@@ -7654,7 +8052,7 @@ class EcabsSliderComponent extends EcabsElementBaseComponent {
7654
8052
  useExisting: EcabsSliderComponent,
7655
8053
  multi: true,
7656
8054
  },
7657
- ], viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <form #f=\"ngForm\" [formGroup]=\"sliderForm\">\r\n <ngx-slider\r\n #slider\r\n class=\"custom-slider\"\r\n [formControlName]=\"'slider'\"\r\n [value]=\"point\"\r\n name=\"slider\"\r\n (userChangeEnd)=\"onChangeValue($event)\"\r\n [options]=\"options\"\r\n ></ngx-slider>\r\n </form>\r\n</ecabs-element-wrapper>\r\n", styles: [":host ::ng-deep .custom-slider .ngx-slider-bar{height:.25rem}:host ::ng-deep .custom-slider .ngx-slider-selection-bar{visibility:visible!important}:host ::ng-deep .custom-slider .ngx-slider-selection{background:var(--color-brand-light);color:var(--color-brand-light)}:host ::ng-deep .custom-slider .ngx-slider-pointer{width:1rem;height:1rem;top:auto;margin-top:-.375rem;background-color:var(--color-brand-dark)}:host ::ng-deep .custom-slider .ngx-slider-pointer:focus{outline:0}:host ::ng-deep .custom-slider .ngx-slider-pointer:after{display:none}:host ::ng-deep .custom-slider .ngx-slider-tick{width:.5rem;height:.5rem;margin-left:.25rem;border-radius:1rem;top:1px;background:var(--color-brand-dark)}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$4.SliderComponent, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }] });
8055
+ ], viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <form #f=\"ngForm\" [formGroup]=\"sliderForm\">\r\n <ngx-slider\r\n #slider\r\n class=\"custom-slider\"\r\n [formControlName]=\"'slider'\"\r\n [value]=\"point\"\r\n name=\"slider\"\r\n (userChangeEnd)=\"onChangeValue($event)\"\r\n [options]=\"options\"\r\n ></ngx-slider>\r\n </form>\r\n</ecabs-element-wrapper>\r\n", styles: [":host ::ng-deep .custom-slider .ngx-slider-bar{height:.25rem}:host ::ng-deep .custom-slider .ngx-slider-selection-bar{visibility:visible!important}:host ::ng-deep .custom-slider .ngx-slider-selection{background:var(--color-brand-light);color:var(--color-brand-light)}:host ::ng-deep .custom-slider .ngx-slider-pointer{width:1rem;height:1rem;top:auto;margin-top:-.375rem;background-color:var(--color-brand-dark)}:host ::ng-deep .custom-slider .ngx-slider-pointer:focus{outline:0}:host ::ng-deep .custom-slider .ngx-slider-pointer:after{display:none}:host ::ng-deep .custom-slider .ngx-slider-tick{width:.5rem;height:.5rem;margin-left:.25rem;border-radius:1rem;top:1px;background:var(--color-brand-dark)}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$5.SliderComponent, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }] });
7658
8056
  }
7659
8057
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSliderComponent, decorators: [{
7660
8058
  type: Component,
@@ -7956,13 +8354,13 @@ class EcabsMenuItemsComponent {
7956
8354
  });
7957
8355
  }
7958
8356
  }
7959
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMenuItemsComponent, deps: [{ token: UnsubscribeService }, { token: i2$2.MatIconRegistry }, { token: i3$5.DomSanitizer }, { token: i4$4.Router }], target: i0.ɵɵFactoryTarget.Component });
7960
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsMenuItemsComponent, selector: "ecabs-menu-items", inputs: { menuItems: "menuItems", minimizeSidebar: "minimizeSidebar", truncateTo: "truncateTo" }, outputs: { toggleSidebar: "toggleSidebar" }, providers: [UnsubscribeService], usesOnChanges: true, ngImport: i0, template: "<ul>\r\n <li\r\n *ngFor=\"let item of menuItems; let i = index\"\r\n class=\"mb-2 hover:text-brand-dark cursor-pointer\"\r\n [ngClass]=\"item.expand ? 'font-bold text-brand-dark' : 'text-gray-500'\"\r\n >\r\n <a (click)=\"toggleItem(item, i)\" [id]=\"i\"\r\n [routerLink]=\"item.url ? [item.url] : []\"\r\n class=\"p-4 flex items-center h-max\"\r\n [ngClass]=\"item.expand ? 'text-brand-dark' : 'text-gray-500'\"\r\n >\r\n <mat-icon [svgIcon]=\"item.iconResource?.name || ''\"\r\n class=\"inline-block align-middle mr-4 text-inherit hover:text-inherit\">\r\n {{ item.icon }}\r\n </mat-icon>\r\n <span *ngIf=\"!minimizeSidebar\"\r\n class=\"inline-block align-middle\">\r\n {{ item.title }}\r\n </span>\r\n <div *ngIf=\"item.badge\" class=\"badge text-white\">\r\n {{ item.badge }}\r\n </div>\r\n </a>\r\n <ng-container *ngIf=\"item.expand && item.subItems?.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"firstChildren; context: item\"></ng-container>\r\n </ng-container>\r\n </li>\r\n</ul>\r\n\r\n<ng-template #firstChildren let-subItems=\"subItems\">\r\n <ng-container *ngIf=\"!minimizeSidebar\">\r\n <ul class=\"ml-12\">\r\n <li *ngFor=\"let item of subItems\" [ngClass]=\"item.expand ? 'font-bold text-brand-dark' : 'text-gray-500'\">\r\n <a #rla=\"routerLinkActive\"\r\n (click)=\"toggleSubItem(item, subItems)\"\r\n class=\"text-sm font-light p-4 h-12 rounded-md hover:text-brand-dark flex items-center\"\r\n [ngClass]=\"item.expand && rla.isActive ? 'text-brand-dark' : 'text-gray-500'\"\r\n [routerLink]=\"item.url ? [item.url] : []\"\r\n [routerLinkActive]=\" item.url ? 'bg-brand-300 text-brand-dark' : ''\"\r\n >\r\n <span [title]=\"item.title\">\r\n {{ item.title | truncate: truncateTo }}\r\n </span>\r\n <div *ngIf=\"item.badge\" class=\"badge text-white\">\r\n {{ item.badge }}\r\n </div>\r\n <div *ngIf=\"item.subItems?.length > 0\" class=\"flex-1 text-right\">\r\n <mat-icon class=\"align-middle hover:text-inherit\" [ngClass]=\"{ 'rotate-90': item.expand }\">\r\n keyboard_arrow_right\r\n </mat-icon>\r\n </div>\r\n </a>\r\n <ng-container *ngIf=\"item.expand && item.subItems?.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"secondChildren; context: item\"></ng-container>\r\n </ng-container>\r\n </li>\r\n </ul>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #secondChildren let-subItems=\"subItems\">\r\n <ul class=\"ml-3\">\r\n <li *ngFor=\"let item of subItems\">\r\n <a #rla=\"routerLinkActive\"\r\n [ngClass]=\"item.expand && rla.isActive ? 'text-brand-dark' : 'text-gray-500'\"\r\n [routerLink]=\"item.url ? [item.url] : []\"\r\n [routerLinkActive]=\" item.url ? 'bg-brand-300 text-brand-dark' : ''\"\r\n class=\"text-xs font-light block p-4 h-12 rounded-md hover:text-brand-dark\">\r\n <span>{{ item.title }}</span>\r\n <div *ngIf=\"item.badge\" class=\"badge text-white\">\r\n {{ item.badge }}\r\n </div>\r\n </a>\r\n </li>\r\n </ul>\r\n</ng-template>\r\n", styles: [":host::ng-deep li.text-brand-dark svg path{fill:currentColor}:host::ng-deep .badge{display:inline-flex;justify-content:center;align-items:center;width:41px;height:24px;border-radius:4px;font-size:12px;margin-left:12px;background-color:var(--color-error)}\n"], dependencies: [{ 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: "directive", type: i4$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4$4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: EcabsTruncatePipe, name: "truncate" }] });
8357
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMenuItemsComponent, deps: [{ token: UnsubscribeService }, { token: i4.MatIconRegistry }, { token: i3$6.DomSanitizer }, { token: i4$5.Router }], target: i0.ɵɵFactoryTarget.Component });
8358
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsMenuItemsComponent, selector: "ecabs-menu-items", inputs: { menuItems: "menuItems", minimizeSidebar: "minimizeSidebar", truncateTo: "truncateTo" }, outputs: { toggleSidebar: "toggleSidebar" }, providers: [UnsubscribeService], usesOnChanges: true, ngImport: i0, template: "<ul>\r\n <li\r\n *ngFor=\"let item of menuItems; let i = index\"\r\n class=\"mb-2 hover:text-brand-dark cursor-pointer\"\r\n [ngClass]=\"item.expand ? 'font-bold text-brand-dark' : 'text-gray-500'\"\r\n >\r\n <a (click)=\"toggleItem(item, i)\" [id]=\"i\"\r\n [routerLink]=\"item.url ? [item.url] : []\"\r\n class=\"p-4 flex items-center h-max\"\r\n [ngClass]=\"item.expand ? 'text-brand-dark' : 'text-gray-500'\"\r\n >\r\n <mat-icon [svgIcon]=\"item.iconResource?.name || ''\"\r\n class=\"inline-block align-middle mr-4 text-inherit hover:text-inherit\">\r\n {{ item.icon }}\r\n </mat-icon>\r\n <span *ngIf=\"!minimizeSidebar\"\r\n class=\"inline-block align-middle\">\r\n {{ item.title }}\r\n </span>\r\n <div *ngIf=\"item.badge\" class=\"badge text-white\">\r\n {{ item.badge }}\r\n </div>\r\n </a>\r\n <ng-container *ngIf=\"item.expand && item.subItems?.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"firstChildren; context: item\"></ng-container>\r\n </ng-container>\r\n </li>\r\n</ul>\r\n\r\n<ng-template #firstChildren let-subItems=\"subItems\">\r\n <ng-container *ngIf=\"!minimizeSidebar\">\r\n <ul class=\"ml-12\">\r\n <li *ngFor=\"let item of subItems\" [ngClass]=\"item.expand ? 'font-bold text-brand-dark' : 'text-gray-500'\">\r\n <a #rla=\"routerLinkActive\"\r\n (click)=\"toggleSubItem(item, subItems)\"\r\n class=\"text-sm font-light p-4 h-12 rounded-md hover:text-brand-dark flex items-center\"\r\n [ngClass]=\"item.expand && rla.isActive ? 'text-brand-dark' : 'text-gray-500'\"\r\n [routerLink]=\"item.url ? [item.url] : []\"\r\n [routerLinkActive]=\" item.url ? 'bg-brand-300 text-brand-dark' : ''\"\r\n >\r\n <span [title]=\"item.title\">\r\n {{ item.title | truncate: truncateTo }}\r\n </span>\r\n <div *ngIf=\"item.badge\" class=\"badge text-white\">\r\n {{ item.badge }}\r\n </div>\r\n <div *ngIf=\"item.subItems?.length > 0\" class=\"flex-1 text-right\">\r\n <mat-icon class=\"align-middle hover:text-inherit\" [ngClass]=\"{ 'rotate-90': item.expand }\">\r\n keyboard_arrow_right\r\n </mat-icon>\r\n </div>\r\n </a>\r\n <ng-container *ngIf=\"item.expand && item.subItems?.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"secondChildren; context: item\"></ng-container>\r\n </ng-container>\r\n </li>\r\n </ul>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #secondChildren let-subItems=\"subItems\">\r\n <ul class=\"ml-3\">\r\n <li *ngFor=\"let item of subItems\">\r\n <a #rla=\"routerLinkActive\"\r\n [ngClass]=\"item.expand && rla.isActive ? 'text-brand-dark' : 'text-gray-500'\"\r\n [routerLink]=\"item.url ? [item.url] : []\"\r\n [routerLinkActive]=\" item.url ? 'bg-brand-300 text-brand-dark' : ''\"\r\n class=\"text-xs font-light block p-4 h-12 rounded-md hover:text-brand-dark\">\r\n <span>{{ item.title }}</span>\r\n <div *ngIf=\"item.badge\" class=\"badge text-white\">\r\n {{ item.badge }}\r\n </div>\r\n </a>\r\n </li>\r\n </ul>\r\n</ng-template>\r\n", styles: [":host::ng-deep li.text-brand-dark svg path{fill:currentColor}:host::ng-deep .badge{display:inline-flex;justify-content:center;align-items:center;width:41px;height:24px;border-radius:4px;font-size:12px;margin-left:12px;background-color:var(--color-error)}\n"], dependencies: [{ 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: "directive", type: i4$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4$5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: EcabsTruncatePipe, name: "truncate" }] });
7961
8359
  }
7962
8360
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMenuItemsComponent, decorators: [{
7963
8361
  type: Component,
7964
8362
  args: [{ selector: 'ecabs-menu-items', providers: [UnsubscribeService], template: "<ul>\r\n <li\r\n *ngFor=\"let item of menuItems; let i = index\"\r\n class=\"mb-2 hover:text-brand-dark cursor-pointer\"\r\n [ngClass]=\"item.expand ? 'font-bold text-brand-dark' : 'text-gray-500'\"\r\n >\r\n <a (click)=\"toggleItem(item, i)\" [id]=\"i\"\r\n [routerLink]=\"item.url ? [item.url] : []\"\r\n class=\"p-4 flex items-center h-max\"\r\n [ngClass]=\"item.expand ? 'text-brand-dark' : 'text-gray-500'\"\r\n >\r\n <mat-icon [svgIcon]=\"item.iconResource?.name || ''\"\r\n class=\"inline-block align-middle mr-4 text-inherit hover:text-inherit\">\r\n {{ item.icon }}\r\n </mat-icon>\r\n <span *ngIf=\"!minimizeSidebar\"\r\n class=\"inline-block align-middle\">\r\n {{ item.title }}\r\n </span>\r\n <div *ngIf=\"item.badge\" class=\"badge text-white\">\r\n {{ item.badge }}\r\n </div>\r\n </a>\r\n <ng-container *ngIf=\"item.expand && item.subItems?.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"firstChildren; context: item\"></ng-container>\r\n </ng-container>\r\n </li>\r\n</ul>\r\n\r\n<ng-template #firstChildren let-subItems=\"subItems\">\r\n <ng-container *ngIf=\"!minimizeSidebar\">\r\n <ul class=\"ml-12\">\r\n <li *ngFor=\"let item of subItems\" [ngClass]=\"item.expand ? 'font-bold text-brand-dark' : 'text-gray-500'\">\r\n <a #rla=\"routerLinkActive\"\r\n (click)=\"toggleSubItem(item, subItems)\"\r\n class=\"text-sm font-light p-4 h-12 rounded-md hover:text-brand-dark flex items-center\"\r\n [ngClass]=\"item.expand && rla.isActive ? 'text-brand-dark' : 'text-gray-500'\"\r\n [routerLink]=\"item.url ? [item.url] : []\"\r\n [routerLinkActive]=\" item.url ? 'bg-brand-300 text-brand-dark' : ''\"\r\n >\r\n <span [title]=\"item.title\">\r\n {{ item.title | truncate: truncateTo }}\r\n </span>\r\n <div *ngIf=\"item.badge\" class=\"badge text-white\">\r\n {{ item.badge }}\r\n </div>\r\n <div *ngIf=\"item.subItems?.length > 0\" class=\"flex-1 text-right\">\r\n <mat-icon class=\"align-middle hover:text-inherit\" [ngClass]=\"{ 'rotate-90': item.expand }\">\r\n keyboard_arrow_right\r\n </mat-icon>\r\n </div>\r\n </a>\r\n <ng-container *ngIf=\"item.expand && item.subItems?.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"secondChildren; context: item\"></ng-container>\r\n </ng-container>\r\n </li>\r\n </ul>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #secondChildren let-subItems=\"subItems\">\r\n <ul class=\"ml-3\">\r\n <li *ngFor=\"let item of subItems\">\r\n <a #rla=\"routerLinkActive\"\r\n [ngClass]=\"item.expand && rla.isActive ? 'text-brand-dark' : 'text-gray-500'\"\r\n [routerLink]=\"item.url ? [item.url] : []\"\r\n [routerLinkActive]=\" item.url ? 'bg-brand-300 text-brand-dark' : ''\"\r\n class=\"text-xs font-light block p-4 h-12 rounded-md hover:text-brand-dark\">\r\n <span>{{ item.title }}</span>\r\n <div *ngIf=\"item.badge\" class=\"badge text-white\">\r\n {{ item.badge }}\r\n </div>\r\n </a>\r\n </li>\r\n </ul>\r\n</ng-template>\r\n", styles: [":host::ng-deep li.text-brand-dark svg path{fill:currentColor}:host::ng-deep .badge{display:inline-flex;justify-content:center;align-items:center;width:41px;height:24px;border-radius:4px;font-size:12px;margin-left:12px;background-color:var(--color-error)}\n"] }]
7965
- }], ctorParameters: function () { return [{ type: UnsubscribeService }, { type: i2$2.MatIconRegistry }, { type: i3$5.DomSanitizer }, { type: i4$4.Router }]; }, propDecorators: { menuItems: [{
8363
+ }], ctorParameters: function () { return [{ type: UnsubscribeService }, { type: i4.MatIconRegistry }, { type: i3$6.DomSanitizer }, { type: i4$5.Router }]; }, propDecorators: { menuItems: [{
7966
8364
  type: Input
7967
8365
  }], minimizeSidebar: [{
7968
8366
  type: Input
@@ -7989,7 +8387,7 @@ class EcabsSidebarComponent {
7989
8387
  this.sidebarChange.emit(this.minimizeSidebar);
7990
8388
  }
7991
8389
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7992
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsSidebarComponent, selector: "ecabs-sidebar", inputs: { allMenuItems: "allMenuItems", logoutText: "logoutText", secondaryMenu: "secondaryMenu", logo: "logo" }, outputs: { logout: "logout", langChange: "langChange", sidebarChange: "sidebarChange" }, ngImport: i0, template: "<section [ngClass]=\"minimizeSidebar ? 'w-16' : 'w-72'\" class=\"h-full\">\r\n <ul class=\"relative h-full p-2 flex flex-col\">\r\n <li *ngIf=\"logo\" [ngClass]=\"minimizeSidebar ? 'w-full items-center text-center' : 'w-20 ml-10'\" class=\"py-8\">\r\n <ng-container *ngTemplateOutlet=\"logo\"></ng-container>\r\n </li>\r\n\r\n <li [ngClass]=\"minimizeSidebar ? 'overflow-visible' : 'overflow-auto'\" class=\"mb-16 pr-1\">\r\n <ecabs-menu-items [menuItems]=\"allMenuItems\" [minimizeSidebar]=\"minimizeSidebar\"\r\n (toggleSidebar)=\"toggle()\"></ecabs-menu-items>\r\n </li>\r\n\r\n <li class=\"mt-auto\">\r\n <ul>\r\n <li *ngIf=\"secondaryMenu\" class=\"flex justify-center mb-5\">\r\n <ng-container *ngTemplateOutlet=\"secondaryMenu\"></ng-container>\r\n </li>\r\n\r\n <li class=\"flex cursor-pointer items-center w-full p-4 logout-btn\">\r\n <!-- eslint-disable-next-line -->\r\n <a class=\"text-gray-500\" (click)=\"onLogout()\">\r\n <mat-icon class=\"inline-block align-middle mr-4\">exit_to_app</mat-icon>\r\n <span class=\"inline-block align-middle\" *ngIf=\"!minimizeSidebar\">{{ logoutText }}</span>\r\n </a>\r\n </li>\r\n </ul>\r\n </li>\r\n </ul>\r\n\r\n <!--#::TODO Find alternative to display correctly -->\r\n<!-- <div class=\"hidden md:block absolute z-20 -right-3 top-[calc(85%-1rem)]-->\r\n<!-- rounded-full bg-white text-brand-dark shadow-md cursor-pointer hover:bg-gray-100\"-->\r\n<!-- (click)=\"toggle()\">-->\r\n<!-- <mat-icon class=\"inline-block align-middle {{ !minimizeSidebar ? 'rotate-180' : '' }}\">keyboard_arrow_right</mat-icon>-->\r\n<!-- </div>-->\r\n</section>\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: "component", type: EcabsMenuItemsComponent, selector: "ecabs-menu-items", inputs: ["menuItems", "minimizeSidebar", "truncateTo"], outputs: ["toggleSidebar"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
8390
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsSidebarComponent, selector: "ecabs-sidebar", inputs: { allMenuItems: "allMenuItems", logoutText: "logoutText", secondaryMenu: "secondaryMenu", logo: "logo" }, outputs: { logout: "logout", langChange: "langChange", sidebarChange: "sidebarChange" }, ngImport: i0, template: "<section [ngClass]=\"minimizeSidebar ? 'w-16' : 'w-72'\" class=\"h-full\">\r\n <ul class=\"relative h-full p-2 flex flex-col\">\r\n <li *ngIf=\"logo\" [ngClass]=\"minimizeSidebar ? 'w-full items-center text-center' : 'w-20 ml-10'\" class=\"py-8\">\r\n <ng-container *ngTemplateOutlet=\"logo\"></ng-container>\r\n </li>\r\n\r\n <li [ngClass]=\"minimizeSidebar ? 'overflow-visible' : 'overflow-auto'\" class=\"mb-16 pr-1\">\r\n <ecabs-menu-items [menuItems]=\"allMenuItems\" [minimizeSidebar]=\"minimizeSidebar\"\r\n (toggleSidebar)=\"toggle()\"></ecabs-menu-items>\r\n </li>\r\n\r\n <li class=\"mt-auto\">\r\n <ul>\r\n <li *ngIf=\"secondaryMenu\" class=\"flex justify-center mb-5\">\r\n <ng-container *ngTemplateOutlet=\"secondaryMenu\"></ng-container>\r\n </li>\r\n\r\n <li class=\"flex cursor-pointer items-center w-full p-4 logout-btn\">\r\n <!-- eslint-disable-next-line -->\r\n <a class=\"text-gray-500\" (click)=\"onLogout()\">\r\n <mat-icon class=\"inline-block align-middle mr-4\">exit_to_app</mat-icon>\r\n <span class=\"inline-block align-middle\" *ngIf=\"!minimizeSidebar\">{{ logoutText }}</span>\r\n </a>\r\n </li>\r\n </ul>\r\n </li>\r\n </ul>\r\n\r\n <!--#::TODO Find alternative to display correctly -->\r\n<!-- <div class=\"hidden md:block absolute z-20 -right-3 top-[calc(85%-1rem)]-->\r\n<!-- rounded-full bg-white text-brand-dark shadow-md cursor-pointer hover:bg-gray-100\"-->\r\n<!-- (click)=\"toggle()\">-->\r\n<!-- <mat-icon class=\"inline-block align-middle {{ !minimizeSidebar ? 'rotate-180' : '' }}\">keyboard_arrow_right</mat-icon>-->\r\n<!-- </div>-->\r\n</section>\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: "component", type: EcabsMenuItemsComponent, selector: "ecabs-menu-items", inputs: ["menuItems", "minimizeSidebar", "truncateTo"], outputs: ["toggleSidebar"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
7993
8391
  }
7994
8392
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSidebarComponent, decorators: [{
7995
8393
  type: Component,
@@ -8203,7 +8601,7 @@ class EcabsPlaceAutocompleteComponent extends EcabsElementBaseComponent {
8203
8601
  useExisting: EcabsPlaceAutocompleteComponent,
8204
8602
  multi: true,
8205
8603
  },
8206
- ], 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=\"form-field__input--wrapper w-full\">\r\n <input #matCustomAutocompleteInput\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 autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"off\"\r\n (blur)=\"onTouch()\"\r\n />\r\n <div class=\"form-field__input--suffix\" *ngIf=\"showSuffix\">\r\n <mat-icon *ngIf=\"showDeleteItem\"\r\n class=\"suffix cursor-pointer delete-button\"\r\n (click)=\"onDeleteItem()\">\r\n delete\r\n </mat-icon>\r\n <mat-icon class=\"suffix cursor-pointer\" *ngIf=\"!showDeleteItem && value\" (click)=\"onClean()\">close</mat-icon>\r\n </div>\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.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: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
8604
+ ], 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=\"form-field__input--wrapper w-full\">\r\n <input #matCustomAutocompleteInput\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 autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"off\"\r\n (blur)=\"onTouch()\"\r\n />\r\n <div class=\"form-field__input--suffix\" *ngIf=\"showSuffix\">\r\n <mat-icon *ngIf=\"showDeleteItem\"\r\n class=\"suffix cursor-pointer delete-button\"\r\n (click)=\"onDeleteItem()\">\r\n delete\r\n </mat-icon>\r\n <mat-icon class=\"suffix cursor-pointer\" *ngIf=\"!showDeleteItem && value\" (click)=\"onClean()\">close</mat-icon>\r\n </div>\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.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"] }] });
8207
8605
  }
8208
8606
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsPlaceAutocompleteComponent, decorators: [{
8209
8607
  type: Component,
@@ -8518,7 +8916,7 @@ class EcabsPlaceAutocompleteV2Component extends EcabsElementBaseComponent {
8518
8916
  useExisting: EcabsPlaceAutocompleteV2Component,
8519
8917
  multi: true,
8520
8918
  },
8521
- ], 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: i2$2.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" }] });
8919
+ ], 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" }] });
8522
8920
  }
8523
8921
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsPlaceAutocompleteV2Component, decorators: [{
8524
8922
  type: Component,
@@ -8711,7 +9109,7 @@ class EcabsMultipleDatesPickerComponent extends EcabsElementBaseComponent {
8711
9109
  multi: true,
8712
9110
  },
8713
9111
  UnsubscribeService,
8714
- ], viewQueries: [{ propertyName: "_picker", first: true, predicate: ["picker"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"form-field__input--wrapper w-full\">\r\n <mat-chip-grid\r\n #chipList aria-label=\"Choose a date\"\r\n (click)=\"picker.open()\"\r\n class=\"w-full\"\r\n >\r\n <mat-chip-option\r\n class=\"form-field__input\"\r\n *ngFor=\"let value of model\"\r\n [selectable]=\"false\" [removable]=\"true\"\r\n (removed)=\"remove(value)\"\r\n >\r\n {{ value | date: 'dd/MM/yyyy' }}\r\n <mat-icon matChipRemove *ngIf=\"true\">cancel</mat-icon>\r\n </mat-chip-option>\r\n <input\r\n class=\"form-field__input fake-input\"\r\n [value]=\"resetModel\"\r\n [(ngModel)]=\"value\"\r\n [matDatepicker]=\"picker\"\r\n placeholder=\"Select dates\"\r\n (dateChange)=\"dateChanged($event)\"\r\n [matChipInputFor]=\"chipList\"\r\n [min]=\"minDate\"\r\n [max]=\"maxDate\"\r\n [matDatepickerFilter]=\"filterDateRange\"\r\n />\r\n </mat-chip-grid>\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\r\n </mat-datepicker-toggle>\r\n <mat-datepicker\r\n #picker\r\n [calendarHeaderComponent]=\"header\"\r\n [touchUi]=\"touchUi\"\r\n [dateClass]=\"dateClass\"\r\n >\r\n <mat-datepicker-actions>\r\n <ecabs-date-picker-actions\r\n [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n >\r\n </ecabs-date-picker-actions>\r\n </mat-datepicker-actions>\r\n </mat-datepicker>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host ::ng-deep .mat-chip-list-wrapper{padding:5px}:host ::ng-deep .mat-chip-list-wrapper .mat-standard-chip{margin:0 5px 0 0}:host ::ng-deep .fake-input{visibility:hidden;width:0;padding:0;margin:0}:host ::ng-deep .form-field__input--wrapper{border:1px solid var(--color-gray-500);padding:5px;align-items:center;background:#fff;border-radius:.25rem}::ng-deep .mat-calendar-body-cell.selected>.mat-calendar-body-cell-content,::ng-deep .mat-calendar-body-cell.selected:hover>.mat-calendar-body-cell-content,::ng-deep .mat-calendar-body-cell.selected>.mat-calendar-body-cell-content:hover{background-color:#673ab7!important;color:#fff!important}\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: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "component", type: i2$4.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i2$4.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i2$4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
9112
+ ], viewQueries: [{ propertyName: "_picker", first: true, predicate: ["picker"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"form-field__input--wrapper w-full\">\r\n <mat-chip-grid\r\n #chipList aria-label=\"Choose a date\"\r\n (click)=\"picker.open()\"\r\n class=\"w-full\"\r\n >\r\n <mat-chip-option\r\n class=\"form-field__input\"\r\n *ngFor=\"let value of model\"\r\n [selectable]=\"false\" [removable]=\"true\"\r\n (removed)=\"remove(value)\"\r\n >\r\n {{ value | date: 'dd/MM/yyyy' }}\r\n <mat-icon matChipRemove *ngIf=\"true\">cancel</mat-icon>\r\n </mat-chip-option>\r\n <input\r\n class=\"form-field__input fake-input\"\r\n [value]=\"resetModel\"\r\n [(ngModel)]=\"value\"\r\n [matDatepicker]=\"picker\"\r\n placeholder=\"Select dates\"\r\n (dateChange)=\"dateChanged($event)\"\r\n [matChipInputFor]=\"chipList\"\r\n [min]=\"minDate\"\r\n [max]=\"maxDate\"\r\n [matDatepickerFilter]=\"filterDateRange\"\r\n />\r\n </mat-chip-grid>\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\r\n </mat-datepicker-toggle>\r\n <mat-datepicker\r\n #picker\r\n [calendarHeaderComponent]=\"header\"\r\n [touchUi]=\"touchUi\"\r\n [dateClass]=\"dateClass\"\r\n >\r\n <mat-datepicker-actions>\r\n <ecabs-date-picker-actions\r\n [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n >\r\n </ecabs-date-picker-actions>\r\n </mat-datepicker-actions>\r\n </mat-datepicker>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-border: #FFCDC6;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-info-border: #D1D8F7;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-warning-border: #FBE5B6;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-border: #CEEAD5;--color-success-rgb: 7, 81, 69;--color-default-border: #D5E1ED;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host ::ng-deep .mat-chip-list-wrapper{padding:5px}:host ::ng-deep .mat-chip-list-wrapper .mat-standard-chip{margin:0 5px 0 0}:host ::ng-deep .fake-input{visibility:hidden;width:0;padding:0;margin:0}:host ::ng-deep .form-field__input--wrapper{border:1px solid var(--color-gray-500);padding:5px;align-items:center;background:#fff;border-radius:.25rem}::ng-deep .mat-calendar-body-cell.selected>.mat-calendar-body-cell-content,::ng-deep .mat-calendar-body-cell.selected:hover>.mat-calendar-body-cell-content,::ng-deep .mat-calendar-body-cell.selected>.mat-calendar-body-cell-content:hover{background-color:#673ab7!important;color:#fff!important}\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: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { 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: "component", type: i2$3.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i2$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
8715
9113
  }
8716
9114
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsMultipleDatesPickerComponent, decorators: [{
8717
9115
  type: Component,
@@ -8722,7 +9120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
8722
9120
  multi: true,
8723
9121
  },
8724
9122
  UnsubscribeService,
8725
- ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"form-field__input--wrapper w-full\">\r\n <mat-chip-grid\r\n #chipList aria-label=\"Choose a date\"\r\n (click)=\"picker.open()\"\r\n class=\"w-full\"\r\n >\r\n <mat-chip-option\r\n class=\"form-field__input\"\r\n *ngFor=\"let value of model\"\r\n [selectable]=\"false\" [removable]=\"true\"\r\n (removed)=\"remove(value)\"\r\n >\r\n {{ value | date: 'dd/MM/yyyy' }}\r\n <mat-icon matChipRemove *ngIf=\"true\">cancel</mat-icon>\r\n </mat-chip-option>\r\n <input\r\n class=\"form-field__input fake-input\"\r\n [value]=\"resetModel\"\r\n [(ngModel)]=\"value\"\r\n [matDatepicker]=\"picker\"\r\n placeholder=\"Select dates\"\r\n (dateChange)=\"dateChanged($event)\"\r\n [matChipInputFor]=\"chipList\"\r\n [min]=\"minDate\"\r\n [max]=\"maxDate\"\r\n [matDatepickerFilter]=\"filterDateRange\"\r\n />\r\n </mat-chip-grid>\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\r\n </mat-datepicker-toggle>\r\n <mat-datepicker\r\n #picker\r\n [calendarHeaderComponent]=\"header\"\r\n [touchUi]=\"touchUi\"\r\n [dateClass]=\"dateClass\"\r\n >\r\n <mat-datepicker-actions>\r\n <ecabs-date-picker-actions\r\n [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n >\r\n </ecabs-date-picker-actions>\r\n </mat-datepicker-actions>\r\n </mat-datepicker>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host ::ng-deep .mat-chip-list-wrapper{padding:5px}:host ::ng-deep .mat-chip-list-wrapper .mat-standard-chip{margin:0 5px 0 0}:host ::ng-deep .fake-input{visibility:hidden;width:0;padding:0;margin:0}:host ::ng-deep .form-field__input--wrapper{border:1px solid var(--color-gray-500);padding:5px;align-items:center;background:#fff;border-radius:.25rem}::ng-deep .mat-calendar-body-cell.selected>.mat-calendar-body-cell-content,::ng-deep .mat-calendar-body-cell.selected:hover>.mat-calendar-body-cell-content,::ng-deep .mat-calendar-body-cell.selected>.mat-calendar-body-cell-content:hover{background-color:#673ab7!important;color:#fff!important}\n"] }]
9123
+ ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n <div class=\"form-field__input--wrapper w-full\">\r\n <mat-chip-grid\r\n #chipList aria-label=\"Choose a date\"\r\n (click)=\"picker.open()\"\r\n class=\"w-full\"\r\n >\r\n <mat-chip-option\r\n class=\"form-field__input\"\r\n *ngFor=\"let value of model\"\r\n [selectable]=\"false\" [removable]=\"true\"\r\n (removed)=\"remove(value)\"\r\n >\r\n {{ value | date: 'dd/MM/yyyy' }}\r\n <mat-icon matChipRemove *ngIf=\"true\">cancel</mat-icon>\r\n </mat-chip-option>\r\n <input\r\n class=\"form-field__input fake-input\"\r\n [value]=\"resetModel\"\r\n [(ngModel)]=\"value\"\r\n [matDatepicker]=\"picker\"\r\n placeholder=\"Select dates\"\r\n (dateChange)=\"dateChanged($event)\"\r\n [matChipInputFor]=\"chipList\"\r\n [min]=\"minDate\"\r\n [max]=\"maxDate\"\r\n [matDatepickerFilter]=\"filterDateRange\"\r\n />\r\n </mat-chip-grid>\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\r\n </mat-datepicker-toggle>\r\n <mat-datepicker\r\n #picker\r\n [calendarHeaderComponent]=\"header\"\r\n [touchUi]=\"touchUi\"\r\n [dateClass]=\"dateClass\"\r\n >\r\n <mat-datepicker-actions>\r\n <ecabs-date-picker-actions\r\n [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\r\n [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\r\n >\r\n </ecabs-date-picker-actions>\r\n </mat-datepicker-actions>\r\n </mat-datepicker>\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);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-border: #FFCDC6;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-info-border: #D1D8F7;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-warning-border: #FBE5B6;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-border: #CEEAD5;--color-success-rgb: 7, 81, 69;--color-default-border: #D5E1ED;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host ::ng-deep .mat-chip-list-wrapper{padding:5px}:host ::ng-deep .mat-chip-list-wrapper .mat-standard-chip{margin:0 5px 0 0}:host ::ng-deep .fake-input{visibility:hidden;width:0;padding:0;margin:0}:host ::ng-deep .form-field__input--wrapper{border:1px solid var(--color-gray-500);padding:5px;align-items:center;background:#fff;border-radius:.25rem}::ng-deep .mat-calendar-body-cell.selected>.mat-calendar-body-cell-content,::ng-deep .mat-calendar-body-cell.selected:hover>.mat-calendar-body-cell-content,::ng-deep .mat-calendar-body-cell.selected>.mat-calendar-body-cell-content:hover{background-color:#673ab7!important;color:#fff!important}\n"] }]
8726
9124
  }], ctorParameters: function () { return [{ type: i0.Injector }, { type: EcabsDatePickerHeaderService }, { type: UnsubscribeService }]; }, propDecorators: { _picker: [{
8727
9125
  type: ViewChild,
8728
9126
  args: ['picker', { static: true }]
@@ -9249,7 +9647,7 @@ class EcabsChipGroupComponent {
9249
9647
  useExisting: forwardRef(() => EcabsChipGroupComponent),
9250
9648
  multi: true,
9251
9649
  },
9252
- ], ngImport: i0, template: "<mat-chip-listbox [multiple]=\"multiple\"\r\n [compareWith]=\"compareFn\"\r\n [disabled]=\"isDisabled()\"\r\n [ngModel]=\"_value()\"\r\n (ngModelChange)=\"chipValueChange($event)\">\r\n <mat-chip-option *ngFor=\"let option of options; trackBy: trackByFn\"\r\n [value]=\"option.value\"\r\n [disabled]=\"option.disabled\"\r\n [disableRipple]=\"disableRipple\">\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-chip-option>\r\n</mat-chip-listbox>\r\n", styles: [""], 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: i2$4.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i2$4.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { 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: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: EcabsTruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
9650
+ ], ngImport: i0, template: "<mat-chip-listbox [multiple]=\"multiple\"\r\n [compareWith]=\"compareFn\"\r\n [disabled]=\"isDisabled()\"\r\n [ngModel]=\"_value()\"\r\n (ngModelChange)=\"chipValueChange($event)\">\r\n <mat-chip-option *ngFor=\"let option of options; trackBy: trackByFn\"\r\n [value]=\"option.value\"\r\n [disabled]=\"option.disabled\"\r\n [disableRipple]=\"disableRipple\">\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-chip-option>\r\n</mat-chip-listbox>\r\n", styles: [""], 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: i2$3.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i2$3.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { 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: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: EcabsTruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
9253
9651
  }
9254
9652
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsChipGroupComponent, decorators: [{
9255
9653
  type: Component,
@@ -9459,7 +9857,7 @@ class EcabsChipAutocompleteComponent extends EcabsElementBaseComponent {
9459
9857
  useExisting: forwardRef(() => EcabsChipAutocompleteComponent),
9460
9858
  multi: true,
9461
9859
  },
9462
- ], 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$4.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$4.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: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4$5.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: 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 });
9860
+ ], 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: 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 });
9463
9861
  }
9464
9862
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsChipAutocompleteComponent, decorators: [{
9465
9863
  type: Component,
@@ -9840,7 +10238,7 @@ class EcabsSegmentComponent {
9840
10238
  subtitle;
9841
10239
  showTitleDivider = true;
9842
10240
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSegmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
9843
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsSegmentComponent, isStandalone: true, selector: "ecabs-segment", inputs: { title: "title", subtitle: "subtitle", showTitleDivider: "showTitleDivider" }, ngImport: i0, template: "<mat-card>\r\n <mat-card-header>\r\n <mat-card-title>{{ title }}</mat-card-title>\r\n <mat-card-subtitle *ngIf=\"subtitle\">\r\n {{ subtitle }}\r\n </mat-card-subtitle>\r\n </mat-card-header>\r\n\r\n <mat-divider *ngIf=\"showTitleDivider\"\r\n class=\"card__title--divider\"></mat-divider>\r\n\r\n <ng-content></ng-content>\r\n</mat-card>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$6.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i2$6.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$6.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i2$6.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i9$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
10241
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsSegmentComponent, isStandalone: true, selector: "ecabs-segment", inputs: { title: "title", subtitle: "subtitle", showTitleDivider: "showTitleDivider" }, ngImport: i0, template: "<mat-card>\r\n <mat-card-header>\r\n <mat-card-title>{{ title }}</mat-card-title>\r\n <mat-card-subtitle *ngIf=\"subtitle\">\r\n {{ subtitle }}\r\n </mat-card-subtitle>\r\n </mat-card-header>\r\n\r\n <mat-divider *ngIf=\"showTitleDivider\"\r\n class=\"card__title--divider\"></mat-divider>\r\n\r\n <ng-content></ng-content>\r\n</mat-card>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i2$5.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$5.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i2$5.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
9844
10242
  }
9845
10243
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSegmentComponent, decorators: [{
9846
10244
  type: Component,
@@ -9857,5 +10255,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
9857
10255
  * Generated bundle index. Do not edit.
9858
10256
  */
9859
10257
 
9860
- export { ButtonsComponent, ButtonsV2Component, EcabsActiveStatusFilterComponent, EcabsActiveStatusFilterModule, EcabsAttachEmbeddedViewDirective, EcabsAttachEmbeddedViewDirectiveModule, EcabsBasePhoneComponent, EcabsBasePhoneModule, EcabsBreadcrumbComponent, EcabsBreadcrumbModule, EcabsButtonToggleComponent, EcabsButtonToggleModule, EcabsButtonsModule, EcabsButtonsV2Module, EcabsCheckPermissionDirectiveModule, EcabsCheckPermissionsDirective, EcabsCheckboxToggleComponent, EcabsCheckboxToggleModule, EcabsCheckboxV2Component, EcabsCheckboxV2Module, EcabsChipAutocompleteComponent, EcabsChipGroupComponent, EcabsChipGroupModule, EcabsComponentsService, EcabsDateAdapter, EcabsDatePickerComponent, EcabsDatePickerHeaderComponent, EcabsDatePickerHeaderService, EcabsDatePickerModule, EcabsDateRangeModule, EcabsDateRangeModuleV2, EcabsDateRangePickerComponent, EcabsDateRangePickerComponentV2, EcabsDateRangePickerHeaderComponent, EcabsDateRangePickerHeaderComponentV2, EcabsDateTimePickerComponent, EcabsDateTimePickerHeaderComponent, EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent, EcabsDatetimePickerModule, EcabsDatetimeRangePickerModule, EcabsDialogConfirmComponent, EcabsDialogConfirmDeletionModule, EcabsDialogConfirmModule, EcabsDialogConfirmationDeletionComponent, EcabsDialogMessageComponent, EcabsDialogMessageModule, EcabsDigitsOnlyDirective, EcabsDigitsOnlyDirectivesModule, EcabsDomObserverDirective, EcabsDomObserverDirectiveModule, EcabsDynamicBgColorDirective, EcabsDynamicBgColorDirectiveModule, EcabsElementMultiplierDirective, EcabsElementMultiplierDirectiveModule, EcabsEmptyPlaceholderComponent, EcabsEmptyPlaceholderModule, EcabsExpansionPanelComponent, EcabsExpansionPanelModule, EcabsFileDropDirective, EcabsFileDropDirectiveModule, EcabsHeaderComponent, EcabsHeaderModule, EcabsHintComponent, EcabsHintModule, EcabsIncrementComponent, EcabsIncrementModule, EcabsInputComponent, EcabsInputModule, EcabsInputRangeComponent, EcabsInputRangeModule, EcabsLanguageSelectorComponent, EcabsLanguageSelectorModule, EcabsLoadingComponent, EcabsLoadingModule, EcabsLogoComponent, EcabsLogoModule, EcabsMaskDateDirective, EcabsMaskDateDirectiveModule, EcabsMaskTimeDirective, EcabsMaskTimeDirectiveModule, EcabsMaxDirective, EcabsMenuItemsComponent, EcabsMenuItemsModule, EcabsMinDirective, EcabsMinMaxDirectiveModule, EcabsMultipleDatesPickerComponent, EcabsMultipleDatesPickerModule, EcabsNoteComponent, EcabsNoteModule, EcabsNumberBorderDirective, EcabsNumberBorderDirectiveModule, EcabsPaginatorDirective, EcabsPaginatorDirectiveModule, EcabsPhoneComponent, EcabsPhoneModule, EcabsPipesModule, EcabsPlaceAutocompleteComponent, EcabsPlaceAutocompleteModule, EcabsPlaceAutocompleteV2Component, EcabsPlaceAutocompleteV2Module, EcabsProfileComponent, EcabsProfileModule, EcabsRadioButtonListComponent, EcabsRadioButtonListModule, EcabsSegmentComponent, EcabsSelectComponent, EcabsSelectModule, EcabsSelectV2Component, EcabsSelectV2Module, EcabsShowOnTruncatedDirective, EcabsShowOnTruncatedDirectiveModule, EcabsSidebarComponent, EcabsSidebarModule, EcabsSliderComponent, EcabsSliderModule, EcabsSpinnerComponent, EcabsTableFilterWrapperComponent, EcabsTableFilterWrapperModule, EcabsTableModule, EcabsTextAreaModule, EcabsTextareaComponent, EcabsTimeListPanelComponent, EcabsTimeRangeDirective, EcabsTimeRangeDirectiveModule, EcabsTimeRangeInputV2Component, EcabsTimeRangeInputV2Module, EcabsTimepickerComponent, EcabsTimepickerModule, EcabsTooltipIfTruncatedDirective, EcabsTooltipIfTruncatedDirectiveModule, EcabsTruncatePipe, EcabsUppercaseMaskDirective, EcabsUppercaseMaskDirectiveModule, EcabsValidationComponent, EcabsValidationModule, EcabsValidationViewModule, FormTimePickerService, FormTimePickerServiceV2, GenericComponentConfig, HeaderService, MATERIAL_DATETIMEPICKER_FORMATS, NumberToCountryCodePipe, SeparatorAppendPipe, TableComponent, UnsubscribeService, ValidationComponent, WAYPOINT_SUGGESTIONS, WAYPOINT_SUGGESTIONS2, WaypointTypeEnum, extractCallingCodeFromIso, extractCountryFromIso, extractCountryPrefixFromNumber, extractDialingCode, extractPhoneNumberCode, getPhosphorSvgIcon, getRandomItems, getSupportedCountryIsoCodes, removeEmpty, removeNullUndefineds, scrollFactory, sortGeneric };
10258
+ export { ButtonsComponent, ButtonsV2Component, CHIP_LABEL_CLASS, EcabsActionMenuComponent, EcabsActionMenuModule, EcabsActionMenuTriggerDirective, EcabsActiveStatusFilterComponent, EcabsActiveStatusFilterModule, EcabsAttachEmbeddedViewDirective, EcabsAttachEmbeddedViewDirectiveModule, EcabsBadgeComponent, EcabsBadgeDirective, EcabsBadgeDirectiveModule, EcabsBadgeModule, EcabsBasePhoneComponent, EcabsBasePhoneModule, EcabsBreadcrumbComponent, EcabsBreadcrumbModule, EcabsButtonToggleComponent, EcabsButtonToggleModule, EcabsButtonsModule, EcabsButtonsV2Module, EcabsCheckPermissionDirectiveModule, EcabsCheckPermissionsDirective, EcabsCheckboxToggleComponent, EcabsCheckboxToggleModule, EcabsCheckboxV2Component, EcabsCheckboxV2Module, EcabsChipAutocompleteComponent, EcabsChipGroupComponent, EcabsChipGroupModule, EcabsComponentsService, EcabsDateAdapter, EcabsDatePickerComponent, EcabsDatePickerHeaderComponent, EcabsDatePickerHeaderService, EcabsDatePickerModule, EcabsDateRangeModule, EcabsDateRangeModuleV2, EcabsDateRangePickerComponent, EcabsDateRangePickerComponentV2, EcabsDateRangePickerHeaderComponent, EcabsDateRangePickerHeaderComponentV2, EcabsDateTimePickerComponent, EcabsDateTimePickerHeaderComponent, EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent, EcabsDatetimePickerModule, EcabsDatetimeRangePickerModule, EcabsDialogConfirmComponent, EcabsDialogConfirmDeletionModule, EcabsDialogConfirmModule, EcabsDialogConfirmationDeletionComponent, EcabsDialogMessageComponent, EcabsDialogMessageModule, EcabsDigitsOnlyDirective, EcabsDigitsOnlyDirectivesModule, EcabsDomObserverDirective, EcabsDomObserverDirectiveModule, EcabsDynamicBgColorDirective, EcabsDynamicBgColorDirectiveModule, EcabsElementMultiplierDirective, EcabsElementMultiplierDirectiveModule, EcabsEmptyPlaceholderComponent, EcabsEmptyPlaceholderModule, EcabsExpansionPanelComponent, EcabsExpansionPanelModule, EcabsFileDropDirective, EcabsFileDropDirectiveModule, EcabsHeaderComponent, EcabsHeaderModule, EcabsHintComponent, EcabsHintModule, EcabsIncrementComponent, EcabsIncrementModule, EcabsInputComponent, EcabsInputModule, EcabsInputRangeComponent, EcabsInputRangeModule, EcabsLanguageSelectorComponent, EcabsLanguageSelectorModule, EcabsLoadingComponent, EcabsLoadingModule, EcabsLogoComponent, EcabsLogoModule, EcabsMaskDateDirective, EcabsMaskDateDirectiveModule, EcabsMaskTimeDirective, EcabsMaskTimeDirectiveModule, EcabsMaxDirective, EcabsMenuItemsComponent, EcabsMenuItemsModule, EcabsMinDirective, EcabsMinMaxDirectiveModule, EcabsMultipleDatesPickerComponent, EcabsMultipleDatesPickerModule, EcabsNoteComponent, EcabsNoteModule, EcabsNumberBorderDirective, EcabsNumberBorderDirectiveModule, EcabsPaginatorDirective, EcabsPaginatorDirectiveModule, EcabsPhoneComponent, EcabsPhoneModule, EcabsPipesModule, EcabsPlaceAutocompleteComponent, EcabsPlaceAutocompleteModule, EcabsPlaceAutocompleteV2Component, EcabsPlaceAutocompleteV2Module, EcabsProfileComponent, EcabsProfileModule, EcabsRadioButtonListComponent, EcabsRadioButtonListModule, EcabsSegmentComponent, EcabsSelectComponent, EcabsSelectModule, EcabsSelectV2Component, EcabsSelectV2Module, EcabsShowOnTruncatedDirective, EcabsShowOnTruncatedDirectiveModule, EcabsSidebarComponent, EcabsSidebarModule, EcabsSliderComponent, EcabsSliderModule, EcabsSpinnerComponent, EcabsStatusBadgeVariantPipe, EcabsTableFilterWrapperComponent, EcabsTableFilterWrapperModule, EcabsTableModule, EcabsTextAreaModule, EcabsTextareaComponent, EcabsTimeListPanelComponent, EcabsTimeRangeDirective, EcabsTimeRangeDirectiveModule, EcabsTimeRangeInputV2Component, EcabsTimeRangeInputV2Module, EcabsTimepickerComponent, EcabsTimepickerModule, EcabsTooltipIfTruncatedDirective, EcabsTooltipIfTruncatedDirectiveModule, EcabsTruncatePipe, EcabsUppercaseMaskDirective, EcabsUppercaseMaskDirectiveModule, EcabsValidationComponent, EcabsValidationModule, EcabsValidationViewModule, FormTimePickerService, FormTimePickerServiceV2, GenericComponentConfig, HeaderService, MATERIAL_DATETIMEPICKER_FORMATS, NumberToCountryCodePipe, STATUS_BADGE_VARIANTS, SeparatorAppendPipe, TableComponent, UnsubscribeService, ValidationComponent, WAYPOINT_SUGGESTIONS, WAYPOINT_SUGGESTIONS2, WaypointTypeEnum, buildPhosphorSvgIcon, extractCallingCodeFromIso, extractCountryFromIso, extractCountryPrefixFromNumber, extractDialingCode, extractPhoneNumberCode, getPhosphorSvgIcon, getRandomItems, getSupportedCountryIsoCodes, removeEmpty, removeNullUndefineds, resolveStatusBadgeVariant, scrollFactory, sortGeneric };
9861
10259
  //# sourceMappingURL=ecabs-components.mjs.map