@indigina/ui-kit 1.0.87 → 1.0.91

package/fesm2015/indigina-ui-kit.js

@@ -1,7 +1,7 @@
 import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, NgModule, ViewEncapsulation, forwardRef, ElementRef, ChangeDetectorRef, Directive, HostListener, ViewChild, Injectable, RendererFactory2 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ButtonModule, ButtonGroupModule } from '@progress/kendo-angular-buttons';
-import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, FormControl } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, FormControl, Validators, FormBuilder } from '@angular/forms';
 import { TextBoxModule, NumericTextBoxModule, InputsModule, CheckBoxModule, SwitchModule } from '@progress/kendo-angular-inputs';
 import { LabelModule } from '@progress/kendo-angular-label';
 import '@progress/kendo-angular-intl/locales/en-GB/all';
@@ -61,7 +61,7 @@ KitButtonComponent.decorators = [
                 selector: 'kit-button',
                 template: "<div class=\"kit-button\">\n  <button kendoButton\n          [disabled]=\"disabled\"\n          [ngClass]=\"[type, kind, iconPosition]\"\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",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".kit-button .icon-right{flex-direction:row}.kit-button .icon-right .button-icon{margin-left:8px}.kit-button .icon-left{flex-direction:row-reverse}.kit-button .icon-left .button-icon{margin-right:8px}.kit-button .k-button{height:44px;padding:0 12px;color:#fff;font-weight:500;font-size:14px;grid-gap:0;gap:0;border-radius:6px;border:1px solid transparent}.kit-button .k-button .button-icon{width:16px;height:16px;stroke:#fff;fill:none}.kit-button .k-button.small{height:28px;font-size:12px}.kit-button .k-button.filled{background:#56a2f7}.kit-button .k-button.filled.k-state-focused{border-color:#3678c3}.kit-button .k-button.outlined{color:#56a2f7;border-color:#56a2f7;background:#ffffff}.kit-button .k-button.outlined .button-icon{stroke:#56a2f7}.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:#ddecfd}.kit-button .outlined:disabled{border-color:#a9a8a8}.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"]
+                styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-main-20: #ddecfd}.kit-button .icon-right{flex-direction:row}.kit-button .icon-right .button-icon{margin-left:8px}.kit-button .icon-left{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;grid-gap:0;gap:0;border-radius:6px;border:1px solid transparent}.kit-button .k-button .button-icon{width:16px;height:16px;stroke:var(--ui-kit-color-white);fill:none}.kit-button .k-button.small{height:28px;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 .icon-right.k-button.small .button-icon{margin-left:4px}.kit-button .icon-left.k-button.small .button-icon{margin-right:4px}\n"]
             },] }
 ];
 KitButtonComponent.propDecorators = {
@@ -336,7 +336,7 @@ KitSwitchComponent.decorators = [
                 template: "<div class=\"kit-switch {{ state }}\">\n  <ng-container *ngIf=\"items.length\">\n    <label *ngIf=\"label\" class=\"label display-block\"\n           [title]=\"label\"\n    >{{ label }}</label>\n\n    <kendo-buttongroup look=\"outline\" class=\"button-group\"\n                       [selection]=\"mode\"\n                       [class.disabled]=\"disabled\">\n      <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n              [selected]=\"isItemSelected(item)\"\n              [togglable]=\"true\"\n              [disabled]=\"item.disabled && item.disabled(item)\"\n              (selectedChange)=\"onItemSelect($event, item)\">\n        <ng-container *ngIf=\"item.title; else icon\">\n          {{ item.title }}\n        </ng-container>\n\n        <ng-template #icon>\n          <kit-svg-icon class=\"icon-wrapper\"\n                        [icon]=\"item.icon\"\n          ></kit-svg-icon>\n        </ng-template>\n      </button>\n    </kendo-buttongroup>\n    <kit-input-message *ngIf=\"messageText\"\n                       [type]=\"messageType\"\n                       [icon]=\"messageIcon\"\n                       [message]=\"messageText\"\n    ></kit-input-message>\n  </ng-container>\n</div>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None,
-                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-switch .label{margin-bottom:4px;color:#27282a;font-weight:500;font-size:13px}.kit-switch .button-group{background:#ffffff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{stroke:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--theme-color-1, #006890);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button .icon{stroke:var(--theme-color-1, #006890);fill:none}.kit-switch .button.k-button.k-state-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--theme-color-5, #002a3a);color:#fff}.kit-switch .button.k-button.k-state-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{stroke:#fff}.kit-switch .button.k-button.k-state-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-state-selected.k-state-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"]
+                styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-main-20: #ddecfd}.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-switch .label{margin-bottom:4px;color:#27282a;font-weight:500;font-size:13px}.kit-switch .button-group{background:#ffffff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{stroke:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--theme-color-1, #006890);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button .icon{stroke:var(--theme-color-1, #006890);fill:none}.kit-switch .button.k-button.k-state-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--theme-color-5, #002a3a);color:#fff}.kit-switch .button.k-button.k-state-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{stroke:#fff}.kit-switch .button.k-button.k-state-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-state-selected.k-state-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"]
             },] }
 ];
 KitSwitchComponent.propDecorators = {
@@ -728,7 +728,7 @@ KitAutocompleteComponent.decorators = [
                         useExisting: forwardRef(() => KitAutocompleteComponent),
                         multi: true,
                     }],
