@indigina/ui-kit 1.0.162 → 1.1.0

package/esm2020/lib/components/kit-autocomplete/kit-autocomplete.component.mjs

@@ -135,13 +135,13 @@ export class KitAutocompleteComponent {
         this.disabled = disabled;
     }
 }
-KitAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitAutocompleteComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-KitAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: KitAutocompleteComponent, selector: "kit-autocomplete", inputs: { label: "label", placeholder: "placeholder", items: "items", selectedValue: "selectedValue", disabled: "disabled", loaderVisible: "loaderVisible", messageIcon: "messageIcon", messageText: "messageText", messageType: "messageType", state: "state" }, outputs: { changed: "changed", selected: "selected", blured: "blured", focused: "focused" }, providers: [{
+KitAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitAutocompleteComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+KitAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: KitAutocompleteComponent, selector: "kit-autocomplete", inputs: { label: "label", placeholder: "placeholder", items: "items", selectedValue: "selectedValue", disabled: "disabled", loaderVisible: "loaderVisible", messageIcon: "messageIcon", messageText: "messageText", messageType: "messageType", state: "state" }, outputs: { changed: "changed", selected: "selected", blured: "blured", focused: "focused" }, providers: [{
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => KitAutocompleteComponent),
             multi: true,
         }], 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  <kendo-label *ngIf=\"label\" class=\"label display-block\"\n               [text]=\"label\"\n               [for]=\"combobox\">\n  </kendo-label>\n  <div class=\"autocomplete-wrap\">\n    <kendo-combobox  #combobox textField=\"text\" 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        <kit-loader *ngIf=\"loaderVisible\" class=\"popup-loader\"></kit-loader>\n      </ng-template>\n      <ng-template kendoComboBoxItemTemplate let-item>\n        <span class=\"template\">{{ getOptionText(item) }}</span>\n      </ng-template>\n    </kendo-combobox>\n    <kit-svg-icon class=\"input-icon\" icon=\"search\"></kit-svg-icon>\n  </div>\n  <kit-input-message *ngIf=\"messageText\"\n                     [type]=\"messageType\"\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}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-main-20: #ddecfd;--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-green: #00b0ad;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-cobalt: #002a3a}.kit-autocomplete .label{margin-bottom:4px;font-weight:500;font-size:13px;color:#a9a8a8}.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:#ffffff}.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.autocomplete-disabled .label{color:#74777d}.kit-autocomplete.danger .k-combobox{border-color:#ef3e42;background:#f8e0e0}.kit-autocomplete.danger .input-icon{fill:#f8e0e0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.HeaderTemplateDirective, selector: "[kendoDropDownListHeaderTemplate],[kendoComboBoxHeaderTemplate],[kendoDropDownTreeHeaderTemplate],[kendoMultiColumnComboBoxHeaderTemplate],[kendoAutoCompleteHeaderTemplate],[kendoMultiSelectHeaderTemplate],[kendoMultiSelectTreeHeaderTemplate]" }, { kind: "directive", type: i2.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i2.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["data", "kendoDropDownFilter", "filterable"] }, { kind: "component", type: i2.ComboBoxComponent, selector: "kendo-combobox", inputs: ["focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "popupSettings", "listHeight", "iconClass", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }, { kind: "component", type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { kind: "component", type: i4.KitInputMessageComponent, selector: "kit-input-message", inputs: ["type", "icon", "message"] }, { kind: "component", type: i5.KitLoaderComponent, selector: "kit-loader" }, { kind: "component", type: i6.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitAutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{
                             provide: NG_VALUE_ACCESSOR,

package/esm2020/lib/components/kit-autocomplete/kit-autocomplete.directive.mjs

@@ -9,9 +9,9 @@ export class KitAutocompleteDirective {
         this.kitAutocompleteComponent.togglePopup();
     }
 }
-KitAutocompleteDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitAutocompleteDirective, deps: [{ token: i1.KitAutocompleteComponent, host: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-KitAutocompleteDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.6", type: KitAutocompleteDirective, selector: "[kitAutocomplete]", exportAs: ["kitAutocomplete"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitAutocompleteDirective, decorators: [{
+KitAutocompleteDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitAutocompleteDirective, deps: [{ token: i1.KitAutocompleteComponent, host: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+KitAutocompleteDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: KitAutocompleteDirective, selector: "[kitAutocomplete]", exportAs: ["kitAutocomplete"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitAutocompleteDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kitAutocomplete]',

package/esm2020/lib/components/kit-autocomplete/kit-autocomplete.module.mjs

@@ -12,8 +12,8 @@ import { KitAutocompleteDirective } from './kit-autocomplete.directive';
 import * as i0 from "@angular/core";
 export class KitAutocompleteModule {
 }
-KitAutocompleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-KitAutocompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.6", ngImport: i0, type: KitAutocompleteModule, declarations: [KitAutocompleteComponent,
+KitAutocompleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KitAutocompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: KitAutocompleteModule, declarations: [KitAutocompleteComponent,
         KitAutocompleteDirective], imports: [CommonModule,
         DropDownsModule,
         FormsModule,
@@ -24,7 +24,7 @@ KitAutocompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         KitLoaderModule,
         KitSvgIconModule], exports: [KitAutocompleteComponent,
         KitAutocompleteDirective] });
-KitAutocompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitAutocompleteModule, imports: [CommonModule,
+KitAutocompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitAutocompleteModule, imports: [CommonModule,
         DropDownsModule,
         FormsModule,
         ReactiveFormsModule,
@@ -33,7 +33,7 @@ KitAutocompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", v
         KitInputMessageModule,
         KitLoaderModule,
         KitSvgIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitAutocompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitAutocompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2020/lib/components/kit-button/kit-button.component.mjs

@@ -36,9 +36,9 @@ export class KitButtonComponent {
         this.clicked = new EventEmitter();
     }
 }
-KitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-KitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: KitButtonComponent, selector: "kit-button", inputs: { disabled: "disabled", label: "label", type: "type", icon: "icon", kind: "kind", iconPosition: "iconPosition", buttonClass: "buttonClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"kit-button\">\n  <button kendoButton\n          [disabled]=\"disabled\"\n          [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n          (click)=\"clicked.emit()\">\n    {{ label }}\n    <kit-svg-icon *ngIf=\"icon\"\n                  class=\"button-icon\"\n                  [icon]=\"icon\"\n    ></kit-svg-icon>\n  </button>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-main-20: #ddecfd;--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-green: #00b0ad;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-cobalt: #002a3a}.kit-button .icon-right .k-button-text{flex-direction:row}.kit-button .icon-right .button-icon{margin-left:8px}.kit-button .icon-left .k-button-text{flex-direction:row-reverse}.kit-button .icon-left .button-icon{margin-right:8px}.kit-button .k-button{height:44px;padding:0 12px;color:var(--ui-kit-color-white);font-weight:500;font-size:14px;gap:0;border-radius:6px;border:1px solid transparent}.kit-button .k-button .button-icon{display:block;width:16px;height:16px;stroke:var(--ui-kit-color-white);fill:none}.kit-button .k-button.small{height:28px;line-height:1;font-size:12px}.kit-button .k-button.filled{background:var(--ui-kit-color-main)}.kit-button .k-button.filled.k-state-focused{border-color:#3678c3}.kit-button .k-button.outlined{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-button .k-button.outlined .button-icon{stroke:var(--ui-kit-color-main)}.kit-button .k-button:disabled{color:#a9a8a8;background:#ebebe4}.kit-button .k-button:disabled .button-icon{stroke:#a9a8a8}.kit-button .k-button.k-state-focused{box-shadow:0 0 2px 4px #c7dff9}.kit-button .filled:hover{background:#002a3a}.kit-button .outlined:hover{background:var(--ui-kit-color-white-20)}.kit-button .outlined:disabled{border-color:#a9a8a8}.kit-button .k-button-text{display:flex;align-items:center}.kit-button .icon-right.k-button.small .button-icon{margin-left:4px}.kit-button .icon-left.k-button.small .button-icon{margin-right:4px}\n"], dependencies: [{ kind: "component", type: i1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitButtonComponent, decorators: [{
+KitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+KitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: KitButtonComponent, selector: "kit-button", inputs: { disabled: "disabled", label: "label", type: "type", icon: "icon", kind: "kind", iconPosition: "iconPosition", buttonClass: "buttonClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"kit-button\">\n  <button kendoButton\n          [disabled]=\"disabled\"\n          [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n          (click)=\"clicked.emit()\">\n    {{ label }}\n    <kit-svg-icon *ngIf=\"icon\"\n                  class=\"button-icon\"\n                  [icon]=\"icon\"\n    ></kit-svg-icon>\n  </button>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-main-20: #ddecfd;--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-green: #00b0ad;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-cobalt: #002a3a}.kit-button .icon-right .k-button-text{flex-direction:row}.kit-button .icon-right .button-icon{margin-left:8px}.kit-button .icon-left .k-button-text{flex-direction:row-reverse}.kit-button .icon-left .button-icon{margin-right:8px}.kit-button .k-button{height:44px;padding:0 12px;color:var(--ui-kit-color-white);font-weight:500;font-size:14px;gap:0;border-radius:6px;border:1px solid transparent}.kit-button .k-button .button-icon{display:block;width:16px;height:16px;stroke:var(--ui-kit-color-white);fill:none}.kit-button .k-button.small{height:28px;line-height:1;font-size:12px}.kit-button .k-button.filled{background:var(--ui-kit-color-main)}.kit-button .k-button.filled.k-state-focused{border-color:#3678c3}.kit-button .k-button.outlined{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-button .k-button.outlined .button-icon{stroke:var(--ui-kit-color-main)}.kit-button .k-button:disabled{color:#a9a8a8;background:#ebebe4}.kit-button .k-button:disabled .button-icon{stroke:#a9a8a8}.kit-button .k-button.k-state-focused{box-shadow:0 0 2px 4px #c7dff9}.kit-button .filled:hover{background:#002a3a}.kit-button .outlined:hover{background:var(--ui-kit-color-white-20)}.kit-button .outlined:disabled{border-color:#a9a8a8}.kit-button .k-button-text{display:flex;align-items:center}.kit-button .icon-right.k-button.small .button-icon{margin-left:4px}.kit-button .icon-left.k-button.small .button-icon{margin-right:4px}\n"], dependencies: [{ kind: "component", type: i1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-button\">\n  <button kendoButton\n          [disabled]=\"disabled\"\n          [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n          (click)=\"clicked.emit()\">\n    {{ label }}\n    <kit-svg-icon *ngIf=\"icon\"\n                  class=\"button-icon\"\n                  [icon]=\"icon\"\n    ></kit-svg-icon>\n  </button>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-main-20: #ddecfd;--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-green: #00b0ad;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-cobalt: #002a3a}.kit-button .icon-right .k-button-text{flex-direction:row}.kit-button .icon-right .button-icon{margin-left:8px}.kit-button .icon-left .k-button-text{flex-direction:row-reverse}.kit-button .icon-left .button-icon{margin-right:8px}.kit-button .k-button{height:44px;padding:0 12px;color:var(--ui-kit-color-white);font-weight:500;font-size:14px;gap:0;border-radius:6px;border:1px solid transparent}.kit-button .k-button .button-icon{display:block;width:16px;height:16px;stroke:var(--ui-kit-color-white);fill:none}.kit-button .k-button.small{height:28px;line-height:1;font-size:12px}.kit-button .k-button.filled{background:var(--ui-kit-color-main)}.kit-button .k-button.filled.k-state-focused{border-color:#3678c3}.kit-button .k-button.outlined{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-button .k-button.outlined .button-icon{stroke:var(--ui-kit-color-main)}.kit-button .k-button:disabled{color:#a9a8a8;background:#ebebe4}.kit-button .k-button:disabled .button-icon{stroke:#a9a8a8}.kit-button .k-button.k-state-focused{box-shadow:0 0 2px 4px #c7dff9}.kit-button .filled:hover{background:#002a3a}.kit-button .outlined:hover{background:var(--ui-kit-color-white-20)}.kit-button .outlined:disabled{border-color:#a9a8a8}.kit-button .k-button-text{display:flex;align-items:center}.kit-button .icon-right.k-button.small .button-icon{margin-left:4px}.kit-button .icon-left.k-button.small .button-icon{margin-right:4px}\n"] }]
         }], propDecorators: { disabled: [{

package/esm2020/lib/components/kit-button/kit-button.module.mjs

@@ -6,14 +6,14 @@ import { KitSvgIconModule } from '../kit-svg-icon/kit-svg-icon.module';
 import * as i0 from "@angular/core";
 export class KitButtonModule {
 }
-KitButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-KitButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.6", ngImport: i0, type: KitButtonModule, declarations: [KitButtonComponent], imports: [ButtonModule,
+KitButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KitButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: KitButtonModule, declarations: [KitButtonComponent], imports: [ButtonModule,
         CommonModule,
         KitSvgIconModule], exports: [KitButtonComponent] });
-KitButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitButtonModule, imports: [ButtonModule,
+KitButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitButtonModule, imports: [ButtonModule,
         CommonModule,
         KitSvgIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2020/lib/components/kit-checkbox/kit-checkbox.component.mjs

@@ -73,13 +73,13 @@ export class KitCheckboxComponent {
         this.disabled = disabled;
     }
 }
-KitCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-KitCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: { label: "label", disabled: "disabled", defaultChecked: "defaultChecked", readonly: "readonly", state: "state", messageIcon: "messageIcon", messageText: "messageText", messageType: "messageType" }, outputs: { changed: "changed" }, providers: [{
+KitCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+KitCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: { label: "label", disabled: "disabled", defaultChecked: "defaultChecked", readonly: "readonly", state: "state", messageIcon: "messageIcon", messageText: "messageText", messageType: "messageType" }, outputs: { changed: "changed" }, providers: [{
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => KitCheckboxComponent),
             multi: true,
         }], ngImport: i0, template: "<div class=\"kit-checkbox\" [ngClass]=\"state\">\n  <div class=\"display-flex flex-align-items-center\">\n    <input kendoCheckBox #checkbox type=\"checkbox\" class=\"kit-checkbox-input\"\n           [checked]=\"defaultChecked\"\n           [class.readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           (click)=\"handleClick($event)\"\n           (change)=\"onInputStateChange($event)\" />\n    <kendo-label *ngIf=\"label\" class=\"kit-checkbox-label\"\n                 [text]=\"label\"\n                 [for]=\"checkbox\"\n    ></kendo-label>\n  </div>\n\n  <kit-input-message *ngIf=\"messageText\"\n                     [type]=\"messageType\"\n                     [icon]=\"messageIcon\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n", styles: [".kit-checkbox-input{border-radius:2px;background-color:var(--ui-kit-color-white);border:2px solid var(--ui-kit-color-green);opacity:1;width:18px;height:18px}.kit-checkbox-input:hover:not([disabled]):not(.readonly),.kit-checkbox-input:hover:not([disabled]):not(.readonly):focus{box-shadow:0 0 0 4px var(--ui-kit-color-grey-4)}.kit-checkbox-input:hover:not([disabled]):not(.readonly):checked,.kit-checkbox-input:hover:not([disabled]):not(.readonly):focus:checked{background-color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-checkbox-input:hover:not([disabled]):not(.readonly):not(:checked),.kit-checkbox-input:hover:not([disabled]):not(.readonly):focus:not(:checked){background-color:var(--ui-kit-color-grey-4)}.kit-checkbox-input:focus{box-shadow:none}.kit-checkbox-input:checked{background-color:var(--ui-kit-color-green)}.kit-checkbox-input[disabled]{border-color:var(--ui-kit-color-grey-6);background-color:var(--ui-kit-color-white)}.kit-checkbox-input[disabled]:checked{background-color:var(--ui-kit-color-grey-6)}.kit-checkbox-input.readonly{cursor:default}.kit-checkbox-label{font-size:12px;color:var(--ui-kit-color-grey-0);margin-left:12px}.kit-checkbox.danger .kit-checkbox-input{border-color:var(--ui-kit-color-red);background-color:var(--ui-kit-color-red-20)}.kit-checkbox.danger .kit-checkbox-input[disabled]{opacity:.6}.kit-checkbox.danger .kit-checkbox-input:hover:not([disabled]){background-color:var(--ui-kit-color-red-20);border-color:var(--ui-kit-color-red);box-shadow:0 0 0 4px var(--ui-kit-color-red-20)}.kit-checkbox.danger .kit-checkbox-input:checked{background-color:var(--ui-kit-color-red-20)}:host ::ng-deep .kit-checkbox-input:not([disabled])+.kit-checkbox-label .k-label:hover{cursor:pointer}\n"], dependencies: [{ kind: "component", type: i1.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { kind: "directive", type: i2.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.KitInputMessageComponent, selector: "kit-input-message", inputs: ["type", "icon", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
                             provide: NG_VALUE_ACCESSOR,

package/esm2020/lib/components/kit-checkbox/kit-checkbox.module.mjs

@@ -7,16 +7,16 @@ import { KitInputMessageModule } from '../kit-input-message/kit-input-message.mo
 import * as i0 from "@angular/core";
 export class KitCheckboxModule {
 }
-KitCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-KitCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.6", ngImport: i0, type: KitCheckboxModule, declarations: [KitCheckboxComponent], imports: [LabelModule,
+KitCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KitCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: KitCheckboxModule, declarations: [KitCheckboxComponent], imports: [LabelModule,
         CheckBoxModule,
         CommonModule,
         KitInputMessageModule], exports: [KitCheckboxComponent] });
-KitCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitCheckboxModule, imports: [LabelModule,
+KitCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitCheckboxModule, imports: [LabelModule,
         CheckBoxModule,
         CommonModule,
         KitInputMessageModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitCheckboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitCheckboxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2020/lib/components/kit-cta-panel-abstract-confirmation/kit-cta-panel-abstract-confirmation.component.mjs

@@ -10,9 +10,9 @@ export class KitCtaPanelAbstractConfirmationComponent {
         this.confirmClicked = new EventEmitter();
     }
 }
-KitCtaPanelAbstractConfirmationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitCtaPanelAbstractConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-KitCtaPanelAbstractConfirmationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", 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: i1.KitCtaPanelActionComponent, selector: "kit-cta-panel-action", inputs: ["disabled", "confirmText", "quitText"], outputs: ["quitClicked", "confirmClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitCtaPanelAbstractConfirmationComponent, decorators: [{
+KitCtaPanelAbstractConfirmationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitCtaPanelAbstractConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+KitCtaPanelAbstractConfirmationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.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: i1.KitCtaPanelActionComponent, selector: "kit-cta-panel-action", inputs: ["disabled", "confirmText", "quitText"], outputs: ["quitClicked", "confirmClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitCtaPanelAbstractConfirmationComponent, decorators: [{
             type: Component,
             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"] }]
         }], propDecorators: { confirmButtonDisabled: [{

package/esm2020/lib/components/kit-cta-panel-abstract-confirmation/kit-cta-panel-abstract-confirmation.module.mjs

@@ -6,14 +6,14 @@ import { CommonModule } from '@angular/common';
 import * as i0 from "@angular/core";
 export class KitCtaPanelAbstractConfirmationModule {
 }
-KitCtaPanelAbstractConfirmationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitCtaPanelAbstractConfirmationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-KitCtaPanelAbstractConfirmationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.6", ngImport: i0, type: KitCtaPanelAbstractConfirmationModule, declarations: [KitCtaPanelAbstractConfirmationComponent], imports: [KitCtaPanelActionModule,
+KitCtaPanelAbstractConfirmationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitCtaPanelAbstractConfirmationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KitCtaPanelAbstractConfirmationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: KitCtaPanelAbstractConfirmationModule, declarations: [KitCtaPanelAbstractConfirmationComponent], imports: [KitCtaPanelActionModule,
         KitSvgIconModule,
         CommonModule], exports: [KitCtaPanelAbstractConfirmationComponent] });
-KitCtaPanelAbstractConfirmationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitCtaPanelAbstractConfirmationModule, imports: [KitCtaPanelActionModule,
+KitCtaPanelAbstractConfirmationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitCtaPanelAbstractConfirmationModule, imports: [KitCtaPanelActionModule,
         KitSvgIconModule,
         CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitCtaPanelAbstractConfirmationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitCtaPanelAbstractConfirmationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2020/lib/components/kit-cta-panel-action/kit-cta-panel-action.component.mjs

@@ -15,9 +15,9 @@ export class KitCtaPanelActionComponent {
         this.KitButtonType = KitButtonType;
     }
 }
-KitCtaPanelActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitCtaPanelActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-KitCtaPanelActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: KitCtaPanelActionComponent, selector: "kit-cta-panel-action", inputs: { disabled: "disabled", confirmText: "confirmText", quitText: "quitText" }, outputs: { quitClicked: "quitClicked", confirmClicked: "confirmClicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-action\">\n  <kit-button class=\"action-button\"\n              [label]=\"quitText\"\n              [kind]=\"KitButtonKind.SMALL\"\n              [type]=\"KitButtonType.OUTLINED\"\n              (clicked)=\"quitClicked.emit()\"\n  ></kit-button>\n  <kit-button class=\"action-button\"\n              [label]=\"confirmText\"\n              [kind]=\"KitButtonKind.SMALL\"\n              [disabled]=\"disabled\"\n              (clicked)=\"confirmClicked.emit()\"\n  ></kit-button>\n</div>\n", styles: [".kit-cta-panel-action{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.kit-cta-panel-action .action-button ::ng-deep .k-button{width:100%}\n"], dependencies: [{ kind: "component", type: i1.KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "kind", "iconPosition", "buttonClass"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitCtaPanelActionComponent, decorators: [{
+KitCtaPanelActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitCtaPanelActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+KitCtaPanelActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: KitCtaPanelActionComponent, selector: "kit-cta-panel-action", inputs: { disabled: "disabled", confirmText: "confirmText", quitText: "quitText" }, outputs: { quitClicked: "quitClicked", confirmClicked: "confirmClicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-action\">\n  <kit-button class=\"action-button\"\n              [label]=\"quitText\"\n              [kind]=\"KitButtonKind.SMALL\"\n              [type]=\"KitButtonType.OUTLINED\"\n              (clicked)=\"quitClicked.emit()\"\n  ></kit-button>\n  <kit-button class=\"action-button\"\n              [label]=\"confirmText\"\n              [kind]=\"KitButtonKind.SMALL\"\n              [disabled]=\"disabled\"\n              (clicked)=\"confirmClicked.emit()\"\n  ></kit-button>\n</div>\n", styles: [".kit-cta-panel-action{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.kit-cta-panel-action .action-button ::ng-deep .k-button{width:100%}\n"], dependencies: [{ kind: "component", type: i1.KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "kind", "iconPosition", "buttonClass"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitCtaPanelActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-cta-panel-action', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-cta-panel-action\">\n  <kit-button class=\"action-button\"\n              [label]=\"quitText\"\n              [kind]=\"KitButtonKind.SMALL\"\n              [type]=\"KitButtonType.OUTLINED\"\n              (clicked)=\"quitClicked.emit()\"\n  ></kit-button>\n  <kit-button class=\"action-button\"\n              [label]=\"confirmText\"\n              [kind]=\"KitButtonKind.SMALL\"\n              [disabled]=\"disabled\"\n              (clicked)=\"confirmClicked.emit()\"\n  ></kit-button>\n</div>\n", styles: [".kit-cta-panel-action{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.kit-cta-panel-action .action-button ::ng-deep .k-button{width:100%}\n"] }]
         }], propDecorators: { disabled: [{

package/esm2020/lib/components/kit-cta-panel-action/kit-cta-panel-action.module.mjs

@@ -5,12 +5,12 @@ import { KitCtaPanelActionComponent } from './kit-cta-panel-action.component';
 import * as i0 from "@angular/core";
 export class KitCtaPanelActionModule {
 }
-KitCtaPanelActionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitCtaPanelActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-KitCtaPanelActionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.6", ngImport: i0, type: KitCtaPanelActionModule, declarations: [KitCtaPanelActionComponent], imports: [CommonModule,
+KitCtaPanelActionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitCtaPanelActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KitCtaPanelActionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: KitCtaPanelActionModule, declarations: [KitCtaPanelActionComponent], imports: [CommonModule,
         KitButtonModule], exports: [KitCtaPanelActionComponent] });
-KitCtaPanelActionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitCtaPanelActionModule, imports: [CommonModule,
+KitCtaPanelActionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitCtaPanelActionModule, imports: [CommonModule,
         KitButtonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitCtaPanelActionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitCtaPanelActionModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2020/lib/components/kit-cta-panel-confirmation/abstract-kit-cta-panel-confirmation.component.mjs

@@ -17,9 +17,9 @@ export class AbstractKitCtaPanelConfirmationComponent {
         this.isConfirmation = true;
     }
 }
-AbstractKitCtaPanelConfirmationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: AbstractKitCtaPanelConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-AbstractKitCtaPanelConfirmationComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.6", type: AbstractKitCtaPanelConfirmationComponent, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: AbstractKitCtaPanelConfirmationComponent, decorators: [{
+AbstractKitCtaPanelConfirmationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AbstractKitCtaPanelConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+AbstractKitCtaPanelConfirmationComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: AbstractKitCtaPanelConfirmationComponent, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AbstractKitCtaPanelConfirmationComponent, decorators: [{
             type: Directive
         }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWJzdHJhY3Qta2l0LWN0YS1wYW5lbC1jb25maXJtYXRpb24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkta2l0L3NyYy9saWIvY29tcG9uZW50cy9raXQtY3RhLXBhbmVsLWNvbmZpcm1hdGlvbi9hYnN0cmFjdC1raXQtY3RhLXBhbmVsLWNvbmZpcm1hdGlvbi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFHMUMsTUFBTSxPQUFnQix3Q0FBd0M7SUFEOUQ7UUFFRSxtQkFBYyxHQUFZLEtBQUssQ0FBQztLQWlCakM7SUFmQyxpQkFBaUI7UUFDZixJQUFJLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztJQUMxQixDQUFDO0lBRUQsaUJBQWlCO1FBQ2YsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUVTLGdCQUFnQjtRQUN4QixJQUFJLENBQUMsY0FBYyxHQUFHLEtBQUssQ0FBQztJQUM5QixDQUFDO0lBRVMsZ0JBQWdCO1FBQ3hCLElBQUksQ0FBQyxjQUFjLEdBQUcsSUFBSSxDQUFDO0lBQzdCLENBQUM7O3FJQWpCbUIsd0NBQXdDO3lIQUF4Qyx3Q0FBd0M7MkZBQXhDLHdDQUF3QztrQkFEN0QsU0FBUyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5ARGlyZWN0aXZlKClcbmV4cG9ydCBhYnN0cmFjdCBjbGFzcyBBYnN0cmFjdEtpdEN0YVBhbmVsQ29uZmlybWF0aW9uQ29tcG9uZW50IHtcbiAgaXNDb25maXJtYXRpb246IGJvb2xlYW4gPSBmYWxzZTtcblxuICBvbk9wZW5CdXR0b25DbGljaygpOiB2b2lkIHtcbiAgICB0aGlzLnNob3dDb25maXJtYXRpb24oKTtcbiAgfVxuXG4gIG9uUXVpdEJ1dHRvbkNsaWNrKCk6IHZvaWQge1xuICAgIHRoaXMuaGlkZUNvbmZpcm1hdGlvbigpO1xuICB9XG5cbiAgcHJvdGVjdGVkIGhpZGVDb25maXJtYXRpb24oKTogdm9pZCB7XG4gICAgdGhpcy5pc0NvbmZpcm1hdGlvbiA9IGZhbHNlO1xuICB9XG5cbiAgcHJvdGVjdGVkIHNob3dDb25maXJtYXRpb24oKTogdm9pZCB7XG4gICAgdGhpcy5pc0NvbmZpcm1hdGlvbiA9IHRydWU7XG4gIH1cbn1cbiJdfQ==

package/esm2020/lib/components/kit-cta-panel-confirmation/kit-cta-panel-confirmation.component.mjs

@@ -25,9 +25,9 @@ export class KitCtaPanelConfirmationComponent {
         this.confirmClicked.emit(this.form.value);
     }
 }
-KitCtaPanelConfirmationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitCtaPanelConfirmationComponent, deps: [{ token: i1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-KitCtaPanelConfirmationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i4.KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "messageType", "state", "defaultItem", "listHeight", "hideDefaultItem"], outputs: ["selected"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.KitCtaPanelActionComponent, selector: "kit-cta-panel-action", inputs: ["disabled", "confirmText", "quitText"], outputs: ["quitClicked", "confirmClicked"] }, { kind: "component", type: i6.KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "defaultChecked", "readonly", "state", "messageIcon", "messageText", "messageType"], outputs: ["changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitCtaPanelConfirmationComponent, decorators: [{
+KitCtaPanelConfirmationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitCtaPanelConfirmationComponent, deps: [{ token: i1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+KitCtaPanelConfirmationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i4.KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "messageType", "state", "defaultItem", "listHeight", "hideDefaultItem"], outputs: ["selected"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.KitCtaPanelActionComponent, selector: "kit-cta-panel-action", inputs: ["disabled", "confirmText", "quitText"], outputs: ["quitClicked", "confirmClicked"] }, { kind: "component", type: i6.KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "defaultChecked", "readonly", "state", "messageIcon", "messageText", "messageType"], outputs: ["changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitCtaPanelConfirmationComponent, decorators: [{
             type: Component,
             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"] }]
         }], ctorParameters: function () { return [{ type: i1.UntypedFormBuilder }]; }, propDecorators: { data: [{

package/esm2020/lib/components/kit-cta-panel-confirmation/kit-cta-panel-confirmation.module.mjs

@@ -9,8 +9,8 @@ import { KitCheckboxModule } from '../kit-checkbox/kit-checkbox.module';
 import * as i0 from "@angular/core";
 export class KitCtaPanelConfirmationModule {
 }
-KitCtaPanelConfirmationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitCtaPanelConfirmationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-KitCtaPanelConfirmationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.6", ngImport: i0, type: KitCtaPanelConfirmationModule, declarations: [KitCtaPanelConfirmationComponent], imports: [CommonModule,
+KitCtaPanelConfirmationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitCtaPanelConfirmationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KitCtaPanelConfirmationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: KitCtaPanelConfirmationModule, declarations: [KitCtaPanelConfirmationComponent], imports: [CommonModule,
         KitSvgIconModule,
         KitDropdownModule,
         FormsModule,
@@ -19,7 +19,7 @@ KitCtaPanelConfirmationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14
         KitDropdownModule,
         KitCtaPanelActionModule,
         KitCheckboxModule], exports: [KitCtaPanelConfirmationComponent] });
-KitCtaPanelConfirmationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitCtaPanelConfirmationModule, imports: [CommonModule,
+KitCtaPanelConfirmationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitCtaPanelConfirmationModule, imports: [CommonModule,
         KitSvgIconModule,
         KitDropdownModule,
         FormsModule,
@@ -28,7 +28,7 @@ KitCtaPanelConfirmationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12
         KitDropdownModule,
         KitCtaPanelActionModule,
         KitCheckboxModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitCtaPanelConfirmationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitCtaPanelConfirmationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2020/lib/components/kit-cta-panel-item/kit-cta-panel-item.component.mjs

@@ -23,9 +23,9 @@ export class KitCtaPanelItemComponent {
         this.clicked.emit();
     }
 }
-KitCtaPanelItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitCtaPanelItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-KitCtaPanelItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", 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\" [icon]=\"item?.icon\"></kit-svg-icon>\n    <div class=\"panel-item-text\">\n      <div *ngIf=\"item?.title\" class=\"panel-item-title\">{{ item?.title }}</div>\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\">{{ item?.buttonText }}</span>\n            <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"></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\">{{ item?.buttonText }}</span>\n            <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"></kit-svg-icon>\n          </a>\n        </ng-container>\n      </ng-container>\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:#ffffff}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitCtaPanelItemComponent, decorators: [{
+KitCtaPanelItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitCtaPanelItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+KitCtaPanelItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.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\" [icon]=\"item?.icon\"></kit-svg-icon>\n    <div class=\"panel-item-text\">\n      <div *ngIf=\"item?.title\" class=\"panel-item-title\">{{ item?.title }}</div>\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\">{{ item?.buttonText }}</span>\n            <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"></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\">{{ item?.buttonText }}</span>\n            <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"></kit-svg-icon>\n          </a>\n        </ng-container>\n      </ng-container>\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:#ffffff}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitCtaPanelItemComponent, decorators: [{
             type: Component,
             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\" [icon]=\"item?.icon\"></kit-svg-icon>\n    <div class=\"panel-item-text\">\n      <div *ngIf=\"item?.title\" class=\"panel-item-title\">{{ item?.title }}</div>\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\">{{ item?.buttonText }}</span>\n            <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"></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\">{{ item?.buttonText }}</span>\n            <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"></kit-svg-icon>\n          </a>\n        </ng-container>\n      </ng-container>\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:#ffffff}.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}\n"] }]
         }], propDecorators: { item: [{

package/esm2020/lib/components/kit-cta-panel-item/kit-cta-panel-item.module.mjs

@@ -6,14 +6,14 @@ import { RouterModule } from '@angular/router';
 import * as i0 from "@angular/core";
 export class KitCtaPanelItemModule {
 }
-KitCtaPanelItemModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitCtaPanelItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-KitCtaPanelItemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.6", ngImport: i0, type: KitCtaPanelItemModule, declarations: [KitCtaPanelItemComponent], imports: [CommonModule,
+KitCtaPanelItemModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitCtaPanelItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KitCtaPanelItemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: KitCtaPanelItemModule, declarations: [KitCtaPanelItemComponent], imports: [CommonModule,
         KitSvgIconModule,
         RouterModule], exports: [KitCtaPanelItemComponent] });
-KitCtaPanelItemModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitCtaPanelItemModule, imports: [CommonModule,
+KitCtaPanelItemModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitCtaPanelItemModule, imports: [CommonModule,
         KitSvgIconModule,
         RouterModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitCtaPanelItemModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitCtaPanelItemModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2020/lib/components/kit-daterange/kit-daterange.component.mjs

@@ -84,9 +84,9 @@ export class KitDaterangeComponent {
         this.closed.emit(rangeValue);
     }
 }
-KitDaterangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitDaterangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-KitDaterangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", 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      <kendo-label *ngIf=\"startLabel\" class=\"label display-block\"\n                   [text]=\"startLabel\"\n                   [for]=\"startInput\"\n      ></kendo-label>\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      <kendo-label *ngIf=\"endLabel\" class=\"label display-block\"\n                   [text]=\"endLabel\"\n                   [for]=\"endInput\"\n      ></kendo-label>\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 .label{color:#74777d}.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:#ffffff;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{margin-bottom:4px;font-weight:500;font-size:13px;color:#a9a8a8}.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{margin-bottom:20px;padding:6px;font-size:14px;font-weight:500}.kit-daterange .k-popup .k-calendar-title{padding:0;color:#000;line-height:1.26}.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-today{display:flex;align-items:center;padding:0 6px;color:#56a2f7;text-transform:uppercase}.kit-daterange .k-popup .k-today:hover{color:#56a2f7}.kit-daterange .k-popup .k-calendar-tr{display:flex}.kit-daterange .k-popup .k-calendar-th,.kit-daterange .k-popup .k-calendar-td{padding:0;width:40px;height:40px;color:#000;font-weight:500;font-size:13px;line-height:1}.kit-daterange .k-popup .k-calendar-th{height:24px;text-transform:uppercase}.kit-daterange .k-popup .k-calendar-td{display:flex;border-radius:0;border:1px solid #dfdfdf;box-sizing:border-box}.kit-daterange .k-popup .k-calendar-td:hover .k-link{color:#56a2f7;background:#ffffff}.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-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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: i2.DateRangeComponent, selector: "kendo-daterange" }, { kind: "component", type: i2.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.DateRangeStartInputDirective, selector: "[kendoDateRangeStartInput]", inputs: ["autoCorrectOn", "navigateCalendarOnFocus"] }, { kind: "directive", type: i2.DateRangeEndInputDirective, selector: "[kendoDateRangeEndInput]", inputs: ["autoCorrectOn", "navigateCalendarOnFocus"] }, { kind: "component", type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { kind: "component", type: i4.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i5.KitInputMessageComponent, selector: "kit-input-message", inputs: ["type", "icon", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitDaterangeComponent, decorators: [{
+KitDaterangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitDaterangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+KitDaterangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.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      <kendo-label *ngIf=\"startLabel\" class=\"label display-block\"\n                   [text]=\"startLabel\"\n                   [for]=\"startInput\"\n      ></kendo-label>\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      <kendo-label *ngIf=\"endLabel\" class=\"label display-block\"\n                   [text]=\"endLabel\"\n                   [for]=\"endInput\"\n      ></kendo-label>\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 .label{color:#74777d}.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:#ffffff;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{margin-bottom:4px;font-weight:500;font-size:13px;color:#a9a8a8}.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{margin-bottom:20px;padding:6px;font-size:14px;font-weight:500}.kit-daterange .k-popup .k-calendar-title{padding:0;color:#000;line-height:1.26}.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-today{display:flex;align-items:center;padding:0 6px;color:#56a2f7;text-transform:uppercase}.kit-daterange .k-popup .k-today:hover{color:#56a2f7}.kit-daterange .k-popup .k-calendar-tr{display:flex}.kit-daterange .k-popup .k-calendar-th,.kit-daterange .k-popup .k-calendar-td{padding:0;width:40px;height:40px;color:#000;font-weight:500;font-size:13px;line-height:1}.kit-daterange .k-popup .k-calendar-th{height:24px;text-transform:uppercase}.kit-daterange .k-popup .k-calendar-td{display:flex;border-radius:0;border:1px solid #dfdfdf;box-sizing:border-box}.kit-daterange .k-popup .k-calendar-td:hover .k-link{color:#56a2f7;background:#ffffff}.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-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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: i2.DateRangeComponent, selector: "kendo-daterange" }, { kind: "component", type: i2.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.DateRangeStartInputDirective, selector: "[kendoDateRangeStartInput]", inputs: ["autoCorrectOn", "navigateCalendarOnFocus"] }, { kind: "directive", type: i2.DateRangeEndInputDirective, selector: "[kendoDateRangeEndInput]", inputs: ["autoCorrectOn", "navigateCalendarOnFocus"] }, { kind: "component", type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { kind: "component", type: i4.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i5.KitInputMessageComponent, selector: "kit-input-message", inputs: ["type", "icon", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitDaterangeComponent, decorators: [{
             type: Component,
             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      <kendo-label *ngIf=\"startLabel\" class=\"label display-block\"\n                   [text]=\"startLabel\"\n                   [for]=\"startInput\"\n      ></kendo-label>\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      <kendo-label *ngIf=\"endLabel\" class=\"label display-block\"\n                   [text]=\"endLabel\"\n                   [for]=\"endInput\"\n      ></kendo-label>\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 .label{color:#74777d}.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:#ffffff;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{margin-bottom:4px;font-weight:500;font-size:13px;color:#a9a8a8}.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{margin-bottom:20px;padding:6px;font-size:14px;font-weight:500}.kit-daterange .k-popup .k-calendar-title{padding:0;color:#000;line-height:1.26}.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-today{display:flex;align-items:center;padding:0 6px;color:#56a2f7;text-transform:uppercase}.kit-daterange .k-popup .k-today:hover{color:#56a2f7}.kit-daterange .k-popup .k-calendar-tr{display:flex}.kit-daterange .k-popup .k-calendar-th,.kit-daterange .k-popup .k-calendar-td{padding:0;width:40px;height:40px;color:#000;font-weight:500;font-size:13px;line-height:1}.kit-daterange .k-popup .k-calendar-th{height:24px;text-transform:uppercase}.kit-daterange .k-popup .k-calendar-td{display:flex;border-radius:0;border:1px solid #dfdfdf;box-sizing:border-box}.kit-daterange .k-popup .k-calendar-td:hover .k-link{color:#56a2f7;background:#ffffff}.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-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"] }]
         }], propDecorators: { type: [{

package/esm2020/lib/components/kit-daterange/kit-daterange.module.mjs

@@ -9,20 +9,20 @@ import '@progress/kendo-angular-intl/locales/en-GB/all';
 import * as i0 from "@angular/core";
 export class KitDaterangeModule {
 }
-KitDaterangeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitDaterangeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-KitDaterangeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.6", ngImport: i0, type: KitDaterangeModule, declarations: [KitDaterangeComponent], imports: [CommonModule,
+KitDaterangeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitDaterangeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KitDaterangeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: KitDaterangeModule, declarations: [KitDaterangeComponent], imports: [CommonModule,
         DateInputsModule,
         LabelModule,
         KitSvgIconModule,
         KitInputMessageModule], exports: [KitDaterangeComponent] });
-KitDaterangeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitDaterangeModule, providers: [
+KitDaterangeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitDaterangeModule, providers: [
         DateRangeService,
     ], imports: [CommonModule,
         DateInputsModule,
         LabelModule,
         KitSvgIconModule,
         KitInputMessageModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: KitDaterangeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: KitDaterangeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [