@indigina/ui-kit 1.1.26 → 1.1.28

package/fesm2022/indigina-ui-kit.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, EventEmitter, ViewEncapsulation, Output, NgModule, forwardRef, ViewChild, signal, TemplateRef, ContentChild, Directive, HostListener, Host, Self, Injectable, Inject } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, EventEmitter, ViewEncapsulation, Output, NgModule, forwardRef, ViewChild, signal, TemplateRef, ContentChild, Directive, HostListener, Host, Self, Injectable, Inject, ElementRef } from '@angular/core';
 import * as i1 from '@progress/kendo-angular-buttons';
 import { ButtonModule, ButtonGroupModule } from '@progress/kendo-angular-buttons';
 import * as i1$1 from '@angular/common';
@@ -11,13 +11,13 @@ import { TextBoxModule, NumericTextBoxModule, InputsModule, CheckBoxModule, Swit
 import * as i3 from '@progress/kendo-angular-label';
 import { LabelModule } from '@progress/kendo-angular-label';
 import '@progress/kendo-angular-intl/locales/en-GB/all';
-import { KitSvgIconModule as KitSvgIconModule$1 } from 'projects/ui-kit/src/lib/components/kit-svg-icon/kit-svg-icon.module';
 import { map } from 'rxjs/operators';
 import * as i1$2 from '@progress/kendo-angular-dropdowns';
 import { DropDownListModule, DropDownsModule, MultiSelectModule } from '@progress/kendo-angular-dropdowns';
 import * as i2$1 from '@progress/kendo-angular-dateinputs';
 import { DateInputsModule, DateRangePopupComponent, DateRangeService, TimePickerModule } from '@progress/kendo-angular-dateinputs';
-import { PopupService } from '@progress/kendo-angular-popup';
+import * as i1$8 from '@progress/kendo-angular-popup';
+import { PopupService, PopupModule } from '@progress/kendo-angular-popup';
 import { TooltipDirective, TooltipModule } from '@progress/kendo-angular-tooltip';
 import * as i1$4 from 'ngx-toastr';
 import { ToastrModule, TOAST_CONFIG, DefaultGlobalConfig } from 'ngx-toastr';
@@ -36,7 +36,6 @@ import * as i3$1 from '@progress/kendo-angular-layout';
 import { PanelBarExpandMode, PanelBarModule } from '@progress/kendo-angular-layout';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import initials from 'initials';
-import { KitInputMessageModule as KitInputMessageModule$1 } from 'projects/ui-kit/src/lib/components/kit-input-message/kit-input-message.module';
 
 var KitButtonType;
 (function (KitButtonType) {
@@ -792,12 +791,12 @@ class KitNumericTextboxModule {
             NumericTextBoxModule,
             LabelModule,
             KitInputMessageModule,
-            KitSvgIconModule$1], exports: [KitNumericTextboxComponent] }); }
+            KitSvgIconModule], exports: [KitNumericTextboxComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNumericTextboxModule, imports: [CommonModule,
             NumericTextBoxModule,
             LabelModule,
             KitInputMessageModule,
-            KitSvgIconModule$1] }); }
+            KitSvgIconModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNumericTextboxModule, decorators: [{
             type: NgModule,
@@ -810,7 +809,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
                         NumericTextBoxModule,
                         LabelModule,
                         KitInputMessageModule,
-                        KitSvgIconModule$1,
+                        KitSvgIconModule,
                     ],
                     exports: [
                         KitNumericTextboxComponent,
@@ -1188,6 +1187,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
                 }]
         }] });
 
+var KitTextareaState;
+(function (KitTextareaState) {
+    KitTextareaState["DEFAULT"] = "default";
+    KitTextareaState["WARNING"] = "warning";
+    KitTextareaState["ERROR"] = "error";
+    KitTextareaState["SUCCESS"] = "success";
+})(KitTextareaState || (KitTextareaState = {}));
+
 class KitTextareaAutoresizeDirective {
     constructor(elementRef) {
         this.elementRef = elementRef;
@@ -1218,11 +1225,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
                 args: [':input']
             }] } });
 
