@indigina/ui-kit 1.1.39 → 1.1.41

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 (38) hide show
  1. package/esm2022/lib/components/kit-autocomplete/kit-autocomplete.component.mjs +2 -2
  2. package/esm2022/lib/components/kit-cta-panel-abstract-confirmation/kit-cta-panel-abstract-confirmation.component.mjs +2 -2
  3. package/esm2022/lib/components/kit-cta-panel-confirmation/kit-cta-panel-confirmation.component.mjs +2 -2
  4. package/esm2022/lib/components/kit-cta-panel-item/kit-cta-panel-item.component.mjs +2 -2
  5. package/esm2022/lib/components/kit-daterange/kit-daterange.component.mjs +2 -2
  6. package/esm2022/lib/components/kit-datetimepicker/kit-datetimepicker.component.mjs +2 -2
  7. package/esm2022/lib/components/kit-grid/kit-grid-column/kit-grid-column.component.mjs +2 -2
  8. package/esm2022/lib/components/kit-grid/kit-grid.component.mjs +41 -8
  9. package/esm2022/lib/components/kit-grid/kit-grid.const.mjs +6 -1
  10. package/esm2022/lib/components/kit-grid/kit-grid.model.mjs +1 -1
  11. package/esm2022/lib/components/kit-location-stepper/kit-location-stepper.component.mjs +2 -2
  12. package/esm2022/lib/components/kit-navigation-menu/kit-navigation-menu-base.component.mjs +42 -0
  13. package/esm2022/lib/components/kit-navigation-menu/kit-navigation-menu-submenu/kit-navigation-menu-submenu.component.mjs +33 -0
  14. package/esm2022/lib/components/kit-navigation-menu/kit-navigation-menu-submenu/kit-navigation-menu-submenu.module.mjs +32 -0
  15. package/esm2022/lib/components/kit-navigation-menu/kit-navigation-menu.component.mjs +28 -19
  16. package/esm2022/lib/components/kit-navigation-menu/kit-navigation-menu.model.mjs +1 -1
  17. package/esm2022/lib/components/kit-navigation-menu/kit-navigation-menu.module.mjs +7 -7
  18. package/esm2022/lib/components/kit-navigation-menu/kit-navigation-menu.util.mjs +20 -0
  19. package/esm2022/lib/components/kit-notification/kit-notification.component.mjs +2 -2
  20. package/esm2022/lib/components/kit-switch/kit-switch.component.mjs +2 -2
  21. package/esm2022/lib/components/kit-text-label/kit-text-label.component.mjs +2 -2
  22. package/esm2022/lib/components/kit-units-textbox/kit-units-textbox.component.mjs +2 -2
  23. package/esm2022/public-api.mjs +3 -2
  24. package/fesm2022/indigina-ui-kit.mjs +210 -53
  25. package/fesm2022/indigina-ui-kit.mjs.map +1 -1
  26. package/lib/components/kit-grid/kit-grid.component.d.ts +25 -7
  27. package/lib/components/kit-grid/kit-grid.const.d.ts +4 -0
  28. package/lib/components/kit-grid/kit-grid.model.d.ts +6 -1
  29. package/lib/components/kit-navigation-menu/kit-navigation-menu-base.component.d.ts +15 -0
  30. package/lib/components/kit-navigation-menu/kit-navigation-menu-submenu/kit-navigation-menu-submenu.component.d.ts +9 -0
  31. package/lib/components/kit-navigation-menu/kit-navigation-menu-submenu/kit-navigation-menu-submenu.module.d.ts +10 -0
  32. package/lib/components/kit-navigation-menu/kit-navigation-menu.component.d.ts +9 -11
  33. package/lib/components/kit-navigation-menu/kit-navigation-menu.model.d.ts +2 -1
  34. package/lib/components/kit-navigation-menu/kit-navigation-menu.module.d.ts +4 -4
  35. package/lib/components/kit-navigation-menu/kit-navigation-menu.util.d.ts +2 -0
  36. package/package.json +1 -1
  37. package/public-api.d.ts +2 -1
  38. package/styles/common.scss +5 -0
package/fesm2022/indigina-ui-kit.mjs CHANGED
@@ -32,11 +32,11 @@ import { IndicatorsModule } from '@progress/kendo-angular-indicators';
32
32
  import * as i2$2 from '@progress/kendo-angular-upload';
33
33
  import { UploadModule } from '@progress/kendo-angular-upload';
34
34
  import { HttpClientModule } from '@angular/common/http';
35
- import * as i2$3 from '@progress/kendo-angular-layout';
36
- import { PanelBarExpandMode, PanelBarModule, LayoutModule } from '@progress/kendo-angular-layout';
35
+ import { style, state, animate, transition, trigger } from '@angular/animations';
37
36
  import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
38
37
  import initials from 'initials';
39
- import { style, state, animate, transition, trigger } from '@angular/animations';
38
+ import * as i2$3 from '@progress/kendo-angular-layout';
39
+ import { LayoutModule } from '@progress/kendo-angular-layout';
40
40
  import * as i2$4 from '@progress/kendo-angular-grid';
41
41
  import { GridModule } from '@progress/kendo-angular-grid';
42
42
 
@@ -488,11 +488,11 @@ class KitSwitchComponent {
488
488
  return this.mode === KitSwitchMode.SINGLE;
489
489
  }
490
490
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
491
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitSwitchComponent, selector: "kit-switch", inputs: { items: "items", mode: "mode", label: "label", disabled: "disabled", selection: "selection", messageIcon: "messageIcon", messageText: "messageText", state: "state" }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"kit-switch {{ state }}\">\n <ng-container *ngIf=\"items.length\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n <kendo-buttongroup look=\"outline\" class=\"button-group\"\n [selection]=\"mode\"\n [class.disabled]=\"disabled\">\n <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n [selected]=\"isItemSelected(item)\"\n [togglable]=\"true\"\n [disabled]=\"item.disabled && item.disabled(item)\"\n (selectedChange)=\"onItemSelect($event, item)\">\n <ng-container *ngIf=\"item.title; else icon\">\n {{ item.title }}\n </ng-container>\n\n <ng-template #icon>\n <kit-svg-icon class=\"icon-wrapper\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n </ng-template>\n </button>\n </kendo-buttongroup>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n </ng-container>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-pink: #cd1159;--ui-kit-color-purple: #7673ce}.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-switch .label{display:block;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{stroke:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{stroke:var(--ui-kit-color-cobalt);fill:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{stroke:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "component", type: i1.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
491
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitSwitchComponent, selector: "kit-switch", inputs: { items: "items", mode: "mode", label: "label", disabled: "disabled", selection: "selection", messageIcon: "messageIcon", messageText: "messageText", state: "state" }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"kit-switch {{ state }}\">\n <ng-container *ngIf=\"items.length\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n <kendo-buttongroup look=\"outline\" class=\"button-group\"\n [selection]=\"mode\"\n [class.disabled]=\"disabled\">\n <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n [selected]=\"isItemSelected(item)\"\n [togglable]=\"true\"\n [disabled]=\"item.disabled && item.disabled(item)\"\n (selectedChange)=\"onItemSelect($event, item)\">\n <ng-container *ngIf=\"item.title; else icon\">\n {{ item.title }}\n </ng-container>\n\n <ng-template #icon>\n <kit-svg-icon class=\"icon-wrapper\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n </ng-template>\n </button>\n </kendo-buttongroup>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n </ng-container>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-pink: #cd1159;--ui-kit-color-purple: #7673ce}.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-switch .label{display:block;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{stroke:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{stroke:var(--ui-kit-color-cobalt);fill:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{stroke:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "component", type: i1.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
492
492
  }
493
493
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitSwitchComponent, decorators: [{
494
494
  type: Component,
495
- args: [{ selector: 'kit-switch', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-switch {{ state }}\">\n <ng-container *ngIf=\"items.length\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n <kendo-buttongroup look=\"outline\" class=\"button-group\"\n [selection]=\"mode\"\n [class.disabled]=\"disabled\">\n <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n [selected]=\"isItemSelected(item)\"\n [togglable]=\"true\"\n [disabled]=\"item.disabled && item.disabled(item)\"\n (selectedChange)=\"onItemSelect($event, item)\">\n <ng-container *ngIf=\"item.title; else icon\">\n {{ item.title }}\n </ng-container>\n\n <ng-template #icon>\n <kit-svg-icon class=\"icon-wrapper\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n </ng-template>\n </button>\n </kendo-buttongroup>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n </ng-container>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-pink: #cd1159;--ui-kit-color-purple: #7673ce}.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-switch .label{display:block;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{stroke:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{stroke:var(--ui-kit-color-cobalt);fill:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{stroke:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"] }]
495
+ args: [{ selector: 'kit-switch', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-switch {{ state }}\">\n <ng-container *ngIf=\"items.length\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n <kendo-buttongroup look=\"outline\" class=\"button-group\"\n [selection]=\"mode\"\n [class.disabled]=\"disabled\">\n <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n [selected]=\"isItemSelected(item)\"\n [togglable]=\"true\"\n [disabled]=\"item.disabled && item.disabled(item)\"\n (selectedChange)=\"onItemSelect($event, item)\">\n <ng-container *ngIf=\"item.title; else icon\">\n {{ item.title }}\n </ng-container>\n\n <ng-template #icon>\n <kit-svg-icon class=\"icon-wrapper\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n </ng-template>\n </button>\n </kendo-buttongroup>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n </ng-container>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-pink: #cd1159;--ui-kit-color-purple: #7673ce}.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-switch .label{display:block;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{stroke:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{stroke:var(--ui-kit-color-cobalt);fill:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{stroke:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"] }]
496
496
  }], propDecorators: { items: [{
497
497
  type: Input
498
498
  }], mode: [{
@@ -1037,7 +1037,7 @@ class KitAutocompleteComponent {
1037
1037
  provide: NG_VALUE_ACCESSOR,
1038
1038
  useExisting: forwardRef(() => KitAutocompleteComponent),
1039
1039
  multi: true,
1040
- }], viewQueries: [{ propertyName: "combobox", first: true, predicate: ["combobox"], descendants: true }], ngImport: i0, template: "<div class=\"kit-autocomplete {{ state }}\"\n [class.autocomplete-empty]=\"!items || !items.length\"\n [class.autocomplete-disabled]=\"disabled\"\n [class.autocomplete-loading]=\"loaderVisible\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"combobox\"\n ></kit-input-label>\n }\n <div class=\"autocomplete-wrap\">\n <kendo-combobox #combobox\n textField=\"text\"\n valueField=\"value\"\n kendoDropDownFilter\n [data]=\"items\"\n [placeholder]=\"placeholder\"\n [filterable]=\"true\"\n [disabled]=\"disabled\"\n [clearButton]=\"false\"\n [value]=\"selectedValue\"\n [allowCustom]=\"true\"\n [valueNormalizer]=\"normalizedSelectedValue$\"\n [popupSettings]=\"dropdownPopupSettings\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (selectionChange)=\"onValueSelect($event)\"\n (filterChange)=\"onFilterChange($event)\">\n <ng-template kendoComboBoxHeaderTemplate>\n @if (loaderVisible) {\n <kit-loader class=\"popup-loader\"\n ></kit-loader>\n }\n </ng-template>\n <ng-template kendoComboBoxItemTemplate\n let-item>\n <span class=\"template\">{{ getOptionText(item) }}</span>\n </ng-template>\n </kendo-combobox>\n <kit-svg-icon class=\"input-icon\"\n icon=\"search\"\n ></kit-svg-icon>\n </div>\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-pink: #cd1159;--ui-kit-color-purple: #7673ce}.kit-autocomplete .label{display:block;margin-bottom:4px}.kit-autocomplete .autocomplete-wrap{position:relative;display:flex;align-items:center}.kit-autocomplete .k-input-button{display:none}.kit-autocomplete .k-combobox{position:static;padding:0 32px 0 8px;height:34px;border:1px solid #efefef;border-radius:4px;background:#fff}.kit-autocomplete .k-combobox.k-focus{box-shadow:none}.kit-autocomplete .k-input-inner{padding:0;color:#002a3a;font-size:13px;line-height:1}.kit-autocomplete .k-input-inner::selection{color:#fff;background:#00b0ad}.kit-autocomplete .popup-loader{height:100%}.kit-autocomplete .kit-loader,.kit-autocomplete .kit-loader>div{height:100%}.kit-autocomplete .kit-loader .circle{box-sizing:content-box}.kit-autocomplete .input-icon{position:absolute;right:8px;width:16px;height:16px;fill:#fff;stroke:#000}.kit-autocomplete .kit-autocomplete-popup{margin-top:4px;border:1px solid #c1c7d0;border-radius:4px;box-shadow:0 0 5px #003e5680;background-color:#f3f4f6;padding:4px}.kit-autocomplete .kit-autocomplete-popup .k-list{background-color:#f3f4f6}.kit-autocomplete .kit-autocomplete-popup .k-list-item{padding:8px;min-height:auto;background-color:#fff;font-size:13px;font-weight:500;line-height:1.26;box-shadow:none;border-radius:2px;color:#002a3a}.kit-autocomplete .kit-autocomplete-popup .k-list-item:not(:last-of-type){margin-bottom:4px}.kit-autocomplete .kit-autocomplete-popup .k-list-item:hover{background-color:#f3f5fa;color:#56a2f7}.kit-autocomplete:focus-within .k-combobox{border-color:#00b0ad}.kit-autocomplete.autocomplete-empty .kit-autocomplete-popup{display:none}.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup{display:block;height:200px}.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup .k-no-data,.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup .k-list{display:none}.kit-autocomplete.danger .k-combobox{border-color:#ef3e42;background:#f8e0e0}.kit-autocomplete.danger .input-icon{fill:#f8e0e0}\n"], dependencies: [{ kind: "directive", type: i1$3.HeaderTemplateDirective, selector: "[kendoDropDownListHeaderTemplate],[kendoComboBoxHeaderTemplate],[kendoDropDownTreeHeaderTemplate],[kendoMultiColumnComboBoxHeaderTemplate],[kendoAutoCompleteHeaderTemplate],[kendoMultiSelectHeaderTemplate],[kendoMultiSelectTreeHeaderTemplate]" }, { kind: "directive", type: i1$3.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i1$3.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["data", "kendoDropDownFilter", "filterable"] }, { kind: "component", type: i1$3.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoComboBox"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitLoaderComponent, selector: "kit-loader" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1040
+ }], viewQueries: [{ propertyName: "combobox", first: true, predicate: ["combobox"], descendants: true }], ngImport: i0, template: "<div class=\"kit-autocomplete {{ state }}\"\n [class.autocomplete-empty]=\"!items || !items.length\"\n [class.autocomplete-disabled]=\"disabled\"\n [class.autocomplete-loading]=\"loaderVisible\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"combobox\"\n ></kit-input-label>\n }\n <div class=\"autocomplete-wrap\">\n <kendo-combobox #combobox\n textField=\"text\"\n valueField=\"value\"\n kendoDropDownFilter\n [data]=\"items\"\n [placeholder]=\"placeholder\"\n [filterable]=\"true\"\n [disabled]=\"disabled\"\n [clearButton]=\"false\"\n [value]=\"selectedValue\"\n [allowCustom]=\"true\"\n [valueNormalizer]=\"normalizedSelectedValue$\"\n [popupSettings]=\"dropdownPopupSettings\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (selectionChange)=\"onValueSelect($event)\"\n (filterChange)=\"onFilterChange($event)\">\n <ng-template kendoComboBoxHeaderTemplate>\n @if (loaderVisible) {\n <kit-loader class=\"popup-loader\"\n ></kit-loader>\n }\n </ng-template>\n <ng-template kendoComboBoxItemTemplate\n let-item>\n <span class=\"template\">{{ getOptionText(item) }}</span>\n </ng-template>\n </kendo-combobox>\n <kit-svg-icon class=\"input-icon\"\n icon=\"search\"\n ></kit-svg-icon>\n </div>\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-pink: #cd1159;--ui-kit-color-purple: #7673ce}.kit-autocomplete .label{display:block;margin-bottom:4px}.kit-autocomplete .autocomplete-wrap{position:relative;display:flex;align-items:center}.kit-autocomplete .k-input-button{display:none}.kit-autocomplete .k-combobox{position:static;padding:0 32px 0 8px;height:34px;border:1px solid #efefef;border-radius:4px;background:#fff}.kit-autocomplete .k-combobox.k-focus{box-shadow:none}.kit-autocomplete .k-input-inner{padding:0;color:#002a3a;font-size:13px;line-height:1}.kit-autocomplete .k-input-inner::selection{color:#fff;background:#00b0ad}.kit-autocomplete .popup-loader{height:100%}.kit-autocomplete .kit-loader,.kit-autocomplete .kit-loader>div{height:100%}.kit-autocomplete .kit-loader .circle{box-sizing:content-box}.kit-autocomplete .input-icon{position:absolute;right:8px;width:16px;height:16px;fill:#fff;stroke:#000}.kit-autocomplete .kit-autocomplete-popup{margin-top:4px;border:1px solid #c1c7d0;border-radius:4px;box-shadow:0 0 5px #003e5680;background-color:#f3f4f6;padding:4px}.kit-autocomplete .kit-autocomplete-popup .k-list{background-color:#f3f4f6}.kit-autocomplete .kit-autocomplete-popup .k-list-item{padding:8px;min-height:auto;background-color:#fff;font-size:13px;font-weight:500;line-height:1.26;box-shadow:none;border-radius:2px;color:#002a3a}.kit-autocomplete .kit-autocomplete-popup .k-list-item:not(:last-of-type){margin-bottom:4px}.kit-autocomplete .kit-autocomplete-popup .k-list-item:hover{background-color:#f3f5fa;color:#56a2f7}.kit-autocomplete:focus-within .k-combobox{border-color:#00b0ad}.kit-autocomplete.autocomplete-empty .kit-autocomplete-popup{display:none}.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup{display:block;height:200px}.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup .k-no-data,.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup .k-list{display:none}.kit-autocomplete.danger .k-combobox{border-color:#ef3e42;background:#f8e0e0}.kit-autocomplete.danger .input-icon{fill:#f8e0e0}\n"], dependencies: [{ kind: "directive", type: i1$3.HeaderTemplateDirective, selector: "[kendoDropDownListHeaderTemplate],[kendoComboBoxHeaderTemplate],[kendoDropDownTreeHeaderTemplate],[kendoMultiColumnComboBoxHeaderTemplate],[kendoAutoCompleteHeaderTemplate],[kendoMultiSelectHeaderTemplate],[kendoMultiSelectTreeHeaderTemplate]" }, { kind: "directive", type: i1$3.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i1$3.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["data", "kendoDropDownFilter", "filterable"] }, { kind: "component", type: i1$3.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoComboBox"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitLoaderComponent, selector: "kit-loader" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1041
1041
  }
1042
1042
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitAutocompleteComponent, decorators: [{
1043
1043
  type: Component,
@@ -1045,7 +1045,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
1045
1045
  provide: NG_VALUE_ACCESSOR,
1046
1046
  useExisting: forwardRef(() => KitAutocompleteComponent),
1047
1047
  multi: true,
1048
- }], template: "<div class=\"kit-autocomplete {{ state }}\"\n [class.autocomplete-empty]=\"!items || !items.length\"\n [class.autocomplete-disabled]=\"disabled\"\n [class.autocomplete-loading]=\"loaderVisible\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"combobox\"\n ></kit-input-label>\n }\n <div class=\"autocomplete-wrap\">\n <kendo-combobox #combobox\n textField=\"text\"\n valueField=\"value\"\n kendoDropDownFilter\n [data]=\"items\"\n [placeholder]=\"placeholder\"\n [filterable]=\"true\"\n [disabled]=\"disabled\"\n [clearButton]=\"false\"\n [value]=\"selectedValue\"\n [allowCustom]=\"true\"\n [valueNormalizer]=\"normalizedSelectedValue$\"\n [popupSettings]=\"dropdownPopupSettings\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (selectionChange)=\"onValueSelect($event)\"\n (filterChange)=\"onFilterChange($event)\">\n <ng-template kendoComboBoxHeaderTemplate>\n @if (loaderVisible) {\n <kit-loader class=\"popup-loader\"\n ></kit-loader>\n }\n </ng-template>\n <ng-template kendoComboBoxItemTemplate\n let-item>\n <span class=\"template\">{{ getOptionText(item) }}</span>\n </ng-template>\n </kendo-combobox>\n <kit-svg-icon class=\"input-icon\"\n icon=\"search\"\n ></kit-svg-icon>\n </div>\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-pink: #cd1159;--ui-kit-color-purple: #7673ce}.kit-autocomplete .label{display:block;margin-bottom:4px}.kit-autocomplete .autocomplete-wrap{position:relative;display:flex;align-items:center}.kit-autocomplete .k-input-button{display:none}.kit-autocomplete .k-combobox{position:static;padding:0 32px 0 8px;height:34px;border:1px solid #efefef;border-radius:4px;background:#fff}.kit-autocomplete .k-combobox.k-focus{box-shadow:none}.kit-autocomplete .k-input-inner{padding:0;color:#002a3a;font-size:13px;line-height:1}.kit-autocomplete .k-input-inner::selection{color:#fff;background:#00b0ad}.kit-autocomplete .popup-loader{height:100%}.kit-autocomplete .kit-loader,.kit-autocomplete .kit-loader>div{height:100%}.kit-autocomplete .kit-loader .circle{box-sizing:content-box}.kit-autocomplete .input-icon{position:absolute;right:8px;width:16px;height:16px;fill:#fff;stroke:#000}.kit-autocomplete .kit-autocomplete-popup{margin-top:4px;border:1px solid #c1c7d0;border-radius:4px;box-shadow:0 0 5px #003e5680;background-color:#f3f4f6;padding:4px}.kit-autocomplete .kit-autocomplete-popup .k-list{background-color:#f3f4f6}.kit-autocomplete .kit-autocomplete-popup .k-list-item{padding:8px;min-height:auto;background-color:#fff;font-size:13px;font-weight:500;line-height:1.26;box-shadow:none;border-radius:2px;color:#002a3a}.kit-autocomplete .kit-autocomplete-popup .k-list-item:not(:last-of-type){margin-bottom:4px}.kit-autocomplete .kit-autocomplete-popup .k-list-item:hover{background-color:#f3f5fa;color:#56a2f7}.kit-autocomplete:focus-within .k-combobox{border-color:#00b0ad}.kit-autocomplete.autocomplete-empty .kit-autocomplete-popup{display:none}.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup{display:block;height:200px}.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup .k-no-data,.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup .k-list{display:none}.kit-autocomplete.danger .k-combobox{border-color:#ef3e42;background:#f8e0e0}.kit-autocomplete.danger .input-icon{fill:#f8e0e0}\n"] }]
1048
+ }], template: "<div class=\"kit-autocomplete {{ state }}\"\n [class.autocomplete-empty]=\"!items || !items.length\"\n [class.autocomplete-disabled]=\"disabled\"\n [class.autocomplete-loading]=\"loaderVisible\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"combobox\"\n ></kit-input-label>\n }\n <div class=\"autocomplete-wrap\">\n <kendo-combobox #combobox\n textField=\"text\"\n valueField=\"value\"\n kendoDropDownFilter\n [data]=\"items\"\n [placeholder]=\"placeholder\"\n [filterable]=\"true\"\n [disabled]=\"disabled\"\n [clearButton]=\"false\"\n [value]=\"selectedValue\"\n [allowCustom]=\"true\"\n [valueNormalizer]=\"normalizedSelectedValue$\"\n [popupSettings]=\"dropdownPopupSettings\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (selectionChange)=\"onValueSelect($event)\"\n (filterChange)=\"onFilterChange($event)\">\n <ng-template kendoComboBoxHeaderTemplate>\n @if (loaderVisible) {\n <kit-loader class=\"popup-loader\"\n ></kit-loader>\n }\n </ng-template>\n <ng-template kendoComboBoxItemTemplate\n let-item>\n <span class=\"template\">{{ getOptionText(item) }}</span>\n </ng-template>\n </kendo-combobox>\n <kit-svg-icon class=\"input-icon\"\n icon=\"search\"\n ></kit-svg-icon>\n </div>\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-pink: #cd1159;--ui-kit-color-purple: #7673ce}.kit-autocomplete .label{display:block;margin-bottom:4px}.kit-autocomplete .autocomplete-wrap{position:relative;display:flex;align-items:center}.kit-autocomplete .k-input-button{display:none}.kit-autocomplete .k-combobox{position:static;padding:0 32px 0 8px;height:34px;border:1px solid #efefef;border-radius:4px;background:#fff}.kit-autocomplete .k-combobox.k-focus{box-shadow:none}.kit-autocomplete .k-input-inner{padding:0;color:#002a3a;font-size:13px;line-height:1}.kit-autocomplete .k-input-inner::selection{color:#fff;background:#00b0ad}.kit-autocomplete .popup-loader{height:100%}.kit-autocomplete .kit-loader,.kit-autocomplete .kit-loader>div{height:100%}.kit-autocomplete .kit-loader .circle{box-sizing:content-box}.kit-autocomplete .input-icon{position:absolute;right:8px;width:16px;height:16px;fill:#fff;stroke:#000}.kit-autocomplete .kit-autocomplete-popup{margin-top:4px;border:1px solid #c1c7d0;border-radius:4px;box-shadow:0 0 5px #003e5680;background-color:#f3f4f6;padding:4px}.kit-autocomplete .kit-autocomplete-popup .k-list{background-color:#f3f4f6}.kit-autocomplete .kit-autocomplete-popup .k-list-item{padding:8px;min-height:auto;background-color:#fff;font-size:13px;font-weight:500;line-height:1.26;box-shadow:none;border-radius:2px;color:#002a3a}.kit-autocomplete .kit-autocomplete-popup .k-list-item:not(:last-of-type){margin-bottom:4px}.kit-autocomplete .kit-autocomplete-popup .k-list-item:hover{background-color:#f3f5fa;color:#56a2f7}.kit-autocomplete:focus-within .k-combobox{border-color:#00b0ad}.kit-autocomplete.autocomplete-empty .kit-autocomplete-popup{display:none}.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup{display:block;height:200px}.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup .k-no-data,.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup .k-list{display:none}.kit-autocomplete.danger .k-combobox{border-color:#ef3e42;background:#f8e0e0}.kit-autocomplete.danger .input-icon{fill:#f8e0e0}\n"] }]
1049
1049
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
1050
1050
  type: Input