-                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-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-select{display:none}.kit-autocomplete .k-combobox{width:100%}.kit-autocomplete .k-dropdown-wrap{height:34px;border:1px solid #efefef;border-radius:4px;background:#ffffff}.kit-autocomplete .k-dropdown-wrap.k-state-focused{box-shadow:none}.kit-autocomplete .k-input{padding:0 32px 0 8px;height:100%;color:#002a3a;font-size:13px}.kit-autocomplete .k-input::selection{background:#00b0ad}.kit-autocomplete .loader{height:100%}.kit-autocomplete .kit-loader,.kit-autocomplete .kit-loader>div{height:100%}.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-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-item:not(:last-of-type){margin-bottom:4px}.kit-autocomplete .kit-autocomplete-popup .k-item:hover{background-color:#f3f5fa;color:#56a2f7}.kit-autocomplete:focus-within .k-dropdown-wrap{border-color:#00b0ad}.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup{height:200px}.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup .k-nodata,.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup .k-list-scroller{display:none}.kit-autocomplete.autocomplete-empty .kit-autocomplete-popup{display:none}.kit-autocomplete.autocomplete-disabled .label{color:#74777d}.kit-autocomplete.danger .k-dropdown-wrap{border-color:#ef3e42;background:#f8e0e0}.kit-autocomplete.danger .input-icon{fill:#f8e0e0}\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}.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-select{display:none}.kit-autocomplete .k-combobox{width:100%}.kit-autocomplete .k-dropdown-wrap{height:34px;border:1px solid #efefef;border-radius:4px;background:#ffffff}.kit-autocomplete .k-dropdown-wrap.k-state-focused{box-shadow:none}.kit-autocomplete .k-input{padding:0 32px 0 8px;height:100%;color:#002a3a;font-size:13px}.kit-autocomplete .k-input::selection{background:#00b0ad}.kit-autocomplete .loader{height:100%}.kit-autocomplete .kit-loader,.kit-autocomplete .kit-loader>div{height:100%}.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-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-item:not(:last-of-type){margin-bottom:4px}.kit-autocomplete .kit-autocomplete-popup .k-item:hover{background-color:#f3f5fa;color:#56a2f7}.kit-autocomplete:focus-within .k-dropdown-wrap{border-color:#00b0ad}.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup{height:200px}.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup .k-nodata,.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup .k-list-scroller{display:none}.kit-autocomplete.autocomplete-empty .kit-autocomplete-popup{display:none}.kit-autocomplete.autocomplete-disabled .label{color:#74777d}.kit-autocomplete.danger .k-dropdown-wrap{border-color:#ef3e42;background:#f8e0e0}.kit-autocomplete.danger .input-icon{fill:#f8e0e0}\n"]
             },] }
 ];
 KitAutocompleteComponent.ctorParameters = () => [
@@ -830,7 +830,7 @@ KitDropdownComponent.decorators = [
                         useExisting: forwardRef(() => KitDropdownComponent),
                         multi: true,
                     }],
-                styles: ["@charset \"UTF-8\";.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-dropdown .label{margin-bottom:4px;font-weight:500;font-size:13px;color:#a9a8a8}.kit-dropdown .k-state-disabled{background-color:#f3f4f6}.kit-dropdown .k-input{height:100%;font-size:13px;font-weight:400;color:#002a3a}.kit-dropdown .k-icon:before{content:\"\\e015\";color:#002a3a}.kit-dropdown .k-dropdown{width:100%;height:34px}.kit-dropdown .k-dropdown-wrap{border-radius:4px;background:#ffffff;border:1px solid #efefef}.kit-dropdown .k-dropdown-wrap:hover{background-color:#fff}.kit-dropdown .k-dropdown-wrap.k-state-focused{box-shadow:none}.kit-dropdown:focus-within .k-dropdown-wrap{border:1px solid #00b0ad}.kit-dropdown.disabled .label{color:#74777d}.kit-dropdown.danger .k-dropdown-wrap{border-color:#ef3e42;background:#f8e0e0}.kit-dropdown-popup.k-popup{margin-top:4px;border:1px solid #c1c7d0;border-radius:4px;box-shadow:0 0 8px #003e5680;background-color:#f3f4f6;padding:4px}.kit-dropdown-popup.k-popup .k-list-optionlabel{display:none}.kit-dropdown-popup.k-popup .k-item{padding:8px;background-color:#fff;font-size:13px;font-weight:500;box-shadow:none!important;border-radius:2px;color:#002a3a;line-height:1}.kit-dropdown-popup.k-popup .k-item:not(:last-of-type){margin-bottom:4px}.kit-dropdown-popup.k-popup .k-item:hover,.kit-dropdown-popup.k-popup .k-item.k-state-focused:hover{background-color:#f3f5fa;color:#56a2f7}.kit-dropdown-popup.k-popup .k-item.k-state-selected{background-color:#56a2f7;color:#fff}.kit-dropdown-popup.k-popup .k-item.k-state-disabled{background-color:#f3f4f6;color:#9a9fa6}\n"]
+                styles: ["@charset \"UTF-8\";.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}.kit-dropdown .label{margin-bottom:4px;font-weight:500;font-size:13px;color:#a9a8a8}.kit-dropdown .k-state-disabled{background-color:#f3f4f6}.kit-dropdown .k-input{height:100%;font-size:13px;font-weight:400;color:#002a3a}.kit-dropdown .k-icon:before{content:\"\\e015\";color:#002a3a}.kit-dropdown .k-dropdown{width:100%;height:34px}.kit-dropdown .k-dropdown-wrap{border-radius:4px;background:#ffffff;border:1px solid #efefef}.kit-dropdown .k-dropdown-wrap:hover{background-color:#fff}.kit-dropdown .k-dropdown-wrap.k-state-focused{box-shadow:none}.kit-dropdown:focus-within .k-dropdown-wrap{border:1px solid #00b0ad}.kit-dropdown.disabled .label{color:#74777d}.kit-dropdown.danger .k-dropdown-wrap{border-color:#ef3e42;background:#f8e0e0}.kit-dropdown-popup.k-popup{margin-top:4px;border:1px solid #c1c7d0;border-radius:4px;box-shadow:0 0 8px #003e5680;background-color:#f3f4f6;padding:4px}.kit-dropdown-popup.k-popup .k-list-optionlabel{display:none}.kit-dropdown-popup.k-popup .k-item{padding:8px;background-color:#fff;font-size:13px;font-weight:500;box-shadow:none!important;border-radius:2px;color:#002a3a;line-height:1}.kit-dropdown-popup.k-popup .k-item:not(:last-of-type){margin-bottom:4px}.kit-dropdown-popup.k-popup .k-item:hover,.kit-dropdown-popup.k-popup .k-item.k-state-focused:hover{background-color:#f3f5fa;color:#56a2f7}.kit-dropdown-popup.k-popup .k-item.k-state-selected{background-color:#56a2f7;color:#fff}.kit-dropdown-popup.k-popup .k-item.k-state-disabled{background-color:#f3f4f6;color:#9a9fa6}\n"]
             },] }
 ];
 KitDropdownComponent.ctorParameters = () => [
@@ -1073,7 +1073,7 @@ KitTextLabelComponent.decorators = [
                 template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n  <kendo-label *ngIf=\"value\" [text]=\"label\"></kendo-label>\n  <kendo-label *ngIf=\"!value\" [text]=\"noValueMessage || label\"></kendo-label>\n  <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n  <ng-template #htmlModeTemplate>\n    <div class=\"value\" [innerHTML]=\"value\"></div>\n  </ng-template>\n  <kit-input-message *ngIf=\"messageText && value\"\n                     [type]=\"messageType\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None,
-                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-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#ffffff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .k-label{display:block;margin-bottom:4px;color:#a9a8a8;font-weight:500;font-size:13px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"]
+                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}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#ffffff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .k-label{display:block;margin-bottom:4px;color:#a9a8a8;font-weight:500;font-size:13px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"]
             },] }
 ];
 KitTextLabelComponent.propDecorators = {
@@ -2012,11 +2012,178 @@ KitDaterangeModule.decorators = [
             },] }
 ];
 