-var KitTextareaState;
-(function (KitTextareaState) {
-    KitTextareaState["REGULAR"] = "regular";
-    KitTextareaState["DANGER"] = "danger";
-})(KitTextareaState || (KitTextareaState = {}));
 class KitTextareaComponent {
     constructor() {
         /**
@@ -1236,7 +1238,7 @@ class KitTextareaComponent {
         /**
          * Defines a particular state for the component
          */
-        this.state = KitTextareaState.REGULAR;
+        this.state = KitTextareaState.DEFAULT;
         /**
          * Defines whether the textarea will be in the readonly mode
          */
@@ -1253,6 +1255,12 @@ class KitTextareaComponent {
          * An action which is emitted when textarea value changed
          */
         this.changed = new EventEmitter();
+        this.textareaStateIcon = {
+            [KitTextareaState.DEFAULT]: KitSvgIcon.INFO_CIRCLE,
+            [KitTextareaState.WARNING]: KitSvgIcon.WARNING_CIRCLE_FILLED,
+            [KitTextareaState.ERROR]: KitSvgIcon.CLOSE_CIRCLE_FILLED,
+            [KitTextareaState.SUCCESS]: KitSvgIcon.CHECK_CIRCLE_FILLED,
+        };
         /**
          * Function that should be called every time the form control value changes
          */
@@ -1310,11 +1318,11 @@ class KitTextareaComponent {
         this.changed.emit(target.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitTextareaComponent, selector: "kit-textarea", inputs: { placeholder: "placeholder", label: "label", defaultValue: "defaultValue", maxlength: "maxlength", minLines: "minLines", maxLines: "maxLines", disabled: "disabled", messageIcon: "messageIcon", messageText: "messageText", state: "state", readonly: "readonly" }, outputs: { focused: "focused", blured: "blured", changed: "changed" }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitTextareaComponent, selector: "kit-textarea", inputs: { placeholder: "placeholder", label: "label", defaultValue: "defaultValue", maxlength: "maxlength", minLines: "minLines", maxLines: "maxLines", disabled: "disabled", messageIcon: "messageIcon", messageText: "messageText", state: "state", icon: "icon", readonly: "readonly" }, outputs: { focused: "focused", blured: "blured", changed: "changed" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => KitTextareaComponent),
                 multi: true,
-            }], usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-textarea {{ state }}\"\n     [class.textarea-disabled]=\"disabled\"\n     [class.textarea-readonly]=\"readonly\">\n  <kendo-label *ngIf=\"label\" [text]=\"label\" [for]=\"textarea\"></kendo-label>\n  <div class=\"textarea-wrapper\">\n    <textarea autoresize #textarea class=\"k-input\"\n              [attr.placeholder]=\"placeholder\"\n              [style.min-height.px]=\"minHeight\"\n              [style.max-height.px]=\"maxHeight\"\n              [attr.maxlength]=\"maxlength\"\n              [disabled]=\"disabled\"\n              [value]=\"defaultValue\"\n              [readonly]=\"readonly\"\n              (focus)=\"onTextareaFocus()\"\n              (blur)=\"onTextareaBlur()\"\n              (input)=\"onTextareaChange($event)\"\n    ></textarea>\n  </div>\n  <kit-input-message *ngIf=\"messageText\"\n                     [icon]=\"messageIcon\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-textarea .k-label{display:block;margin-bottom:4px;color:#a9a8a8;font-weight:500;font-size:13px}.kit-textarea .textarea-wrapper{border:1px solid #efefef;border-radius:4px;background:#fff}.kit-textarea .textarea-wrapper:focus-within{border-color:#00b0ad}.kit-textarea .k-input{padding:8px;width:100%;min-height:32px;color:#002a3a;font-size:13px;border:none;border-radius:4px;box-sizing:border-box;line-height:1.26;overflow:auto;resize:none}.kit-textarea .k-input::placeholder{color:#74777d}.kit-textarea .k-input:disabled{background:#f3f4f6}.kit-textarea .k-input:disabled::placeholder{color:#9a9fa6}.kit-textarea.textarea-disabled .k-label,.kit-textarea.textarea-readonly .k-label{color:#74777d}.kit-textarea.textarea-disabled .k-input,.kit-textarea.textarea-readonly .k-input{color:#9a9fa6;cursor:default;pointer-events:none}.kit-textarea.danger .textarea-wrapper{border-color:#ef3e42}.kit-textarea.danger .k-input{background:#f8e0e0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["type", "icon", "message"] }, { kind: "directive", type: KitTextareaAutoresizeDirective, selector: "[autoresize]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+            }], usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-textarea\"\n     [ngClass]=\"state\"\n     [class.disabled]=\"disabled\"\n     [class.readonly]=\"readonly\">\n  @if (label) {\n    <kendo-label class=\"label\"\n                 [text]=\"label\"\n                 [for]=\"textarea\"\n    ></kendo-label>\n  }\n  <div class=\"kit-textarea-input\">\n    @if (icon) {\n      <kit-svg-icon class=\"kit-textarea-icon\"\n                    [icon]=\"icon\"\n      ></kit-svg-icon>\n    }\n    <textarea #textarea\n              autoresize\n              class=\"k-input\"\n              [attr.placeholder]=\"placeholder\"\n              [style.min-height.px]=\"minHeight\"\n              [style.max-height.px]=\"maxHeight\"\n              [attr.maxlength]=\"maxlength\"\n              [disabled]=\"disabled\"\n              [value]=\"defaultValue\"\n              [readonly]=\"readonly\"\n              (focus)=\"onTextareaFocus()\"\n              (blur)=\"onTextareaBlur()\"\n              (input)=\"onTextareaChange($event)\"\n    ></textarea>\n    <kit-svg-icon class=\"kit-textarea-state-icon\"\n                  [icon]=\"textareaStateIcon[state]\"\n    ></kit-svg-icon>\n  </div>\n\n  @if (messageText) {\n    <kit-input-message [icon]=\"messageIcon\"\n                       [message]=\"messageText\"\n    ></kit-input-message>\n  }\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-textarea .label{display:block;margin-bottom:4px;color:var(--ui-kit-color-grey-7);font-size:13px;font-weight:500}.kit-textarea-input{display:flex;position:relative;padding:9px 0 9px 12px;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;background:var(--ui-kit-color-grey-13)}.kit-textarea-icon{flex-shrink:0;display:block;margin-right:8px;margin-top:2px;width:16px;height:16px;fill:var(--ui-kit-color-grey-10)}.kit-textarea-state-icon{position:absolute;top:12px;right:12px;flex-shrink:0;display:block;margin-left:12px;width:14px;height:14px}.kit-textarea .k-input{padding:0 34px 0 0;width:100%;color:var(--ui-kit-color-grey-10);font-size:14px;border:none;border-radius:8px;box-sizing:border-box;line-height:1.4;background:var(--ui-kit-color-grey-13);overflow:auto;resize:none}.kit-textarea .k-input::placeholder{color:var(--ui-kit-color-grey-14)}.kit-textarea .k-input:disabled{background:var(--ui-kit-color-grey-13)}.kit-textarea .k-input:disabled::placeholder{color:var(--ui-kit-color-grey-12)}.kit-textarea.default .kit-textarea-state-icon{fill:var(--ui-kit-color-grey-12)}.kit-textarea.default:hover .kit-textarea-input{border-color:var(--ui-kit-color-hover)}.kit-textarea.default:focus-within .kit-textarea-input{box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-textarea.warning .kit-textarea-input{border-color:var(--ui-kit-color-orange)}.kit-textarea.warning .kit-textarea-state-icon,.kit-textarea.warning .kit-textarea-icon{fill:var(--ui-kit-color-orange)}.kit-textarea.warning:focus-within .kit-textarea-input{box-shadow:0 0 0 2px var(--ui-kit-color-orange-1)}.kit-textarea.error .kit-textarea-input{border-color:var(--ui-kit-color-red-1)}.kit-textarea.error .kit-textarea-state-icon,.kit-textarea.error .kit-textarea-icon{fill:var(--ui-kit-color-red-1)}.kit-textarea.error:focus-within .kit-textarea-input{box-shadow:0 0 0 2px var(--ui-kit-color-red-2)}.kit-textarea.success .kit-textarea-state-icon{fill:var(--ui-kit-color-green-1)}.kit-textarea.success:hover .kit-textarea-input{border-color:var(--ui-kit-color-green-1)}.kit-textarea.success:focus-within .kit-textarea-input{box-shadow:0 0 0 2px var(--ui-kit-color-green-2)}.kit-textarea.disabled .k-input{color:var(--ui-kit-color-grey-12)}.kit-textarea.disabled .kit-textarea-input{border-color:var(--ui-kit-color-grey-11)}.kit-textarea.disabled .kit-textarea-icon{fill:var(--ui-kit-color-grey-12)}.kit-textarea.disabled:hover .kit-textarea-input{border-color:var(--ui-kit-color-grey-11)}.kit-textarea.readonly .k-input{color:var(--ui-kit-color-grey-14)}.kit-textarea.readonly .kit-textarea-input{border-color:var(--ui-kit-color-grey-11)}.kit-textarea.readonly .kit-textarea-icon{fill:var(--ui-kit-color-grey-10)}.kit-textarea.readonly:hover .kit-textarea-input{border-color:var(--ui-kit-color-grey-11)}.kit-textarea.readonly:focus-within .kit-textarea-input{box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["type", "icon", "message"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: KitTextareaAutoresizeDirective, selector: "[autoresize]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitTextareaComponent, decorators: [{
             type: Component,
@@ -1322,7 +1330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => KitTextareaComponent),
                             multi: true,
-                        }], template: "<div class=\"kit-textarea {{ state }}\"\n     [class.textarea-disabled]=\"disabled\"\n     [class.textarea-readonly]=\"readonly\">\n  <kendo-label *ngIf=\"label\" [text]=\"label\" [for]=\"textarea\"></kendo-label>\n  <div class=\"textarea-wrapper\">\n    <textarea autoresize #textarea class=\"k-input\"\n              [attr.placeholder]=\"placeholder\"\n              [style.min-height.px]=\"minHeight\"\n              [style.max-height.px]=\"maxHeight\"\n              [attr.maxlength]=\"maxlength\"\n              [disabled]=\"disabled\"\n              [value]=\"defaultValue\"\n              [readonly]=\"readonly\"\n              (focus)=\"onTextareaFocus()\"\n              (blur)=\"onTextareaBlur()\"\n              (input)=\"onTextareaChange($event)\"\n    ></textarea>\n  </div>\n  <kit-input-message *ngIf=\"messageText\"\n                     [icon]=\"messageIcon\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-textarea .k-label{display:block;margin-bottom:4px;color:#a9a8a8;font-weight:500;font-size:13px}.kit-textarea .textarea-wrapper{border:1px solid #efefef;border-radius:4px;background:#fff}.kit-textarea .textarea-wrapper:focus-within{border-color:#00b0ad}.kit-textarea .k-input{padding:8px;width:100%;min-height:32px;color:#002a3a;font-size:13px;border:none;border-radius:4px;box-sizing:border-box;line-height:1.26;overflow:auto;resize:none}.kit-textarea .k-input::placeholder{color:#74777d}.kit-textarea .k-input:disabled{background:#f3f4f6}.kit-textarea .k-input:disabled::placeholder{color:#9a9fa6}.kit-textarea.textarea-disabled .k-label,.kit-textarea.textarea-readonly .k-label{color:#74777d}.kit-textarea.textarea-disabled .k-input,.kit-textarea.textarea-readonly .k-input{color:#9a9fa6;cursor:default;pointer-events:none}.kit-textarea.danger .textarea-wrapper{border-color:#ef3e42}.kit-textarea.danger .k-input{background:#f8e0e0}\n"] }]
+                        }], template: "<div class=\"kit-textarea\"\n     [ngClass]=\"state\"\n     [class.disabled]=\"disabled\"\n     [class.readonly]=\"readonly\">\n  @if (label) {\n    <kendo-label class=\"label\"\n                 [text]=\"label\"\n                 [for]=\"textarea\"\n    ></kendo-label>\n  }\n  <div class=\"kit-textarea-input\">\n    @if (icon) {\n      <kit-svg-icon class=\"kit-textarea-icon\"\n                    [icon]=\"icon\"\n      ></kit-svg-icon>\n    }\n    <textarea #textarea\n              autoresize\n              class=\"k-input\"\n              [attr.placeholder]=\"placeholder\"\n              [style.min-height.px]=\"minHeight\"\n              [style.max-height.px]=\"maxHeight\"\n              [attr.maxlength]=\"maxlength\"\n              [disabled]=\"disabled\"\n              [value]=\"defaultValue\"\n              [readonly]=\"readonly\"\n              (focus)=\"onTextareaFocus()\"\n              (blur)=\"onTextareaBlur()\"\n              (input)=\"onTextareaChange($event)\"\n    ></textarea>\n    <kit-svg-icon class=\"kit-textarea-state-icon\"\n                  [icon]=\"textareaStateIcon[state]\"\n    ></kit-svg-icon>\n  </div>\n\n  @if (messageText) {\n    <kit-input-message [icon]=\"messageIcon\"\n                       [message]=\"messageText\"\n    ></kit-input-message>\n  }\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-textarea .label{display:block;margin-bottom:4px;color:var(--ui-kit-color-grey-7);font-size:13px;font-weight:500}.kit-textarea-input{display:flex;position:relative;padding:9px 0 9px 12px;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;background:var(--ui-kit-color-grey-13)}.kit-textarea-icon{flex-shrink:0;display:block;margin-right:8px;margin-top:2px;width:16px;height:16px;fill:var(--ui-kit-color-grey-10)}.kit-textarea-state-icon{position:absolute;top:12px;right:12px;flex-shrink:0;display:block;margin-left:12px;width:14px;height:14px}.kit-textarea .k-input{padding:0 34px 0 0;width:100%;color:var(--ui-kit-color-grey-10);font-size:14px;border:none;border-radius:8px;box-sizing:border-box;line-height:1.4;background:var(--ui-kit-color-grey-13);overflow:auto;resize:none}.kit-textarea .k-input::placeholder{color:var(--ui-kit-color-grey-14)}.kit-textarea .k-input:disabled{background:var(--ui-kit-color-grey-13)}.kit-textarea .k-input:disabled::placeholder{color:var(--ui-kit-color-grey-12)}.kit-textarea.default .kit-textarea-state-icon{fill:var(--ui-kit-color-grey-12)}.kit-textarea.default:hover .kit-textarea-input{border-color:var(--ui-kit-color-hover)}.kit-textarea.default:focus-within .kit-textarea-input{box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-textarea.warning .kit-textarea-input{border-color:var(--ui-kit-color-orange)}.kit-textarea.warning .kit-textarea-state-icon,.kit-textarea.warning .kit-textarea-icon{fill:var(--ui-kit-color-orange)}.kit-textarea.warning:focus-within .kit-textarea-input{box-shadow:0 0 0 2px var(--ui-kit-color-orange-1)}.kit-textarea.error .kit-textarea-input{border-color:var(--ui-kit-color-red-1)}.kit-textarea.error .kit-textarea-state-icon,.kit-textarea.error .kit-textarea-icon{fill:var(--ui-kit-color-red-1)}.kit-textarea.error:focus-within .kit-textarea-input{box-shadow:0 0 0 2px var(--ui-kit-color-red-2)}.kit-textarea.success .kit-textarea-state-icon{fill:var(--ui-kit-color-green-1)}.kit-textarea.success:hover .kit-textarea-input{border-color:var(--ui-kit-color-green-1)}.kit-textarea.success:focus-within .kit-textarea-input{box-shadow:0 0 0 2px var(--ui-kit-color-green-2)}.kit-textarea.disabled .k-input{color:var(--ui-kit-color-grey-12)}.kit-textarea.disabled .kit-textarea-input{border-color:var(--ui-kit-color-grey-11)}.kit-textarea.disabled .kit-textarea-icon{fill:var(--ui-kit-color-grey-12)}.kit-textarea.disabled:hover .kit-textarea-input{border-color:var(--ui-kit-color-grey-11)}.kit-textarea.readonly .k-input{color:var(--ui-kit-color-grey-14)}.kit-textarea.readonly .kit-textarea-input{border-color:var(--ui-kit-color-grey-11)}.kit-textarea.readonly .kit-textarea-icon{fill:var(--ui-kit-color-grey-10)}.kit-textarea.readonly:hover .kit-textarea-input{border-color:var(--ui-kit-color-grey-11)}.kit-textarea.readonly:focus-within .kit-textarea-input{box-shadow:none}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], label: [{
@@ -1343,6 +1351,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
                 type: Input
             }], state: [{
                 type: Input
+            }], icon: [{
+                type: Input
             }], readonly: [{
                 type: Input
             }], focused: [{
@@ -1358,11 +1368,13 @@ class KitTextareaModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: KitTextareaModule, declarations: [KitTextareaComponent,
             KitTextareaAutoresizeDirective], imports: [CommonModule,
             LabelModule,
-            KitInputMessageModule], exports: [KitTextareaComponent,
+            KitInputMessageModule,
+            KitSvgIconModule], exports: [KitTextareaComponent,
             KitTextareaAutoresizeDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitTextareaModule, imports: [CommonModule,
             LabelModule,
-            KitInputMessageModule] }); }
+            KitInputMessageModule,
+            KitSvgIconModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitTextareaModule, decorators: [{
             type: NgModule,
@@ -1375,6 +1387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
                         CommonModule,
                         LabelModule,
                         KitInputMessageModule,
+                        KitSvgIconModule,
                     ],
                     exports: [
                         KitTextareaComponent,
@@ -3980,16 +3993,16 @@ class KitMultiselectModule {
             MultiSelectModule,
             DropDownListModule,
             FormsModule,
-            KitSvgIconModule$1,
+            KitSvgIconModule,
             LabelModule,
-            KitInputMessageModule$1], exports: [KitMultiselectComponent] }); }
+            KitInputMessageModule], exports: [KitMultiselectComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitMultiselectModule, imports: [CommonModule,
             MultiSelectModule,
             DropDownListModule,
             FormsModule,
-            KitSvgIconModule$1,
+            KitSvgIconModule,
             LabelModule,
-            KitInputMessageModule$1] }); }
+            KitInputMessageModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitMultiselectModule, decorators: [{
             type: NgModule,
@@ -4002,9 +4015,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
                         MultiSelectModule,
                         DropDownListModule,
                         FormsModule,
-                        KitSvgIconModule$1,
+                        KitSvgIconModule,
                         LabelModule,
-                        KitInputMessageModule$1,
+                        KitInputMessageModule,
                     ],
                     exports: [
                         KitMultiselectComponent,
@@ -4012,11 +4025,151 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
                 }]
         }] });
 