1051
1051
  }], placeholder: [{
@@ -1503,11 +1503,11 @@ class KitTextLabelComponent {
1503
1503
  this.state = KitTextLabelState.REGULAR;
1504
1504
  }
1505
1505
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitTextLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1506
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitTextLabelComponent, selector: "kit-text-label", inputs: { label: "label", value: "value", htmlMode: "htmlMode", noValueMessage: "noValueMessage", messageText: "messageText", state: "state" }, ngImport: i0, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n @if (value) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n @if (!value) {\n <kit-input-label class=\"label\"\n [text]=\"noValueMessage || label\"\n ></kit-input-label>\n }\n\n <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n <ng-template #htmlModeTemplate>\n <div class=\"value\" [innerHTML]=\"value\"></div>\n </ng-template>\n <kit-input-message *ngIf=\"messageText && value\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-pink: #cd1159;--ui-kit-color-purple: #7673ce}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .label{display:block;margin-bottom:4px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1506
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitTextLabelComponent, selector: "kit-text-label", inputs: { label: "label", value: "value", htmlMode: "htmlMode", noValueMessage: "noValueMessage", messageText: "messageText", state: "state" }, ngImport: i0, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n @if (value) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n @if (!value) {\n <kit-input-label class=\"label\"\n [text]=\"noValueMessage || label\"\n ></kit-input-label>\n }\n\n <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n <ng-template #htmlModeTemplate>\n <div class=\"value\" [innerHTML]=\"value\"></div>\n </ng-template>\n <kit-input-message *ngIf=\"messageText && value\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-pink: #cd1159;--ui-kit-color-purple: #7673ce}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .label{display:block;margin-bottom:4px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1507
1507
  }
1508
1508
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitTextLabelComponent, decorators: [{
1509
1509
  type: Component,
1510
- args: [{ selector: 'kit-text-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n @if (value) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n @if (!value) {\n <kit-input-label class=\"label\"\n [text]=\"noValueMessage || label\"\n ></kit-input-label>\n }\n\n <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n <ng-template #htmlModeTemplate>\n <div class=\"value\" [innerHTML]=\"value\"></div>\n </ng-template>\n <kit-input-message *ngIf=\"messageText && value\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-pink: #cd1159;--ui-kit-color-purple: #7673ce}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .label{display:block;margin-bottom:4px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"] }]
1510
+ args: [{ selector: 'kit-text-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n @if (value) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n @if (!value) {\n <kit-input-label class=\"label\"\n [text]=\"noValueMessage || label\"\n ></kit-input-label>\n }\n\n <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n <ng-template #htmlModeTemplate>\n <div class=\"value\" [innerHTML]=\"value\"></div>\n </ng-template>\n <kit-input-message *ngIf=\"messageText && value\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-pink: #cd1159;--ui-kit-color-purple: #7673ce}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .label{display:block;margin-bottom:4px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"] }]
1511
1511
  }], propDecorators: { label: [{
1512
1512
  type: Input
1513
1513
  }], value: [{
@@ -1656,11 +1656,11 @@ class KitUnitsTextboxComponent {
1656
1656
  this.dropdownFormControl.markAsTouched();
1657
1657
  }
1658
1658
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitUnitsTextboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1659
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitUnitsTextboxComponent, selector: "kit-units-textbox", inputs: { placeholder: "placeholder", label: "label", disabledTextBox: "disabledTextBox", disabledDropdown: "disabledDropdown", dropdownItems: "dropdownItems", selectedDropdownItem: "selectedDropdownItem", textBoxValue: "textBoxValue", textBoxFormControl: "textBoxFormControl", dropdownFormControl: "dropdownFormControl", messageIcon: "messageIcon", messageText: "messageText", dropdownPosition: "dropdownPosition", textboxType: "textboxType", decimals: "decimals", min: "min", max: "max", maxlength: "maxlength", format: "format", state: "state" }, outputs: { blured: "blured", selected: "selected", changed: "changed" }, ngImport: i0, template: "<div class=\"kit-units-textbox {{ state }}\" [class.textbox-disabled]=\"disabledTextBox\"\n [class.dropdown-disabled]=\"disabledDropdown\"\n [class.units-left]=\"dropdownPosition === KitUnitsTextboxDropdownPosition.LEFT\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n <div class=\"units-textbox-wrap\">\n <kendo-textbox *ngIf=\"textboxType === KitUnitsTextboxType.TEXT; else numericTextboxTemplate\"\n [placeholder]=\"placeholder\"\n [value]=\"textBoxFormControl.value || textBoxValue\"\n [disabled]=\"disabledTextBox\"\n [maxlength]=\"maxlength\"\n (blur)=\"onInputBlur()\"\n (valueChange)=\"onInputChange($event)\"\n ></kendo-textbox>\n <ng-template #numericTextboxTemplate>\n <kendo-numerictextbox [placeholder]=\"placeholder\"\n [value]=\"textBoxFormControl.value || textBoxValue\"\n [decimals]=\"decimals\"\n [min]=\"min\"\n [max]=\"max\"\n [maxlength]=\"maxlength\"\n [format]=\"format\"\n [autoCorrect]=\"true\"\n [spinners]=\"false\"\n [selectOnFocus]=\"false\"\n [disabled]=\"disabledTextBox\"\n (blur)=\"onInputBlur()\"\n (valueChange)=\"onInputChange($event)\"\n ></kendo-numerictextbox>\n </ng-template>\n <kendo-dropdownlist valueField=\"value\" textField=\"text\"\n [data]=\"dropdownItems\"\n [value]=\"dropdownFormControl.value || selectedDropdownItem\"\n [valuePrimitive]=\"true\"\n [disabled]=\"disabledDropdown\"\n [popupSettings]=\"dropdownPopupSettings\"\n [itemDisabled]=\"onItemDisabled()\"\n (selectionChange)=\"onItemSelect($event)\"\n (blur)=\"onDropdownBlur()\"\n >\n <ng-template kendoDropDownListValueTemplate let-dataItem>\n <span class=\"value-text\">{{ dataItem?.text }}</span>\n <kit-svg-icon class=\"value-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </ng-template>\n </kendo-dropdownlist>\n </div>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-units-textbox .label{display:block;margin-bottom:4px}.kit-units-textbox .units-textbox-wrap{display:flex;height:34px;border:1px solid #efefef;border-radius:4px;background:#fff;box-sizing:border-box}.kit-units-textbox .k-textbox,.kit-units-textbox .k-numerictextbox{height:100%;width:auto;opacity:1;border:none;box-shadow:none;flex-grow:1;background:none}.kit-units-textbox .k-textbox .k-input-inner,.kit-units-textbox .k-numerictextbox .k-input-inner{padding:0 8px;width:100%;color:#002a3a;font-size:13px;line-height:1}.kit-units-textbox .k-dropdownlist{position:relative;width:auto;overflow:visible;border:none;background:none}.kit-units-textbox .k-dropdownlist.k-focus{box-shadow:none}.kit-units-textbox .k-dropdownlist:hover{background:none}.kit-units-textbox .k-dropdownlist .k-input-inner{padding:0;height:100%;justify-content:flex-end;font-size:13px;font-weight:500;color:#56a2f7;overflow:visible}.kit-units-textbox .k-dropdownlist .k-input-value-text{display:flex;align-items:center;overflow:visible}.kit-units-textbox .k-dropdownlist .k-input-button{display:none}.kit-units-textbox .k-dropdownlist .value{display:flex;align-items:center}.kit-units-textbox .k-dropdownlist .value-text{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-units-textbox .k-dropdownlist .value-icon{display:block;padding:4px;width:16px;height:16px;fill:none;stroke:#002a3a;box-sizing:initial}.kit-units-textbox:focus-within .units-textbox-wrap{border:1px solid #00b0ad}.kit-units-textbox .k-animation-container{position:absolute;left:auto!important;right:0!important}.kit-units-textbox .kit-dropdown-popup{margin-top:8px;min-width:75px;border:1px solid #c1c7d0;border-radius:4px;box-shadow:0 0 8px #003e5680;background-color:#f3f4f6;padding:4px}.kit-units-textbox .kit-dropdown-popup .k-list-ul{background-color:#f3f4f6}.kit-units-textbox .kit-dropdown-popup .k-list-item{background-color:#fff;font-size:13px;font-weight:500;box-shadow:none;border-radius:2px;color:#002a3a;justify-content:flex-end;text-align:right}.kit-units-textbox .kit-dropdown-popup .k-list-item:not(:last-of-type){margin-bottom:4px}.kit-units-textbox .kit-dropdown-popup .k-list-item.k-state-focused{background-color:#fff;color:#27282a}.kit-units-textbox .kit-dropdown-popup .k-list-item:hover,.kit-units-textbox .kit-dropdown-popup .k-list-item.k-focus:hover{background-color:#f3f5fa;color:#56a2f7}.kit-units-textbox .kit-dropdown-popup .k-list-item.k-selected{background-color:#56a2f7;color:#fff}.kit-units-textbox .kit-dropdown-popup .k-list-item.k-disabled{background-color:#f3f4f6;color:#9a9fa6}.kit-units-textbox.textbox-disabled .label{color:#74777d}.kit-units-textbox.textbox-disabled .units-textbox-wrap{border-color:#c1c7d0;background-color:#f3f4f6;box-shadow:none}.kit-units-textbox.textbox-disabled .k-textbox .k-input-inner,.kit-units-textbox.textbox-disabled .k-numerictextbox .k-input-inner{color:#9a9fa6}.kit-units-textbox.units-left .units-textbox-wrap{flex-direction:row-reverse}.kit-units-textbox.units-left .k-textbox,.kit-units-textbox.units-left .k-numerictextbox{grid-column:2;grid-row:1}.kit-units-textbox.units-left .k-textbox .k-input,.kit-units-textbox.units-left .k-numerictextbox .k-input{padding-left:0}.kit-units-textbox.units-left .k-dropdownlist{grid-column:1}.kit-units-textbox.units-left .k-dropdownlist .k-input-inner{padding-left:8px;width:auto}.kit-units-textbox.units-left .k-animation-container{left:0!important;right:auto!important}.kit-units-textbox.units-left .kit-dropdown-popup .k-list-item{justify-content:flex-start;text-align:left}.kit-units-textbox .k-input-prefix,.kit-units-textbox .k-input-suffix{height:0}.kit-units-textbox.dropdown-disabled .k-dropdownlist .k-input-inner{color:#9a9fa6}.kit-units-textbox.dropdown-disabled .k-dropdownlist .value-icon{stroke:#9a9fa6}.kit-units-textbox.danger .units-textbox-wrap{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i2.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: i1$3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: i1$3.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1659
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitUnitsTextboxComponent, selector: "kit-units-textbox", inputs: { placeholder: "placeholder", label: "label", disabledTextBox: "disabledTextBox", disabledDropdown: "disabledDropdown", dropdownItems: "dropdownItems", selectedDropdownItem: "selectedDropdownItem", textBoxValue: "textBoxValue", textBoxFormControl: "textBoxFormControl", dropdownFormControl: "dropdownFormControl", messageIcon: "messageIcon", messageText: "messageText", dropdownPosition: "dropdownPosition", textboxType: "textboxType", decimals: "decimals", min: "min", max: "max", maxlength: "maxlength", format: "format", state: "state" }, outputs: { blured: "blured", selected: "selected", changed: "changed" }, ngImport: i0, template: "<div class=\"kit-units-textbox {{ state }}\" [class.textbox-disabled]=\"disabledTextBox\"\n [class.dropdown-disabled]=\"disabledDropdown\"\n [class.units-left]=\"dropdownPosition === KitUnitsTextboxDropdownPosition.LEFT\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n <div class=\"units-textbox-wrap\">\n <kendo-textbox *ngIf=\"textboxType === KitUnitsTextboxType.TEXT; else numericTextboxTemplate\"\n [placeholder]=\"placeholder\"\n [value]=\"textBoxFormControl.value || textBoxValue\"\n [disabled]=\"disabledTextBox\"\n [maxlength]=\"maxlength\"\n (blur)=\"onInputBlur()\"\n (valueChange)=\"onInputChange($event)\"\n ></kendo-textbox>\n <ng-template #numericTextboxTemplate>\n <kendo-numerictextbox [placeholder]=\"placeholder\"\n [value]=\"textBoxFormControl.value || textBoxValue\"\n [decimals]=\"decimals\"\n [min]=\"min\"\n [max]=\"max\"\n [maxlength]=\"maxlength\"\n [format]=\"format\"\n [autoCorrect]=\"true\"\n [spinners]=\"false\"\n [selectOnFocus]=\"false\"\n [disabled]=\"disabledTextBox\"\n (blur)=\"onInputBlur()\"\n (valueChange)=\"onInputChange($event)\"\n ></kendo-numerictextbox>\n </ng-template>\n <kendo-dropdownlist valueField=\"value\" textField=\"text\"\n [data]=\"dropdownItems\"\n [value]=\"dropdownFormControl.value || selectedDropdownItem\"\n [valuePrimitive]=\"true\"\n [disabled]=\"disabledDropdown\"\n [popupSettings]=\"dropdownPopupSettings\"\n [itemDisabled]=\"onItemDisabled()\"\n (selectionChange)=\"onItemSelect($event)\"\n (blur)=\"onDropdownBlur()\"\n >\n <ng-template kendoDropDownListValueTemplate let-dataItem>\n <span class=\"value-text\">{{ dataItem?.text }}</span>\n <kit-svg-icon class=\"value-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </ng-template>\n </kendo-dropdownlist>\n </div>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-units-textbox .label{display:block;margin-bottom:4px}.kit-units-textbox .units-textbox-wrap{display:flex;height:34px;border:1px solid #efefef;border-radius:4px;background:#fff;box-sizing:border-box}.kit-units-textbox .k-textbox,.kit-units-textbox .k-numerictextbox{height:100%;width:auto;opacity:1;border:none;box-shadow:none;flex-grow:1;background:none}.kit-units-textbox .k-textbox .k-input-inner,.kit-units-textbox .k-numerictextbox .k-input-inner{padding:0 8px;width:100%;color:#002a3a;font-size:13px;line-height:1}.kit-units-textbox .k-dropdownlist{position:relative;width:auto;overflow:visible;border:none;background:none}.kit-units-textbox .k-dropdownlist.k-focus{box-shadow:none}.kit-units-textbox .k-dropdownlist:hover{background:none}.kit-units-textbox .k-dropdownlist .k-input-inner{padding:0;height:100%;justify-content:flex-end;font-size:13px;font-weight:500;color:#56a2f7;overflow:visible}.kit-units-textbox .k-dropdownlist .k-input-value-text{display:flex;align-items:center;overflow:visible}.kit-units-textbox .k-dropdownlist .k-input-button{display:none}.kit-units-textbox .k-dropdownlist .value{display:flex;align-items:center}.kit-units-textbox .k-dropdownlist .value-text{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-units-textbox .k-dropdownlist .value-icon{display:block;padding:4px;width:16px;height:16px;fill:none;stroke:#002a3a;box-sizing:initial}.kit-units-textbox:focus-within .units-textbox-wrap{border:1px solid #00b0ad}.kit-units-textbox .k-animation-container{position:absolute;left:auto!important;right:0!important}.kit-units-textbox .kit-dropdown-popup{margin-top:8px;min-width:75px;border:1px solid #c1c7d0;border-radius:4px;box-shadow:0 0 8px #003e5680;background-color:#f3f4f6;padding:4px}.kit-units-textbox .kit-dropdown-popup .k-list-ul{background-color:#f3f4f6}.kit-units-textbox .kit-dropdown-popup .k-list-item{background-color:#fff;font-size:13px;font-weight:500;box-shadow:none;border-radius:2px;color:#002a3a;justify-content:flex-end;text-align:right}.kit-units-textbox .kit-dropdown-popup .k-list-item:not(:last-of-type){margin-bottom:4px}.kit-units-textbox .kit-dropdown-popup .k-list-item.k-state-focused{background-color:#fff;color:#27282a}.kit-units-textbox .kit-dropdown-popup .k-list-item:hover,.kit-units-textbox .kit-dropdown-popup .k-list-item.k-focus:hover{background-color:#f3f5fa;color:#56a2f7}.kit-units-textbox .kit-dropdown-popup .k-list-item.k-selected{background-color:#56a2f7;color:#fff}.kit-units-textbox .kit-dropdown-popup .k-list-item.k-disabled{background-color:#f3f4f6;color:#9a9fa6}.kit-units-textbox.textbox-disabled .label{color:#74777d}.kit-units-textbox.textbox-disabled .units-textbox-wrap{border-color:#c1c7d0;background-color:#f3f4f6;box-shadow:none}.kit-units-textbox.textbox-disabled .k-textbox .k-input-inner,.kit-units-textbox.textbox-disabled .k-numerictextbox .k-input-inner{color:#9a9fa6}.kit-units-textbox.units-left .units-textbox-wrap{flex-direction:row-reverse}.kit-units-textbox.units-left .k-textbox,.kit-units-textbox.units-left .k-numerictextbox{grid-column:2;grid-row:1}.kit-units-textbox.units-left .k-textbox .k-input,.kit-units-textbox.units-left .k-numerictextbox .k-input{padding-left:0}.kit-units-textbox.units-left .k-dropdownlist{grid-column:1}.kit-units-textbox.units-left .k-dropdownlist .k-input-inner{padding-left:8px;width:auto}.kit-units-textbox.units-left .k-animation-container{left:0!important;right:auto!important}.kit-units-textbox.units-left .kit-dropdown-popup .k-list-item{justify-content:flex-start;text-align:left}.kit-units-textbox .k-input-prefix,.kit-units-textbox .k-input-suffix{height:0}.kit-units-textbox.dropdown-disabled .k-dropdownlist .k-input-inner{color:#9a9fa6}.kit-units-textbox.dropdown-disabled .k-dropdownlist .value-icon{stroke:#9a9fa6}.kit-units-textbox.danger .units-textbox-wrap{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i2.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: i1$3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: i1$3.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1660
1660
  }
1661
1661
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitUnitsTextboxComponent, decorators: [{
1662
1662
  type: Component,
1663
- args: [{ selector: 'kit-units-textbox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-units-textbox {{ state }}\" [class.textbox-disabled]=\"disabledTextBox\"\n [class.dropdown-disabled]=\"disabledDropdown\"\n [class.units-left]=\"dropdownPosition === KitUnitsTextboxDropdownPosition.LEFT\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n <div class=\"units-textbox-wrap\">\n <kendo-textbox *ngIf=\"textboxType === KitUnitsTextboxType.TEXT; else numericTextboxTemplate\"\n [placeholder]=\"placeholder\"\n [value]=\"textBoxFormControl.value || textBoxValue\"\n [disabled]=\"disabledTextBox\"\n [maxlength]=\"maxlength\"\n (blur)=\"onInputBlur()\"\n (valueChange)=\"onInputChange($event)\"\n ></kendo-textbox>\n <ng-template #numericTextboxTemplate>\n <kendo-numerictextbox [placeholder]=\"placeholder\"\n [value]=\"textBoxFormControl.value || textBoxValue\"\n [decimals]=\"decimals\"\n [min]=\"min\"\n [max]=\"max\"\n [maxlength]=\"maxlength\"\n [format]=\"format\"\n [autoCorrect]=\"true\"\n [spinners]=\"false\"\n [selectOnFocus]=\"false\"\n [disabled]=\"disabledTextBox\"\n (blur)=\"onInputBlur()\"\n (valueChange)=\"onInputChange($event)\"\n ></kendo-numerictextbox>\n </ng-template>\n <kendo-dropdownlist valueField=\"value\" textField=\"text\"\n [data]=\"dropdownItems\"\n [value]=\"dropdownFormControl.value || selectedDropdownItem\"\n [valuePrimitive]=\"true\"\n [disabled]=\"disabledDropdown\"\n [popupSettings]=\"dropdownPopupSettings\"\n [itemDisabled]=\"onItemDisabled()\"\n (selectionChange)=\"onItemSelect($event)\"\n (blur)=\"onDropdownBlur()\"\n >\n <ng-template kendoDropDownListValueTemplate let-dataItem>\n <span class=\"value-text\">{{ dataItem?.text }}</span>\n <kit-svg-icon class=\"value-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </ng-template>\n </kendo-dropdownlist>\n </div>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-units-textbox .label{display:block;margin-bottom:4px}.kit-units-textbox .units-textbox-wrap{display:flex;height:34px;border:1px solid #efefef;border-radius:4px;background:#fff;box-sizing:border-box}.kit-units-textbox .k-textbox,.kit-units-textbox .k-numerictextbox{height:100%;width:auto;opacity:1;border:none;box-shadow:none;flex-grow:1;background:none}.kit-units-textbox .k-textbox .k-input-inner,.kit-units-textbox .k-numerictextbox .k-input-inner{padding:0 8px;width:100%;color:#002a3a;font-size:13px;line-height:1}.kit-units-textbox .k-dropdownlist{position:relative;width:auto;overflow:visible;border:none;background:none}.kit-units-textbox .k-dropdownlist.k-focus{box-shadow:none}.kit-units-textbox .k-dropdownlist:hover{background:none}.kit-units-textbox .k-dropdownlist .k-input-inner{padding:0;height:100%;justify-content:flex-end;font-size:13px;font-weight:500;color:#56a2f7;overflow:visible}.kit-units-textbox .k-dropdownlist .k-input-value-text{display:flex;align-items:center;overflow:visible}.kit-units-textbox .k-dropdownlist .k-input-button{display:none}.kit-units-textbox .k-dropdownlist .value{display:flex;align-items:center}.kit-units-textbox .k-dropdownlist .value-text{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-units-textbox .k-dropdownlist .value-icon{display:block;padding:4px;width:16px;height:16px;fill:none;stroke:#002a3a;box-sizing:initial}.kit-units-textbox:focus-within .units-textbox-wrap{border:1px solid #00b0ad}.kit-units-textbox .k-animation-container{position:absolute;left:auto!important;right:0!important}.kit-units-textbox .kit-dropdown-popup{margin-top:8px;min-width:75px;border:1px solid #c1c7d0;border-radius:4px;box-shadow:0 0 8px #003e5680;background-color:#f3f4f6;padding:4px}.kit-units-textbox .kit-dropdown-popup .k-list-ul{background-color:#f3f4f6}.kit-units-textbox .kit-dropdown-popup .k-list-item{background-color:#fff;font-size:13px;font-weight:500;box-shadow:none;border-radius:2px;color:#002a3a;justify-content:flex-end;text-align:right}.kit-units-textbox .kit-dropdown-popup .k-list-item:not(:last-of-type){margin-bottom:4px}.kit-units-textbox .kit-dropdown-popup .k-list-item.k-state-focused{background-color:#fff;color:#27282a}.kit-units-textbox .kit-dropdown-popup .k-list-item:hover,.kit-units-textbox .kit-dropdown-popup .k-list-item.k-focus:hover{background-color:#f3f5fa;color:#56a2f7}.kit-units-textbox .kit-dropdown-popup .k-list-item.k-selected{background-color:#56a2f7;color:#fff}.kit-units-textbox .kit-dropdown-popup .k-list-item.k-disabled{background-color:#f3f4f6;color:#9a9fa6}.kit-units-textbox.textbox-disabled .label{color:#74777d}.kit-units-textbox.textbox-disabled .units-textbox-wrap{border-color:#c1c7d0;background-color:#f3f4f6;box-shadow:none}.kit-units-textbox.textbox-disabled .k-textbox .k-input-inner,.kit-units-textbox.textbox-disabled .k-numerictextbox .k-input-inner{color:#9a9fa6}.kit-units-textbox.units-left .units-textbox-wrap{flex-direction:row-reverse}.kit-units-textbox.units-left .k-textbox,.kit-units-textbox.units-left .k-numerictextbox{grid-column:2;grid-row:1}.kit-units-textbox.units-left .k-textbox .k-input,.kit-units-textbox.units-left .k-numerictextbox .k-input{padding-left:0}.kit-units-textbox.units-left .k-dropdownlist{grid-column:1}.kit-units-textbox.units-left .k-dropdownlist .k-input-inner{padding-left:8px;width:auto}.kit-units-textbox.units-left .k-animation-container{left:0!important;right:auto!important}.kit-units-textbox.units-left .kit-dropdown-popup .k-list-item{justify-content:flex-start;text-align:left}.kit-units-textbox .k-input-prefix,.kit-units-textbox .k-input-suffix{height:0}.kit-units-textbox.dropdown-disabled .k-dropdownlist .k-input-inner{color:#9a9fa6}.kit-units-textbox.dropdown-disabled .k-dropdownlist .value-icon{stroke:#9a9fa6}.kit-units-textbox.danger .units-textbox-wrap{border-color:#ef3e42;background:#f8e0e0}\n"] }]
1663
+ args: [{ selector: 'kit-units-textbox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-units-textbox {{ state }}\" [class.textbox-disabled]=\"disabledTextBox\"\n [class.dropdown-disabled]=\"disabledDropdown\"\n [class.units-left]=\"dropdownPosition === KitUnitsTextboxDropdownPosition.LEFT\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n <div class=\"units-textbox-wrap\">\n <kendo-textbox *ngIf=\"textboxType === KitUnitsTextboxType.TEXT; else numericTextboxTemplate\"\n [placeholder]=\"placeholder\"\n [value]=\"textBoxFormControl.value || textBoxValue\"\n [disabled]=\"disabledTextBox\"\n [maxlength]=\"maxlength\"\n (blur)=\"onInputBlur()\"\n (valueChange)=\"onInputChange($event)\"\n ></kendo-textbox>\n <ng-template #numericTextboxTemplate>\n <kendo-numerictextbox [placeholder]=\"placeholder\"\n [value]=\"textBoxFormControl.value || textBoxValue\"\n [decimals]=\"decimals\"\n [min]=\"min\"\n [max]=\"max\"\n [maxlength]=\"maxlength\"\n [format]=\"format\"\n [autoCorrect]=\"true\"\n [spinners]=\"false\"\n [selectOnFocus]=\"false\"\n [disabled]=\"disabledTextBox\"\n (blur)=\"onInputBlur()\"\n (valueChange)=\"onInputChange($event)\"\n ></kendo-numerictextbox>\n </ng-template>\n <kendo-dropdownlist valueField=\"value\" textField=\"text\"\n [data]=\"dropdownItems\"\n [value]=\"dropdownFormControl.value || selectedDropdownItem\"\n [valuePrimitive]=\"true\"\n [disabled]=\"disabledDropdown\"\n [popupSettings]=\"dropdownPopupSettings\"\n [itemDisabled]=\"onItemDisabled()\"\n (selectionChange)=\"onItemSelect($event)\"\n (blur)=\"onDropdownBlur()\"\n >\n <ng-template kendoDropDownListValueTemplate let-dataItem>\n <span class=\"value-text\">{{ dataItem?.text }}</span>\n <kit-svg-icon class=\"value-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </ng-template>\n </kendo-dropdownlist>\n </div>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-units-textbox .label{display:block;margin-bottom:4px}.kit-units-textbox .units-textbox-wrap{display:flex;height:34px;border:1px solid #efefef;border-radius:4px;background:#fff;box-sizing:border-box}.kit-units-textbox .k-textbox,.kit-units-textbox .k-numerictextbox{height:100%;width:auto;opacity:1;border:none;box-shadow:none;flex-grow:1;background:none}.kit-units-textbox .k-textbox .k-input-inner,.kit-units-textbox .k-numerictextbox .k-input-inner{padding:0 8px;width:100%;color:#002a3a;font-size:13px;line-height:1}.kit-units-textbox .k-dropdownlist{position:relative;width:auto;overflow:visible;border:none;background:none}.kit-units-textbox .k-dropdownlist.k-focus{box-shadow:none}.kit-units-textbox .k-dropdownlist:hover{background:none}.kit-units-textbox .k-dropdownlist .k-input-inner{padding:0;height:100%;justify-content:flex-end;font-size:13px;font-weight:500;color:#56a2f7;overflow:visible}.kit-units-textbox .k-dropdownlist .k-input-value-text{display:flex;align-items:center;overflow:visible}.kit-units-textbox .k-dropdownlist .k-input-button{display:none}.kit-units-textbox .k-dropdownlist .value{display:flex;align-items:center}.kit-units-textbox .k-dropdownlist .value-text{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-units-textbox .k-dropdownlist .value-icon{display:block;padding:4px;width:16px;height:16px;fill:none;stroke:#002a3a;box-sizing:initial}.kit-units-textbox:focus-within .units-textbox-wrap{border:1px solid #00b0ad}.kit-units-textbox .k-animation-container{position:absolute;left:auto!important;right:0!important}.kit-units-textbox .kit-dropdown-popup{margin-top:8px;min-width:75px;border:1px solid #c1c7d0;border-radius:4px;box-shadow:0 0 8px #003e5680;background-color:#f3f4f6;padding:4px}.kit-units-textbox .kit-dropdown-popup .k-list-ul{background-color:#f3f4f6}.kit-units-textbox .kit-dropdown-popup .k-list-item{background-color:#fff;font-size:13px;font-weight:500;box-shadow:none;border-radius:2px;color:#002a3a;justify-content:flex-end;text-align:right}.kit-units-textbox .kit-dropdown-popup .k-list-item:not(:last-of-type){margin-bottom:4px}.kit-units-textbox .kit-dropdown-popup .k-list-item.k-state-focused{background-color:#fff;color:#27282a}.kit-units-textbox .kit-dropdown-popup .k-list-item:hover,.kit-units-textbox .kit-dropdown-popup .k-list-item.k-focus:hover{background-color:#f3f5fa;color:#56a2f7}.kit-units-textbox .kit-dropdown-popup .k-list-item.k-selected{background-color:#56a2f7;color:#fff}.kit-units-textbox .kit-dropdown-popup .k-list-item.k-disabled{background-color:#f3f4f6;color:#9a9fa6}.kit-units-textbox.textbox-disabled .label{color:#74777d}.kit-units-textbox.textbox-disabled .units-textbox-wrap{border-color:#c1c7d0;background-color:#f3f4f6;box-shadow:none}.kit-units-textbox.textbox-disabled .k-textbox .k-input-inner,.kit-units-textbox.textbox-disabled .k-numerictextbox .k-input-inner{color:#9a9fa6}.kit-units-textbox.units-left .units-textbox-wrap{flex-direction:row-reverse}.kit-units-textbox.units-left .k-textbox,.kit-units-textbox.units-left .k-numerictextbox{grid-column:2;grid-row:1}.kit-units-textbox.units-left .k-textbox .k-input,.kit-units-textbox.units-left .k-numerictextbox .k-input{padding-left:0}.kit-units-textbox.units-left .k-dropdownlist{grid-column:1}.kit-units-textbox.units-left .k-dropdownlist .k-input-inner{padding-left:8px;width:auto}.kit-units-textbox.units-left .k-animation-container{left:0!important;right:auto!important}.kit-units-textbox.units-left .kit-dropdown-popup .k-list-item{justify-content:flex-start;text-align:left}.kit-units-textbox .k-input-prefix,.kit-units-textbox .k-input-suffix{height:0}.kit-units-textbox.dropdown-disabled .k-dropdownlist .k-input-inner{color:#9a9fa6}.kit-units-textbox.dropdown-disabled .k-dropdownlist .value-icon{stroke:#9a9fa6}.kit-units-textbox.danger .units-textbox-wrap{border-color:#ef3e42;background:#f8e0e0}\n"] }]
1664
1664
  }], propDecorators: { placeholder: [{
1665
1665
  type: Input
1666
1666
  }], label: [{
@@ -1835,7 +1835,7 @@ class KitDatetimepickerComponent {
1835
1835
  provide: NG_VALUE_ACCESSOR,
1836
1836
  useExisting: forwardRef(() => KitDatetimepickerComponent),
1837
1837
  multi: true,
1838
- }], viewQueries: [{ propertyName: "datetimepicker", first: true, predicate: ["datetimepicker"], descendants: true }], ngImport: i0, template: "<div class=\"kit-datetimepicker\"\n [class.datetimepicker-disabled]=\"disabled\"\n [class.datetimepicker-invalid]=\"!isValid\"\n [class.datetimepicker-opened]=\"datetimepicker.isOpen\"\n>\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"datetimepicker\"\n ></kit-input-label>\n }\n <div class=\"datetimepicker-wrap\">\n <button class=\"toggle-btn\" (click)=\"onPopupToggle()\">\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n <kendo-datetimepicker #datetimepicker\n [placeholder]=\"placeholder\"\n [format]=\"format\"\n [disabled]=\"disabled\"\n [popupSettings]=\"datetimepickerPopupSettings\"\n [value]=\"defaultDate\"\n [min]=\"min\" [max]=\"max\"\n [focusedDate]=\"defaultDate\"\n (valueChange)=\"onValueChange($event)\"\n (blur)=\"onBlur()\"\n (close)=\"onClose()\"\n ></kendo-datetimepicker>\n </div>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-datetimepicker .label{display:block;margin-bottom:4px}.kit-datetimepicker .datetimepicker-wrap{position:relative}.kit-datetimepicker .k-datetimepicker{padding:4px 8px 4px 28px;height:34px;width:100%;font-size:13px;font-weight:400;color:#002a3a;border-radius:4px;border:1px solid #efefef}.kit-datetimepicker .k-datetimepicker.k-focus{border-color:#00b0ad;box-shadow:none}.kit-datetimepicker .k-dateinput{box-shadow:none}.kit-datetimepicker .k-input-inner{padding:0;line-height:1}.kit-datetimepicker .k-input-inner::placeholder{color:#74777d}.kit-datetimepicker .k-input-inner::selection{color:#fff;background:#00b0ad}.kit-datetimepicker .toggle-btn{position:absolute;top:0;left:0;padding:0 8px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-datetimepicker .toggle-btn .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:#002a3a}.kit-datetimepicker.datetimepicker-opened .toggle-btn .button-icon{stroke:#00b0ad}.kit-datetimepicker:focus-within .k-datetimepicker{color:#27282a}.kit-datetimepicker.datetimepicker-disabled .k-datetimepicker{color:#9a9fa6;border-color:#c1c7d0;background-color:#f3f4f6}.kit-datetimepicker.datetimepicker-disabled .toggle-btn{cursor:default}.kit-datetimepicker.datetimepicker-disabled .toggle-btn .button-icon{stroke:#c1c7d0}.kit-datetimepicker.datetimepicker-invalid .k-datetimepicker{color:#27282a;border-color:#ef3e42;background-color:#f8e0e0}.kit-datetimepicker .k-input-button{display:none}.kit-datetimepicker-popup.k-popup{margin-top:8px;border-radius:6px;border:1px solid #006890;box-shadow:none;background:#f3f4f6}.kit-datetimepicker-popup.k-popup .k-datetime-wrap{width:296px}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup{padding:4px;border-radius:6px 6px 0 0;background:#dadde3}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button{height:32px;color:#27282a;font-size:13px;font-weight:400;border-radius:6px 6px 0 0;border:1px solid #c1c7d0;background:#dadde3}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button.k-active{background:#fff}.kit-datetimepicker-popup.k-popup .k-datetime-selector{padding-top:6px;background:none}.kit-datetimepicker-popup.k-popup .kalendar-view{padding:0}.kit-datetimepicker-popup.k-popup .k-datetime-time-wrap,.kit-datetimepicker-popup.k-popup .k-datetime-calendar-wrap{flex-basis:296px}.kit-datetimepicker-popup.k-popup .k-calendar{width:100%;background:none}.kit-datetimepicker-popup.k-popup .k-link{align-items:center;width:100%;height:100%;color:#27282a;font-size:13px;font-weight:500;line-height:1;border-radius:50%;box-shadow:none}.kit-datetimepicker-popup.k-popup .k-link:hover{color:#7ccdf4;background:none}.kit-datetimepicker-popup.k-popup .k-calendar-view{padding:0;width:100%}.kit-datetimepicker-popup.k-popup .k-calendar-view:after{display:none}.kit-datetimepicker-popup.k-popup .k-calendar-view .k-calendar-th{padding:6px 0;height:auto;color:#9a9fa6;font-size:16px;font-weight:700}.kit-datetimepicker-popup.k-popup .k-calendar-view .k-link{width:100%}.kit-datetimepicker-popup.k-popup .k-calendar-table{border-collapse:collapse}.kit-datetimepicker-popup.k-popup .k-calendar-header,.kit-datetimepicker-popup.k-popup .k-time-header{margin:0 0 6px;padding:4px 30px;border-radius:6px 6px 0 0;background:#fff}.kit-datetimepicker-popup.k-popup .k-calendar-header .k-calendar-title,.kit-datetimepicker-popup.k-popup .k-time-header .k-calendar-title{padding:0;color:#27282a;font-size:16px;font-weight:700}.kit-datetimepicker-popup.k-popup .k-calendar-header .k-calendar-nav-today,.kit-datetimepicker-popup.k-popup .k-calendar-header .k-time-now,.kit-datetimepicker-popup.k-popup .k-time-header .k-calendar-nav-today,.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now{display:flex;align-items:center;padding:0;color:#7ccdf4;font-size:16px;font-weight:400;text-transform:uppercase}.kit-datetimepicker-popup.k-popup .k-calendar-header .k-calendar-nav-today:hover,.kit-datetimepicker-popup.k-popup .k-calendar-header .k-time-now:hover,.kit-datetimepicker-popup.k-popup .k-time-header .k-calendar-nav-today:hover,.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now:hover{color:#7ccdf4}.kit-datetimepicker-popup.k-popup .k-calendar-weekdays{padding:6px 8px 0}.kit-datetimepicker-popup.k-popup .k-calendar-weekdays .k-calendar-th{padding:0;height:40px;color:#27282a;font-size:13px;font-weight:500;line-height:1;text-transform:uppercase}.kit-datetimepicker-popup.k-popup .k-calendar-content{margin:0;padding:0 8px;box-sizing:border-box}.kit-datetimepicker-popup.k-popup .k-calendar-content>.k-calendar-table{margin:0;width:100%}.kit-datetimepicker-popup.k-popup .k-calendar-td{width:40px;height:40px;border:1px solid #dfdfdf}.kit-datetimepicker-popup.k-popup .k-calendar-td:hover .k-link{background:none}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-empty{border:none}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-today .k-link{color:#7ccdf4}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-selected .k-link{color:#fff;border:1px solid #dfdfdf;background:#7ccdf4}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-selected.k-focus .k-link,.kit-datetimepicker-popup.k-popup .k-calendar-td.k-state-focused .k-link{box-shadow:none}.kit-datetimepicker-popup.k-popup .k-actions{margin-top:0;padding:12px;justify-content:center;flex-direction:row-reverse;border-top:1px solid #006890}.kit-datetimepicker-popup.k-popup .k-actions .k-button{margin:0 5px;width:110px;height:30px;flex:0 0 auto;font-size:14px;font-weight:400;border-radius:4px;border:none}.kit-datetimepicker-popup.k-popup .k-time-cancel{color:#27282a;background:#dadde3}.kit-datetimepicker-popup.k-popup .k-time-accept{color:#fff;background:#006890}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper{padding:0;height:252px;background:#fff}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper:before,.kit-datetimepicker-popup.k-popup .k-time-list-wrapper:after{display:none}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper.k-state-focused{background:#f3f4f6}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper .k-title{display:flex;align-items:center;justify-content:center;margin:0;color:#27282a;font-size:14px;font-weight:500;height:40px}.kit-datetimepicker-popup.k-popup .k-time-list:before,.kit-datetimepicker-popup.k-popup .k-time-list:after{display:none}.kit-datetimepicker-popup.k-popup .k-time-list .k-item{display:flex;align-items:center;justify-content:center;padding:0;height:40px;color:#27282a;font-size:14px;font-weight:500}.kit-datetimepicker-popup.k-popup .k-time-highlight{top:50%;height:40px;border-color:#cdd2d9;transform:none}.kit-datetimepicker-popup.k-popup .k-time-separator{margin-top:20px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["focusableId", "value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "title", "subtitle", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "adaptiveMode", "defaultTab", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur"], exportAs: ["kendo-datetimepicker"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1838
+ }], viewQueries: [{ propertyName: "datetimepicker", first: true, predicate: ["datetimepicker"], descendants: true }], ngImport: i0, template: "<div class=\"kit-datetimepicker\"\n [class.datetimepicker-disabled]=\"disabled\"\n [class.datetimepicker-invalid]=\"!isValid\"\n [class.datetimepicker-opened]=\"datetimepicker.isOpen\"\n>\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"datetimepicker\"\n ></kit-input-label>\n }\n <div class=\"datetimepicker-wrap\">\n <button class=\"toggle-btn\" (click)=\"onPopupToggle()\">\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n <kendo-datetimepicker #datetimepicker\n [placeholder]=\"placeholder\"\n [format]=\"format\"\n [disabled]=\"disabled\"\n [popupSettings]=\"datetimepickerPopupSettings\"\n [value]=\"defaultDate\"\n [min]=\"min\" [max]=\"max\"\n [focusedDate]=\"defaultDate\"\n (valueChange)=\"onValueChange($event)\"\n (blur)=\"onBlur()\"\n (close)=\"onClose()\"\n ></kendo-datetimepicker>\n </div>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-datetimepicker .label{display:block;margin-bottom:4px}.kit-datetimepicker .datetimepicker-wrap{position:relative}.kit-datetimepicker .k-datetimepicker{padding:4px 8px 4px 28px;height:34px;width:100%;font-size:13px;font-weight:400;color:#002a3a;border-radius:4px;border:1px solid #efefef}.kit-datetimepicker .k-datetimepicker.k-focus{border-color:#00b0ad;box-shadow:none}.kit-datetimepicker .k-dateinput{box-shadow:none}.kit-datetimepicker .k-input-inner{padding:0;line-height:1}.kit-datetimepicker .k-input-inner::placeholder{color:#74777d}.kit-datetimepicker .k-input-inner::selection{color:#fff;background:#00b0ad}.kit-datetimepicker .toggle-btn{position:absolute;top:0;left:0;padding:0 8px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-datetimepicker .toggle-btn .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:#002a3a}.kit-datetimepicker.datetimepicker-opened .toggle-btn .button-icon{stroke:#00b0ad}.kit-datetimepicker:focus-within .k-datetimepicker{color:#27282a}.kit-datetimepicker.datetimepicker-disabled .k-datetimepicker{color:#9a9fa6;border-color:#c1c7d0;background-color:#f3f4f6}.kit-datetimepicker.datetimepicker-disabled .toggle-btn{cursor:default}.kit-datetimepicker.datetimepicker-disabled .toggle-btn .button-icon{stroke:#c1c7d0}.kit-datetimepicker.datetimepicker-invalid .k-datetimepicker{color:#27282a;border-color:#ef3e42;background-color:#f8e0e0}.kit-datetimepicker .k-input-button{display:none}.kit-datetimepicker-popup.k-popup{margin-top:8px;border-radius:6px;border:1px solid #006890;box-shadow:none;background:#f3f4f6}.kit-datetimepicker-popup.k-popup .k-datetime-wrap{width:296px}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup{padding:4px;border-radius:6px 6px 0 0;background:#dadde3}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button{height:32px;color:#27282a;font-size:13px;font-weight:400;border-radius:6px 6px 0 0;border:1px solid #c1c7d0;background:#dadde3}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button.k-active{background:#fff}.kit-datetimepicker-popup.k-popup .k-datetime-selector{padding-top:6px;background:none}.kit-datetimepicker-popup.k-popup .kalendar-view{padding:0}.kit-datetimepicker-popup.k-popup .k-datetime-time-wrap,.kit-datetimepicker-popup.k-popup .k-datetime-calendar-wrap{flex-basis:296px}.kit-datetimepicker-popup.k-popup .k-calendar{width:100%;background:none}.kit-datetimepicker-popup.k-popup .k-link{align-items:center;width:100%;height:100%;color:#27282a;font-size:13px;font-weight:500;line-height:1;border-radius:50%;box-shadow:none}.kit-datetimepicker-popup.k-popup .k-link:hover{color:#7ccdf4;background:none}.kit-datetimepicker-popup.k-popup .k-calendar-view{padding:0;width:100%}.kit-datetimepicker-popup.k-popup .k-calendar-view:after{display:none}.kit-datetimepicker-popup.k-popup .k-calendar-view .k-calendar-th{padding:6px 0;height:auto;color:#9a9fa6;font-size:16px;font-weight:700}.kit-datetimepicker-popup.k-popup .k-calendar-view .k-link{width:100%}.kit-datetimepicker-popup.k-popup .k-calendar-table{border-collapse:collapse}.kit-datetimepicker-popup.k-popup .k-calendar-header,.kit-datetimepicker-popup.k-popup .k-time-header{margin:0 0 6px;padding:4px 30px;border-radius:6px 6px 0 0;background:#fff}.kit-datetimepicker-popup.k-popup .k-calendar-header .k-calendar-title,.kit-datetimepicker-popup.k-popup .k-time-header .k-calendar-title{padding:0;color:#27282a;font-size:16px;font-weight:700}.kit-datetimepicker-popup.k-popup .k-calendar-header .k-calendar-nav-today,.kit-datetimepicker-popup.k-popup .k-calendar-header .k-time-now,.kit-datetimepicker-popup.k-popup .k-time-header .k-calendar-nav-today,.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now{display:flex;align-items:center;padding:0;color:#7ccdf4;font-size:16px;font-weight:400;text-transform:uppercase}.kit-datetimepicker-popup.k-popup .k-calendar-header .k-calendar-nav-today:hover,.kit-datetimepicker-popup.k-popup .k-calendar-header .k-time-now:hover,.kit-datetimepicker-popup.k-popup .k-time-header .k-calendar-nav-today:hover,.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now:hover{color:#7ccdf4}.kit-datetimepicker-popup.k-popup .k-calendar-weekdays{padding:6px 8px 0}.kit-datetimepicker-popup.k-popup .k-calendar-weekdays .k-calendar-th{padding:0;height:40px;color:#27282a;font-size:13px;font-weight:500;line-height:1;text-transform:uppercase}.kit-datetimepicker-popup.k-popup .k-calendar-content{margin:0;padding:0 8px;box-sizing:border-box}.kit-datetimepicker-popup.k-popup .k-calendar-content>.k-calendar-table{margin:0;width:100%}.kit-datetimepicker-popup.k-popup .k-calendar-td{width:40px;height:40px;border:1px solid #dfdfdf}.kit-datetimepicker-popup.k-popup .k-calendar-td:hover .k-link{background:none}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-empty{border:none}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-today .k-link{color:#7ccdf4}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-selected .k-link{color:#fff;border:1px solid #dfdfdf;background:#7ccdf4}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-selected.k-focus .k-link,.kit-datetimepicker-popup.k-popup .k-calendar-td.k-state-focused .k-link{box-shadow:none}.kit-datetimepicker-popup.k-popup .k-actions{margin-top:0;padding:12px;justify-content:center;flex-direction:row-reverse;border-top:1px solid #006890}.kit-datetimepicker-popup.k-popup .k-actions .k-button{margin:0 5px;width:110px;height:30px;flex:0 0 auto;font-size:14px;font-weight:400;border-radius:4px;border:none}.kit-datetimepicker-popup.k-popup .k-time-cancel{color:#27282a;background:#dadde3}.kit-datetimepicker-popup.k-popup .k-time-accept{color:#fff;background:#006890}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper{padding:0;height:252px;background:#fff}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper:before,.kit-datetimepicker-popup.k-popup .k-time-list-wrapper:after{display:none}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper.k-state-focused{background:#f3f4f6}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper .k-title{display:flex;align-items:center;justify-content:center;margin:0;color:#27282a;font-size:14px;font-weight:500;height:40px}.kit-datetimepicker-popup.k-popup .k-time-list:before,.kit-datetimepicker-popup.k-popup .k-time-list:after{display:none}.kit-datetimepicker-popup.k-popup .k-time-list .k-item{display:flex;align-items:center;justify-content:center;padding:0;height:40px;color:#27282a;font-size:14px;font-weight:500}.kit-datetimepicker-popup.k-popup .k-time-highlight{top:50%;height:40px;border-color:#cdd2d9;transform:none}.kit-datetimepicker-popup.k-popup .k-time-separator{margin-top:20px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["focusableId", "value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "title", "subtitle", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "adaptiveMode", "defaultTab", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur"], exportAs: ["kendo-datetimepicker"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1839
1839
  }
1840
1840
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitDatetimepickerComponent, decorators: [{
1841
1841
  type: Component,
@@ -1843,7 +1843,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
1843
1843
  provide: NG_VALUE_ACCESSOR,
1844
1844
  useExisting: forwardRef(() => KitDatetimepickerComponent),
1845
1845
  multi: true,
1846
- }], template: "<div class=\"kit-datetimepicker\"\n [class.datetimepicker-disabled]=\"disabled\"\n [class.datetimepicker-invalid]=\"!isValid\"\n [class.datetimepicker-opened]=\"datetimepicker.isOpen\"\n>\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"datetimepicker\"\n ></kit-input-label>\n }\n <div class=\"datetimepicker-wrap\">\n <button class=\"toggle-btn\" (click)=\"onPopupToggle()\">\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n <kendo-datetimepicker #datetimepicker\n [placeholder]=\"placeholder\"\n [format]=\"format\"\n [disabled]=\"disabled\"\n [popupSettings]=\"datetimepickerPopupSettings\"\n [value]=\"defaultDate\"\n [min]=\"min\" [max]=\"max\"\n [focusedDate]=\"defaultDate\"\n (valueChange)=\"onValueChange($event)\"\n (blur)=\"onBlur()\"\n (close)=\"onClose()\"\n ></kendo-datetimepicker>\n </div>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-datetimepicker .label{display:block;margin-bottom:4px}.kit-datetimepicker .datetimepicker-wrap{position:relative}.kit-datetimepicker .k-datetimepicker{padding:4px 8px 4px 28px;height:34px;width:100%;font-size:13px;font-weight:400;color:#002a3a;border-radius:4px;border:1px solid #efefef}.kit-datetimepicker .k-datetimepicker.k-focus{border-color:#00b0ad;box-shadow:none}.kit-datetimepicker .k-dateinput{box-shadow:none}.kit-datetimepicker .k-input-inner{padding:0;line-height:1}.kit-datetimepicker .k-input-inner::placeholder{color:#74777d}.kit-datetimepicker .k-input-inner::selection{color:#fff;background:#00b0ad}.kit-datetimepicker .toggle-btn{position:absolute;top:0;left:0;padding:0 8px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-datetimepicker .toggle-btn .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:#002a3a}.kit-datetimepicker.datetimepicker-opened .toggle-btn .button-icon{stroke:#00b0ad}.kit-datetimepicker:focus-within .k-datetimepicker{color:#27282a}.kit-datetimepicker.datetimepicker-disabled .k-datetimepicker{color:#9a9fa6;border-color:#c1c7d0;background-color:#f3f4f6}.kit-datetimepicker.datetimepicker-disabled .toggle-btn{cursor:default}.kit-datetimepicker.datetimepicker-disabled .toggle-btn .button-icon{stroke:#c1c7d0}.kit-datetimepicker.datetimepicker-invalid .k-datetimepicker{color:#27282a;border-color:#ef3e42;background-color:#f8e0e0}.kit-datetimepicker .k-input-button{display:none}.kit-datetimepicker-popup.k-popup{margin-top:8px;border-radius:6px;border:1px solid #006890;box-shadow:none;background:#f3f4f6}.kit-datetimepicker-popup.k-popup .k-datetime-wrap{width:296px}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup{padding:4px;border-radius:6px 6px 0 0;background:#dadde3}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button{height:32px;color:#27282a;font-size:13px;font-weight:400;border-radius:6px 6px 0 0;border:1px solid #c1c7d0;background:#dadde3}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button.k-active{background:#fff}.kit-datetimepicker-popup.k-popup .k-datetime-selector{padding-top:6px;background:none}.kit-datetimepicker-popup.k-popup .kalendar-view{padding:0}.kit-datetimepicker-popup.k-popup .k-datetime-time-wrap,.kit-datetimepicker-popup.k-popup .k-datetime-calendar-wrap{flex-basis:296px}.kit-datetimepicker-popup.k-popup .k-calendar{width:100%;background:none}.kit-datetimepicker-popup.k-popup .k-link{align-items:center;width:100%;height:100%;color:#27282a;font-size:13px;font-weight:500;line-height:1;border-radius:50%;box-shadow:none}.kit-datetimepicker-popup.k-popup .k-link:hover{color:#7ccdf4;background:none}.kit-datetimepicker-popup.k-popup .k-calendar-view{padding:0;width:100%}.kit-datetimepicker-popup.k-popup .k-calendar-view:after{display:none}.kit-datetimepicker-popup.k-popup .k-calendar-view .k-calendar-th{padding:6px 0;height:auto;color:#9a9fa6;font-size:16px;font-weight:700}.kit-datetimepicker-popup.k-popup .k-calendar-view .k-link{width:100%}.kit-datetimepicker-popup.k-popup .k-calendar-table{border-collapse:collapse}.kit-datetimepicker-popup.k-popup .k-calendar-header,.kit-datetimepicker-popup.k-popup .k-time-header{margin:0 0 6px;padding:4px 30px;border-radius:6px 6px 0 0;background:#fff}.kit-datetimepicker-popup.k-popup .k-calendar-header .k-calendar-title,.kit-datetimepicker-popup.k-popup .k-time-header .k-calendar-title{padding:0;color:#27282a;font-size:16px;font-weight:700}.kit-datetimepicker-popup.k-popup .k-calendar-header .k-calendar-nav-today,.kit-datetimepicker-popup.k-popup .k-calendar-header .k-time-now,.kit-datetimepicker-popup.k-popup .k-time-header .k-calendar-nav-today,.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now{display:flex;align-items:center;padding:0;color:#7ccdf4;font-size:16px;font-weight:400;text-transform:uppercase}.kit-datetimepicker-popup.k-popup .k-calendar-header .k-calendar-nav-today:hover,.kit-datetimepicker-popup.k-popup .k-calendar-header .k-time-now:hover,.kit-datetimepicker-popup.k-popup .k-time-header .k-calendar-nav-today:hover,.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now:hover{color:#7ccdf4}.kit-datetimepicker-popup.k-popup .k-calendar-weekdays{padding:6px 8px 0}.kit-datetimepicker-popup.k-popup .k-calendar-weekdays .k-calendar-th{padding:0;height:40px;color:#27282a;font-size:13px;font-weight:500;line-height:1;text-transform:uppercase}.kit-datetimepicker-popup.k-popup .k-calendar-content{margin:0;padding:0 8px;box-sizing:border-box}.kit-datetimepicker-popup.k-popup .k-calendar-content>.k-calendar-table{margin:0;width:100%}.kit-datetimepicker-popup.k-popup .k-calendar-td{width:40px;height:40px;border:1px solid #dfdfdf}.kit-datetimepicker-popup.k-popup .k-calendar-td:hover .k-link{background:none}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-empty{border:none}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-today .k-link{color:#7ccdf4}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-selected .k-link{color:#fff;border:1px solid #dfdfdf;background:#7ccdf4}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-selected.k-focus .k-link,.kit-datetimepicker-popup.k-popup .k-calendar-td.k-state-focused .k-link{box-shadow:none}.kit-datetimepicker-popup.k-popup .k-actions{margin-top:0;padding:12px;justify-content:center;flex-direction:row-reverse;border-top:1px solid #006890}.kit-datetimepicker-popup.k-popup .k-actions .k-button{margin:0 5px;width:110px;height:30px;flex:0 0 auto;font-size:14px;font-weight:400;border-radius:4px;border:none}.kit-datetimepicker-popup.k-popup .k-time-cancel{color:#27282a;background:#dadde3}.kit-datetimepicker-popup.k-popup .k-time-accept{color:#fff;background:#006890}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper{padding:0;height:252px;background:#fff}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper:before,.kit-datetimepicker-popup.k-popup .k-time-list-wrapper:after{display:none}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper.k-state-focused{background:#f3f4f6}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper .k-title{display:flex;align-items:center;justify-content:center;margin:0;color:#27282a;font-size:14px;font-weight:500;height:40px}.kit-datetimepicker-popup.k-popup .k-time-list:before,.kit-datetimepicker-popup.k-popup .k-time-list:after{display:none}.kit-datetimepicker-popup.k-popup .k-time-list .k-item{display:flex;align-items:center;justify-content:center;padding:0;height:40px;color:#27282a;font-size:14px;font-weight:500}.kit-datetimepicker-popup.k-popup .k-time-highlight{top:50%;height:40px;border-color:#cdd2d9;transform:none}.kit-datetimepicker-popup.k-popup .k-time-separator{margin-top:20px}\n"] }]
1846
+ }], template: "<div class=\"kit-datetimepicker\"\n [class.datetimepicker-disabled]=\"disabled\"\n [class.datetimepicker-invalid]=\"!isValid\"\n [class.datetimepicker-opened]=\"datetimepicker.isOpen\"\n>\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"datetimepicker\"\n ></kit-input-label>\n }\n <div class=\"datetimepicker-wrap\">\n <button class=\"toggle-btn\" (click)=\"onPopupToggle()\">\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n <kendo-datetimepicker #datetimepicker\n [placeholder]=\"placeholder\"\n [format]=\"format\"\n [disabled]=\"disabled\"\n [popupSettings]=\"datetimepickerPopupSettings\"\n [value]=\"defaultDate\"\n [min]=\"min\" [max]=\"max\"\n [focusedDate]=\"defaultDate\"\n (valueChange)=\"onValueChange($event)\"\n (blur)=\"onBlur()\"\n (close)=\"onClose()\"\n ></kendo-datetimepicker>\n </div>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-datetimepicker .label{display:block;margin-bottom:4px}.kit-datetimepicker .datetimepicker-wrap{position:relative}.kit-datetimepicker .k-datetimepicker{padding:4px 8px 4px 28px;height:34px;width:100%;font-size:13px;font-weight:400;color:#002a3a;border-radius:4px;border:1px solid #efefef}.kit-datetimepicker .k-datetimepicker.k-focus{border-color:#00b0ad;box-shadow:none}.kit-datetimepicker .k-dateinput{box-shadow:none}.kit-datetimepicker .k-input-inner{padding:0;line-height:1}.kit-datetimepicker .k-input-inner::placeholder{color:#74777d}.kit-datetimepicker .k-input-inner::selection{color:#fff;background:#00b0ad}.kit-datetimepicker .toggle-btn{position:absolute;top:0;left:0;padding:0 8px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-datetimepicker .toggle-btn .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:#002a3a}.kit-datetimepicker.datetimepicker-opened .toggle-btn .button-icon{stroke:#00b0ad}.kit-datetimepicker:focus-within .k-datetimepicker{color:#27282a}.kit-datetimepicker.datetimepicker-disabled .k-datetimepicker{color:#9a9fa6;border-color:#c1c7d0;background-color:#f3f4f6}.kit-datetimepicker.datetimepicker-disabled .toggle-btn{cursor:default}.kit-datetimepicker.datetimepicker-disabled .toggle-btn .button-icon{stroke:#c1c7d0}.kit-datetimepicker.datetimepicker-invalid .k-datetimepicker{color:#27282a;border-color:#ef3e42;background-color:#f8e0e0}.kit-datetimepicker .k-input-button{display:none}.kit-datetimepicker-popup.k-popup{margin-top:8px;border-radius:6px;border:1px solid #006890;box-shadow:none;background:#f3f4f6}.kit-datetimepicker-popup.k-popup .k-datetime-wrap{width:296px}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup{padding:4px;border-radius:6px 6px 0 0;background:#dadde3}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button{height:32px;color:#27282a;font-size:13px;font-weight:400;border-radius:6px 6px 0 0;border:1px solid #c1c7d0;background:#dadde3}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button.k-active{background:#fff}.kit-datetimepicker-popup.k-popup .k-datetime-selector{padding-top:6px;background:none}.kit-datetimepicker-popup.k-popup .kalendar-view{padding:0}.kit-datetimepicker-popup.k-popup .k-datetime-time-wrap,.kit-datetimepicker-popup.k-popup .k-datetime-calendar-wrap{flex-basis:296px}.kit-datetimepicker-popup.k-popup .k-calendar{width:100%;background:none}.kit-datetimepicker-popup.k-popup .k-link{align-items:center;width:100%;height:100%;color:#27282a;font-size:13px;font-weight:500;line-height:1;border-radius:50%;box-shadow:none}.kit-datetimepicker-popup.k-popup .k-link:hover{color:#7ccdf4;background:none}.kit-datetimepicker-popup.k-popup .k-calendar-view{padding:0;width:100%}.kit-datetimepicker-popup.k-popup .k-calendar-view:after{display:none}.kit-datetimepicker-popup.k-popup .k-calendar-view .k-calendar-th{padding:6px 0;height:auto;color:#9a9fa6;font-size:16px;font-weight:700}.kit-datetimepicker-popup.k-popup .k-calendar-view .k-link{width:100%}.kit-datetimepicker-popup.k-popup .k-calendar-table{border-collapse:collapse}.kit-datetimepicker-popup.k-popup .k-calendar-header,.kit-datetimepicker-popup.k-popup .k-time-header{margin:0 0 6px;padding:4px 30px;border-radius:6px 6px 0 0;background:#fff}.kit-datetimepicker-popup.k-popup .k-calendar-header .k-calendar-title,.kit-datetimepicker-popup.k-popup .k-time-header .k-calendar-title{padding:0;color:#27282a;font-size:16px;font-weight:700}.kit-datetimepicker-popup.k-popup .k-calendar-header .k-calendar-nav-today,.kit-datetimepicker-popup.k-popup .k-calendar-header .k-time-now,.kit-datetimepicker-popup.k-popup .k-time-header .k-calendar-nav-today,.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now{display:flex;align-items:center;padding:0;color:#7ccdf4;font-size:16px;font-weight:400;text-transform:uppercase}.kit-datetimepicker-popup.k-popup .k-calendar-header .k-calendar-nav-today:hover,.kit-datetimepicker-popup.k-popup .k-calendar-header .k-time-now:hover,.kit-datetimepicker-popup.k-popup .k-time-header .k-calendar-nav-today:hover,.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now:hover{color:#7ccdf4}.kit-datetimepicker-popup.k-popup .k-calendar-weekdays{padding:6px 8px 0}.kit-datetimepicker-popup.k-popup .k-calendar-weekdays .k-calendar-th{padding:0;height:40px;color:#27282a;font-size:13px;font-weight:500;line-height:1;text-transform:uppercase}.kit-datetimepicker-popup.k-popup .k-calendar-content{margin:0;padding:0 8px;box-sizing:border-box}.kit-datetimepicker-popup.k-popup .k-calendar-content>.k-calendar-table{margin:0;width:100%}.kit-datetimepicker-popup.k-popup .k-calendar-td{width:40px;height:40px;border:1px solid #dfdfdf}.kit-datetimepicker-popup.k-popup .k-calendar-td:hover .k-link{background:none}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-empty{border:none}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-today .k-link{color:#7ccdf4}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-selected .k-link{color:#fff;border:1px solid #dfdfdf;background:#7ccdf4}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-selected.k-focus .k-link,.kit-datetimepicker-popup.k-popup .k-calendar-td.k-state-focused .k-link{box-shadow:none}.kit-datetimepicker-popup.k-popup .k-actions{margin-top:0;padding:12px;justify-content:center;flex-direction:row-reverse;border-top:1px solid #006890}.kit-datetimepicker-popup.k-popup .k-actions .k-button{margin:0 5px;width:110px;height:30px;flex:0 0 auto;font-size:14px;font-weight:400;border-radius:4px;border:none}.kit-datetimepicker-popup.k-popup .k-time-cancel{color:#27282a;background:#dadde3}.kit-datetimepicker-popup.k-popup .k-time-accept{color:#fff;background:#006890}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper{padding:0;height:252px;background:#fff}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper:before,.kit-datetimepicker-popup.k-popup .k-time-list-wrapper:after{display:none}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper.k-state-focused{background:#f3f4f6}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper .k-title{display:flex;align-items:center;justify-content:center;margin:0;color:#27282a;font-size:14px;font-weight:500;height:40px}.kit-datetimepicker-popup.k-popup .k-time-list:before,.kit-datetimepicker-popup.k-popup .k-time-list:after{display:none}.kit-datetimepicker-popup.k-popup .k-time-list .k-item{display:flex;align-items:center;justify-content:center;padding:0;height:40px;color:#27282a;font-size:14px;font-weight:500}.kit-datetimepicker-popup.k-popup .k-time-highlight{top:50%;height:40px;border-color:#cdd2d9;transform:none}.kit-datetimepicker-popup.k-popup .k-time-separator{margin-top:20px}\n"] }]
1847
1847
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
1848
1848
  type: Input
1849
1849
  }], placeholder: [{
@@ -1918,11 +1918,11 @@ class KitNotificationComponent {
1918
1918
  this.type = KitNotificationType.INFO;
1919
1919
  }
1920
1920
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1921
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitNotificationComponent, selector: "kit-notification", inputs: { type: "type" }, ngImport: i0, template: "<div class=\"kit-notification notification-{{ type }}\">\n <kit-svg-icon class=\"notification-icon\"\n [icon]=\"type\"\n ></kit-svg-icon>\n <div class=\"notification-text\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-notification{display:flex;align-items:center;padding:12px}.kit-notification .notification-icon{margin-right:10px;width:20px;height:20px;fill:none;flex-shrink:0}.kit-notification .notification-text{color:#000;font-size:14px;font-weight:400;line-height:1.26;white-space:pre-wrap}.kit-notification.notification-info{background-color:#fff8e0}.kit-notification.notification-warning{background-color:#ffeee5}.kit-notification.notification-error{background-color:#f8e0e0}.kit-notification.notification-success{background-color:#e7f4ec}\n"], dependencies: [{ kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1921
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitNotificationComponent, selector: "kit-notification", inputs: { type: "type" }, ngImport: i0, template: "<div class=\"kit-notification notification-{{ type }}\">\n <kit-svg-icon class=\"notification-icon\"\n [icon]=\"type\"\n ></kit-svg-icon>\n <div class=\"notification-text\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-notification{display:flex;align-items:center;padding:12px}.kit-notification .notification-icon{margin-right:10px;width:20px;height:20px;fill:none;flex-shrink:0}.kit-notification .notification-text{color:#000;font-size:14px;font-weight:400;line-height:1.26;white-space:pre-wrap}.kit-notification.notification-info{background-color:#fff8e0}.kit-notification.notification-warning{background-color:#ffeee5}.kit-notification.notification-error{background-color:#f8e0e0}.kit-notification.notification-success{background-color:#e7f4ec}\n"], dependencies: [{ kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1922
1922
  }
1923
1923
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNotificationComponent, decorators: [{
1924
1924
  type: Component,
1925
- args: [{ selector: 'kit-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-notification notification-{{ type }}\">\n <kit-svg-icon class=\"notification-icon\"\n [icon]=\"type\"\n ></kit-svg-icon>\n <div class=\"notification-text\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-notification{display:flex;align-items:center;padding:12px}.kit-notification .notification-icon{margin-right:10px;width:20px;height:20px;fill:none;flex-shrink:0}.kit-notification .notification-text{color:#000;font-size:14px;font-weight:400;line-height:1.26;white-space:pre-wrap}.kit-notification.notification-info{background-color:#fff8e0}.kit-notification.notification-warning{background-color:#ffeee5}.kit-notification.notification-error{background-color:#f8e0e0}.kit-notification.notification-success{background-color:#e7f4ec}\n"] }]
1925
+ args: [{ selector: 'kit-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-notification notification-{{ type }}\">\n <kit-svg-icon class=\"notification-icon\"\n [icon]=\"type\"\n ></kit-svg-icon>\n <div class=\"notification-text\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-notification{display:flex;align-items:center;padding:12px}.kit-notification .notification-icon{margin-right:10px;width:20px;height:20px;fill:none;flex-shrink:0}.kit-notification .notification-text{color:#000;font-size:14px;font-weight:400;line-height:1.26;white-space:pre-wrap}.kit-notification.notification-info{background-color:#fff8e0}.kit-notification.notification-warning{background-color:#ffeee5}.kit-notification.notification-error{background-color:#f8e0e0}.kit-notification.notification-success{background-color:#e7f4ec}\n"] }]
1926
1926
  }], propDecorators: { type: [{
1927
1927
  type: Input
1928
1928
  }] } });
@@ -1960,11 +1960,11 @@ class KitLocationStepperComponent {
1960
1960
  this.KitSvgIcon = KitSvgIcon;
1961
1961
  }
1962
1962
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitLocationStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1963
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitLocationStepperComponent, selector: "kit-location-stepper", inputs: { items: "items", toolTipPosition: "toolTipPosition" }, ngImport: i0, template: "<ng-template #icon let-item=\"item\">\n <kit-svg-icon [icon]=\"item.icon\" class=\"display-block location-icon\"\n [title]=\"item.title\"\n ></kit-svg-icon>\n</ng-template>\n\n<ng-template #description let-item=\"item\">\n <ng-template #toolTip>\n <span class=\"location-tooltip\">{{ item.toolTipText }}</span>\n </ng-template>\n <div *ngIf=\"item.toolTipText\" class=\"description-location\" kitTooltip\n kitTooltipFilter=\"div.description-location\"\n tooltipClass=\"location-tooltip-wrapper\"\n [kitTooltipTemplateRef]=\"toolTip\"\n [kitTooltipPosition]=\"toolTipPosition\">\n <div class=\"title\">{{ item.title }}</div>\n <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n </div>\n\n <div *ngIf=\"!item.toolTipText\" class=\"description-location\">\n <div class=\"title\">{{ item.title }}</div>\n <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n </div>\n\n <div *ngIf=\"item.name\" class=\"description-name\">{{ item.name }}</div>\n</ng-template>\n\n<ng-template #dates let-dates=\"dates\">\n <div *ngFor=\"let date of dates\" class=\"date display-flex\">\n <span class=\"date-description\">{{ date.description }}</span>\n <span>{{ date.value }}</span>\n </div>\n</ng-template>\n\n<div class=\"kit-location-stepper\">\n <div *ngFor=\"let item of items; let first = first; let last = last\" class=\"step {{ item.cssClass }}\"\n [class.first]=\"first\"\n [class.last]=\"last\"\n [class.has-sub-items]=\"!!item.subItems\">\n <div class=\"step-inner display-flex\">\n <div *ngIf=\"item.dates?.length\" class=\"dates\">\n <ng-container *ngTemplateOutlet=\"dates; context: { dates: item.dates }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"icon; context: { item: item }\"></ng-container>\n\n <div class=\"description\">\n <ng-container *ngTemplateOutlet=\"description; context: { item: item }\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"item.subItems?.length\" class=\"sub-items\">\n <div *ngFor=\"let subItem of item.subItems\" class=\"sub-item display-flex {{ subItem.cssClass }}\">\n <div *ngIf=\"subItem.dates?.length\" class=\"dates\">\n <ng-container *ngTemplateOutlet=\"dates; context: { dates: subItem.dates }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"icon; context: { item: subItem }\"></ng-container>\n\n <div class=\"description\">\n <ng-container *ngTemplateOutlet=\"description; context: { item: subItem }\"></ng-container>\n </div>\n </div>\n </div>\n <div class=\"step-line\"></div>\n </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-location-stepper .step{position:relative}.kit-location-stepper .step:not(:first-child){margin-top:1px}.kit-location-stepper .step:last-child .step-line{display:none}.kit-location-stepper .step-line{position:absolute;top:24px;left:197px;width:2px;height:100%;background-color:#efefef}.kit-location-stepper .step-inner{position:relative;padding:20px 0 12px;z-index:2}.kit-location-stepper .caption{margin-top:6px;color:#002a3a;font-size:14px;font-weight:500}.kit-location-stepper .title{text-transform:uppercase;color:#00b0ad;font-size:12px;font-weight:500;letter-spacing:.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-location-stepper .date:not(:first-child){margin-top:10px}.kit-location-stepper .description{display:flex;justify-content:space-between;margin-left:10px;flex:1 0;text-overflow:ellipsis;overflow:hidden}.kit-location-stepper .description-location,.kit-location-stepper .description-name{text-overflow:ellipsis;overflow:hidden}.kit-location-stepper .description-location{display:inline-block}.kit-location-stepper .description-name{padding-left:10px;min-width:80px;text-transform:uppercase;color:#56a2f7;font-size:12px;font-weight:500;letter-spacing:.2em;text-align:right}.kit-location-stepper .location-icon{flex-shrink:0;width:24px;height:24px;background:#fff;stroke:#a9a8a8;fill:#fff;position:relative;z-index:1}.kit-location-stepper .last .location-icon{stroke:#4e4696}.kit-location-stepper .first .location-icon{stroke:#00b0ad}.kit-location-stepper .dates{padding-left:10px;min-width:176px;min-height:40px;color:#002a3a;font-size:13px}.kit-location-stepper .date-description{margin-right:18px;width:30px;color:#a9a8a8;font-weight:500;text-align:right}.kit-location-stepper .danger .step-inner{border:1px solid #ef3e42;border-radius:4px;background-color:#f8e0e0}.kit-location-stepper .danger .location-icon{fill:#f8e0e0;background-color:#f8e0e0}.kit-location-stepper .danger:not(:first-child){margin-top:20px}.kit-location-stepper .sub-item{position:relative;padding:14px 0 12px;z-index:1}.kit-location-stepper .sub-item .dates{margin-right:34px}.kit-location-stepper .sub-item .location-icon{background:#fff}.kit-location-stepper .sub-item .location-icon:before{content:\"\";position:absolute;left:calc(50% - 1px);top:-18px;width:2px;height:18px;background-color:#efefef}.kit-location-stepper .sub-item .description{margin-left:6px}.kit-location-stepper .sub-item.danger{margin-top:20px;border:1px solid #ef3e42;border-radius:4px;background-color:#f8e0e0}.kit-location-stepper .sub-item.danger .location-icon{background-color:#f8e0e0}.kit-location-stepper .sub-item.danger .location-icon:before{display:none}.location-tooltip-wrapper .location-tooltip{white-space:pre-wrap}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1963
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitLocationStepperComponent, selector: "kit-location-stepper", inputs: { items: "items", toolTipPosition: "toolTipPosition" }, ngImport: i0, template: "<ng-template #icon let-item=\"item\">\n <kit-svg-icon [icon]=\"item.icon\" class=\"display-block location-icon\"\n [title]=\"item.title\"\n ></kit-svg-icon>\n</ng-template>\n\n<ng-template #description let-item=\"item\">\n <ng-template #toolTip>\n <span class=\"location-tooltip\">{{ item.toolTipText }}</span>\n </ng-template>\n <div *ngIf=\"item.toolTipText\" class=\"description-location\" kitTooltip\n kitTooltipFilter=\"div.description-location\"\n tooltipClass=\"location-tooltip-wrapper\"\n [kitTooltipTemplateRef]=\"toolTip\"\n [kitTooltipPosition]=\"toolTipPosition\">\n <div class=\"title\">{{ item.title }}</div>\n <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n </div>\n\n <div *ngIf=\"!item.toolTipText\" class=\"description-location\">\n <div class=\"title\">{{ item.title }}</div>\n <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n </div>\n\n <div *ngIf=\"item.name\" class=\"description-name\">{{ item.name }}</div>\n</ng-template>\n\n<ng-template #dates let-dates=\"dates\">\n <div *ngFor=\"let date of dates\" class=\"date display-flex\">\n <span class=\"date-description\">{{ date.description }}</span>\n <span>{{ date.value }}</span>\n </div>\n</ng-template>\n\n<div class=\"kit-location-stepper\">\n <div *ngFor=\"let item of items; let first = first; let last = last\" class=\"step {{ item.cssClass }}\"\n [class.first]=\"first\"\n [class.last]=\"last\"\n [class.has-sub-items]=\"!!item.subItems\">\n <div class=\"step-inner display-flex\">\n <div *ngIf=\"item.dates?.length\" class=\"dates\">\n <ng-container *ngTemplateOutlet=\"dates; context: { dates: item.dates }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"icon; context: { item: item }\"></ng-container>\n\n <div class=\"description\">\n <ng-container *ngTemplateOutlet=\"description; context: { item: item }\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"item.subItems?.length\" class=\"sub-items\">\n <div *ngFor=\"let subItem of item.subItems\" class=\"sub-item display-flex {{ subItem.cssClass }}\">\n <div *ngIf=\"subItem.dates?.length\" class=\"dates\">\n <ng-container *ngTemplateOutlet=\"dates; context: { dates: subItem.dates }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"icon; context: { item: subItem }\"></ng-container>\n\n <div class=\"description\">\n <ng-container *ngTemplateOutlet=\"description; context: { item: subItem }\"></ng-container>\n </div>\n </div>\n </div>\n <div class=\"step-line\"></div>\n </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-location-stepper .step{position:relative}.kit-location-stepper .step:not(:first-child){margin-top:1px}.kit-location-stepper .step:last-child .step-line{display:none}.kit-location-stepper .step-line{position:absolute;top:24px;left:197px;width:2px;height:100%;background-color:#efefef}.kit-location-stepper .step-inner{position:relative;padding:20px 0 12px;z-index:2}.kit-location-stepper .caption{margin-top:6px;color:#002a3a;font-size:14px;font-weight:500}.kit-location-stepper .title{text-transform:uppercase;color:#00b0ad;font-size:12px;font-weight:500;letter-spacing:.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-location-stepper .date:not(:first-child){margin-top:10px}.kit-location-stepper .description{display:flex;justify-content:space-between;margin-left:10px;flex:1 0;text-overflow:ellipsis;overflow:hidden}.kit-location-stepper .description-location,.kit-location-stepper .description-name{text-overflow:ellipsis;overflow:hidden}.kit-location-stepper .description-location{display:inline-block}.kit-location-stepper .description-name{padding-left:10px;min-width:80px;text-transform:uppercase;color:#56a2f7;font-size:12px;font-weight:500;letter-spacing:.2em;text-align:right}.kit-location-stepper .location-icon{flex-shrink:0;width:24px;height:24px;background:#fff;stroke:#a9a8a8;fill:#fff;position:relative;z-index:1}.kit-location-stepper .last .location-icon{stroke:#4e4696}.kit-location-stepper .first .location-icon{stroke:#00b0ad}.kit-location-stepper .dates{padding-left:10px;min-width:176px;min-height:40px;color:#002a3a;font-size:13px}.kit-location-stepper .date-description{margin-right:18px;width:30px;color:#a9a8a8;font-weight:500;text-align:right}.kit-location-stepper .danger .step-inner{border:1px solid #ef3e42;border-radius:4px;background-color:#f8e0e0}.kit-location-stepper .danger .location-icon{fill:#f8e0e0;background-color:#f8e0e0}.kit-location-stepper .danger:not(:first-child){margin-top:20px}.kit-location-stepper .sub-item{position:relative;padding:14px 0 12px;z-index:1}.kit-location-stepper .sub-item .dates{margin-right:34px}.kit-location-stepper .sub-item .location-icon{background:#fff}.kit-location-stepper .sub-item .location-icon:before{content:\"\";position:absolute;left:calc(50% - 1px);top:-18px;width:2px;height:18px;background-color:#efefef}.kit-location-stepper .sub-item .description{margin-left:6px}.kit-location-stepper .sub-item.danger{margin-top:20px;border:1px solid #ef3e42;border-radius:4px;background-color:#f8e0e0}.kit-location-stepper .sub-item.danger .location-icon{background-color:#f8e0e0}.kit-location-stepper .sub-item.danger .location-icon:before{display:none}.location-tooltip-wrapper .location-tooltip{white-space:pre-wrap}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1964
1964
  }
1965
1965
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitLocationStepperComponent, decorators: [{
1966
1966
  type: Component,
1967
- args: [{ selector: 'kit-location-stepper', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #icon let-item=\"item\">\n <kit-svg-icon [icon]=\"item.icon\" class=\"display-block location-icon\"\n [title]=\"item.title\"\n ></kit-svg-icon>\n</ng-template>\n\n<ng-template #description let-item=\"item\">\n <ng-template #toolTip>\n <span class=\"location-tooltip\">{{ item.toolTipText }}</span>\n </ng-template>\n <div *ngIf=\"item.toolTipText\" class=\"description-location\" kitTooltip\n kitTooltipFilter=\"div.description-location\"\n tooltipClass=\"location-tooltip-wrapper\"\n [kitTooltipTemplateRef]=\"toolTip\"\n [kitTooltipPosition]=\"toolTipPosition\">\n <div class=\"title\">{{ item.title }}</div>\n <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n </div>\n\n <div *ngIf=\"!item.toolTipText\" class=\"description-location\">\n <div class=\"title\">{{ item.title }}</div>\n <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n </div>\n\n <div *ngIf=\"item.name\" class=\"description-name\">{{ item.name }}</div>\n</ng-template>\n\n<ng-template #dates let-dates=\"dates\">\n <div *ngFor=\"let date of dates\" class=\"date display-flex\">\n <span class=\"date-description\">{{ date.description }}</span>\n <span>{{ date.value }}</span>\n </div>\n</ng-template>\n\n<div class=\"kit-location-stepper\">\n <div *ngFor=\"let item of items; let first = first; let last = last\" class=\"step {{ item.cssClass }}\"\n [class.first]=\"first\"\n [class.last]=\"last\"\n [class.has-sub-items]=\"!!item.subItems\">\n <div class=\"step-inner display-flex\">\n <div *ngIf=\"item.dates?.length\" class=\"dates\">\n <ng-container *ngTemplateOutlet=\"dates; context: { dates: item.dates }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"icon; context: { item: item }\"></ng-container>\n\n <div class=\"description\">\n <ng-container *ngTemplateOutlet=\"description; context: { item: item }\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"item.subItems?.length\" class=\"sub-items\">\n <div *ngFor=\"let subItem of item.subItems\" class=\"sub-item display-flex {{ subItem.cssClass }}\">\n <div *ngIf=\"subItem.dates?.length\" class=\"dates\">\n <ng-container *ngTemplateOutlet=\"dates; context: { dates: subItem.dates }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"icon; context: { item: subItem }\"></ng-container>\n\n <div class=\"description\">\n <ng-container *ngTemplateOutlet=\"description; context: { item: subItem }\"></ng-container>\n </div>\n </div>\n </div>\n <div class=\"step-line\"></div>\n </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-location-stepper .step{position:relative}.kit-location-stepper .step:not(:first-child){margin-top:1px}.kit-location-stepper .step:last-child .step-line{display:none}.kit-location-stepper .step-line{position:absolute;top:24px;left:197px;width:2px;height:100%;background-color:#efefef}.kit-location-stepper .step-inner{position:relative;padding:20px 0 12px;z-index:2}.kit-location-stepper .caption{margin-top:6px;color:#002a3a;font-size:14px;font-weight:500}.kit-location-stepper .title{text-transform:uppercase;color:#00b0ad;font-size:12px;font-weight:500;letter-spacing:.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-location-stepper .date:not(:first-child){margin-top:10px}.kit-location-stepper .description{display:flex;justify-content:space-between;margin-left:10px;flex:1 0;text-overflow:ellipsis;overflow:hidden}.kit-location-stepper .description-location,.kit-location-stepper .description-name{text-overflow:ellipsis;overflow:hidden}.kit-location-stepper .description-location{display:inline-block}.kit-location-stepper .description-name{padding-left:10px;min-width:80px;text-transform:uppercase;color:#56a2f7;font-size:12px;font-weight:500;letter-spacing:.2em;text-align:right}.kit-location-stepper .location-icon{flex-shrink:0;width:24px;height:24px;background:#fff;stroke:#a9a8a8;fill:#fff;position:relative;z-index:1}.kit-location-stepper .last .location-icon{stroke:#4e4696}.kit-location-stepper .first .location-icon{stroke:#00b0ad}.kit-location-stepper .dates{padding-left:10px;min-width:176px;min-height:40px;color:#002a3a;font-size:13px}.kit-location-stepper .date-description{margin-right:18px;width:30px;color:#a9a8a8;font-weight:500;text-align:right}.kit-location-stepper .danger .step-inner{border:1px solid #ef3e42;border-radius:4px;background-color:#f8e0e0}.kit-location-stepper .danger .location-icon{fill:#f8e0e0;background-color:#f8e0e0}.kit-location-stepper .danger:not(:first-child){margin-top:20px}.kit-location-stepper .sub-item{position:relative;padding:14px 0 12px;z-index:1}.kit-location-stepper .sub-item .dates{margin-right:34px}.kit-location-stepper .sub-item .location-icon{background:#fff}.kit-location-stepper .sub-item .location-icon:before{content:\"\";position:absolute;left:calc(50% - 1px);top:-18px;width:2px;height:18px;background-color:#efefef}.kit-location-stepper .sub-item .description{margin-left:6px}.kit-location-stepper .sub-item.danger{margin-top:20px;border:1px solid #ef3e42;border-radius:4px;background-color:#f8e0e0}.kit-location-stepper .sub-item.danger .location-icon{background-color:#f8e0e0}.kit-location-stepper .sub-item.danger .location-icon:before{display:none}.location-tooltip-wrapper .location-tooltip{white-space:pre-wrap}\n"] }]
1967
+ args: [{ selector: 'kit-location-stepper', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #icon let-item=\"item\">\n <kit-svg-icon [icon]=\"item.icon\" class=\"display-block location-icon\"\n [title]=\"item.title\"\n ></kit-svg-icon>\n</ng-template>\n\n<ng-template #description let-item=\"item\">\n <ng-template #toolTip>\n <span class=\"location-tooltip\">{{ item.toolTipText }}</span>\n </ng-template>\n <div *ngIf=\"item.toolTipText\" class=\"description-location\" kitTooltip\n kitTooltipFilter=\"div.description-location\"\n tooltipClass=\"location-tooltip-wrapper\"\n [kitTooltipTemplateRef]=\"toolTip\"\n [kitTooltipPosition]=\"toolTipPosition\">\n <div class=\"title\">{{ item.title }}</div>\n <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n </div>\n\n <div *ngIf=\"!item.toolTipText\" class=\"description-location\">\n <div class=\"title\">{{ item.title }}</div>\n <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n </div>\n\n <div *ngIf=\"item.name\" class=\"description-name\">{{ item.name }}</div>\n</ng-template>\n\n<ng-template #dates let-dates=\"dates\">\n <div *ngFor=\"let date of dates\" class=\"date display-flex\">\n <span class=\"date-description\">{{ date.description }}</span>\n <span>{{ date.value }}</span>\n </div>\n</ng-template>\n\n<div class=\"kit-location-stepper\">\n <div *ngFor=\"let item of items; let first = first; let last = last\" class=\"step {{ item.cssClass }}\"\n [class.first]=\"first\"\n [class.last]=\"last\"\n [class.has-sub-items]=\"!!item.subItems\">\n <div class=\"step-inner display-flex\">\n <div *ngIf=\"item.dates?.length\" class=\"dates\">\n <ng-container *ngTemplateOutlet=\"dates; context: { dates: item.dates }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"icon; context: { item: item }\"></ng-container>\n\n <div class=\"description\">\n <ng-container *ngTemplateOutlet=\"description; context: { item: item }\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"item.subItems?.length\" class=\"sub-items\">\n <div *ngFor=\"let subItem of item.subItems\" class=\"sub-item display-flex {{ subItem.cssClass }}\">\n <div *ngIf=\"subItem.dates?.length\" class=\"dates\">\n <ng-container *ngTemplateOutlet=\"dates; context: { dates: subItem.dates }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"icon; context: { item: subItem }\"></ng-container>\n\n <div class=\"description\">\n <ng-container *ngTemplateOutlet=\"description; context: { item: subItem }\"></ng-container>\n </div>\n </div>\n </div>\n <div class=\"step-line\"></div>\n </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-location-stepper .step{position:relative}.kit-location-stepper .step:not(:first-child){margin-top:1px}.kit-location-stepper .step:last-child .step-line{display:none}.kit-location-stepper .step-line{position:absolute;top:24px;left:197px;width:2px;height:100%;background-color:#efefef}.kit-location-stepper .step-inner{position:relative;padding:20px 0 12px;z-index:2}.kit-location-stepper .caption{margin-top:6px;color:#002a3a;font-size:14px;font-weight:500}.kit-location-stepper .title{text-transform:uppercase;color:#00b0ad;font-size:12px;font-weight:500;letter-spacing:.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-location-stepper .date:not(:first-child){margin-top:10px}.kit-location-stepper .description{display:flex;justify-content:space-between;margin-left:10px;flex:1 0;text-overflow:ellipsis;overflow:hidden}.kit-location-stepper .description-location,.kit-location-stepper .description-name{text-overflow:ellipsis;overflow:hidden}.kit-location-stepper .description-location{display:inline-block}.kit-location-stepper .description-name{padding-left:10px;min-width:80px;text-transform:uppercase;color:#56a2f7;font-size:12px;font-weight:500;letter-spacing:.2em;text-align:right}.kit-location-stepper .location-icon{flex-shrink:0;width:24px;height:24px;background:#fff;stroke:#a9a8a8;fill:#fff;position:relative;z-index:1}.kit-location-stepper .last .location-icon{stroke:#4e4696}.kit-location-stepper .first .location-icon{stroke:#00b0ad}.kit-location-stepper .dates{padding-left:10px;min-width:176px;min-height:40px;color:#002a3a;font-size:13px}.kit-location-stepper .date-description{margin-right:18px;width:30px;color:#a9a8a8;font-weight:500;text-align:right}.kit-location-stepper .danger .step-inner{border:1px solid #ef3e42;border-radius:4px;background-color:#f8e0e0}.kit-location-stepper .danger .location-icon{fill:#f8e0e0;background-color:#f8e0e0}.kit-location-stepper .danger:not(:first-child){margin-top:20px}.kit-location-stepper .sub-item{position:relative;padding:14px 0 12px;z-index:1}.kit-location-stepper .sub-item .dates{margin-right:34px}.kit-location-stepper .sub-item .location-icon{background:#fff}.kit-location-stepper .sub-item .location-icon:before{content:\"\";position:absolute;left:calc(50% - 1px);top:-18px;width:2px;height:18px;background-color:#efefef}.kit-location-stepper .sub-item .description{margin-left:6px}.kit-location-stepper .sub-item.danger{margin-top:20px;border:1px solid #ef3e42;border-radius:4px;background-color:#f8e0e0}.kit-location-stepper .sub-item.danger .location-icon{background-color:#f8e0e0}.kit-location-stepper .sub-item.danger .location-icon:before{display:none}.location-tooltip-wrapper .location-tooltip{white-space:pre-wrap}\n"] }]
1968
1968
  }], propDecorators: { items: [{
1969
1969
  type: Input
1970
1970
  }], toolTipPosition: [{
@@ -2552,11 +2552,11 @@ class KitDaterangeComponent {
2552
2552
  this.closed.emit(rangeValue);
2553
2553
  }
2554
2554
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitDaterangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2555
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitDaterangeComponent, selector: "kit-daterange", inputs: { type: "type", label: "label", startLabel: "startLabel", endLabel: "endLabel", startPlaceholder: "startPlaceholder", endPlaceholder: "endPlaceholder", format: "format", defaultStartDate: "defaultStartDate", defaultEndDate: "defaultEndDate", min: "min", max: "max", disabled: "disabled", isValid: "isValid", iconPosition: "iconPosition", messageIcon: "messageIcon", messageText: "messageText", startDateControl: "startDateControl", endDateControl: "endDateControl" }, outputs: { startDateChanged: "startDateChanged", closed: "closed", endDateChanged: "endDateChanged" }, viewQueries: [{ propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: DateRangePopupComponent }], ngImport: i0, template: "<div class=\"kit-daterange\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"!isValid\"\n [ngClass]=\"[iconPosition, type]\">\n <button #anchor\n class=\"daterange-button\"\n [disabled]=\"disabled\"\n (click)=\"openCalendarPopup()\">\n <div class=\"button-text\">{{ label }}</div>\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n <kendo-daterange class=\"daterange-wrapper\">\n <div class=\"daterange-input-wrapper\">\n @if (startLabel) {\n <kit-input-label class=\"label\"\n [text]=\"startLabel\"\n [for]=\"startInput\"\n ></kit-input-label>\n }\n <div class=\"daterange-input\">\n <kendo-dateinput #startInput\n kendoDateRangeStartInput\n [placeholder]=\"startPlaceholder\"\n [format]=\"format\"\n [value]=\"startDateControl.value || defaultStartDate\"\n [min]=\"min\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onStartDateChange($event)\"\n ></kendo-dateinput>\n <button class=\"daterange-input-button\"\n (click)=\"openCalendarPopup()\">\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n </div>\n <div class=\"daterange-input-wrapper\">\n @if (endLabel) {\n <kit-input-label class=\"label\"\n [text]=\"endLabel\"\n [for]=\"endInput\"\n ></kit-input-label>\n }\n <div class=\"daterange-input\">\n <kendo-dateinput #endInput\n kendoDateRangeEndInput\n [placeholder]=\"endPlaceholder\"\n [format]=\"format\"\n [value]=\"endDateControl.value || defaultEndDate\"\n [max]=\"max\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onEndDateChange($event)\"\n ></kendo-dateinput>\n <button class=\"daterange-input-button\"\n (click)=\"openCalendarPopup()\">\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n </div>\n <kendo-daterange-popup *ngIf=\"type === KitDaterangeType.DEFAULT\"\n #popup appendTo=\"component\"\n (close)=\"onClose()\"></kendo-daterange-popup>\n <kendo-daterange-popup *ngIf=\"type === KitDaterangeType.BUTTON\"\n #popup appendTo=\"component\"\n [anchor]=\"$any(anchor)\"\n (close)=\"onClose()\"></kendo-daterange-popup>\n </kendo-daterange>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-daterange.button .daterange-button{display:flex}.kit-daterange.button .daterange-input-wrapper{display:none}.kit-daterange.invalid .daterange-button{border-color:#ef3e42;background-color:#f8e0e0}.kit-daterange.invalid .daterange-button .button-text{color:#27282a}.kit-daterange.invalid .k-input-inner{color:#27282a;border-color:#ef3e42;background-color:#f8e0e0}.kit-daterange.disabled .daterange-button{border-color:#c1c7d0;background-color:#f3f4f6;cursor:default}.kit-daterange.disabled .daterange-button .button-text{color:#9a9fa6}.kit-daterange.disabled .daterange-button .button-icon{stroke:#c1c7d0}.kit-daterange.disabled .k-input-inner{color:#9a9fa6;border-color:#c1c7d0;background-color:#f3f4f6}.kit-daterange.disabled .daterange-input-button .button-icon{stroke:#c1c7d0}.kit-daterange.left .daterange-input-button{left:0;right:initial}.kit-daterange.left .k-input-inner{padding:4px 8px 4px 28px}.kit-daterange.left .daterange-button{flex-direction:row-reverse}.kit-daterange .daterange-button{display:none;align-items:center;padding:8px;width:100%;height:34px;gap:8px;border-radius:4px;border:1px solid #efefef;background:#fff;cursor:pointer}.kit-daterange .daterange-button .button-text{flex-grow:1;color:#27282a;font-size:13px;text-align:left}.kit-daterange .daterange-button .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:#002a3a}.kit-daterange .daterange-wrapper{display:flex;gap:8px}.kit-daterange .label{display:block;margin-bottom:4px}.kit-daterange .daterange-input{display:flex;align-items:center;position:relative}.kit-daterange .daterange-input-button{position:absolute;right:0;padding:0 8px;border:none;background:none;cursor:pointer;z-index:1}.kit-daterange .daterange-input-button .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:#002a3a}.kit-daterange .kit-daterange-default{display:flex}.kit-daterange .k-dateinput{border:none;border-radius:0;background:none}.kit-daterange .k-dateinput.k-focus{box-shadow:none}.kit-daterange .k-dateinput.k-focus .k-input-inner{border-color:#00b0ad}.kit-daterange .k-input-inner{padding:4px 28px 4px 8px;width:100%;height:34px;font-size:13px;font-weight:400;color:#002a3a;border-radius:4px;background-color:#fff;border:1px solid #efefef}.kit-daterange .k-input-inner::placeholder{color:#74777d}.kit-daterange .k-input-inner::selection{color:#fff;background:#00b0ad}.kit-daterange .k-popup{border:1px solid #efefef;box-shadow:none}.kit-daterange .k-popup .k-calendar-header{padding:6px;font-size:14px;font-weight:500}.kit-daterange .k-popup .k-calendar-title{padding:0;color:#000;font-weight:500;line-height:1.26}.kit-daterange .k-popup .k-button{padding:0}.kit-daterange .k-popup .k-button:hover:before{background:none}.kit-daterange .k-popup .k-button-icon{padding:0;width:16px;height:16px;color:#002a3a}.kit-daterange .k-popup .k-prev-view .k-icon:before,.kit-daterange .k-popup .k-next-view .k-icon:before{position:absolute}.kit-daterange .k-popup .k-prev-view .k-icon:before{content:\"\\e016\"}.kit-daterange .k-popup .k-next-view .k-icon:before{content:\"\\e014\"}.kit-daterange .k-popup .k-calendar-nav-today{display:flex;align-items:center;padding:0 6px;color:#56a2f7}.kit-daterange .k-popup .k-calendar-nav-today:hover{color:#56a2f7}.kit-daterange .k-popup .k-calendar-table{padding:0 10px 10px}.kit-daterange .k-popup .k-calendar-tr{display:flex}.kit-daterange .k-popup .k-calendar-th,.kit-daterange .k-popup .k-calendar-td{display:flex;padding:0;width:40px;height:40px;color:#000;font-weight:500;font-size:13px;line-height:1;border-radius:0;box-sizing:border-box}.kit-daterange .k-popup .k-calendar-th{align-items:center;justify-content:center;text-transform:capitalize}.kit-daterange .k-popup .k-calendar-td{border:1px solid #dfdfdf}.kit-daterange .k-popup .k-calendar-td:hover .k-link{color:#56a2f7;background:#fff}.kit-daterange .k-popup .k-calendar-td.k-state-focused .k-link,.kit-daterange .k-popup .k-calendar-td.k-state-active .k-link{box-shadow:none}.kit-daterange .k-popup .k-calendar-td.k-range-start,.kit-daterange .k-popup .k-calendar-td.k-range-end{background:none}.kit-daterange .k-popup .k-calendar-td.k-range-start.k-today .k-link,.kit-daterange .k-popup .k-calendar-td.k-range-end.k-today .k-link{color:#fff}.kit-daterange .k-popup .k-calendar-td.k-range-start .k-link,.kit-daterange .k-popup .k-calendar-td.k-range-end .k-link{color:#fff;border:1px solid #dfdfdf;border-radius:50%;background:#56a2f7}.kit-daterange .k-popup .k-calendar-td.k-range-mid{background:#aad0fb}.kit-daterange .k-popup .k-calendar-td.k-today .k-link{color:#56a2f7}.kit-daterange .k-popup .k-calendar-td.k-today.k-focus .k-link{box-shadow:none}.kit-daterange .k-popup .k-calendar-td.k-other-month .k-link{color:#a9a8a8}.kit-daterange .k-popup .k-link{display:flex;align-items:center;justify-content:center;margin:0;padding:0;width:100%;height:100%}.kit-daterange .k-popup .k-calendar-view{padding:0;gap:0}.kit-daterange .k-popup .k-calendar-content{padding:0 10px 10px}.kit-daterange .k-popup .k-calendar-yearview .k-calendar-td,.kit-daterange .k-popup .k-calendar-decadeview .k-calendar-td,.kit-daterange .k-popup .k-calendar-centuryview .k-calendar-td{width:76px;height:76px}.kit-daterange .k-popup .k-range-split-start:after,.kit-daterange .k-popup .k-range-split-end:after{background-image:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: i2$1.DateRangeComponent, selector: "kendo-daterange" }, { kind: "component", type: i2$1.DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "title", "subtitle"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }, { kind: "directive", type: i2$1.DateRangeStartInputDirective, selector: "[kendoDateRangeStartInput]", inputs: ["autoCorrectOn", "navigateCalendarOnFocus"] }, { kind: "directive", type: i2$1.DateRangeEndInputDirective, selector: "[kendoDateRangeEndInput]", inputs: ["autoCorrectOn", "navigateCalendarOnFocus"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2555
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitDaterangeComponent, selector: "kit-daterange", inputs: { type: "type", label: "label", startLabel: "startLabel", endLabel: "endLabel", startPlaceholder: "startPlaceholder", endPlaceholder: "endPlaceholder", format: "format", defaultStartDate: "defaultStartDate", defaultEndDate: "defaultEndDate", min: "min", max: "max", disabled: "disabled", isValid: "isValid", iconPosition: "iconPosition", messageIcon: "messageIcon", messageText: "messageText", startDateControl: "startDateControl", endDateControl: "endDateControl" }, outputs: { startDateChanged: "startDateChanged", closed: "closed", endDateChanged: "endDateChanged" }, viewQueries: [{ propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: DateRangePopupComponent }], ngImport: i0, template: "<div class=\"kit-daterange\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"!isValid\"\n [ngClass]=\"[iconPosition, type]\">\n <button #anchor\n class=\"daterange-button\"\n [disabled]=\"disabled\"\n (click)=\"openCalendarPopup()\">\n <div class=\"button-text\">{{ label }}</div>\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n <kendo-daterange class=\"daterange-wrapper\">\n <div class=\"daterange-input-wrapper\">\n @if (startLabel) {\n <kit-input-label class=\"label\"\n [text]=\"startLabel\"\n [for]=\"startInput\"\n ></kit-input-label>\n }\n <div class=\"daterange-input\">\n <kendo-dateinput #startInput\n kendoDateRangeStartInput\n [placeholder]=\"startPlaceholder\"\n [format]=\"format\"\n [value]=\"startDateControl.value || defaultStartDate\"\n [min]=\"min\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onStartDateChange($event)\"\n ></kendo-dateinput>\n <button class=\"daterange-input-button\"\n (click)=\"openCalendarPopup()\">\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n </div>\n <div class=\"daterange-input-wrapper\">\n @if (endLabel) {\n <kit-input-label class=\"label\"\n [text]=\"endLabel\"\n [for]=\"endInput\"\n ></kit-input-label>\n }\n <div class=\"daterange-input\">\n <kendo-dateinput #endInput\n kendoDateRangeEndInput\n [placeholder]=\"endPlaceholder\"\n [format]=\"format\"\n [value]=\"endDateControl.value || defaultEndDate\"\n [max]=\"max\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onEndDateChange($event)\"\n ></kendo-dateinput>\n <button class=\"daterange-input-button\"\n (click)=\"openCalendarPopup()\">\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n </div>\n <kendo-daterange-popup *ngIf=\"type === KitDaterangeType.DEFAULT\"\n #popup appendTo=\"component\"\n (close)=\"onClose()\"></kendo-daterange-popup>\n <kendo-daterange-popup *ngIf=\"type === KitDaterangeType.BUTTON\"\n #popup appendTo=\"component\"\n [anchor]=\"$any(anchor)\"\n (close)=\"onClose()\"></kendo-daterange-popup>\n </kendo-daterange>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-daterange.button .daterange-button{display:flex}.kit-daterange.button .daterange-input-wrapper{display:none}.kit-daterange.invalid .daterange-button{border-color:#ef3e42;background-color:#f8e0e0}.kit-daterange.invalid .daterange-button .button-text{color:#27282a}.kit-daterange.invalid .k-input-inner{color:#27282a;border-color:#ef3e42;background-color:#f8e0e0}.kit-daterange.disabled .daterange-button{border-color:#c1c7d0;background-color:#f3f4f6;cursor:default}.kit-daterange.disabled .daterange-button .button-text{color:#9a9fa6}.kit-daterange.disabled .daterange-button .button-icon{stroke:#c1c7d0}.kit-daterange.disabled .k-input-inner{color:#9a9fa6;border-color:#c1c7d0;background-color:#f3f4f6}.kit-daterange.disabled .daterange-input-button .button-icon{stroke:#c1c7d0}.kit-daterange.left .daterange-input-button{left:0;right:initial}.kit-daterange.left .k-input-inner{padding:4px 8px 4px 28px}.kit-daterange.left .daterange-button{flex-direction:row-reverse}.kit-daterange .daterange-button{display:none;align-items:center;padding:8px;width:100%;height:34px;gap:8px;border-radius:4px;border:1px solid #efefef;background:#fff;cursor:pointer}.kit-daterange .daterange-button .button-text{flex-grow:1;color:#27282a;font-size:13px;text-align:left}.kit-daterange .daterange-button .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:#002a3a}.kit-daterange .daterange-wrapper{display:flex;gap:8px}.kit-daterange .label{display:block;margin-bottom:4px}.kit-daterange .daterange-input{display:flex;align-items:center;position:relative}.kit-daterange .daterange-input-button{position:absolute;right:0;padding:0 8px;border:none;background:none;cursor:pointer;z-index:1}.kit-daterange .daterange-input-button .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:#002a3a}.kit-daterange .kit-daterange-default{display:flex}.kit-daterange .k-dateinput{border:none;border-radius:0;background:none}.kit-daterange .k-dateinput.k-focus{box-shadow:none}.kit-daterange .k-dateinput.k-focus .k-input-inner{border-color:#00b0ad}.kit-daterange .k-input-inner{padding:4px 28px 4px 8px;width:100%;height:34px;font-size:13px;font-weight:400;color:#002a3a;border-radius:4px;background-color:#fff;border:1px solid #efefef}.kit-daterange .k-input-inner::placeholder{color:#74777d}.kit-daterange .k-input-inner::selection{color:#fff;background:#00b0ad}.kit-daterange .k-popup{border:1px solid #efefef;box-shadow:none}.kit-daterange .k-popup .k-calendar-header{padding:6px;font-size:14px;font-weight:500}.kit-daterange .k-popup .k-calendar-title{padding:0;color:#000;font-weight:500;line-height:1.26}.kit-daterange .k-popup .k-button{padding:0}.kit-daterange .k-popup .k-button:hover:before{background:none}.kit-daterange .k-popup .k-button-icon{padding:0;width:16px;height:16px;color:#002a3a}.kit-daterange .k-popup .k-prev-view .k-icon:before,.kit-daterange .k-popup .k-next-view .k-icon:before{position:absolute}.kit-daterange .k-popup .k-prev-view .k-icon:before{content:\"\\e016\"}.kit-daterange .k-popup .k-next-view .k-icon:before{content:\"\\e014\"}.kit-daterange .k-popup .k-calendar-nav-today{display:flex;align-items:center;padding:0 6px;color:#56a2f7}.kit-daterange .k-popup .k-calendar-nav-today:hover{color:#56a2f7}.kit-daterange .k-popup .k-calendar-table{padding:0 10px 10px}.kit-daterange .k-popup .k-calendar-tr{display:flex}.kit-daterange .k-popup .k-calendar-th,.kit-daterange .k-popup .k-calendar-td{display:flex;padding:0;width:40px;height:40px;color:#000;font-weight:500;font-size:13px;line-height:1;border-radius:0;box-sizing:border-box}.kit-daterange .k-popup .k-calendar-th{align-items:center;justify-content:center;text-transform:capitalize}.kit-daterange .k-popup .k-calendar-td{border:1px solid #dfdfdf}.kit-daterange .k-popup .k-calendar-td:hover .k-link{color:#56a2f7;background:#fff}.kit-daterange .k-popup .k-calendar-td.k-state-focused .k-link,.kit-daterange .k-popup .k-calendar-td.k-state-active .k-link{box-shadow:none}.kit-daterange .k-popup .k-calendar-td.k-range-start,.kit-daterange .k-popup .k-calendar-td.k-range-end{background:none}.kit-daterange .k-popup .k-calendar-td.k-range-start.k-today .k-link,.kit-daterange .k-popup .k-calendar-td.k-range-end.k-today .k-link{color:#fff}.kit-daterange .k-popup .k-calendar-td.k-range-start .k-link,.kit-daterange .k-popup .k-calendar-td.k-range-end .k-link{color:#fff;border:1px solid #dfdfdf;border-radius:50%;background:#56a2f7}.kit-daterange .k-popup .k-calendar-td.k-range-mid{background:#aad0fb}.kit-daterange .k-popup .k-calendar-td.k-today .k-link{color:#56a2f7}.kit-daterange .k-popup .k-calendar-td.k-today.k-focus .k-link{box-shadow:none}.kit-daterange .k-popup .k-calendar-td.k-other-month .k-link{color:#a9a8a8}.kit-daterange .k-popup .k-link{display:flex;align-items:center;justify-content:center;margin:0;padding:0;width:100%;height:100%}.kit-daterange .k-popup .k-calendar-view{padding:0;gap:0}.kit-daterange .k-popup .k-calendar-content{padding:0 10px 10px}.kit-daterange .k-popup .k-calendar-yearview .k-calendar-td,.kit-daterange .k-popup .k-calendar-decadeview .k-calendar-td,.kit-daterange .k-popup .k-calendar-centuryview .k-calendar-td{width:76px;height:76px}.kit-daterange .k-popup .k-range-split-start:after,.kit-daterange .k-popup .k-range-split-end:after{background-image:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: i2$1.DateRangeComponent, selector: "kendo-daterange" }, { kind: "component", type: i2$1.DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "title", "subtitle"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }, { kind: "directive", type: i2$1.DateRangeStartInputDirective, selector: "[kendoDateRangeStartInput]", inputs: ["autoCorrectOn", "navigateCalendarOnFocus"] }, { kind: "directive", type: i2$1.DateRangeEndInputDirective, selector: "[kendoDateRangeEndInput]", inputs: ["autoCorrectOn", "navigateCalendarOnFocus"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2556
2556
  }
2557
2557
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitDaterangeComponent, decorators: [{
2558
2558
  type: Component,
2559
- args: [{ selector: 'kit-daterange', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-daterange\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"!isValid\"\n [ngClass]=\"[iconPosition, type]\">\n <button #anchor\n class=\"daterange-button\"\n [disabled]=\"disabled\"\n (click)=\"openCalendarPopup()\">\n <div class=\"button-text\">{{ label }}</div>\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n <kendo-daterange class=\"daterange-wrapper\">\n <div class=\"daterange-input-wrapper\">\n @if (startLabel) {\n <kit-input-label class=\"label\"\n [text]=\"startLabel\"\n [for]=\"startInput\"\n ></kit-input-label>\n }\n <div class=\"daterange-input\">\n <kendo-dateinput #startInput\n kendoDateRangeStartInput\n [placeholder]=\"startPlaceholder\"\n [format]=\"format\"\n [value]=\"startDateControl.value || defaultStartDate\"\n [min]=\"min\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onStartDateChange($event)\"\n ></kendo-dateinput>\n <button class=\"daterange-input-button\"\n (click)=\"openCalendarPopup()\">\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n </div>\n <div class=\"daterange-input-wrapper\">\n @if (endLabel) {\n <kit-input-label class=\"label\"\n [text]=\"endLabel\"\n [for]=\"endInput\"\n ></kit-input-label>\n }\n <div class=\"daterange-input\">\n <kendo-dateinput #endInput\n kendoDateRangeEndInput\n [placeholder]=\"endPlaceholder\"\n [format]=\"format\"\n [value]=\"endDateControl.value || defaultEndDate\"\n [max]=\"max\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onEndDateChange($event)\"\n ></kendo-dateinput>\n <button class=\"daterange-input-button\"\n (click)=\"openCalendarPopup()\">\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n </div>\n <kendo-daterange-popup *ngIf=\"type === KitDaterangeType.DEFAULT\"\n #popup appendTo=\"component\"\n (close)=\"onClose()\"></kendo-daterange-popup>\n <kendo-daterange-popup *ngIf=\"type === KitDaterangeType.BUTTON\"\n #popup appendTo=\"component\"\n [anchor]=\"$any(anchor)\"\n (close)=\"onClose()\"></kendo-daterange-popup>\n </kendo-daterange>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-daterange.button .daterange-button{display:flex}.kit-daterange.button .daterange-input-wrapper{display:none}.kit-daterange.invalid .daterange-button{border-color:#ef3e42;background-color:#f8e0e0}.kit-daterange.invalid .daterange-button .button-text{color:#27282a}.kit-daterange.invalid .k-input-inner{color:#27282a;border-color:#ef3e42;background-color:#f8e0e0}.kit-daterange.disabled .daterange-button{border-color:#c1c7d0;background-color:#f3f4f6;cursor:default}.kit-daterange.disabled .daterange-button .button-text{color:#9a9fa6}.kit-daterange.disabled .daterange-button .button-icon{stroke:#c1c7d0}.kit-daterange.disabled .k-input-inner{color:#9a9fa6;border-color:#c1c7d0;background-color:#f3f4f6}.kit-daterange.disabled .daterange-input-button .button-icon{stroke:#c1c7d0}.kit-daterange.left .daterange-input-button{left:0;right:initial}.kit-daterange.left .k-input-inner{padding:4px 8px 4px 28px}.kit-daterange.left .daterange-button{flex-direction:row-reverse}.kit-daterange .daterange-button{display:none;align-items:center;padding:8px;width:100%;height:34px;gap:8px;border-radius:4px;border:1px solid #efefef;background:#fff;cursor:pointer}.kit-daterange .daterange-button .button-text{flex-grow:1;color:#27282a;font-size:13px;text-align:left}.kit-daterange .daterange-button .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:#002a3a}.kit-daterange .daterange-wrapper{display:flex;gap:8px}.kit-daterange .label{display:block;margin-bottom:4px}.kit-daterange .daterange-input{display:flex;align-items:center;position:relative}.kit-daterange .daterange-input-button{position:absolute;right:0;padding:0 8px;border:none;background:none;cursor:pointer;z-index:1}.kit-daterange .daterange-input-button .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:#002a3a}.kit-daterange .kit-daterange-default{display:flex}.kit-daterange .k-dateinput{border:none;border-radius:0;background:none}.kit-daterange .k-dateinput.k-focus{box-shadow:none}.kit-daterange .k-dateinput.k-focus .k-input-inner{border-color:#00b0ad}.kit-daterange .k-input-inner{padding:4px 28px 4px 8px;width:100%;height:34px;font-size:13px;font-weight:400;color:#002a3a;border-radius:4px;background-color:#fff;border:1px solid #efefef}.kit-daterange .k-input-inner::placeholder{color:#74777d}.kit-daterange .k-input-inner::selection{color:#fff;background:#00b0ad}.kit-daterange .k-popup{border:1px solid #efefef;box-shadow:none}.kit-daterange .k-popup .k-calendar-header{padding:6px;font-size:14px;font-weight:500}.kit-daterange .k-popup .k-calendar-title{padding:0;color:#000;font-weight:500;line-height:1.26}.kit-daterange .k-popup .k-button{padding:0}.kit-daterange .k-popup .k-button:hover:before{background:none}.kit-daterange .k-popup .k-button-icon{padding:0;width:16px;height:16px;color:#002a3a}.kit-daterange .k-popup .k-prev-view .k-icon:before,.kit-daterange .k-popup .k-next-view .k-icon:before{position:absolute}.kit-daterange .k-popup .k-prev-view .k-icon:before{content:\"\\e016\"}.kit-daterange .k-popup .k-next-view .k-icon:before{content:\"\\e014\"}.kit-daterange .k-popup .k-calendar-nav-today{display:flex;align-items:center;padding:0 6px;color:#56a2f7}.kit-daterange .k-popup .k-calendar-nav-today:hover{color:#56a2f7}.kit-daterange .k-popup .k-calendar-table{padding:0 10px 10px}.kit-daterange .k-popup .k-calendar-tr{display:flex}.kit-daterange .k-popup .k-calendar-th,.kit-daterange .k-popup .k-calendar-td{display:flex;padding:0;width:40px;height:40px;color:#000;font-weight:500;font-size:13px;line-height:1;border-radius:0;box-sizing:border-box}.kit-daterange .k-popup .k-calendar-th{align-items:center;justify-content:center;text-transform:capitalize}.kit-daterange .k-popup .k-calendar-td{border:1px solid #dfdfdf}.kit-daterange .k-popup .k-calendar-td:hover .k-link{color:#56a2f7;background:#fff}.kit-daterange .k-popup .k-calendar-td.k-state-focused .k-link,.kit-daterange .k-popup .k-calendar-td.k-state-active .k-link{box-shadow:none}.kit-daterange .k-popup .k-calendar-td.k-range-start,.kit-daterange .k-popup .k-calendar-td.k-range-end{background:none}.kit-daterange .k-popup .k-calendar-td.k-range-start.k-today .k-link,.kit-daterange .k-popup .k-calendar-td.k-range-end.k-today .k-link{color:#fff}.kit-daterange .k-popup .k-calendar-td.k-range-start .k-link,.kit-daterange .k-popup .k-calendar-td.k-range-end .k-link{color:#fff;border:1px solid #dfdfdf;border-radius:50%;background:#56a2f7}.kit-daterange .k-popup .k-calendar-td.k-range-mid{background:#aad0fb}.kit-daterange .k-popup .k-calendar-td.k-today .k-link{color:#56a2f7}.kit-daterange .k-popup .k-calendar-td.k-today.k-focus .k-link{box-shadow:none}.kit-daterange .k-popup .k-calendar-td.k-other-month .k-link{color:#a9a8a8}.kit-daterange .k-popup .k-link{display:flex;align-items:center;justify-content:center;margin:0;padding:0;width:100%;height:100%}.kit-daterange .k-popup .k-calendar-view{padding:0;gap:0}.kit-daterange .k-popup .k-calendar-content{padding:0 10px 10px}.kit-daterange .k-popup .k-calendar-yearview .k-calendar-td,.kit-daterange .k-popup .k-calendar-decadeview .k-calendar-td,.kit-daterange .k-popup .k-calendar-centuryview .k-calendar-td{width:76px;height:76px}.kit-daterange .k-popup .k-range-split-start:after,.kit-daterange .k-popup .k-range-split-end:after{background-image:none}\n"] }]
2559
+ args: [{ selector: 'kit-daterange', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-daterange\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"!isValid\"\n [ngClass]=\"[iconPosition, type]\">\n <button #anchor\n class=\"daterange-button\"\n [disabled]=\"disabled\"\n (click)=\"openCalendarPopup()\">\n <div class=\"button-text\">{{ label }}</div>\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n <kendo-daterange class=\"daterange-wrapper\">\n <div class=\"daterange-input-wrapper\">\n @if (startLabel) {\n <kit-input-label class=\"label\"\n [text]=\"startLabel\"\n [for]=\"startInput\"\n ></kit-input-label>\n }\n <div class=\"daterange-input\">\n <kendo-dateinput #startInput\n kendoDateRangeStartInput\n [placeholder]=\"startPlaceholder\"\n [format]=\"format\"\n [value]=\"startDateControl.value || defaultStartDate\"\n [min]=\"min\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onStartDateChange($event)\"\n ></kendo-dateinput>\n <button class=\"daterange-input-button\"\n (click)=\"openCalendarPopup()\">\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n </div>\n <div class=\"daterange-input-wrapper\">\n @if (endLabel) {\n <kit-input-label class=\"label\"\n [text]=\"endLabel\"\n [for]=\"endInput\"\n ></kit-input-label>\n }\n <div class=\"daterange-input\">\n <kendo-dateinput #endInput\n kendoDateRangeEndInput\n [placeholder]=\"endPlaceholder\"\n [format]=\"format\"\n [value]=\"endDateControl.value || defaultEndDate\"\n [max]=\"max\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onEndDateChange($event)\"\n ></kendo-dateinput>\n <button class=\"daterange-input-button\"\n (click)=\"openCalendarPopup()\">\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n </div>\n <kendo-daterange-popup *ngIf=\"type === KitDaterangeType.DEFAULT\"\n #popup appendTo=\"component\"\n (close)=\"onClose()\"></kendo-daterange-popup>\n <kendo-daterange-popup *ngIf=\"type === KitDaterangeType.BUTTON\"\n #popup appendTo=\"component\"\n [anchor]=\"$any(anchor)\"\n (close)=\"onClose()\"></kendo-daterange-popup>\n </kendo-daterange>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-daterange.button .daterange-button{display:flex}.kit-daterange.button .daterange-input-wrapper{display:none}.kit-daterange.invalid .daterange-button{border-color:#ef3e42;background-color:#f8e0e0}.kit-daterange.invalid .daterange-button .button-text{color:#27282a}.kit-daterange.invalid .k-input-inner{color:#27282a;border-color:#ef3e42;background-color:#f8e0e0}.kit-daterange.disabled .daterange-button{border-color:#c1c7d0;background-color:#f3f4f6;cursor:default}.kit-daterange.disabled .daterange-button .button-text{color:#9a9fa6}.kit-daterange.disabled .daterange-button .button-icon{stroke:#c1c7d0}.kit-daterange.disabled .k-input-inner{color:#9a9fa6;border-color:#c1c7d0;background-color:#f3f4f6}.kit-daterange.disabled .daterange-input-button .button-icon{stroke:#c1c7d0}.kit-daterange.left .daterange-input-button{left:0;right:initial}.kit-daterange.left .k-input-inner{padding:4px 8px 4px 28px}.kit-daterange.left .daterange-button{flex-direction:row-reverse}.kit-daterange .daterange-button{display:none;align-items:center;padding:8px;width:100%;height:34px;gap:8px;border-radius:4px;border:1px solid #efefef;background:#fff;cursor:pointer}.kit-daterange .daterange-button .button-text{flex-grow:1;color:#27282a;font-size:13px;text-align:left}.kit-daterange .daterange-button .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:#002a3a}.kit-daterange .daterange-wrapper{display:flex;gap:8px}.kit-daterange .label{display:block;margin-bottom:4px}.kit-daterange .daterange-input{display:flex;align-items:center;position:relative}.kit-daterange .daterange-input-button{position:absolute;right:0;padding:0 8px;border:none;background:none;cursor:pointer;z-index:1}.kit-daterange .daterange-input-button .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:#002a3a}.kit-daterange .kit-daterange-default{display:flex}.kit-daterange .k-dateinput{border:none;border-radius:0;background:none}.kit-daterange .k-dateinput.k-focus{box-shadow:none}.kit-daterange .k-dateinput.k-focus .k-input-inner{border-color:#00b0ad}.kit-daterange .k-input-inner{padding:4px 28px 4px 8px;width:100%;height:34px;font-size:13px;font-weight:400;color:#002a3a;border-radius:4px;background-color:#fff;border:1px solid #efefef}.kit-daterange .k-input-inner::placeholder{color:#74777d}.kit-daterange .k-input-inner::selection{color:#fff;background:#00b0ad}.kit-daterange .k-popup{border:1px solid #efefef;box-shadow:none}.kit-daterange .k-popup .k-calendar-header{padding:6px;font-size:14px;font-weight:500}.kit-daterange .k-popup .k-calendar-title{padding:0;color:#000;font-weight:500;line-height:1.26}.kit-daterange .k-popup .k-button{padding:0}.kit-daterange .k-popup .k-button:hover:before{background:none}.kit-daterange .k-popup .k-button-icon{padding:0;width:16px;height:16px;color:#002a3a}.kit-daterange .k-popup .k-prev-view .k-icon:before,.kit-daterange .k-popup .k-next-view .k-icon:before{position:absolute}.kit-daterange .k-popup .k-prev-view .k-icon:before{content:\"\\e016\"}.kit-daterange .k-popup .k-next-view .k-icon:before{content:\"\\e014\"}.kit-daterange .k-popup .k-calendar-nav-today{display:flex;align-items:center;padding:0 6px;color:#56a2f7}.kit-daterange .k-popup .k-calendar-nav-today:hover{color:#56a2f7}.kit-daterange .k-popup .k-calendar-table{padding:0 10px 10px}.kit-daterange .k-popup .k-calendar-tr{display:flex}.kit-daterange .k-popup .k-calendar-th,.kit-daterange .k-popup .k-calendar-td{display:flex;padding:0;width:40px;height:40px;color:#000;font-weight:500;font-size:13px;line-height:1;border-radius:0;box-sizing:border-box}.kit-daterange .k-popup .k-calendar-th{align-items:center;justify-content:center;text-transform:capitalize}.kit-daterange .k-popup .k-calendar-td{border:1px solid #dfdfdf}.kit-daterange .k-popup .k-calendar-td:hover .k-link{color:#56a2f7;background:#fff}.kit-daterange .k-popup .k-calendar-td.k-state-focused .k-link,.kit-daterange .k-popup .k-calendar-td.k-state-active .k-link{box-shadow:none}.kit-daterange .k-popup .k-calendar-td.k-range-start,.kit-daterange .k-popup .k-calendar-td.k-range-end{background:none}.kit-daterange .k-popup .k-calendar-td.k-range-start.k-today .k-link,.kit-daterange .k-popup .k-calendar-td.k-range-end.k-today .k-link{color:#fff}.kit-daterange .k-popup .k-calendar-td.k-range-start .k-link,.kit-daterange .k-popup .k-calendar-td.k-range-end .k-link{color:#fff;border:1px solid #dfdfdf;border-radius:50%;background:#56a2f7}.kit-daterange .k-popup .k-calendar-td.k-range-mid{background:#aad0fb}.kit-daterange .k-popup .k-calendar-td.k-today .k-link{color:#56a2f7}.kit-daterange .k-popup .k-calendar-td.k-today.k-focus .k-link{box-shadow:none}.kit-daterange .k-popup .k-calendar-td.k-other-month .k-link{color:#a9a8a8}.kit-daterange .k-popup .k-link{display:flex;align-items:center;justify-content:center;margin:0;padding:0;width:100%;height:100%}.kit-daterange .k-popup .k-calendar-view{padding:0;gap:0}.kit-daterange .k-popup .k-calendar-content{padding:0 10px 10px}.kit-daterange .k-popup .k-calendar-yearview .k-calendar-td,.kit-daterange .k-popup .k-calendar-decadeview .k-calendar-td,.kit-daterange .k-popup .k-calendar-centuryview .k-calendar-td{width:76px;height:76px}.kit-daterange .k-popup .k-range-split-start:after,.kit-daterange .k-popup .k-range-split-end:after{background-image:none}\n"] }]
2560
2560
  }], propDecorators: { type: [{
2561
2561
  type: Input
2562
2562
  }], label: [{
@@ -2721,11 +2721,11 @@ class KitCtaPanelItemComponent {
2721
2721
  this.clicked.emit();
2722
2722
  }
2723
2723
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitCtaPanelItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2724
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitCtaPanelItemComponent, selector: "kit-cta-panel-item", inputs: { item: "item", type: "type" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-item\">\n <div class=\"panel-item-inner\">\n <kit-svg-icon *ngIf=\"item?.icon\" class=\"panel-item-icon\"\n [icon]=\"item?.icon\"\n ></kit-svg-icon>\n <div class=\"panel-item-text\">\n <div *ngIf=\"item?.title\" class=\"panel-item-title\">\n {{ item?.title }}\n </div>\n\n <ng-container [ngSwitch]=\"type\">\n <ng-container *ngSwitchCase=\"KitCtaPanelItemType.BUTTON\">\n <button *ngIf=\"item?.buttonText\" class=\"panel-item-button\" (click)=\"onButtonClick()\">\n <span class=\"button-label\">\n {{ item?.buttonText }}\n </span>\n <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n </button>\n </ng-container>\n <ng-container *ngSwitchCase=\"KitCtaPanelItemType.LINK\">\n <a *ngIf=\"item?.buttonText\" [routerLink]=\"item?.link\" class=\"panel-item-button\">\n <span class=\"button-label\">\n {{ item?.buttonText }}\n </span>\n <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n </a>\n </ng-container>\n </ng-container>\n\n <div *ngIf=\"item?.copyItem; let copyItem\" class=\"panel-item-copy\">\n <kit-copy-text [textToCopy]=\"copyItem.textToCopy\"\n [tooltipTextBefore]=\"copyItem.tooltipTextBefore\"\n [tooltipTextAfter]=\"copyItem.tooltipTextAfter\"\n ></kit-copy-text>\n </div>\n </div>\n </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-cta-panel-item{padding:15px 20px;background:#fff}.kit-cta-panel-item .panel-item-inner{display:flex;padding-bottom:24px;border-bottom:6px solid #efefef}.kit-cta-panel-item .panel-item-icon{margin-right:20px;width:24px;height:24px;stroke:#a9a8a8;fill:none;flex-shrink:0}.kit-cta-panel-item .panel-item-icon .order-icon,.kit-cta-panel-item .panel-item-icon .reset-icon{stroke:none;fill:#a9a8a8}.kit-cta-panel-item .panel-item-title{margin-bottom:8px;color:#002a3a;font-size:14px}.kit-cta-panel-item .panel-item-button{display:flex;align-items:center;padding:0;color:#56a2f7;font-size:14px;font-weight:500;font-family:inherit;border:none;background:none;cursor:pointer;text-decoration:none}.kit-cta-panel-item .panel-item-button:hover{text-decoration:underline}.kit-cta-panel-item .button-label{margin-right:6px}.kit-cta-panel-item .button-icon{width:16px;height:16px;stroke:#56a2f7;fill:none}.kit-cta-panel-item .panel-item-copy{margin-top:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: KitCopyTextComponent, selector: "kit-copy-text", inputs: ["textToCopy", "tooltipTextBefore", "tooltipTextAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2724
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitCtaPanelItemComponent, selector: "kit-cta-panel-item", inputs: { item: "item", type: "type" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-item\">\n <div class=\"panel-item-inner\">\n <kit-svg-icon *ngIf=\"item?.icon\" class=\"panel-item-icon\"\n [icon]=\"item?.icon\"\n ></kit-svg-icon>\n <div class=\"panel-item-text\">\n <div *ngIf=\"item?.title\" class=\"panel-item-title\">\n {{ item?.title }}\n </div>\n\n <ng-container [ngSwitch]=\"type\">\n <ng-container *ngSwitchCase=\"KitCtaPanelItemType.BUTTON\">\n <button *ngIf=\"item?.buttonText\" class=\"panel-item-button\" (click)=\"onButtonClick()\">\n <span class=\"button-label\">\n {{ item?.buttonText }}\n </span>\n <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n </button>\n </ng-container>\n <ng-container *ngSwitchCase=\"KitCtaPanelItemType.LINK\">\n <a *ngIf=\"item?.buttonText\" [routerLink]=\"item?.link\" class=\"panel-item-button\">\n <span class=\"button-label\">\n {{ item?.buttonText }}\n </span>\n <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n </a>\n </ng-container>\n </ng-container>\n\n <div *ngIf=\"item?.copyItem; let copyItem\" class=\"panel-item-copy\">\n <kit-copy-text [textToCopy]=\"copyItem.textToCopy\"\n [tooltipTextBefore]=\"copyItem.tooltipTextBefore\"\n [tooltipTextAfter]=\"copyItem.tooltipTextAfter\"\n ></kit-copy-text>\n </div>\n </div>\n </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-cta-panel-item{padding:15px 20px;background:#fff}.kit-cta-panel-item .panel-item-inner{display:flex;padding-bottom:24px;border-bottom:6px solid #efefef}.kit-cta-panel-item .panel-item-icon{margin-right:20px;width:24px;height:24px;stroke:#a9a8a8;fill:none;flex-shrink:0}.kit-cta-panel-item .panel-item-icon .order-icon,.kit-cta-panel-item .panel-item-icon .reset-icon{stroke:none;fill:#a9a8a8}.kit-cta-panel-item .panel-item-title{margin-bottom:8px;color:#002a3a;font-size:14px}.kit-cta-panel-item .panel-item-button{display:flex;align-items:center;padding:0;color:#56a2f7;font-size:14px;font-weight:500;font-family:inherit;border:none;background:none;cursor:pointer;text-decoration:none}.kit-cta-panel-item .panel-item-button:hover{text-decoration:underline}.kit-cta-panel-item .button-label{margin-right:6px}.kit-cta-panel-item .button-icon{width:16px;height:16px;stroke:#56a2f7;fill:none}.kit-cta-panel-item .panel-item-copy{margin-top:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: KitCopyTextComponent, selector: "kit-copy-text", inputs: ["textToCopy", "tooltipTextBefore", "tooltipTextAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2725
2725
  }
2726
2726
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitCtaPanelItemComponent, decorators: [{
2727
2727
  type: Component,
2728
- args: [{ selector: 'kit-cta-panel-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-cta-panel-item\">\n <div class=\"panel-item-inner\">\n <kit-svg-icon *ngIf=\"item?.icon\" class=\"panel-item-icon\"\n [icon]=\"item?.icon\"\n ></kit-svg-icon>\n <div class=\"panel-item-text\">\n <div *ngIf=\"item?.title\" class=\"panel-item-title\">\n {{ item?.title }}\n </div>\n\n <ng-container [ngSwitch]=\"type\">\n <ng-container *ngSwitchCase=\"KitCtaPanelItemType.BUTTON\">\n <button *ngIf=\"item?.buttonText\" class=\"panel-item-button\" (click)=\"onButtonClick()\">\n <span class=\"button-label\">\n {{ item?.buttonText }}\n </span>\n <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n </button>\n </ng-container>\n <ng-container *ngSwitchCase=\"KitCtaPanelItemType.LINK\">\n <a *ngIf=\"item?.buttonText\" [routerLink]=\"item?.link\" class=\"panel-item-button\">\n <span class=\"button-label\">\n {{ item?.buttonText }}\n </span>\n <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n </a>\n </ng-container>\n </ng-container>\n\n <div *ngIf=\"item?.copyItem; let copyItem\" class=\"panel-item-copy\">\n <kit-copy-text [textToCopy]=\"copyItem.textToCopy\"\n [tooltipTextBefore]=\"copyItem.tooltipTextBefore\"\n [tooltipTextAfter]=\"copyItem.tooltipTextAfter\"\n ></kit-copy-text>\n </div>\n </div>\n </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-cta-panel-item{padding:15px 20px;background:#fff}.kit-cta-panel-item .panel-item-inner{display:flex;padding-bottom:24px;border-bottom:6px solid #efefef}.kit-cta-panel-item .panel-item-icon{margin-right:20px;width:24px;height:24px;stroke:#a9a8a8;fill:none;flex-shrink:0}.kit-cta-panel-item .panel-item-icon .order-icon,.kit-cta-panel-item .panel-item-icon .reset-icon{stroke:none;fill:#a9a8a8}.kit-cta-panel-item .panel-item-title{margin-bottom:8px;color:#002a3a;font-size:14px}.kit-cta-panel-item .panel-item-button{display:flex;align-items:center;padding:0;color:#56a2f7;font-size:14px;font-weight:500;font-family:inherit;border:none;background:none;cursor:pointer;text-decoration:none}.kit-cta-panel-item .panel-item-button:hover{text-decoration:underline}.kit-cta-panel-item .button-label{margin-right:6px}.kit-cta-panel-item .button-icon{width:16px;height:16px;stroke:#56a2f7;fill:none}.kit-cta-panel-item .panel-item-copy{margin-top:8px}\n"] }]
2728
+ args: [{ selector: 'kit-cta-panel-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-cta-panel-item\">\n <div class=\"panel-item-inner\">\n <kit-svg-icon *ngIf=\"item?.icon\" class=\"panel-item-icon\"\n [icon]=\"item?.icon\"\n ></kit-svg-icon>\n <div class=\"panel-item-text\">\n <div *ngIf=\"item?.title\" class=\"panel-item-title\">\n {{ item?.title }}\n </div>\n\n <ng-container [ngSwitch]=\"type\">\n <ng-container *ngSwitchCase=\"KitCtaPanelItemType.BUTTON\">\n <button *ngIf=\"item?.buttonText\" class=\"panel-item-button\" (click)=\"onButtonClick()\">\n <span class=\"button-label\">\n {{ item?.buttonText }}\n </span>\n <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n </button>\n </ng-container>\n <ng-container *ngSwitchCase=\"KitCtaPanelItemType.LINK\">\n <a *ngIf=\"item?.buttonText\" [routerLink]=\"item?.link\" class=\"panel-item-button\">\n <span class=\"button-label\">\n {{ item?.buttonText }}\n </span>\n <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n </a>\n </ng-container>\n </ng-container>\n\n <div *ngIf=\"item?.copyItem; let copyItem\" class=\"panel-item-copy\">\n <kit-copy-text [textToCopy]=\"copyItem.textToCopy\"\n [tooltipTextBefore]=\"copyItem.tooltipTextBefore\"\n [tooltipTextAfter]=\"copyItem.tooltipTextAfter\"\n ></kit-copy-text>\n </div>\n </div>\n </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-cta-panel-item{padding:15px 20px;background:#fff}.kit-cta-panel-item .panel-item-inner{display:flex;padding-bottom:24px;border-bottom:6px solid #efefef}.kit-cta-panel-item .panel-item-icon{margin-right:20px;width:24px;height:24px;stroke:#a9a8a8;fill:none;flex-shrink:0}.kit-cta-panel-item .panel-item-icon .order-icon,.kit-cta-panel-item .panel-item-icon .reset-icon{stroke:none;fill:#a9a8a8}.kit-cta-panel-item .panel-item-title{margin-bottom:8px;color:#002a3a;font-size:14px}.kit-cta-panel-item .panel-item-button{display:flex;align-items:center;padding:0;color:#56a2f7;font-size:14px;font-weight:500;font-family:inherit;border:none;background:none;cursor:pointer;text-decoration:none}.kit-cta-panel-item .panel-item-button:hover{text-decoration:underline}.kit-cta-panel-item .button-label{margin-right:6px}.kit-cta-panel-item .button-icon{width:16px;height:16px;stroke:#56a2f7;fill:none}.kit-cta-panel-item .panel-item-copy{margin-top:8px}\n"] }]
2729
2729
  }], propDecorators: { item: [{
2730
2730
  type: Input
2731
2731
  }], type: [{
@@ -2879,11 +2879,11 @@ class KitCtaPanelConfirmationComponent {
2879
2879
  this.confirmClicked.emit(this.form.value);
2880
2880
  }
2881
2881
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitCtaPanelConfirmationComponent, deps: [{ token: i1$4.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
2882
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitCtaPanelConfirmationComponent, selector: "kit-cta-panel-confirmation", inputs: { data: "data", confirmButtonDisabled: "confirmButtonDisabled", dropdownListHeight: "dropdownListHeight", quitText: "quitText", confirmText: "confirmText" }, outputs: { quitClicked: "quitClicked", confirmClicked: "confirmClicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-confirmation\">\n <div class=\"confirmation-head\">\n <kit-svg-icon *ngIf=\"data?.icon\" class=\"head-icon\"\n [icon]=\"data?.icon\"\n ></kit-svg-icon>\n <div class=\"head-text\">\n <div class=\"head-title\">{{ data?.title }}</div>\n <div *ngIf=\"data?.description\" class=\"head-description\">\n {{ data?.description }}\n </div>\n </div>\n </div>\n <div class=\"confirmation-main\">\n <form [formGroup]=\"form\" class=\"confirmation-main-form\">\n <kit-dropdown *ngIf=\"data?.dropdownItems\"\n formControlName=\"reason\"\n [defaultItem]=\"data?.defaultDropdownItem\"\n [label]=\"data?.dropdownLabel\"\n [items]=\"data?.dropdownItems\"\n [listHeight]=\"dropdownListHeight\"\n ></kit-dropdown>\n\n <kit-checkbox *ngIf=\"data?.checkboxLabel\"\n formControlName=\"checkbox\"\n [label]=\"data?.checkboxLabel\"\n ></kit-checkbox>\n </form>\n </div>\n <kit-cta-panel-action [disabled]=\"data?.dropdownItems && form.invalid\"\n [quitText]=\"quitText\"\n [confirmText]=\"confirmText\"\n (quitClicked)=\"quitClicked.emit()\"\n (confirmClicked)=\"onConfirmButtonClick()\"\n ></kit-cta-panel-action>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-cta-panel-confirmation{padding:15px 20px;border:2px solid #00b0ad;background:#f8f9fe;line-height:1.26}.kit-cta-panel-confirmation .confirmation-head{display:flex;margin-bottom:24px}.kit-cta-panel-confirmation .head-icon{width:24px;height:24px;margin-right:20px;flex-shrink:0;stroke:#00b0ad;fill:none}.kit-cta-panel-confirmation .head-icon .reset-icon{stroke:none;fill:#00b0ad}.kit-cta-panel-confirmation .head-title{color:#002a3a;font-weight:700}.kit-cta-panel-confirmation .head-description{margin-top:24px;color:#000}.kit-cta-panel-confirmation .confirmation-main{margin-bottom:24px}.kit-cta-panel-confirmation .confirmation-main-form{display:flex;flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "state", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon"], outputs: ["selected"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: KitCtaPanelActionComponent, selector: "kit-cta-panel-action", inputs: ["disabled", "confirmText", "quitText"], outputs: ["quitClicked", "confirmClicked"] }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "defaultChecked", "readonly", "state", "messageIcon", "messageText"], outputs: ["changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2882
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitCtaPanelConfirmationComponent, selector: "kit-cta-panel-confirmation", inputs: { data: "data", confirmButtonDisabled: "confirmButtonDisabled", dropdownListHeight: "dropdownListHeight", quitText: "quitText", confirmText: "confirmText" }, outputs: { quitClicked: "quitClicked", confirmClicked: "confirmClicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-confirmation\">\n <div class=\"confirmation-head\">\n <kit-svg-icon *ngIf=\"data?.icon\" class=\"head-icon\"\n [icon]=\"data?.icon\"\n ></kit-svg-icon>\n <div class=\"head-text\">\n <div class=\"head-title\">{{ data?.title }}</div>\n <div *ngIf=\"data?.description\" class=\"head-description\">\n {{ data?.description }}\n </div>\n </div>\n </div>\n <div class=\"confirmation-main\">\n <form [formGroup]=\"form\" class=\"confirmation-main-form\">\n <kit-dropdown *ngIf=\"data?.dropdownItems\"\n formControlName=\"reason\"\n [defaultItem]=\"data?.defaultDropdownItem\"\n [label]=\"data?.dropdownLabel\"\n [items]=\"data?.dropdownItems\"\n [listHeight]=\"dropdownListHeight\"\n ></kit-dropdown>\n\n <kit-checkbox *ngIf=\"data?.checkboxLabel\"\n formControlName=\"checkbox\"\n [label]=\"data?.checkboxLabel\"\n ></kit-checkbox>\n </form>\n </div>\n <kit-cta-panel-action [disabled]=\"data?.dropdownItems && form.invalid\"\n [quitText]=\"quitText\"\n [confirmText]=\"confirmText\"\n (quitClicked)=\"quitClicked.emit()\"\n (confirmClicked)=\"onConfirmButtonClick()\"\n ></kit-cta-panel-action>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-cta-panel-confirmation{padding:15px 20px;border:2px solid #00b0ad;background:#f8f9fe;line-height:1.26}.kit-cta-panel-confirmation .confirmation-head{display:flex;margin-bottom:24px}.kit-cta-panel-confirmation .head-icon{width:24px;height:24px;margin-right:20px;flex-shrink:0;stroke:#00b0ad;fill:none}.kit-cta-panel-confirmation .head-icon .reset-icon{stroke:none;fill:#00b0ad}.kit-cta-panel-confirmation .head-title{color:#002a3a;font-weight:700}.kit-cta-panel-confirmation .head-description{margin-top:24px;color:#000}.kit-cta-panel-confirmation .confirmation-main{margin-bottom:24px}.kit-cta-panel-confirmation .confirmation-main-form{display:flex;flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "state", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon"], outputs: ["selected"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: KitCtaPanelActionComponent, selector: "kit-cta-panel-action", inputs: ["disabled", "confirmText", "quitText"], outputs: ["quitClicked", "confirmClicked"] }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "defaultChecked", "readonly", "state", "messageIcon", "messageText"], outputs: ["changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2883
2883
  }
2884
2884
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitCtaPanelConfirmationComponent, decorators: [{
2885
2885
  type: Component,
2886
- args: [{ selector: 'kit-cta-panel-confirmation', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-cta-panel-confirmation\">\n <div class=\"confirmation-head\">\n <kit-svg-icon *ngIf=\"data?.icon\" class=\"head-icon\"\n [icon]=\"data?.icon\"\n ></kit-svg-icon>\n <div class=\"head-text\">\n <div class=\"head-title\">{{ data?.title }}</div>\n <div *ngIf=\"data?.description\" class=\"head-description\">\n {{ data?.description }}\n </div>\n </div>\n </div>\n <div class=\"confirmation-main\">\n <form [formGroup]=\"form\" class=\"confirmation-main-form\">\n <kit-dropdown *ngIf=\"data?.dropdownItems\"\n formControlName=\"reason\"\n [defaultItem]=\"data?.defaultDropdownItem\"\n [label]=\"data?.dropdownLabel\"\n [items]=\"data?.dropdownItems\"\n [listHeight]=\"dropdownListHeight\"\n ></kit-dropdown>\n\n <kit-checkbox *ngIf=\"data?.checkboxLabel\"\n formControlName=\"checkbox\"\n [label]=\"data?.checkboxLabel\"\n ></kit-checkbox>\n </form>\n </div>\n <kit-cta-panel-action [disabled]=\"data?.dropdownItems && form.invalid\"\n [quitText]=\"quitText\"\n [confirmText]=\"confirmText\"\n (quitClicked)=\"quitClicked.emit()\"\n (confirmClicked)=\"onConfirmButtonClick()\"\n ></kit-cta-panel-action>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-cta-panel-confirmation{padding:15px 20px;border:2px solid #00b0ad;background:#f8f9fe;line-height:1.26}.kit-cta-panel-confirmation .confirmation-head{display:flex;margin-bottom:24px}.kit-cta-panel-confirmation .head-icon{width:24px;height:24px;margin-right:20px;flex-shrink:0;stroke:#00b0ad;fill:none}.kit-cta-panel-confirmation .head-icon .reset-icon{stroke:none;fill:#00b0ad}.kit-cta-panel-confirmation .head-title{color:#002a3a;font-weight:700}.kit-cta-panel-confirmation .head-description{margin-top:24px;color:#000}.kit-cta-panel-confirmation .confirmation-main{margin-bottom:24px}.kit-cta-panel-confirmation .confirmation-main-form{display:flex;flex-direction:column;gap:8px}\n"] }]
2886
+ args: [{ selector: 'kit-cta-panel-confirmation', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-cta-panel-confirmation\">\n <div class=\"confirmation-head\">\n <kit-svg-icon *ngIf=\"data?.icon\" class=\"head-icon\"\n [icon]=\"data?.icon\"\n ></kit-svg-icon>\n <div class=\"head-text\">\n <div class=\"head-title\">{{ data?.title }}</div>\n <div *ngIf=\"data?.description\" class=\"head-description\">\n {{ data?.description }}\n </div>\n </div>\n </div>\n <div class=\"confirmation-main\">\n <form [formGroup]=\"form\" class=\"confirmation-main-form\">\n <kit-dropdown *ngIf=\"data?.dropdownItems\"\n formControlName=\"reason\"\n [defaultItem]=\"data?.defaultDropdownItem\"\n [label]=\"data?.dropdownLabel\"\n [items]=\"data?.dropdownItems\"\n [listHeight]=\"dropdownListHeight\"\n ></kit-dropdown>\n\n <kit-checkbox *ngIf=\"data?.checkboxLabel\"\n formControlName=\"checkbox\"\n [label]=\"data?.checkboxLabel\"\n ></kit-checkbox>\n </form>\n </div>\n <kit-cta-panel-action [disabled]=\"data?.dropdownItems && form.invalid\"\n [quitText]=\"quitText\"\n [confirmText]=\"confirmText\"\n (quitClicked)=\"quitClicked.emit()\"\n (confirmClicked)=\"onConfirmButtonClick()\"\n ></kit-cta-panel-action>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-cta-panel-confirmation{padding:15px 20px;border:2px solid #00b0ad;background:#f8f9fe;line-height:1.26}.kit-cta-panel-confirmation .confirmation-head{display:flex;margin-bottom:24px}.kit-cta-panel-confirmation .head-icon{width:24px;height:24px;margin-right:20px;flex-shrink:0;stroke:#00b0ad;fill:none}.kit-cta-panel-confirmation .head-icon .reset-icon{stroke:none;fill:#00b0ad}.kit-cta-panel-confirmation .head-title{color:#002a3a;font-weight:700}.kit-cta-panel-confirmation .head-description{margin-top:24px;color:#000}.kit-cta-panel-confirmation .confirmation-main{margin-bottom:24px}.kit-cta-panel-confirmation .confirmation-main-form{display:flex;flex-direction:column;gap:8px}\n"] }]
2887
2887
  }], ctorParameters: () => [{ type: i1$4.UntypedFormBuilder }], propDecorators: { data: [{
2888
2888
  type: Input
2889
2889
  }], confirmButtonDisabled: [{
@@ -2953,11 +2953,11 @@ class KitCtaPanelAbstractConfirmationComponent {
2953
2953
  this.confirmClicked = new EventEmitter();
2954
2954
  }
2955
2955
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitCtaPanelAbstractConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2956
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitCtaPanelAbstractConfirmationComponent, selector: "kit-cta-panel-abstract-confirmation", inputs: { confirmButtonDisabled: "confirmButtonDisabled", quitText: "quitText", confirmText: "confirmText" }, outputs: { quitClicked: "quitClicked", confirmClicked: "confirmClicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-confirmation\">\n <ng-content select=\".confirmation-head\"\n ></ng-content>\n <ng-content select=\".confirmation-main\"\n ></ng-content>\n <kit-cta-panel-action [disabled]=\"confirmButtonDisabled\"\n [quitText]=\"quitText\"\n [confirmText]=\"confirmText\"\n (quitClicked)=\"quitClicked.emit()\"\n (confirmClicked)=\"confirmClicked.emit()\"\n ></kit-cta-panel-action>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-cta-panel-confirmation{padding:15px 20px;border:2px solid #00b0ad;background:#f8f9fe;line-height:1.26}.kit-cta-panel-confirmation .confirmation-head{display:flex;margin-bottom:24px}.kit-cta-panel-confirmation .head-icon{width:24px;height:24px;margin-right:20px;flex-shrink:0;stroke:#00b0ad;fill:none}.kit-cta-panel-confirmation .head-icon .reset-icon{stroke:none;fill:#00b0ad}.kit-cta-panel-confirmation .head-title{color:#002a3a;font-weight:700}.kit-cta-panel-confirmation .head-description{margin-top:24px;color:#000}.kit-cta-panel-confirmation .confirmation-main{margin-bottom:24px}.kit-cta-panel-confirmation .confirmation-main-form{display:flex;flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "component", type: KitCtaPanelActionComponent, selector: "kit-cta-panel-action", inputs: ["disabled", "confirmText", "quitText"], outputs: ["quitClicked", "confirmClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2956
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitCtaPanelAbstractConfirmationComponent, selector: "kit-cta-panel-abstract-confirmation", inputs: { confirmButtonDisabled: "confirmButtonDisabled", quitText: "quitText", confirmText: "confirmText" }, outputs: { quitClicked: "quitClicked", confirmClicked: "confirmClicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-confirmation\">\n <ng-content select=\".confirmation-head\"\n ></ng-content>\n <ng-content select=\".confirmation-main\"\n ></ng-content>\n <kit-cta-panel-action [disabled]=\"confirmButtonDisabled\"\n [quitText]=\"quitText\"\n [confirmText]=\"confirmText\"\n (quitClicked)=\"quitClicked.emit()\"\n (confirmClicked)=\"confirmClicked.emit()\"\n ></kit-cta-panel-action>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-cta-panel-confirmation{padding:15px 20px;border:2px solid #00b0ad;background:#f8f9fe;line-height:1.26}.kit-cta-panel-confirmation .confirmation-head{display:flex;margin-bottom:24px}.kit-cta-panel-confirmation .head-icon{width:24px;height:24px;margin-right:20px;flex-shrink:0;stroke:#00b0ad;fill:none}.kit-cta-panel-confirmation .head-icon .reset-icon{stroke:none;fill:#00b0ad}.kit-cta-panel-confirmation .head-title{color:#002a3a;font-weight:700}.kit-cta-panel-confirmation .head-description{margin-top:24px;color:#000}.kit-cta-panel-confirmation .confirmation-main{margin-bottom:24px}.kit-cta-panel-confirmation .confirmation-main-form{display:flex;flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "component", type: KitCtaPanelActionComponent, selector: "kit-cta-panel-action", inputs: ["disabled", "confirmText", "quitText"], outputs: ["quitClicked", "confirmClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2957
2957
  }
2958
2958
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitCtaPanelAbstractConfirmationComponent, decorators: [{
2959
2959
  type: Component,
2960
- args: [{ selector: 'kit-cta-panel-abstract-confirmation', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-cta-panel-confirmation\">\n <ng-content select=\".confirmation-head\"\n ></ng-content>\n <ng-content select=\".confirmation-main\"\n ></ng-content>\n <kit-cta-panel-action [disabled]=\"confirmButtonDisabled\"\n [quitText]=\"quitText\"\n [confirmText]=\"confirmText\"\n (quitClicked)=\"quitClicked.emit()\"\n (confirmClicked)=\"confirmClicked.emit()\"\n ></kit-cta-panel-action>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-cta-panel-confirmation{padding:15px 20px;border:2px solid #00b0ad;background:#f8f9fe;line-height:1.26}.kit-cta-panel-confirmation .confirmation-head{display:flex;margin-bottom:24px}.kit-cta-panel-confirmation .head-icon{width:24px;height:24px;margin-right:20px;flex-shrink:0;stroke:#00b0ad;fill:none}.kit-cta-panel-confirmation .head-icon .reset-icon{stroke:none;fill:#00b0ad}.kit-cta-panel-confirmation .head-title{color:#002a3a;font-weight:700}.kit-cta-panel-confirmation .head-description{margin-top:24px;color:#000}.kit-cta-panel-confirmation .confirmation-main{margin-bottom:24px}.kit-cta-panel-confirmation .confirmation-main-form{display:flex;flex-direction:column;gap:8px}\n"] }]
2960
+ args: [{ selector: 'kit-cta-panel-abstract-confirmation', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-cta-panel-confirmation\">\n <ng-content select=\".confirmation-head\"\n ></ng-content>\n <ng-content select=\".confirmation-main\"\n ></ng-content>\n <kit-cta-panel-action [disabled]=\"confirmButtonDisabled\"\n [quitText]=\"quitText\"\n [confirmText]=\"confirmText\"\n (quitClicked)=\"quitClicked.emit()\"\n (confirmClicked)=\"confirmClicked.emit()\"\n ></kit-cta-panel-action>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-cta-panel-confirmation{padding:15px 20px;border:2px solid #00b0ad;background:#f8f9fe;line-height:1.26}.kit-cta-panel-confirmation .confirmation-head{display:flex;margin-bottom:24px}.kit-cta-panel-confirmation .head-icon{width:24px;height:24px;margin-right:20px;flex-shrink:0;stroke:#00b0ad;fill:none}.kit-cta-panel-confirmation .head-icon .reset-icon{stroke:none;fill:#00b0ad}.kit-cta-panel-confirmation .head-title{color:#002a3a;font-weight:700}.kit-cta-panel-confirmation .head-description{margin-top:24px;color:#000}.kit-cta-panel-confirmation .confirmation-main{margin-bottom:24px}.kit-cta-panel-confirmation .confirmation-main-form{display:flex;flex-direction:column;gap:8px}\n"] }]
2961
2961
  }], propDecorators: { confirmButtonDisabled: [{
2962
2962
  type: Input
2963
2963
  }], quitText: [{
@@ -3685,9 +3685,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
3685
3685
  }]
3686
3686
  }] });
3687
3687
 
3688
- class KitNavigationMenuComponent {
3689
- constructor(router) {
3688
+ const expandCollapseAnimation = trigger('expandCollapseAnimation', [
3689
+ state('void', style({
3690
+ height: '0',
3691
+ overflow: 'hidden',
3692
+ })),
3693
+ transition(':enter', [
3694
+ animate('0.2s ease-in-out', style({
3695
+ height: '*',
3696
+ overflow: 'hidden',
3697
+ })),
3698
+ ]),
3699
+ transition(':leave', [
3700
+ animate('0.2s ease-in-out', style({
3701
+ height: '0',
3702
+ overflow: 'hidden',
3703
+ })),
3704
+ ]),
3705
+ ]);
3706
+
3707
+ class KitNavigationMenuBaseComponent {
3708
+ constructor() {
3709
+ /**
3710
+ * Defines whether menu will be collapsed
3711
+ */
3712
+ this.collapsed = false;
3713
+ this.KitSvgIcon = KitSvgIcon;
3714
+ }
3715
+ collapseAll(items) {
3716
+ items.forEach(item => {
3717
+ item.expanded = false;
3718
+ if (item.items?.length) {
3719
+ this.collapseAll(item.items);
3720
+ }
3721
+ });
3722
+ }
3723
+ handleClick(item) {
3724
+ if (!this.collapsed) {
3725
+ item.expanded = !item.expanded;
3726
+ }
3727
+ }
3728
+ handleHover(item, isHovering) {
3729
+ if (this.collapsed) {
3730
+ item.expanded = isHovering;
3731
+ }
3732
+ }
3733
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3734
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitNavigationMenuBaseComponent, selector: "ng-component", inputs: { collapsed: "collapsed" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3735
+ }
3736
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuBaseComponent, decorators: [{
3737
+ type: Component,
3738
+ args: [{
3739
+ template: '',
3740
+ changeDetection: ChangeDetectionStrategy.OnPush,
3741
+ }]
3742
+ }], propDecorators: { collapsed: [{
3743
+ type: Input
3744
+ }] } });
3745
+
3746
+ class KitNavigationMenuSubmenuComponent extends KitNavigationMenuBaseComponent {
3747
+ constructor() {
3748
+ super(...arguments);
3749
+ this.item = null;
3750
+ }
3751
+ collapseMenu(item) {
3752
+ if (this.collapsed && item) {
3753
+ item.expanded = false;
3754
+ if (item.items) {
3755
+ this.collapseAll(item.items);
3756
+ }
3757
+ }
3758
+ }
3759
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuSubmenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
3760
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitNavigationMenuSubmenuComponent, selector: "kit-navigation-menu-submenu", inputs: { item: "item" }, usesInheritance: true, ngImport: i0, template: "<div class=\"kit-navigation-menu-submenu\"\n [class.collapsed]=\"collapsed\">\n <div class=\"nav-list nav-list-child\">\n @for (child of item?.items; track child) {\n @if (!child.items?.length) {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"child.link\"\n (click)=\"collapseMenu(item)\">\n {{ child.title }}\n @if (collapsed) {\n <kit-svg-icon class=\"nav-link-active\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </a>\n }\n\n @if (child.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"child.expanded\"\n (mouseenter)=\"handleHover(child, true)\"\n (mouseleave)=\"handleHover(child, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(child)\">\n {{ child.title }}\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (child?.expanded) {\n <div @expandCollapseAnimation\n class=\"nav-list nav-list-sub-child\">\n @for (subChild of child.items; track subChild) {\n <a class=\"nav-link child-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"subChild.link\"\n (click)=\"collapseMenu(item)\">\n {{ subChild.title }}\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n @if (collapsed) {\n <kit-svg-icon class=\"nav-link-active\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </a>\n }\n </div>\n }\n </div>\n }\n }\n </div>\n</div>\n", styles: [".kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:20px;margin-top:20px}.kit-navigation-menu-submenu .nav-item{position:relative}.kit-navigation-menu-submenu .nav-item.expanded>.nav-link .nav-link-toggle{transform:rotate(180deg)}.kit-navigation-menu-submenu .nav-link{display:flex;align-items:center;gap:8px;padding:10px 24px;color:var(--ui-kit-color-white);font-size:14px;font-weight:400;border-radius:8px;text-decoration:none;line-height:20px;cursor:pointer}.kit-navigation-menu-submenu .nav-link:hover{color:var(--ui-kit-color-hover)}.kit-navigation-menu-submenu .nav-link:hover .nav-link-toggle{stroke:var(--ui-kit-color-hover)}.kit-navigation-menu-submenu .nav-link-toggle{width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.active{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.active .nav-link-toggle{stroke:var(--ui-kit-color-white)}.kit-navigation-menu-submenu .nav-link.active .nav-link-active{display:block}.kit-navigation-menu-submenu .nav-link-active{display:none;margin-left:auto;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .child-link{padding:10px 6px 10px 36px;color:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .child-link .nav-link-toggle{stroke:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu.collapsed .nav-list{position:absolute;left:100%;top:0;gap:0;margin:0;padding:4px;width:220px;line-height:20px;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d;box-sizing:border-box;z-index:5}.kit-navigation-menu-submenu.collapsed .nav-list:before{content:\"\";position:absolute;top:0;height:100%;background:none}.kit-navigation-menu-submenu.collapsed .nav-list-child{margin-left:14px}.kit-navigation-menu-submenu.collapsed .nav-list-child:before{width:14px;left:-14px}.kit-navigation-menu-submenu.collapsed .nav-list-sub-child{top:-4px;margin-left:4px}.kit-navigation-menu-submenu.collapsed .nav-list-sub-child:before{width:4px;left:-4px}.kit-navigation-menu-submenu.collapsed .nav-list-sub-child .nav-link-toggle{display:none}.kit-navigation-menu-submenu.collapsed .nav-item.expanded>.nav-link{background:var(--ui-kit-color-grey-13)}.kit-navigation-menu-submenu.collapsed .nav-item.expanded>.nav-link .nav-link-toggle{transform:rotate(-90deg)}.kit-navigation-menu-submenu.collapsed .nav-link{padding:6px 12px;color:var(--ui-kit-color-grey-10)}.kit-navigation-menu-submenu.collapsed .nav-link-toggle{margin-left:auto;width:18px;height:18px;transform:rotate(-90deg)}.kit-navigation-menu-submenu.collapsed .nav-link:hover,.kit-navigation-menu-submenu.collapsed .nav-link.active{background:var(--ui-kit-color-grey-13)}\n"], dependencies: [{ kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], animations: [
3761
+ expandCollapseAnimation,
3762
+ ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3763
+ }
3764
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuSubmenuComponent, decorators: [{
3765
+ type: Component,
3766
+ args: [{ selector: 'kit-navigation-menu-submenu', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
3767
+ expandCollapseAnimation,
3768
+ ], template: "<div class=\"kit-navigation-menu-submenu\"\n [class.collapsed]=\"collapsed\">\n <div class=\"nav-list nav-list-child\">\n @for (child of item?.items; track child) {\n @if (!child.items?.length) {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"child.link\"\n (click)=\"collapseMenu(item)\">\n {{ child.title }}\n @if (collapsed) {\n <kit-svg-icon class=\"nav-link-active\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </a>\n }\n\n @if (child.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"child.expanded\"\n (mouseenter)=\"handleHover(child, true)\"\n (mouseleave)=\"handleHover(child, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(child)\">\n {{ child.title }}\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (child?.expanded) {\n <div @expandCollapseAnimation\n class=\"nav-list nav-list-sub-child\">\n @for (subChild of child.items; track subChild) {\n <a class=\"nav-link child-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"subChild.link\"\n (click)=\"collapseMenu(item)\">\n {{ subChild.title }}\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n @if (collapsed) {\n <kit-svg-icon class=\"nav-link-active\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </a>\n }\n </div>\n }\n </div>\n }\n }\n </div>\n</div>\n", styles: [".kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:20px;margin-top:20px}.kit-navigation-menu-submenu .nav-item{position:relative}.kit-navigation-menu-submenu .nav-item.expanded>.nav-link .nav-link-toggle{transform:rotate(180deg)}.kit-navigation-menu-submenu .nav-link{display:flex;align-items:center;gap:8px;padding:10px 24px;color:var(--ui-kit-color-white);font-size:14px;font-weight:400;border-radius:8px;text-decoration:none;line-height:20px;cursor:pointer}.kit-navigation-menu-submenu .nav-link:hover{color:var(--ui-kit-color-hover)}.kit-navigation-menu-submenu .nav-link:hover .nav-link-toggle{stroke:var(--ui-kit-color-hover)}.kit-navigation-menu-submenu .nav-link-toggle{width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.active{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.active .nav-link-toggle{stroke:var(--ui-kit-color-white)}.kit-navigation-menu-submenu .nav-link.active .nav-link-active{display:block}.kit-navigation-menu-submenu .nav-link-active{display:none;margin-left:auto;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .child-link{padding:10px 6px 10px 36px;color:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .child-link .nav-link-toggle{stroke:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu.collapsed .nav-list{position:absolute;left:100%;top:0;gap:0;margin:0;padding:4px;width:220px;line-height:20px;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d;box-sizing:border-box;z-index:5}.kit-navigation-menu-submenu.collapsed .nav-list:before{content:\"\";position:absolute;top:0;height:100%;background:none}.kit-navigation-menu-submenu.collapsed .nav-list-child{margin-left:14px}.kit-navigation-menu-submenu.collapsed .nav-list-child:before{width:14px;left:-14px}.kit-navigation-menu-submenu.collapsed .nav-list-sub-child{top:-4px;margin-left:4px}.kit-navigation-menu-submenu.collapsed .nav-list-sub-child:before{width:4px;left:-4px}.kit-navigation-menu-submenu.collapsed .nav-list-sub-child .nav-link-toggle{display:none}.kit-navigation-menu-submenu.collapsed .nav-item.expanded>.nav-link{background:var(--ui-kit-color-grey-13)}.kit-navigation-menu-submenu.collapsed .nav-item.expanded>.nav-link .nav-link-toggle{transform:rotate(-90deg)}.kit-navigation-menu-submenu.collapsed .nav-link{padding:6px 12px;color:var(--ui-kit-color-grey-10)}.kit-navigation-menu-submenu.collapsed .nav-link-toggle{margin-left:auto;width:18px;height:18px;transform:rotate(-90deg)}.kit-navigation-menu-submenu.collapsed .nav-link:hover,.kit-navigation-menu-submenu.collapsed .nav-link.active{background:var(--ui-kit-color-grey-13)}\n"] }]
3769
+ }], propDecorators: { item: [{
3770
+ type: Input
3771
+ }] } });
3772
+
3773
+ class KitNavigationMenuComponent extends KitNavigationMenuBaseComponent {
3774
+ constructor(router, changeDetectorRef) {
3775
+ super();
3690
3776
  this.router = router;
3777
+ this.changeDetectorRef = changeDetectorRef;
3691
3778
  /**
3692
3779
  * An items list which is going to be rendered as menu items
3693
3780
  */
@@ -3696,21 +3783,24 @@ class KitNavigationMenuComponent {
3696
3783
  * Defines whether the component will have an animation when collapsing/expanding the menu
3697
3784
  */
3698
3785
  this.animate = true;
3699
- /**
3700
- * Defines whether menu will be collapsed
3701
- */
3702
- this.collapsed = false;
3703
- this.KitSvgIcon = KitSvgIcon;
3704
- this.PanelBarExpandMode = PanelBarExpandMode;
3786
+ this.KitSvgIconType = KitSvgIconType;
3705
3787
  this.setExpandedStateOnRouterChange();
3706
3788
  }
3707
3789
  ngOnInit() {
3708
3790
  this.setExpandedState(this.items, this.router.url);
3709
3791
  }
3792
+ ngOnChanges(changes) {
3793
+ if (changes.collapsed?.currentValue) {
3794
+ this.collapseAll(this.items);
3795
+ }
3796
+ }
3710
3797
  setExpandedStateOnRouterChange() {
3711
3798
  this.router.events.pipe(filter(event => event instanceof NavigationEnd), takeUntilDestroyed()).subscribe(() => this.setExpandedState(this.items, this.router.url));
3712
3799
  }
3713
3800
  setExpandedState(items, url) {
3801
+ if (this.collapsed) {
3802
+ return;
3803
+ }
3714
3804
  items.forEach(item => {
3715
3805
  item.expanded = !!(item.link && url.startsWith(item.link));
3716
3806
  if (item.items) {
@@ -3718,31 +3808,60 @@ class KitNavigationMenuComponent {
3718
3808
  item.expanded = item.items.some(child => child.expanded);
3719
3809
  }
3720
3810
  });
3811
+ this.changeDetectorRef.markForCheck();
3721
3812
  }
3722
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuComponent, deps: [{ token: i1$6.Router }], target: i0.ɵɵFactoryTarget.Component }); }
3723
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitNavigationMenuComponent, selector: "kit-navigation-menu", inputs: { items: "items", animate: "animate", collapsed: "collapsed" }, ngImport: i0, template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed\">\n <kendo-panelbar [expandMode]=\"PanelBarExpandMode.Single\"\n [animate]=\"animate\">\n @for (item of items; track item) {\n <kendo-panelbar-item class=\"menu-item\"\n routerLinkActive=\"active\"\n [ngClass]=\"item.cssClass\"\n [class.has-children]=\"item.items?.length\"\n [expanded]=\"item.expanded\"\n [routerLink]=\"item.link\">\n <ng-template kendoPanelBarItemTitle>\n <kit-svg-icon class=\"item-icon\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n <span class=\"item-text\">{{ item.title }}</span>\n @if (item.items?.length) {\n <kit-svg-icon class=\"toggle-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n }\n </ng-template>\n\n @for (child of item.items; track child) {\n <kendo-panelbar-item class=\"menu-child-item\"\n routerLinkActive=\"active\"\n [ngClass]=\"child.cssClass\"\n [class.has-children]=\"child.items?.length\"\n [expanded]=\"child.expanded\"\n [routerLink]=\"child.link\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"item-text\">{{ child.title }}</span>\n @if (child.items?.length) {\n <kit-svg-icon class=\"toggle-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n }\n </ng-template>\n\n @for (subChild of child.items; track subChild) {\n <kendo-panelbar-item class=\"menu-link\"\n routerLinkActive=\"active\"\n [ngClass]=\"subChild.cssClass\"\n [routerLink]=\"subChild.link\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"item-text\">{{ subChild.title }}</span>\n <kit-svg-icon class=\"item-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n </ng-template>\n </kendo-panelbar-item>\n }\n </kendo-panelbar-item>\n }\n </kendo-panelbar-item>\n }\n </kendo-panelbar>\n</div>\n\n", styles: [".kit-navigation-menu{width:100%;overflow:hidden;transition:width .3s}.kit-navigation-menu .k-panelbar{display:flex;flex-direction:column;gap:20px;border:none;background:none}.kit-navigation-menu ::ng-deep .k-panelbar-group{display:flex;flex-direction:column;gap:20px;margin-top:20px}.kit-navigation-menu ::ng-deep .k-panelbar-toggle{display:none}.kit-navigation-menu .menu-item{border:none}.kit-navigation-menu .menu-item .item-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);flex-shrink:0}.kit-navigation-menu .menu-item .item-text{color:var(--ui-kit-color-white);font-size:14px;font-weight:400;transition:opacity .3s ease}.kit-navigation-menu .menu-item .toggle-icon{width:16px;height:16px;stroke:var(--ui-kit-color-main);fill:none;flex-shrink:0;transition:rotate .3s ease}.kit-navigation-menu .menu-item.k-expanded ::ng-deep>.k-link{background:var(--ui-kit-color-selected)}.kit-navigation-menu .menu-item.k-expanded ::ng-deep>.k-link .item-icon{fill:var(--ui-kit-color-main)}.kit-navigation-menu .menu-item.k-expanded ::ng-deep>.k-link .toggle-icon{transform:rotate(180deg)}.kit-navigation-menu .menu-item.active:not(.has-children) ::ng-deep>.k-link{background:var(--ui-kit-color-main)}.kit-navigation-menu .menu-item.active:not(.has-children) ::ng-deep>.k-link .item-text{color:var(--ui-kit-color-white)}.kit-navigation-menu .menu-item.active:not(.has-children) ::ng-deep>.k-link .item-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu .menu-item ::ng-deep .k-link{padding:10px 24px;gap:8px;min-height:40px;color:var(--ui-kit-color-white);border-radius:8px;background:none;cursor:pointer;transition:none}.kit-navigation-menu .menu-item ::ng-deep .k-link.k-focus{box-shadow:none}.kit-navigation-menu .menu-item ::ng-deep .k-link:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-item ::ng-deep .k-link:hover .item-text{color:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-item ::ng-deep .k-link:hover .toggle-icon{stroke:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-child-item.k-expanded ::ng-deep>.k-link{color:var(--ui-kit-color-main)}.kit-navigation-menu .menu-child-item.k-expanded ::ng-deep .toggle-icon{transform:rotate(180deg)}.kit-navigation-menu .menu-child-item.active:not(.has-children) ::ng-deep .k-link{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-navigation-menu .menu-child-item.active:not(.has-children) ::ng-deep .k-link:hover .item-text{color:var(--ui-kit-color-white)}.kit-navigation-menu .menu-child-item ::ng-deep .k-panelbar-toggle{display:none}.kit-navigation-menu .menu-child-item ::ng-deep .k-selected:hover{background:none}.kit-navigation-menu .menu-child-item ::ng-deep .k-link:hover{color:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-link .item-icon{stroke:var(--ui-kit-color-grey-9);fill:none}.kit-navigation-menu .menu-link .item-text{color:var(--ui-kit-color-grey-9)}.kit-navigation-menu .menu-link ::ng-deep .k-link{padding:10px 6px 10px 36px}.kit-navigation-menu .menu-link ::ng-deep .k-link:hover .item-icon{fill:none;stroke:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-link.active ::ng-deep .k-link{background:var(--ui-kit-color-main)}.kit-navigation-menu .menu-link.active ::ng-deep .k-link .item-text{color:var(--ui-kit-color-white)}.kit-navigation-menu .menu-link.active ::ng-deep .k-link .item-icon{stroke:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed{width:88px}.kit-navigation-menu.collapsed .menu-item .item-text{width:0;opacity:0}.kit-navigation-menu.collapsed .menu-item .item-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .menu-item:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-navigation-menu.collapsed ::ng-deep .k-panelbar-group{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$3.PanelBarComponent, selector: "kendo-panelbar", inputs: ["expandMode", "selectable", "animate", "height", "keepItemContent", "items"], outputs: ["stateChange", "select", "expand", "collapse", "itemClick"], exportAs: ["kendoPanelbar"] }, { kind: "component", type: i2$3.PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { kind: "directive", type: i2$3.PanelBarItemTitleDirective, selector: "[kendoPanelBarItemTitle]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3813
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuComponent, deps: [{ token: i1$6.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
3814
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitNavigationMenuComponent, selector: "kit-navigation-menu", inputs: { items: "items", animate: "animate" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed\">\n @for (item of items; track item) {\n @if (item.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"item.expanded\"\n (mouseenter)=\"handleHover(item, true)\"\n (mouseleave)=\"handleHover(item, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (item.expanded) {\n <kit-navigation-menu-submenu class=\"display-block\"\n [@expandCollapseAnimation]\n [@.disabled]=\"!animate ?? collapsed\"\n [item]=\"item\"\n [collapsed]=\"collapsed\"\n ></kit-navigation-menu-submenu>\n }\n </div>\n } @else {\n <div class=\"nav-item\">\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"item?.link\"\n [title]=\"item.title\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n </a>\n </div>\n }\n }\n</div>\n", styles: [".kit-navigation-menu{display:flex;flex-direction:column;gap:20px;width:100%;box-sizing:border-box;transition:width .2s}.kit-navigation-menu.collapsed{width:84px}.kit-navigation-menu.collapsed .nav-item.expanded{position:relative}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-title{width:0;opacity:0}.kit-navigation-menu.collapsed .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu .nav-item.expanded .nav-link{background:var(--ui-kit-color-selected)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-toggle{transform:rotate(180deg)}.kit-navigation-menu .nav-link{display:flex;align-items:center;padding:10px 24px;gap:8px;min-height:40px;color:var(--ui-kit-color-white);font-size:14px;font-weight:400;border-radius:8px;text-decoration:none;cursor:pointer;overflow:hidden;box-sizing:border-box}.kit-navigation-menu .nav-link:hover{color:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link:hover .nav-link-icon.fill{fill:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link:hover .nav-link-icon.stroke,.kit-navigation-menu .nav-link:hover .nav-link-toggle{stroke:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-navigation-menu .nav-link-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-navigation-menu .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link-title{transition:opacity .2s}.kit-navigation-menu .nav-link-toggle{width:16px;height:16px;stroke:var(--ui-kit-color-main);fill:none;flex-shrink:0}.kit-navigation-menu .nav-link.active{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link.active .nav-link-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-navigation-menu .nav-link.active .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: KitNavigationMenuSubmenuComponent, selector: "kit-navigation-menu-submenu", inputs: ["item"] }], animations: [
3815
+ expandCollapseAnimation,
3816
+ ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3724
3817
  }
3725
3818
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuComponent, decorators: [{
3726
3819
  type: Component,
3727
- args: [{ selector: 'kit-navigation-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed\">\n <kendo-panelbar [expandMode]=\"PanelBarExpandMode.Single\"\n [animate]=\"animate\">\n @for (item of items; track item) {\n <kendo-panelbar-item class=\"menu-item\"\n routerLinkActive=\"active\"\n [ngClass]=\"item.cssClass\"\n [class.has-children]=\"item.items?.length\"\n [expanded]=\"item.expanded\"\n [routerLink]=\"item.link\">\n <ng-template kendoPanelBarItemTitle>\n <kit-svg-icon class=\"item-icon\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n <span class=\"item-text\">{{ item.title }}</span>\n @if (item.items?.length) {\n <kit-svg-icon class=\"toggle-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n }\n </ng-template>\n\n @for (child of item.items; track child) {\n <kendo-panelbar-item class=\"menu-child-item\"\n routerLinkActive=\"active\"\n [ngClass]=\"child.cssClass\"\n [class.has-children]=\"child.items?.length\"\n [expanded]=\"child.expanded\"\n [routerLink]=\"child.link\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"item-text\">{{ child.title }}</span>\n @if (child.items?.length) {\n <kit-svg-icon class=\"toggle-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n }\n </ng-template>\n\n @for (subChild of child.items; track subChild) {\n <kendo-panelbar-item class=\"menu-link\"\n routerLinkActive=\"active\"\n [ngClass]=\"subChild.cssClass\"\n [routerLink]=\"subChild.link\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"item-text\">{{ subChild.title }}</span>\n <kit-svg-icon class=\"item-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n </ng-template>\n </kendo-panelbar-item>\n }\n </kendo-panelbar-item>\n }\n </kendo-panelbar-item>\n }\n </kendo-panelbar>\n</div>\n\n", styles: [".kit-navigation-menu{width:100%;overflow:hidden;transition:width .3s}.kit-navigation-menu .k-panelbar{display:flex;flex-direction:column;gap:20px;border:none;background:none}.kit-navigation-menu ::ng-deep .k-panelbar-group{display:flex;flex-direction:column;gap:20px;margin-top:20px}.kit-navigation-menu ::ng-deep .k-panelbar-toggle{display:none}.kit-navigation-menu .menu-item{border:none}.kit-navigation-menu .menu-item .item-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);flex-shrink:0}.kit-navigation-menu .menu-item .item-text{color:var(--ui-kit-color-white);font-size:14px;font-weight:400;transition:opacity .3s ease}.kit-navigation-menu .menu-item .toggle-icon{width:16px;height:16px;stroke:var(--ui-kit-color-main);fill:none;flex-shrink:0;transition:rotate .3s ease}.kit-navigation-menu .menu-item.k-expanded ::ng-deep>.k-link{background:var(--ui-kit-color-selected)}.kit-navigation-menu .menu-item.k-expanded ::ng-deep>.k-link .item-icon{fill:var(--ui-kit-color-main)}.kit-navigation-menu .menu-item.k-expanded ::ng-deep>.k-link .toggle-icon{transform:rotate(180deg)}.kit-navigation-menu .menu-item.active:not(.has-children) ::ng-deep>.k-link{background:var(--ui-kit-color-main)}.kit-navigation-menu .menu-item.active:not(.has-children) ::ng-deep>.k-link .item-text{color:var(--ui-kit-color-white)}.kit-navigation-menu .menu-item.active:not(.has-children) ::ng-deep>.k-link .item-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu .menu-item ::ng-deep .k-link{padding:10px 24px;gap:8px;min-height:40px;color:var(--ui-kit-color-white);border-radius:8px;background:none;cursor:pointer;transition:none}.kit-navigation-menu .menu-item ::ng-deep .k-link.k-focus{box-shadow:none}.kit-navigation-menu .menu-item ::ng-deep .k-link:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-item ::ng-deep .k-link:hover .item-text{color:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-item ::ng-deep .k-link:hover .toggle-icon{stroke:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-child-item.k-expanded ::ng-deep>.k-link{color:var(--ui-kit-color-main)}.kit-navigation-menu .menu-child-item.k-expanded ::ng-deep .toggle-icon{transform:rotate(180deg)}.kit-navigation-menu .menu-child-item.active:not(.has-children) ::ng-deep .k-link{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-navigation-menu .menu-child-item.active:not(.has-children) ::ng-deep .k-link:hover .item-text{color:var(--ui-kit-color-white)}.kit-navigation-menu .menu-child-item ::ng-deep .k-panelbar-toggle{display:none}.kit-navigation-menu .menu-child-item ::ng-deep .k-selected:hover{background:none}.kit-navigation-menu .menu-child-item ::ng-deep .k-link:hover{color:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-link .item-icon{stroke:var(--ui-kit-color-grey-9);fill:none}.kit-navigation-menu .menu-link .item-text{color:var(--ui-kit-color-grey-9)}.kit-navigation-menu .menu-link ::ng-deep .k-link{padding:10px 6px 10px 36px}.kit-navigation-menu .menu-link ::ng-deep .k-link:hover .item-icon{fill:none;stroke:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-link.active ::ng-deep .k-link{background:var(--ui-kit-color-main)}.kit-navigation-menu .menu-link.active ::ng-deep .k-link .item-text{color:var(--ui-kit-color-white)}.kit-navigation-menu .menu-link.active ::ng-deep .k-link .item-icon{stroke:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed{width:88px}.kit-navigation-menu.collapsed .menu-item .item-text{width:0;opacity:0}.kit-navigation-menu.collapsed .menu-item .item-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .menu-item:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-navigation-menu.collapsed ::ng-deep .k-panelbar-group{display:none}\n"] }]
3728
- }], ctorParameters: () => [{ type: i1$6.Router }], propDecorators: { items: [{
3820
+ args: [{ selector: 'kit-navigation-menu', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
3821
+ expandCollapseAnimation,
3822
+ ], template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed\">\n @for (item of items; track item) {\n @if (item.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"item.expanded\"\n (mouseenter)=\"handleHover(item, true)\"\n (mouseleave)=\"handleHover(item, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (item.expanded) {\n <kit-navigation-menu-submenu class=\"display-block\"\n [@expandCollapseAnimation]\n [@.disabled]=\"!animate ?? collapsed\"\n [item]=\"item\"\n [collapsed]=\"collapsed\"\n ></kit-navigation-menu-submenu>\n }\n </div>\n } @else {\n <div class=\"nav-item\">\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"item?.link\"\n [title]=\"item.title\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n </a>\n </div>\n }\n }\n</div>\n", styles: [".kit-navigation-menu{display:flex;flex-direction:column;gap:20px;width:100%;box-sizing:border-box;transition:width .2s}.kit-navigation-menu.collapsed{width:84px}.kit-navigation-menu.collapsed .nav-item.expanded{position:relative}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-title{width:0;opacity:0}.kit-navigation-menu.collapsed .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu .nav-item.expanded .nav-link{background:var(--ui-kit-color-selected)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-toggle{transform:rotate(180deg)}.kit-navigation-menu .nav-link{display:flex;align-items:center;padding:10px 24px;gap:8px;min-height:40px;color:var(--ui-kit-color-white);font-size:14px;font-weight:400;border-radius:8px;text-decoration:none;cursor:pointer;overflow:hidden;box-sizing:border-box}.kit-navigation-menu .nav-link:hover{color:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link:hover .nav-link-icon.fill{fill:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link:hover .nav-link-icon.stroke,.kit-navigation-menu .nav-link:hover .nav-link-toggle{stroke:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-navigation-menu .nav-link-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-navigation-menu .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link-title{transition:opacity .2s}.kit-navigation-menu .nav-link-toggle{width:16px;height:16px;stroke:var(--ui-kit-color-main);fill:none;flex-shrink:0}.kit-navigation-menu .nav-link.active{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link.active .nav-link-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-navigation-menu .nav-link.active .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"] }]
3823
+ }], ctorParameters: () => [{ type: i1$6.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { items: [{
3729
3824
  type: Input
3730
3825
  }], animate: [{
3731
3826
  type: Input
3732
- }], collapsed: [{
3733
- type: Input
3734
3827
  }] } });
3735
3828
 
3829
+ class KitNavigationMenuSubmenuModule {
3830
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuSubmenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
3831
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuSubmenuModule, declarations: [KitNavigationMenuSubmenuComponent], imports: [CommonModule,
3832
+ RouterModule,
3833
+ KitSvgIconModule], exports: [KitNavigationMenuSubmenuComponent] }); }
3834
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuSubmenuModule, imports: [CommonModule,
3835
+ RouterModule,
3836
+ KitSvgIconModule] }); }
3837
+ }
3838
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuSubmenuModule, decorators: [{
3839
+ type: NgModule,
3840
+ args: [{
3841
+ declarations: [
3842
+ KitNavigationMenuSubmenuComponent,
3843
+ ],
3844
+ imports: [
3845
+ CommonModule,
3846
+ RouterModule,
3847
+ KitSvgIconModule,
3848
+ ],
3849
+ exports: [
3850
+ KitNavigationMenuSubmenuComponent,
3851
+ ],
3852
+ }]
3853
+ }] });
3854
+
3736
3855
  class KitNavigationMenuModule {
3737
3856
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
3738
3857
  static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuModule, declarations: [KitNavigationMenuComponent], imports: [CommonModule,
3739
- PanelBarModule,
3740
3858
  KitSvgIconModule,
3741
- RouterModule], exports: [KitNavigationMenuComponent] }); }
3859
+ RouterModule,
3860
+ KitNavigationMenuSubmenuModule], exports: [KitNavigationMenuComponent] }); }
3742
3861
  static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuModule, imports: [CommonModule,
3743
- PanelBarModule,
3744
3862
  KitSvgIconModule,
3745
- RouterModule] }); }
3863
+ RouterModule,
3864
+ KitNavigationMenuSubmenuModule] }); }
3746
3865
  }
3747
3866
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuModule, decorators: [{
3748
3867
  type: NgModule,
@@ -3752,9 +3871,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
3752
3871
  ],
3753
3872
  imports: [
3754
3873
  CommonModule,
3755
- PanelBarModule,
3756
3874
  KitSvgIconModule,
3757
3875
  RouterModule,
3876
+ KitNavigationMenuSubmenuModule,
3758
3877
  ],
3759
3878
  exports: [
3760
3879
  KitNavigationMenuComponent,
@@ -4661,7 +4780,7 @@ class KitGridColumnComponent {
4661
4780
  /**
4662
4781
  * Defines whether the column can be sorted by clicking on its title
4663
4782
  */
4664
- this.sortable = false;
4783
+ this.sortable = true;
4665
4784
  }
4666
4785
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitGridColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4667
4786
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitGridColumnComponent, selector: "kit-grid-column", inputs: { field: "field", title: "title", titleIcon: "titleIcon", titleIconType: "titleIconType", sortable: "sortable", width: "width" }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ["kitGridCellTemplate"], descendants: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -4695,6 +4814,11 @@ var KitGridSortDirection;
4695
4814
  KitGridSortDirection["ASC"] = "asc";
4696
4815
  KitGridSortDirection["DESC"] = "desc";
4697
4816
  })(KitGridSortDirection || (KitGridSortDirection = {}));
4817
+ var KitGridSortSettingsMode;
4818
+ (function (KitGridSortSettingsMode) {
4819
+ KitGridSortSettingsMode["SINGLE"] = "single";
4820
+ KitGridSortSettingsMode["MULTIPLE"] = "multiple";
4821
+ })(KitGridSortSettingsMode || (KitGridSortSettingsMode = {}));
4698
4822
 
4699
4823
  class KitGridComponent {
4700
4824
  constructor() {
@@ -4711,7 +4835,19 @@ class KitGridComponent {
4711
4835
  */
4712
4836
  this.sort = [];
4713
4837
  /**
4714
- * An action which is emitted once the sorting of the grid changed
4838
+ * Enables the pager of the grid
4839
+ */
4840
+ this.pageable = false;
4841
+ /**
4842
+ * Defines the number of records to be skipped by the pager
4843
+ */
4844
+ this.skip = 0;
4845
+ /**
4846
+ * An action which is emitted when the page of the grid is changed
4847
+ */
4848
+ this.pageChanged = new EventEmitter();
4849
+ /**
4850
+ * An action which is emitted once the sorting of the grid is changed
4715
4851
  */
4716
4852
  this.sortChanged = new EventEmitter();
4717
4853
  /**
@@ -4722,7 +4858,6 @@ class KitGridComponent {
4722
4858
  this.kitGridDetailTemplate = null;
4723
4859
  this.KitSvgIcon = KitSvgIcon;
4724
4860
  this.KitGridSortDirection = KitGridSortDirection;
4725
- this.state = {};
4726
4861
  this.expandedRows = [];
4727
4862
  this.getCssRowClass = (context) => {
4728
4863
  const expanded = this.expandedRows.includes(context.index);
@@ -4732,14 +4867,14 @@ class KitGridComponent {
4732
4867
  };
4733
4868
  }
4734
4869
  onDataStateChange(event) {
4735
- this.state = event;
4736
4870
  this.dataStateChanged.emit(event);
4737
4871
  }
4738
4872
  onSortChange(event) {
4873
+ this.sort = event;
4739
4874
  this.sortChanged.emit(event);
4740
4875
  }
4741
- getSortingDirection() {
4742
- return this.state.sort?.[0]?.dir ?? null;
4876
+ getSortingDirection(columnField) {
4877
+ return this.sort.find(item => item.field === columnField)?.dir ?? null;
4743
4878
  }
4744
4879
  isDetailTemplateVisible(dataItem) {
4745
4880
  return !!dataItem.children?.length;
@@ -4747,6 +4882,9 @@ class KitGridComponent {
4747
4882
  hasDetailColumn() {
4748
4883
  return this.data.some(item => !!item.children?.length);
4749
4884
  }
4885
+ isColumnSortable(column) {
4886
+ return !!this.sortable && column.sortable;
4887
+ }
4750
4888
  onDetailExpand(event) {
4751
4889
  this.expandedRows.push(event.index);
4752
4890
  }
@@ -4754,18 +4892,37 @@ class KitGridComponent {
4754
4892
  const index = this.expandedRows.indexOf(event.index);
4755
4893
  this.expandedRows.splice(index, 1);
4756
4894
  }
4895
+ onPageChange(event) {
4896
+ this.skip = event.skip;
4897
+ this.pageChanged.emit(event);
4898
+ }
4899
+ getPagerSettings() {
4900
+ const pagerSettings = {
4901
+ buttonCount: 5,
4902
+ info: false,
4903
+ };
4904
+ return this.pageable && pagerSettings || false;
4905
+ }
4757
4906
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4758
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitGridComponent, selector: "kit-grid", inputs: { data: "data", sortable: "sortable", sort: "sort" }, outputs: { sortChanged: "sortChanged", dataStateChanged: "dataStateChanged" }, queries: [{ propertyName: "kitGridDetailTemplate", first: true, predicate: ["kitGridDetailTemplate"], descendants: true }, { propertyName: "columns", predicate: KitGridColumnComponent }], ngImport: i0, template: "<kendo-grid class=\"kit-grid\"\n [kendoGridBinding]=\"data\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [rowClass]=\"getCssRowClass\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (sortChange)=\"onSortChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns; track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [width]=\"column.width\">\n <ng-template kendoGridHeaderTemplate>\n <div class=\"grid-title\"\n [class.sortable]=\"column.sortable\">\n @if (column.titleIcon) {\n <kit-svg-icon class=\"grid-title-icon\"\n [icon]=\"column.titleIcon\"\n [ngClass]=\"column.titleIconType\"\n ></kit-svg-icon>\n }\n\n <div class=\"grid-title-text\">\n {{ column.title }}\n </div>\n\n @if (sortable && column.sortable) {\n @switch (getSortingDirection()) {\n @case (KitGridSortDirection.ASC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"KitSvgIcon.SORT_ASCENDING\"\n ></kit-svg-icon>\n }\n @case (KitGridSortDirection.DESC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"KitSvgIcon.SORT_DESCENDING\"\n ></kit-svg-icon>\n }\n }\n }\n </div>\n </ng-template>\n\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (hasDetailColumn()) {\n <div *kendoGridDetailTemplate=\"let dataItem; showIf: isDetailTemplateVisible\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </div>\n }\n }\n</kendo-grid>\n", styles: [".kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1}.kit-grid .grid-title-icon{display:block;width:16px;height:16px}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid.k-grid{border:none}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-content{overflow:hidden}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-master-row.expanded .k-svg-icon{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-table-row:last-child .k-table-td{border-bottom:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$4.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i2$4.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "component", type: i2$4.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i2$4.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "directive", type: i2$4.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i2$4.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
4907
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitGridComponent, selector: "kit-grid", inputs: { data: "data", sortable: "sortable", sort: "sort", pageable: "pageable", pageSize: "pageSize", skip: "skip" }, outputs: { pageChanged: "pageChanged", sortChanged: "sortChanged", dataStateChanged: "dataStateChanged" }, queries: [{ propertyName: "kitGridDetailTemplate", first: true, predicate: ["kitGridDetailTemplate"], descendants: true }, { propertyName: "columns", predicate: KitGridColumnComponent }], ngImport: i0, template: "<kendo-grid class=\"kit-grid\"\n [kendoGridBinding]=\"data\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [skip]=\"skip\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (sortChange)=\"onSortChange($event)\"\n (pageChange)=\"onPageChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns; track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [width]=\"column.width\">\n <ng-template kendoGridHeaderTemplate>\n <div class=\"grid-title\"\n [class.sortable]=\"isColumnSortable(column)\">\n @if (column.titleIcon) {\n <kit-svg-icon class=\"grid-title-icon\"\n [icon]=\"column.titleIcon\"\n [ngClass]=\"column.titleIconType\"\n ></kit-svg-icon>\n }\n\n <div class=\"grid-title-text\">\n {{ column.title }}\n </div>\n\n @if (sortable && column.sortable) {\n @switch (getSortingDirection(column.field)) {\n @case (KitGridSortDirection.ASC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"KitSvgIcon.SORT_ASCENDING\"\n ></kit-svg-icon>\n }\n @case (KitGridSortDirection.DESC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"KitSvgIcon.SORT_DESCENDING\"\n ></kit-svg-icon>\n }\n }\n }\n </div>\n </ng-template>\n\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (hasDetailColumn()) {\n <div *kendoGridDetailTemplate=\"let dataItem; showIf: isDetailTemplateVisible\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </div>\n }\n }\n</kendo-grid>\n", styles: [".kit-grid{border:none;background:none}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1}.kit-grid .grid-title-icon{display:block;width:16px;height:16px}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-content{overflow:hidden}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th .k-sort-order{margin-left:2px;color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px;background:var(--ui-kit-color-white)}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-svg-icon{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-table-row:last-child .k-table-td{border-bottom:none}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-hierarchy-cell .k-svg-i-plus:before{content:\"\\e005\"}.kit-grid ::ng-deep .k-hierarchy-cell .k-svg-i-minus:before{content:\"\\e006\"}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:0;border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-nav{width:32px;height:32px;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-nav:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-nav:after{opacity:0}.kit-grid ::ng-deep .k-pager-nav.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-nav.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager .k-pager-first,.kit-grid ::ng-deep .k-pager .k-pager-last{display:none}.kit-grid ::ng-deep .k-pager .k-button-icon{font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-left:before{content:\"\\e016\"}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-right:before{content:\"\\e014\"}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$4.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i2$4.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "component", type: i2$4.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i2$4.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "directive", type: i2$4.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i2$4.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
4759
4908
  }
4760
4909
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitGridComponent, decorators: [{
4761
4910
  type: Component,
4762
- args: [{ selector: 'kit-grid', changeDetection: ChangeDetectionStrategy.OnPush, template: "<kendo-grid class=\"kit-grid\"\n [kendoGridBinding]=\"data\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [rowClass]=\"getCssRowClass\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (sortChange)=\"onSortChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns; track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [width]=\"column.width\">\n <ng-template kendoGridHeaderTemplate>\n <div class=\"grid-title\"\n [class.sortable]=\"column.sortable\">\n @if (column.titleIcon) {\n <kit-svg-icon class=\"grid-title-icon\"\n [icon]=\"column.titleIcon\"\n [ngClass]=\"column.titleIconType\"\n ></kit-svg-icon>\n }\n\n <div class=\"grid-title-text\">\n {{ column.title }}\n </div>\n\n @if (sortable && column.sortable) {\n @switch (getSortingDirection()) {\n @case (KitGridSortDirection.ASC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"KitSvgIcon.SORT_ASCENDING\"\n ></kit-svg-icon>\n }\n @case (KitGridSortDirection.DESC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"KitSvgIcon.SORT_DESCENDING\"\n ></kit-svg-icon>\n }\n }\n }\n </div>\n </ng-template>\n\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (hasDetailColumn()) {\n <div *kendoGridDetailTemplate=\"let dataItem; showIf: isDetailTemplateVisible\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </div>\n }\n }\n</kendo-grid>\n", styles: [".kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1}.kit-grid .grid-title-icon{display:block;width:16px;height:16px}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid.k-grid{border:none}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-content{overflow:hidden}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-master-row.expanded .k-svg-icon{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-table-row:last-child .k-table-td{border-bottom:none}\n"] }]
4911
+ args: [{ selector: 'kit-grid', changeDetection: ChangeDetectionStrategy.OnPush, template: "<kendo-grid class=\"kit-grid\"\n [kendoGridBinding]=\"data\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [skip]=\"skip\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (sortChange)=\"onSortChange($event)\"\n (pageChange)=\"onPageChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns; track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [width]=\"column.width\">\n <ng-template kendoGridHeaderTemplate>\n <div class=\"grid-title\"\n [class.sortable]=\"isColumnSortable(column)\">\n @if (column.titleIcon) {\n <kit-svg-icon class=\"grid-title-icon\"\n [icon]=\"column.titleIcon\"\n [ngClass]=\"column.titleIconType\"\n ></kit-svg-icon>\n }\n\n <div class=\"grid-title-text\">\n {{ column.title }}\n </div>\n\n @if (sortable && column.sortable) {\n @switch (getSortingDirection(column.field)) {\n @case (KitGridSortDirection.ASC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"KitSvgIcon.SORT_ASCENDING\"\n ></kit-svg-icon>\n }\n @case (KitGridSortDirection.DESC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"KitSvgIcon.SORT_DESCENDING\"\n ></kit-svg-icon>\n }\n }\n }\n </div>\n </ng-template>\n\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (hasDetailColumn()) {\n <div *kendoGridDetailTemplate=\"let dataItem; showIf: isDetailTemplateVisible\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </div>\n }\n }\n</kendo-grid>\n", styles: [".kit-grid{border:none;background:none}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1}.kit-grid .grid-title-icon{display:block;width:16px;height:16px}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-content{overflow:hidden}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th .k-sort-order{margin-left:2px;color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px;background:var(--ui-kit-color-white)}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-svg-icon{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-table-row:last-child .k-table-td{border-bottom:none}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-hierarchy-cell .k-svg-i-plus:before{content:\"\\e005\"}.kit-grid ::ng-deep .k-hierarchy-cell .k-svg-i-minus:before{content:\"\\e006\"}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:0;border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-nav{width:32px;height:32px;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-nav:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-nav:after{opacity:0}.kit-grid ::ng-deep .k-pager-nav.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-nav.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager .k-pager-first,.kit-grid ::ng-deep .k-pager .k-pager-last{display:none}.kit-grid ::ng-deep .k-pager .k-button-icon{font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-left:before{content:\"\\e016\"}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-right:before{content:\"\\e014\"}\n"] }]
4763
4912
  }], propDecorators: { data: [{
4764
4913
  type: Input
4765
4914
  }], sortable: [{
4766
4915
  type: Input
4767
4916
  }], sort: [{
4768
4917
  type: Input
4918
+ }], pageable: [{
4919
+ type: Input
4920
+ }], pageSize: [{
4921
+ type: Input
4922
+ }], skip: [{
4923
+ type: Input
4924
+ }], pageChanged: [{
4925
+ type: Output
4769
4926
  }], sortChanged: [{
4770
4927
  type: Output
4771
4928
  }], dataStateChanged: [{
@@ -4814,5 +4971,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
4814
4971
  * Generated bundle index. Do not edit.
4815
4972
  */
4816
4973
 
4817
- export { AbstractKitCtaPanelConfirmationComponent, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAutocompleteState, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeModule, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDatepickerComponent, KitDatepickerModule, KitDaterangeComponent, KitDaterangeIconPosition, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogActionsModule, KitDialogComponent, KitDialogModule, KitDialogService, KitDropdownComponent, KitDropdownModule, KitDropdownState, KitFileUploadComponent, KitFileUploadModule, KitGridColumnComponent, KitGridComponent, KitGridModule, KitGridSortDirection, KitInputLabelComponent, KitInputLabelModule, KitInputMessageComponent, KitInputMessageModule, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationTabsComponent, KitNavigationTabsModule, KitNavigationTabsType, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationModule, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillModule, KitPopupComponent, KitPopupDirective, KitPopupModule, KitProfileMenuComponent, KitProfileMenuModule, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgIconType, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTabComponent, KitTabsComponent, KitTabsModule, KitTabsType, KitTextLabelComponent, KitTextLabelModule, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTimepickerComponent, KitTimepickerModule, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipModule, KitTooltipPosition, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, buildRandomUUID };
4974
+ export { AbstractKitCtaPanelConfirmationComponent, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAutocompleteState, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeModule, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDatepickerComponent, KitDatepickerModule, KitDaterangeComponent, KitDaterangeIconPosition, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogActionsModule, KitDialogComponent, KitDialogModule, KitDialogService, KitDropdownComponent, KitDropdownModule, KitDropdownState, KitFileUploadComponent, KitFileUploadModule, KitGridColumnComponent, KitGridComponent, KitGridModule, KitGridSortDirection, KitGridSortSettingsMode, KitInputLabelComponent, KitInputLabelModule, KitInputMessageComponent, KitInputMessageModule, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsModule, KitNavigationTabsType, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationModule, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillModule, KitPopupComponent, KitPopupDirective, KitPopupModule, KitProfileMenuComponent, KitProfileMenuModule, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgIconType, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTabComponent, KitTabsComponent, KitTabsModule, KitTabsType, KitTextLabelComponent, KitTextLabelModule, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTimepickerComponent, KitTimepickerModule, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipModule, KitTooltipPosition, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, buildRandomUUID };
4818
4975
  //# sourceMappingURL=indigina-ui-kit.mjs.map