+class KitCtaPanelItemComponent {
+    constructor() {
+        this.clicked = new EventEmitter();
+        this.KitSvgIcon = KitSvgIcon;
+    }
+    onButtonClick() {
+        var _a;
+        if ((_a = this.item) === null || _a === void 0 ? void 0 : _a.action) {
+            this.item.action();
+        }
+        this.clicked.emit();
+    }
+}
+KitCtaPanelItemComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'kit-cta-panel-item',
+                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      <button class=\"panel-item-button\" (click)=\"onButtonClick()\">\n        <span *ngIf=\"item?.buttonText\" class=\"button-label\">{{ item?.buttonText }}</span>\n        <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"></kit-svg-icon>\n      </button>\n    </div>\n  </div>\n</div>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.None,
+                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;border:none;background:none;cursor:pointer}.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"]
+            },] }
+];
+KitCtaPanelItemComponent.propDecorators = {
+    item: [{ type: Input }],
+    clicked: [{ type: Output }]
+};
+
+class KitCtaPanelItemModule {
+}
+KitCtaPanelItemModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    KitCtaPanelItemComponent,
+                ],
+                imports: [
+                    CommonModule,
+                    KitSvgIconModule,
+                ],
+                exports: [
+                    KitCtaPanelItemComponent,
+                ],
+            },] }
+];
+
+class KitCtaPanelActionComponent {
+    constructor() {
+        this.disabled = false;
+        this.confirmText = '';
+        this.quitText = '';
+        this.quitClicked = new EventEmitter();
+        this.confirmClicked = new EventEmitter();
+        this.KitSvgIcon = KitSvgIcon;
+        this.KitButtonKind = KitButtonKind;
+        this.KitButtonType = KitButtonType;
+    }
+}
+KitCtaPanelActionComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'kit-cta-panel-action',
+                template: "<div class=\"kit-cta-panel-action display-grid columns-2\">\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",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [".kit-cta-panel-action{grid-gap:24px;gap:24px}\n"]
+            },] }
+];
+KitCtaPanelActionComponent.propDecorators = {
+    disabled: [{ type: Input }],
+    confirmText: [{ type: Input }],
+    quitText: [{ type: Input }],
+    quitClicked: [{ type: Output }],
+    confirmClicked: [{ type: Output }]
+};
+
+class KitCtaPanelActionModule {
+}
+KitCtaPanelActionModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    KitCtaPanelActionComponent,
+                ],
+                imports: [
+                    CommonModule,
+                    KitButtonModule,
+                ],
+                exports: [
+                    KitCtaPanelActionComponent,
+                ],
+            },] }
+];
+
+class AbstractKitCtaPanelConfirmationComponent {
+    constructor() {
+        this.isConfirmation = false;
+    }
+    onOpenButtonClick() {
+        this.toggleMode();
+    }
+    onQuitButtonClick() {
+        this.toggleMode();
+    }
+    toggleMode() {
+        this.isConfirmation = !this.isConfirmation;
+    }
+}
+AbstractKitCtaPanelConfirmationComponent.decorators = [
+    { type: Directive }
+];
+
+class KitCtaPanelConfirmationComponent {
+    constructor(formBuilder) {
+        this.formBuilder = formBuilder;
+        this.confirmButtonDisabled = false;
+        this.quitText = '';
+        this.confirmText = '';
+        this.quitClicked = new EventEmitter();
+        this.confirmClicked = new EventEmitter();
+        this.form = this.formBuilder.group({
+            reason: [null, Validators.required],
+        });
+    }
+    onConfirmButtonClick() {
+        this.confirmClicked.emit(this.form.value.reason);
+    }
+}
+KitCtaPanelConfirmationComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'kit-cta-panel-confirmation',
+                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\">{{ data?.description }}</div>\n    </div>\n  </div>\n  <div *ngIf=\"data?.dropdownItems\" class=\"confirmation-main\">\n    <form [formGroup]=\"form\">\n      <kit-dropdown formControlName=\"reason\" [label]=\"data?.dropdownLabel\" [items]=\"data?.dropdownItems\"></kit-dropdown>\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",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.None,
+                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}\n"]
+            },] }
+];
+KitCtaPanelConfirmationComponent.ctorParameters = () => [
+    { type: FormBuilder }
+];
+KitCtaPanelConfirmationComponent.propDecorators = {
+    data: [{ type: Input }],
+    confirmButtonDisabled: [{ type: Input }],
+    quitText: [{ type: Input }],
+    confirmText: [{ type: Input }],
+    quitClicked: [{ type: Output }],
+    confirmClicked: [{ type: Output }]
+};
+
+class KitCtaPanelConfirmationModule {
+}
+KitCtaPanelConfirmationModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    KitCtaPanelConfirmationComponent,
+                ],
+                imports: [
+                    CommonModule,
+                    KitSvgIconModule,
+                    KitDropdownModule,
+                    FormsModule,
+                    ReactiveFormsModule,
+                    KitSvgIconModule,
+                    KitDropdownModule,
+                    KitCtaPanelActionModule,
+                ],
+                exports: [
+                    KitCtaPanelConfirmationComponent,
+                ],
+            },] }
+];
+
 // KitButton
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { KitAutocompleteComponent, KitAutocompleteModule, KitAutocompleteState, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonType, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitDaterangeComponent, KitDaterangeIconPosition, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDropdownComponent, KitDropdownModule, KitDropdownState, KitInputMessageComponent, KitInputMessageModule, KitInputMessageType, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitNotificationComponent, KitNotificationModule, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitPillComponent, KitPillModule, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTextLabelComponent, KitTextLabelModule, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitToastrModule, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipModule, KitTooltipPosition, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType };
+export { AbstractKitCtaPanelConfirmationComponent, KitAutocompleteComponent, KitAutocompleteModule, KitAutocompleteState, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonType, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitDaterangeComponent, KitDaterangeIconPosition, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDropdownComponent, KitDropdownModule, KitDropdownState, KitInputMessageComponent, KitInputMessageModule, KitInputMessageType, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitNotificationComponent, KitNotificationModule, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitPillComponent, KitPillModule, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTextLabelComponent, KitTextLabelModule, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitToastrModule, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipModule, KitTooltipPosition, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType };
 //# sourceMappingURL=indigina-ui-kit.js.map