+var KitPopupAlignHorizontal;
+(function (KitPopupAlignHorizontal) {
+    KitPopupAlignHorizontal["LEFT"] = "left";
+    KitPopupAlignHorizontal["CENTER"] = "center";
+    KitPopupAlignHorizontal["RIGHT"] = "right";
+})(KitPopupAlignHorizontal || (KitPopupAlignHorizontal = {}));
+var KitPopupAlignVertical;
+(function (KitPopupAlignVertical) {
+    KitPopupAlignVertical["TOP"] = "top";
+    KitPopupAlignVertical["CENTER"] = "center";
+    KitPopupAlignVertical["BOTTOM"] = "bottom";
+})(KitPopupAlignVertical || (KitPopupAlignVertical = {}));
+
+class KitPopupComponent {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        /**
+         * Specifies the element that will be used as an anchor. The Popup opens next to that element
+         */
+        this.anchor = null;
+        /**
+         * Defines whether to close popup when the user clicks outside its boundaries
+         */
+        this.closeOnOutsideClick = true;
+        /**
+         * Defines the horizontal position of the anchor element
+         */
+        this.anchorHorizontalAlign = KitPopupAlignHorizontal.LEFT;
+        /**
+         * Defines the horizontal position of the popup
+         */
+        this.popupHorizontalAlign = KitPopupAlignHorizontal.LEFT;
+        this.isPopupOpen = signal(false);
+        this.anchorAlign = {
+            horizontal: this.anchorHorizontalAlign,
+            vertical: KitPopupAlignVertical.BOTTOM,
+        };
+        this.popupAlign = {
+            horizontal: this.popupHorizontalAlign,
+            vertical: KitPopupAlignVertical.TOP,
+        };
+    }
+    documentClick(event) {
+        if (!this.closeOnOutsideClick) {
+            return;
+        }
+        if (!this.elementRef?.nativeElement.contains(event.target)) {
+            this.closePopup();
+            this.anchor instanceof HTMLElement && this.anchor?.classList.remove('popup-active');
+            this.anchor instanceof ElementRef && this.anchor?.nativeElement.classList.remove('popup-active');
+        }
+    }
+    openPopup() {
+        this.isPopupOpen.set(true);
+    }
+    closePopup() {
+        this.isPopupOpen.set(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitPopupComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitPopupComponent, selector: "kit-popup", inputs: { anchor: "anchor", closeOnOutsideClick: "closeOnOutsideClick", anchorHorizontalAlign: "anchorHorizontalAlign", popupHorizontalAlign: "popupHorizontalAlign" }, host: { listeners: { "document:click": "documentClick($event)" } }, ngImport: i0, template: "@if (isPopupOpen()) {\n  <kendo-popup class=\"kit-popup\"\n               [anchor]=\"anchor\"\n               [popupAlign]=\"popupAlign\"\n               [anchorAlign]=\"anchorAlign\">\n    <ng-content\n    ></ng-content>\n  </kendo-popup>\n}\n", styles: ["::ng-deep .kit-popup .k-popup{margin-top:10px;color:var(--ui-kit-color-black);border:none;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 10px 15px #0000001a,0 4px 6px #0000000d}\n"], dependencies: [{ kind: "component", type: i1$8.PopupComponent, selector: "kendo-popup", inputs: ["animate", "anchor", "anchorAlign", "collision", "popupAlign", "copyAnchorStyles", "popupClass", "positionMode", "offset", "margin"], outputs: ["anchorViewportLeave", "close", "open", "positionChange"], exportAs: ["kendo-popup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitPopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-popup', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isPopupOpen()) {\n  <kendo-popup class=\"kit-popup\"\n               [anchor]=\"anchor\"\n               [popupAlign]=\"popupAlign\"\n               [anchorAlign]=\"anchorAlign\">\n    <ng-content\n    ></ng-content>\n  </kendo-popup>\n}\n", styles: ["::ng-deep .kit-popup .k-popup{margin-top:10px;color:var(--ui-kit-color-black);border:none;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 10px 15px #0000001a,0 4px 6px #0000000d}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { anchor: [{
+                type: Input
+            }], closeOnOutsideClick: [{
+                type: Input
+            }], anchorHorizontalAlign: [{
+                type: Input
+            }], popupHorizontalAlign: [{
+                type: Input
+            }], documentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class KitPopupDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        /**
+         * Defines a reference of the KitPopupComponent component
+         */
+        this.popup = null;
+    }
+    onClick(event) {
+        event.stopPropagation();
+        const element = this.elementRef.nativeElement;
+        if (this.popup?.isPopupOpen()) {
+            this.popup.closePopup();
+            element.classList.remove('popup-active');
+        }
+        else {
+            this.popup?.openPopup();
+            element.classList.add('popup-active');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitPopupDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: KitPopupDirective, selector: "[kitPopupTrigger]", inputs: { popup: ["kitPopupTrigger", "popup"] }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitPopupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kitPopupTrigger]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { popup: [{
+                type: Input,
+                args: ['kitPopupTrigger']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class KitPopupModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: KitPopupModule, declarations: [KitPopupComponent,
+            KitPopupDirective], imports: [CommonModule,
+            PopupModule], exports: [KitPopupComponent,
+            KitPopupDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitPopupModule, imports: [CommonModule,
+            PopupModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitPopupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        KitPopupComponent,
+                        KitPopupDirective,
+                    ],
+                    imports: [
+                        CommonModule,
+                        PopupModule,
+                    ],
+                    exports: [
+                        KitPopupComponent,
+                        KitPopupDirective,
+                    ],
+                }]
+        }] });
+
 // KitButton
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractKitCtaPanelConfirmationComponent, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAutocompleteState, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeModule, KitBadgeTheme, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonType, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDaterangeComponent, KitDaterangeIconPosition, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogActionsModule, KitDialogComponent, KitDialogModule, KitDialogService, KitDropdownComponent, KitDropdownModule, KitDropdownState, KitFileUploadComponent, KitFileUploadModule, KitInputMessageComponent, KitInputMessageModule, KitInputMessageType, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationTabsComponent, KitNavigationTabsItemIconType, KitNavigationTabsModule, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationModule, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillModule, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTextLabelComponent, KitTextLabelModule, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTimepickerComponent, KitTimepickerModule, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipModule, KitTooltipPosition, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, buildRandomUUID };
+export { AbstractKitCtaPanelConfirmationComponent, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAutocompleteState, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeModule, KitBadgeTheme, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonType, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDaterangeComponent, KitDaterangeIconPosition, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogActionsModule, KitDialogComponent, KitDialogModule, KitDialogService, KitDropdownComponent, KitDropdownModule, KitDropdownState, KitFileUploadComponent, KitFileUploadModule, KitInputMessageComponent, KitInputMessageModule, KitInputMessageType, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationTabsComponent, KitNavigationTabsItemIconType, KitNavigationTabsModule, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationModule, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillModule, KitPopupComponent, KitPopupDirective, KitPopupModule, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTextLabelComponent, KitTextLabelModule, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTimepickerComponent, KitTimepickerModule, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipModule, KitTooltipPosition, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, buildRandomUUID };
 //# sourceMappingURL=indigina-ui-kit.mjs.map