@indigina/ui-kit 1.0.75 → 1.0.76

package/bundles/indigina-ui-kit.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@progress/kendo-angular-buttons'), require('@angular/forms'), require('@progress/kendo-angular-inputs'), require('@progress/kendo-angular-label'), require('rxjs/operators'), require('@progress/kendo-angular-dropdowns'), require('@progress/kendo-angular-dateinputs'), require('@progress/kendo-angular-popup'), require('@progress/kendo-angular-tooltip')) :
-    typeof define === 'function' && define.amd ? define('@indigina/ui-kit', ['exports', '@angular/core', '@angular/common', '@progress/kendo-angular-buttons', '@angular/forms', '@progress/kendo-angular-inputs', '@progress/kendo-angular-label', 'rxjs/operators', '@progress/kendo-angular-dropdowns', '@progress/kendo-angular-dateinputs', '@progress/kendo-angular-popup', '@progress/kendo-angular-tooltip'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.indigina = global.indigina || {}, global.indigina["ui-kit"] = {}), global.ng.core, global.ng.common, global["@progress/kendo-angular-buttons"], global.ng.forms, global["@progress/kendo-angular-inputs"], global["@progress/kendo-angular-label"], global.rxjs.operators, global["@progress/kendo-angular-dropdowns"], global["@progress/kendo-angular-dateinputs"], global["@progress/kendo-angular-popup"], global["@progress/kendo-angular-tooltip"]));
-})(this, (function (exports, core, common, kendoAngularButtons, forms, kendoAngularInputs, kendoAngularLabel, operators, kendoAngularDropdowns, kendoAngularDateinputs, kendoAngularPopup, kendoAngularTooltip) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@progress/kendo-angular-buttons'), require('@angular/forms'), require('@progress/kendo-angular-inputs'), require('@progress/kendo-angular-label'), require('rxjs/operators'), require('@progress/kendo-angular-dropdowns'), require('@progress/kendo-angular-dateinputs'), require('@progress/kendo-angular-popup'), require('@progress/kendo-angular-tooltip'), require('@angular/platform-browser/animations')) :
+    typeof define === 'function' && define.amd ? define('@indigina/ui-kit', ['exports', '@angular/core', '@angular/common', '@progress/kendo-angular-buttons', '@angular/forms', '@progress/kendo-angular-inputs', '@progress/kendo-angular-label', 'rxjs/operators', '@progress/kendo-angular-dropdowns', '@progress/kendo-angular-dateinputs', '@progress/kendo-angular-popup', '@progress/kendo-angular-tooltip', '@angular/platform-browser/animations'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.indigina = global.indigina || {}, global.indigina["ui-kit"] = {}), global.ng.core, global.ng.common, global["@progress/kendo-angular-buttons"], global.ng.forms, global["@progress/kendo-angular-inputs"], global["@progress/kendo-angular-label"], global.rxjs.operators, global["@progress/kendo-angular-dropdowns"], global["@progress/kendo-angular-dateinputs"], global["@progress/kendo-angular-popup"], global["@progress/kendo-angular-tooltip"], global.ng.platformBrowser.animations));
+})(this, (function (exports, core, common, kendoAngularButtons, forms, kendoAngularInputs, kendoAngularLabel, operators, kendoAngularDropdowns, kendoAngularDateinputs, kendoAngularPopup, kendoAngularTooltip, animations) { 'use strict';
 
     exports.KitButtonType = void 0;
     (function (KitButtonType) {
@@ -1493,332 +1493,6 @@
                 },] }
     ];
 
-    var KitLocationStepperComponent = /** @class */ (function () {
-        function KitLocationStepperComponent() {
-            /**
-             * An items list to be shown as steps
-             */
-            this.items = [];
-            this.KitSvgIcon = exports.KitSvgIcon;
-        }
-        return KitLocationStepperComponent;
-    }());
-    KitLocationStepperComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kit-location-stepper',
-                    template: "<ng-template #icon let-item=\"item\">\n  <kit-svg-icon [icon]=\"item.icon\" class=\"display-block location-icon\"\n                [title]=\"item.title\"\n  ></kit-svg-icon>\n</ng-template>\n\n<ng-template #description let-item=\"item\">\n  <div class=\"title\">{{ item.title }}</div>\n  <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n</ng-template>\n\n<ng-template #dates let-dates=\"dates\">\n  <div *ngFor=\"let date of dates\" class=\"date display-flex\">\n    <span class=\"date-description\">{{ date.description }}</span>\n    <span>{{ date.value }}</span>\n  </div>\n</ng-template>\n\n<div class=\"kit-location-stepper\">\n  <div *ngFor=\"let item of items; let first = first; let last = last\" class=\"step {{ item.cssClass }}\"\n       [class.first]=\"first\"\n       [class.last]=\"last\"\n       [class.has-sub-items]=\"!!item.subItems\">\n    <div class=\"step-inner display-flex\">\n      <div *ngIf=\"item.dates?.length\" class=\"dates\">\n        <ng-container *ngTemplateOutlet=\"dates; context: { dates: item.dates }\"></ng-container>\n      </div>\n\n      <ng-container *ngTemplateOutlet=\"icon; context: { item: item }\"></ng-container>\n\n      <div class=\"description\">\n        <ng-container *ngTemplateOutlet=\"description; context: { item: item }\"></ng-container>\n      </div>\n    </div>\n    <div *ngIf=\"item.subItems?.length\" class=\"sub-items\">\n      <div *ngFor=\"let subItem of item.subItems\" class=\"sub-item display-flex {{ subItem.cssClass }}\">\n        <div *ngIf=\"subItem.dates?.length\" class=\"dates\">\n          <ng-container *ngTemplateOutlet=\"dates; context: { dates: subItem.dates }\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"icon; context: { item: subItem }\"></ng-container>\n\n        <div class=\"description\">\n          <ng-container *ngTemplateOutlet=\"description; context: { item: subItem }\"></ng-container>\n        </div>\n      </div>\n    </div>\n    <div class=\"step-line\"></div>\n  </div>\n</div>\n",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    encapsulation: core.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-location-stepper .step{position:relative}.kit-location-stepper .step:not(:first-child){margin-top:1px}.kit-location-stepper .step:last-child .step-line{display:none}.kit-location-stepper .step-line{position:absolute;top:24px;left:calc(198px - 2px / 2);width:2px;height:100%;background-color:#efefef}.kit-location-stepper .step-inner{position:relative;padding:20px 0 12px;z-index:2}.kit-location-stepper .caption{margin-top:6px;color:#002a3a;font-size:14px;font-weight:500}.kit-location-stepper .title{text-transform:uppercase;color:#00b0ad;font-size:12px;font-weight:500;letter-spacing:.2em}.kit-location-stepper .date:not(:first-child){margin-top:10px}.kit-location-stepper .description{margin-left:10px;flex:1 0}.kit-location-stepper .location-icon{width:24px;height:24px;background:#ffffff;stroke:#a9a8a8;fill:#fff;position:relative;z-index:1}.kit-location-stepper .last .location-icon{stroke:#4e4696}.kit-location-stepper .first .location-icon{stroke:#00b0ad}.kit-location-stepper .dates{padding-left:10px;min-width:176px;min-height:40px;color:#002a3a;font-size:13px}.kit-location-stepper .date-description{margin-right:18px;width:30px;color:#a9a8a8;font-weight:500;text-align:right}.kit-location-stepper .danger .step-inner{border:1px solid #ef3e42;border-radius:4px;background-color:#f8e0e0}.kit-location-stepper .danger .location-icon{fill:#f8e0e0;background-color:#f8e0e0}.kit-location-stepper .danger:not(:first-child){margin-top:20px}.kit-location-stepper .sub-item{position:relative;padding:14px 0 12px;z-index:1}.kit-location-stepper .sub-item .dates{margin-right:34px}.kit-location-stepper .sub-item .location-icon{background:#ffffff}.kit-location-stepper .sub-item .location-icon:before{content:\"\";position:absolute;left:calc(50% - 2px / 2);top:-18px;width:2px;height:18px;background-color:#efefef}.kit-location-stepper .sub-item .description{margin-left:6px}.kit-location-stepper .sub-item.danger{margin-top:20px;border:1px solid #ef3e42;border-radius:4px;background-color:#f8e0e0}.kit-location-stepper .sub-item.danger .location-icon{background-color:#f8e0e0}.kit-location-stepper .sub-item.danger .location-icon:before{display:none}\n"]
-                },] }
-    ];
-    KitLocationStepperComponent.propDecorators = {
-        items: [{ type: core.Input }]
-    };
-
-    var KitLocationStepperModule = /** @class */ (function () {
-        function KitLocationStepperModule() {
-        }
-        return KitLocationStepperModule;
-    }());
-    KitLocationStepperModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        KitSvgIconModule,
-                    ],
-                    declarations: [
-                        KitLocationStepperComponent,
-                    ],
-                    exports: [
-                        KitLocationStepperComponent,
-                    ],
-                },] }
-    ];
-
-    var KitAutocompleteModule = /** @class */ (function () {
-        function KitAutocompleteModule() {
-        }
-        return KitAutocompleteModule;
-    }());
-    KitAutocompleteModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [
-                        KitAutocompleteComponent,
-                    ],
-                    imports: [
-                        common.CommonModule,
-                        kendoAngularDropdowns.DropDownsModule,
-                        forms.FormsModule,
-                        forms.ReactiveFormsModule,
-                        kendoAngularLabel.LabelModule,
-                        kendoAngularInputs.InputsModule,
-                        KitInputMessageModule,
-                        KitLoaderModule,
-                        KitSvgIconModule,
-                    ],
-                    exports: [
-                        KitAutocompleteComponent,
-                    ],
-                },] }
-    ];
-
-    exports.KitCheckboxState = void 0;
-    (function (KitCheckboxState) {
-        KitCheckboxState["REGULAR"] = "regular";
-        KitCheckboxState["DANGER"] = "danger";
-    })(exports.KitCheckboxState || (exports.KitCheckboxState = {}));
-    var KitCheckboxComponent = /** @class */ (function () {
-        function KitCheckboxComponent() {
-            /**
-             * States the component is disabled
-             */
-            this.disabled = false;
-            /**
-             * Defines a default value
-             */
-            this.defaultChecked = false;
-            /**
-             * Defines a particular state for the component
-             */
-            this.state = exports.KitCheckboxState.REGULAR;
-            /**
-             * Defines a value which going to be an info message type
-             */
-            this.messageType = exports.KitInputMessageType.DEFAULT;
-            /**
-             * Occurs as soon as input checked state is changed
-             */
-            this.changed = new core.EventEmitter();
-            /**
-             * Function that should be called every time the form control value changes
-             */
-            this.onChange = function (value) {
-            };
-            /**
-             * Function that should be called when input lost focus and changed form control state to "touched"
-             */
-            this.onTouched = function (value) {
-            };
-        }
-        KitCheckboxComponent.prototype.onInputStateChange = function (event) {
-            var target = event.target;
-            var checked = target.checked;
-            this.onChange(checked);
-            this.changed.emit(checked);
-        };
-        KitCheckboxComponent.prototype.registerOnChange = function (fn) {
-            this.onChange = fn;
-        };
-        KitCheckboxComponent.prototype.registerOnTouched = function (fn) {
-            this.onTouched = fn;
-        };
-        KitCheckboxComponent.prototype.writeValue = function (value) {
-            this.onChange(value);
-            this.defaultChecked = value;
-        };
-        KitCheckboxComponent.prototype.setDisabledState = function (disabled) {
-            this.disabled = disabled;
-        };
-        return KitCheckboxComponent;
-    }());
-    KitCheckboxComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kit-checkbox',
-                    template: "<div class=\"kit-checkbox\"\n     [class.disabled]=\"disabled\"\n     [ngClass]=\"state\">\n  <div class=\"display-flex flex-align-items-center\">\n    <input kendoCheckBox #checkbox type=\"checkbox\" class=\"checkbox\"\n           [checked]=\"defaultChecked\"\n           [disabled]=\"disabled\"\n           (change)=\"onInputStateChange($event)\" />\n    <kendo-label class=\"label\" [text]=\"label\"\n                 [for]=\"checkbox\"\n    ></kendo-label>\n  </div>\n  <kit-input-message *ngIf=\"messageText\"\n                     [type]=\"messageType\"\n                     [icon]=\"messageIcon\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    providers: [{
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: core.forwardRef(function () { return KitCheckboxComponent; }),
-                            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-checkbox .label{margin-left:8px;font-size:14px;font-weight:400;color:#27282a}.kit-checkbox .checkbox{width:20px;height:20px;border-radius:4px;border-color:#c1c7d0;opacity:1}.kit-checkbox .checkbox:checked{background:#006890;border-color:#006890}.kit-checkbox .checkbox:focus{box-shadow:0 0 0 3px #e7f4ec;border-color:#006890}.kit-checkbox .checkbox:hover{border-color:#006890}.kit-checkbox.disabled{pointer-events:none}.kit-checkbox.disabled .label{color:#9a9fa6}.kit-checkbox.disabled .checkbox{border-color:#cdd2d9;background-color:#fff}.kit-checkbox.danger .checkbox{border-color:#ef3e42;background:#f8e0e0}.kit-checkbox.danger .checkbox:before{color:#ef3e42}.kit-checkbox.disabled .checkbox:checked{background-color:#c1c7d0}.kit-checkbox.disabled.danger .checkbox{background-color:#f8e0e0;border-color:#cdd2d9}.kit-checkbox.disabled.danger .checkbox:before{color:#f3f4f6}\n"]
-                },] }
-    ];
-    KitCheckboxComponent.propDecorators = {
-        label: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        defaultChecked: [{ type: core.Input }],
-        state: [{ type: core.Input }],
-        messageIcon: [{ type: core.Input }],
-        messageText: [{ type: core.Input }],
-        messageType: [{ type: core.Input }],
-        changed: [{ type: core.Output }]
-    };
-
-    var KitCheckboxModule = /** @class */ (function () {
-        function KitCheckboxModule() {
-        }
-        return KitCheckboxModule;
-    }());
-    KitCheckboxModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [
-                        KitCheckboxComponent,
-                    ],
-                    exports: [
-                        KitCheckboxComponent,
-                    ],
-                    imports: [
-                        kendoAngularLabel.LabelModule,
-                        kendoAngularInputs.CheckBoxModule,
-                        common.CommonModule,
-                        KitInputMessageModule,
-                    ],
-                },] }
-    ];
-
-    var KitToggleComponent = /** @class */ (function () {
-        function KitToggleComponent() {
-            /**
-             * Defines whether the component will be in disabled state
-             */
-            this.disabled = false;
-            /**
-             * Defines a default value
-             */
-            this.defaultChecked = false;
-            /**
-             * Defines a value which going to be an info message type
-             */
-            this.messageType = exports.KitInputMessageType.DEFAULT;
-            /**
-             * Occurs as soon as toggle state is changed
-             */
-            this.changed = new core.EventEmitter();
-            /**
-             * Function that should be called every time the form control value changes
-             */
-            this.onChange = function (value) {
-            };
-            /**
-             * Function that should be called when input lost focus and changed form control state to "touched"
-             */
-            this.onTouched = function () {
-            };
-        }
-        /**
-         * Function that is called when toggle state changed
-         */
-        KitToggleComponent.prototype.onInputStateChange = function (checked) {
-            this.onChange(checked);
-            this.changed.emit(checked);
-        };
-        KitToggleComponent.prototype.registerOnChange = function (fn) {
-            this.onChange = fn;
-        };
-        KitToggleComponent.prototype.registerOnTouched = function (fn) {
-            this.onTouched = fn;
-        };
-        KitToggleComponent.prototype.writeValue = function (value) {
-            this.onChange(value);
-            this.defaultChecked = value;
-        };
-        KitToggleComponent.prototype.setDisabledState = function (disabled) {
-            this.disabled = disabled;
-        };
-        return KitToggleComponent;
-    }());
-    KitToggleComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kit-toggle',
-                    template: "<div class=\"kit-toggle\">\n  <div class=\"display-flex flex-align-items-center\">\n    <kendo-switch [checked]=\"defaultChecked\"\n                  [disabled]=\"disabled\"\n                  (valueChange)=\"onInputStateChange($event)\"\n    ></kendo-switch>\n    <kendo-label class=\"label\" [text]=\"label\"></kendo-label>\n  </div>\n  <kit-input-message *ngIf=\"messageText\"\n                     [type]=\"messageType\"\n                     [icon]=\"messageIcon\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    encapsulation: core.ViewEncapsulation.None,
-                    providers: [{
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: core.forwardRef(function () { return KitToggleComponent; }),
-                            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-toggle .label{margin-left:20px;font-size:14px;font-weight:400;color:#27282a}.kit-toggle .k-switch-container{display:flex;align-items:center;width:100%;box-shadow:none;border-radius:20px;border:2px solid;background:#ffffff}.kit-toggle .k-switch-handle{width:8px;height:8px;border:none}.kit-toggle .k-switch-label-on,.kit-toggle .k-switch-label-off{display:none}.kit-toggle .k-state-focused .k-switch-container{box-shadow:none}.kit-toggle .k-switch-off .k-switch-container{border-color:#c1c7d0}.kit-toggle .k-switch-off .k-switch-handle{left:2px;background:#c1c7d0}.kit-toggle .k-switch-on .k-switch-container{border-color:#006890;background:#ffffff}.kit-toggle .k-switch-on .k-switch-handle{left:calc(100% - 10px);background:#006890}.kit-toggle .k-switch{width:32px;height:16px}.kit-toggle .k-switch .k-switch-container:hover{box-shadow:none}.kit-toggle .k-state-disabled{opacity:1}.kit-toggle .k-state-disabled.k-switch-off .k-switch-container{border-color:#e6e9ec}.kit-toggle .k-state-disabled.k-switch-off .k-switch-handle{background:#e6e9ec}.kit-toggle .k-state-disabled.k-switch-on .k-switch-container{border-color:#cce1e9}.kit-toggle .k-state-disabled.k-switch-on .k-switch-handle{background:#cce1e9}\n"]
-                },] }
-    ];
-    KitToggleComponent.propDecorators = {
-        label: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        defaultChecked: [{ type: core.Input }],
-        messageIcon: [{ type: core.Input }],
-        messageText: [{ type: core.Input }],
-        messageType: [{ type: core.Input }],
-        changed: [{ type: core.Output }]
-    };
-
-    var KitToggleModule = /** @class */ (function () {
-        function KitToggleModule() {
-        }
-        return KitToggleModule;
-    }());
-    KitToggleModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [
-                        KitToggleComponent,
-                    ],
-                    imports: [
-                        common.CommonModule,
-                        kendoAngularInputs.SwitchModule,
-                        kendoAngularLabel.LabelModule,
-                        KitInputMessageModule,
-                    ],
-                    exports: [
-                        KitToggleComponent,
-                    ],
-                },] }
-    ];
-
-    var KitPillComponent = /** @class */ (function () {
-        function KitPillComponent() {
-            this.removable = false;
-            this.selectable = false;
-            this.selected = false;
-            this.clicked = new core.EventEmitter();
-            this.removed = new core.EventEmitter();
-            this.closeIcon = exports.KitSvgIcon.CROSS;
-        }
-        KitPillComponent.prototype.onComponentClick = function () {
-            if (!this.selectable) {
-                return;
-            }
-            this.clicked.emit(!this.selected);
-        };
-        return KitPillComponent;
-    }());
-    KitPillComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'kit-pill',
-                    template: "<div class=\"kit-pill display-flex flex-align-items-center\"\n     [class.kit-pill-selectable]=\"selectable\"\n     [class.kit-pill-selected]=\"selected\">\n  <div class=\"kit-pill-content display-flex flex-align-items-center\">\n    <ng-content\n    ></ng-content>\n  </div>\n  <button *ngIf=\"removable\" class=\"kit-pill-button\" (click)=\"removed.next()\">\n    <kit-svg-icon class=\"display-block kit-pill-button-icon\"\n                  [icon]=\"closeIcon\"\n    ></kit-svg-icon>\n  </button>\n</div>\n",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    styles: [".kit-pill{padding:5px 8px;background:#ffffff;border:1px solid #ebebe4;color:#9a9fa6;border-radius:20px;font-weight:400;font-size:12px;text-align:center}.kit-pill:not(.kit-pill-selectable),.kit-pill.kit-pill-selectable.kit-pill-selected{border:1px solid #a9a8a8;color:#002a3a}.kit-pill.kit-pill-selectable{cursor:pointer}.kit-pill.kit-pill-selectable:hover{background:#efefef}.kit-pill-button{margin-left:8px;cursor:pointer;background:none;outline:none;border:none;padding:0}.kit-pill-button-icon{height:14px;width:14px;stroke:#74777d}\n"]
-                },] }
-    ];
-    KitPillComponent.propDecorators = {
-        removable: [{ type: core.Input }],
-        selectable: [{ type: core.Input }],
-        selected: [{ type: core.Input }],
-        clicked: [{ type: core.Output }],
-        removed: [{ type: core.Output }],
-        onComponentClick: [{ type: core.HostListener, args: ['click',] }]
-    };
-
-    var KitPillModule = /** @class */ (function () {
-        function KitPillModule() {
-        }
-        return KitPillModule;
-    }());
-    KitPillModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [
-                        KitPillComponent,
-                    ],
-                    exports: [
-                        KitPillComponent,
-                    ],
-                    imports: [
-                        KitSvgIconModule,
-                        common.CommonModule,
-                    ],
-                },] }
-    ];
-
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
 
@@ -2095,103 +1769,433 @@
         if (Object.defineProperty) {
             Object.defineProperty(cooked, "raw", { value: raw });
         }
-        else {
-            cooked.raw = raw;
+        else {
+            cooked.raw = raw;
+        }
+        return cooked;
+    }
+    ;
+    var __setModuleDefault = Object.create ? (function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+    }) : function (o, v) {
+        o["default"] = v;
+    };
+    function __importStar(mod) {
+        if (mod && mod.__esModule)
+            return mod;
+        var result = {};
+        if (mod != null)
+            for (var k in mod)
+                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+                    __createBinding(result, mod, k);
+        __setModuleDefault(result, mod);
+        return result;
+    }
+    function __importDefault(mod) {
+        return (mod && mod.__esModule) ? mod : { default: mod };
+    }
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    }
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    }
+
+    exports.KitTooltipPosition = void 0;
+    (function (KitTooltipPosition) {
+        KitTooltipPosition["TOP"] = "top";
+        KitTooltipPosition["BOTTOM"] = "bottom";
+        KitTooltipPosition["RIGHT"] = "right";
+        KitTooltipPosition["LEFT"] = "left";
+    })(exports.KitTooltipPosition || (exports.KitTooltipPosition = {}));
+    var KitTooltipDirective = /** @class */ (function (_super) {
+        __extends(KitTooltipDirective, _super);
+        function KitTooltipDirective() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.kitTooltipPosition = exports.KitTooltipPosition.BOTTOM;
+            _this.kitTooltipFilter = '';
+            return _this;
+        }
+        KitTooltipDirective.prototype.ngOnInit = function () {
+            if (!this.kitTooltipTemplateRef) {
+                return;
+            }
+            // we need this because assigning like "position = this.kitTooltipPosition" doesn't work because of inputs init latency
+            // so we need to ensure inputs are set
+            _super.prototype.ngOnInit.call(this);
+            this.tooltipTemplate = this.kitTooltipTemplateRef;
+            this.filter = this.kitTooltipFilter;
+            this.position = this.kitTooltipPosition;
+        };
+        return KitTooltipDirective;
+    }(kendoAngularTooltip.TooltipDirective));
+    KitTooltipDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[kitTooltip]',
+                    providers: [
+                        kendoAngularPopup.PopupService,
+                    ],
+                },] }
+    ];
+    KitTooltipDirective.propDecorators = {
+        kitTooltipPosition: [{ type: core.Input }],
+        kitTooltipFilter: [{ type: core.Input }],
+        kitTooltipTemplateRef: [{ type: core.Input }]
+    };
+
+    var KitLocationStepperComponent = /** @class */ (function () {
+        function KitLocationStepperComponent() {
+            /**
+             * An items list to be shown as steps
+             */
+            this.items = [];
+            this.toolTipPosition = exports.KitTooltipPosition.RIGHT;
+            this.KitSvgIcon = exports.KitSvgIcon;
+        }
+        return KitLocationStepperComponent;
+    }());
+    KitLocationStepperComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'kit-location-stepper',
+                    template: "<ng-template #icon let-item=\"item\">\n  <kit-svg-icon [icon]=\"item.icon\" class=\"display-block location-icon\"\n                [title]=\"item.title\"\n  ></kit-svg-icon>\n</ng-template>\n\n<ng-template #description let-item=\"item\">\n  <ng-template #toolTip>\n    <span class=\"location-tooltip\">{{ item.toolTipText }}</span>\n  </ng-template>\n  <div *ngIf=\"item.toolTipText\" class=\"description-item\" kitTooltip\n       kitTooltipFilter=\"div.description-item\"\n       tooltipClass=\"location-tooltip-wrapper\"\n       [kitTooltipTemplateRef]=\"toolTip\"\n       [kitTooltipPosition]=\"toolTipPosition\">\n    <div class=\"title\">{{ item.title }}</div>\n    <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n  </div>\n\n  <div *ngIf=\"!item.toolTipText\">\n    <div class=\"title\">{{ item.title }}</div>\n    <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n  </div>\n</ng-template>\n\n<ng-template #dates let-dates=\"dates\">\n  <div *ngFor=\"let date of dates\" class=\"date display-flex\">\n    <span class=\"date-description\">{{ date.description }}</span>\n    <span>{{ date.value }}</span>\n  </div>\n</ng-template>\n\n<div class=\"kit-location-stepper\">\n  <div *ngFor=\"let item of items; let first = first; let last = last\" class=\"step {{ item.cssClass }}\"\n       [class.first]=\"first\"\n       [class.last]=\"last\"\n       [class.has-sub-items]=\"!!item.subItems\">\n    <div class=\"step-inner display-flex\">\n      <div *ngIf=\"item.dates?.length\" class=\"dates\">\n        <ng-container *ngTemplateOutlet=\"dates; context: { dates: item.dates }\"></ng-container>\n      </div>\n\n      <ng-container *ngTemplateOutlet=\"icon; context: { item: item }\"></ng-container>\n\n      <div class=\"description\">\n        <ng-container *ngTemplateOutlet=\"description; context: { item: item }\"></ng-container>\n      </div>\n    </div>\n    <div *ngIf=\"item.subItems?.length\" class=\"sub-items\">\n      <div *ngFor=\"let subItem of item.subItems\" class=\"sub-item display-flex {{ subItem.cssClass }}\">\n        <div *ngIf=\"subItem.dates?.length\" class=\"dates\">\n          <ng-container *ngTemplateOutlet=\"dates; context: { dates: subItem.dates }\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"icon; context: { item: subItem }\"></ng-container>\n\n        <div class=\"description\">\n          <ng-container *ngTemplateOutlet=\"description; context: { item: subItem }\"></ng-container>\n        </div>\n      </div>\n    </div>\n    <div class=\"step-line\"></div>\n  </div>\n</div>\n",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    encapsulation: core.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-location-stepper .step{position:relative}.kit-location-stepper .step:not(:first-child){margin-top:1px}.kit-location-stepper .step:last-child .step-line{display:none}.kit-location-stepper .step-line{position:absolute;top:24px;left:calc(198px - 2px / 2);width:2px;height:100%;background-color:#efefef}.kit-location-stepper .step-inner{position:relative;padding:20px 0 12px;z-index:2}.kit-location-stepper .caption{margin-top:6px;color:#002a3a;font-size:14px;font-weight:500}.kit-location-stepper .title{text-transform:uppercase;color:#00b0ad;font-size:12px;font-weight:500;letter-spacing:.2em}.kit-location-stepper .date:not(:first-child){margin-top:10px}.kit-location-stepper .description{margin-left:10px;flex:1 0}.kit-location-stepper .description-item{display:inline-block}.kit-location-stepper .location-icon{width:24px;height:24px;background:#ffffff;stroke:#a9a8a8;fill:#fff;position:relative;z-index:1}.kit-location-stepper .last .location-icon{stroke:#4e4696}.kit-location-stepper .first .location-icon{stroke:#00b0ad}.kit-location-stepper .dates{padding-left:10px;min-width:176px;min-height:40px;color:#002a3a;font-size:13px}.kit-location-stepper .date-description{margin-right:18px;width:30px;color:#a9a8a8;font-weight:500;text-align:right}.kit-location-stepper .danger .step-inner{border:1px solid #ef3e42;border-radius:4px;background-color:#f8e0e0}.kit-location-stepper .danger .location-icon{fill:#f8e0e0;background-color:#f8e0e0}.kit-location-stepper .danger:not(:first-child){margin-top:20px}.kit-location-stepper .sub-item{position:relative;padding:14px 0 12px;z-index:1}.kit-location-stepper .sub-item .dates{margin-right:34px}.kit-location-stepper .sub-item .location-icon{background:#ffffff}.kit-location-stepper .sub-item .location-icon:before{content:\"\";position:absolute;left:calc(50% - 2px / 2);top:-18px;width:2px;height:18px;background-color:#efefef}.kit-location-stepper .sub-item .description{margin-left:6px}.kit-location-stepper .sub-item.danger{margin-top:20px;border:1px solid #ef3e42;border-radius:4px;background-color:#f8e0e0}.kit-location-stepper .sub-item.danger .location-icon{background-color:#f8e0e0}.kit-location-stepper .sub-item.danger .location-icon:before{display:none}.location-tooltip-wrapper .location-tooltip{white-space:pre-wrap}\n"]
+                },] }
+    ];
+    KitLocationStepperComponent.propDecorators = {
+        items: [{ type: core.Input }],
+        toolTipPosition: [{ type: core.Input }]
+    };
+
+    var KitTooltipModule = /** @class */ (function () {
+        function KitTooltipModule() {
+        }
+        return KitTooltipModule;
+    }());
+    KitTooltipModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [
+                        KitTooltipDirective,
+                    ],
+                    exports: [
+                        KitTooltipDirective,
+                        kendoAngularTooltip.TooltipModule,
+                    ],
+                },] }
+    ];
+
+    var KitLocationStepperModule = /** @class */ (function () {
+        function KitLocationStepperModule() {
+        }
+        return KitLocationStepperModule;
+    }());
+    KitLocationStepperModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        KitSvgIconModule,
+                        KitTooltipModule,
+                        animations.BrowserAnimationsModule,
+                    ],
+                    declarations: [
+                        KitLocationStepperComponent,
+                    ],
+                    exports: [
+                        KitLocationStepperComponent,
+                    ],
+                },] }
+    ];
+
+    var KitAutocompleteModule = /** @class */ (function () {
+        function KitAutocompleteModule() {
+        }
+        return KitAutocompleteModule;
+    }());
+    KitAutocompleteModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [
+                        KitAutocompleteComponent,
+                    ],
+                    imports: [
+                        common.CommonModule,
+                        kendoAngularDropdowns.DropDownsModule,
+                        forms.FormsModule,
+                        forms.ReactiveFormsModule,
+                        kendoAngularLabel.LabelModule,
+                        kendoAngularInputs.InputsModule,
+                        KitInputMessageModule,
+                        KitLoaderModule,
+                        KitSvgIconModule,
+                    ],
+                    exports: [
+                        KitAutocompleteComponent,
+                    ],
+                },] }
+    ];
+
+    exports.KitCheckboxState = void 0;
+    (function (KitCheckboxState) {
+        KitCheckboxState["REGULAR"] = "regular";
+        KitCheckboxState["DANGER"] = "danger";
+    })(exports.KitCheckboxState || (exports.KitCheckboxState = {}));
+    var KitCheckboxComponent = /** @class */ (function () {
+        function KitCheckboxComponent() {
+            /**
+             * States the component is disabled
+             */
+            this.disabled = false;
+            /**
+             * Defines a default value
+             */
+            this.defaultChecked = false;
+            /**
+             * Defines a particular state for the component
+             */
+            this.state = exports.KitCheckboxState.REGULAR;
+            /**
+             * Defines a value which going to be an info message type
+             */
+            this.messageType = exports.KitInputMessageType.DEFAULT;
+            /**
+             * Occurs as soon as input checked state is changed
+             */
+            this.changed = new core.EventEmitter();
+            /**
+             * Function that should be called every time the form control value changes
+             */
+            this.onChange = function (value) {
+            };
+            /**
+             * Function that should be called when input lost focus and changed form control state to "touched"
+             */
+            this.onTouched = function (value) {
+            };
+        }
+        KitCheckboxComponent.prototype.onInputStateChange = function (event) {
+            var target = event.target;
+            var checked = target.checked;
+            this.onChange(checked);
+            this.changed.emit(checked);
+        };
+        KitCheckboxComponent.prototype.registerOnChange = function (fn) {
+            this.onChange = fn;
+        };
+        KitCheckboxComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouched = fn;
+        };
+        KitCheckboxComponent.prototype.writeValue = function (value) {
+            this.onChange(value);
+            this.defaultChecked = value;
+        };
+        KitCheckboxComponent.prototype.setDisabledState = function (disabled) {
+            this.disabled = disabled;
+        };
+        return KitCheckboxComponent;
+    }());
+    KitCheckboxComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'kit-checkbox',
+                    template: "<div class=\"kit-checkbox\"\n     [class.disabled]=\"disabled\"\n     [ngClass]=\"state\">\n  <div class=\"display-flex flex-align-items-center\">\n    <input kendoCheckBox #checkbox type=\"checkbox\" class=\"checkbox\"\n           [checked]=\"defaultChecked\"\n           [disabled]=\"disabled\"\n           (change)=\"onInputStateChange($event)\" />\n    <kendo-label class=\"label\" [text]=\"label\"\n                 [for]=\"checkbox\"\n    ></kendo-label>\n  </div>\n  <kit-input-message *ngIf=\"messageText\"\n                     [type]=\"messageType\"\n                     [icon]=\"messageIcon\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    providers: [{
+                            provide: forms.NG_VALUE_ACCESSOR,
+                            useExisting: core.forwardRef(function () { return KitCheckboxComponent; }),
+                            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-checkbox .label{margin-left:8px;font-size:14px;font-weight:400;color:#27282a}.kit-checkbox .checkbox{width:20px;height:20px;border-radius:4px;border-color:#c1c7d0;opacity:1}.kit-checkbox .checkbox:checked{background:#006890;border-color:#006890}.kit-checkbox .checkbox:focus{box-shadow:0 0 0 3px #e7f4ec;border-color:#006890}.kit-checkbox .checkbox:hover{border-color:#006890}.kit-checkbox.disabled{pointer-events:none}.kit-checkbox.disabled .label{color:#9a9fa6}.kit-checkbox.disabled .checkbox{border-color:#cdd2d9;background-color:#fff}.kit-checkbox.danger .checkbox{border-color:#ef3e42;background:#f8e0e0}.kit-checkbox.danger .checkbox:before{color:#ef3e42}.kit-checkbox.disabled .checkbox:checked{background-color:#c1c7d0}.kit-checkbox.disabled.danger .checkbox{background-color:#f8e0e0;border-color:#cdd2d9}.kit-checkbox.disabled.danger .checkbox:before{color:#f3f4f6}\n"]
+                },] }
+    ];
+    KitCheckboxComponent.propDecorators = {
+        label: [{ type: core.Input }],
+        disabled: [{ type: core.Input }],
+        defaultChecked: [{ type: core.Input }],
+        state: [{ type: core.Input }],
+        messageIcon: [{ type: core.Input }],
+        messageText: [{ type: core.Input }],
+        messageType: [{ type: core.Input }],
+        changed: [{ type: core.Output }]
+    };
+
+    var KitCheckboxModule = /** @class */ (function () {
+        function KitCheckboxModule() {
+        }
+        return KitCheckboxModule;
+    }());
+    KitCheckboxModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [
+                        KitCheckboxComponent,
+                    ],
+                    exports: [
+                        KitCheckboxComponent,
+                    ],
+                    imports: [
+                        kendoAngularLabel.LabelModule,
+                        kendoAngularInputs.CheckBoxModule,
+                        common.CommonModule,
+                        KitInputMessageModule,
+                    ],
+                },] }
+    ];
+
+    var KitToggleComponent = /** @class */ (function () {
+        function KitToggleComponent() {
+            /**
+             * Defines whether the component will be in disabled state
+             */
+            this.disabled = false;
+            /**
+             * Defines a default value
+             */
+            this.defaultChecked = false;
+            /**
+             * Defines a value which going to be an info message type
+             */
+            this.messageType = exports.KitInputMessageType.DEFAULT;
+            /**
+             * Occurs as soon as toggle state is changed
+             */
+            this.changed = new core.EventEmitter();
+            /**
+             * Function that should be called every time the form control value changes
+             */
+            this.onChange = function (value) {
+            };
+            /**
+             * Function that should be called when input lost focus and changed form control state to "touched"
+             */
+            this.onTouched = function () {
+            };
         }
-        return cooked;
-    }
-    ;
-    var __setModuleDefault = Object.create ? (function (o, v) {
-        Object.defineProperty(o, "default", { enumerable: true, value: v });
-    }) : function (o, v) {
-        o["default"] = v;
+        /**
+         * Function that is called when toggle state changed
+         */
+        KitToggleComponent.prototype.onInputStateChange = function (checked) {
+            this.onChange(checked);
+            this.changed.emit(checked);
+        };
+        KitToggleComponent.prototype.registerOnChange = function (fn) {
+            this.onChange = fn;
+        };
+        KitToggleComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouched = fn;
+        };
+        KitToggleComponent.prototype.writeValue = function (value) {
+            this.onChange(value);
+            this.defaultChecked = value;
+        };
+        KitToggleComponent.prototype.setDisabledState = function (disabled) {
+            this.disabled = disabled;
+        };
+        return KitToggleComponent;
+    }());
+    KitToggleComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'kit-toggle',
+                    template: "<div class=\"kit-toggle\">\n  <div class=\"display-flex flex-align-items-center\">\n    <kendo-switch [checked]=\"defaultChecked\"\n                  [disabled]=\"disabled\"\n                  (valueChange)=\"onInputStateChange($event)\"\n    ></kendo-switch>\n    <kendo-label class=\"label\" [text]=\"label\"></kendo-label>\n  </div>\n  <kit-input-message *ngIf=\"messageText\"\n                     [type]=\"messageType\"\n                     [icon]=\"messageIcon\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    encapsulation: core.ViewEncapsulation.None,
+                    providers: [{
+                            provide: forms.NG_VALUE_ACCESSOR,
+                            useExisting: core.forwardRef(function () { return KitToggleComponent; }),
+                            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-toggle .label{margin-left:20px;font-size:14px;font-weight:400;color:#27282a}.kit-toggle .k-switch-container{display:flex;align-items:center;width:100%;box-shadow:none;border-radius:20px;border:2px solid;background:#ffffff}.kit-toggle .k-switch-handle{width:8px;height:8px;border:none}.kit-toggle .k-switch-label-on,.kit-toggle .k-switch-label-off{display:none}.kit-toggle .k-state-focused .k-switch-container{box-shadow:none}.kit-toggle .k-switch-off .k-switch-container{border-color:#c1c7d0}.kit-toggle .k-switch-off .k-switch-handle{left:2px;background:#c1c7d0}.kit-toggle .k-switch-on .k-switch-container{border-color:#006890;background:#ffffff}.kit-toggle .k-switch-on .k-switch-handle{left:calc(100% - 10px);background:#006890}.kit-toggle .k-switch{width:32px;height:16px}.kit-toggle .k-switch .k-switch-container:hover{box-shadow:none}.kit-toggle .k-state-disabled{opacity:1}.kit-toggle .k-state-disabled.k-switch-off .k-switch-container{border-color:#e6e9ec}.kit-toggle .k-state-disabled.k-switch-off .k-switch-handle{background:#e6e9ec}.kit-toggle .k-state-disabled.k-switch-on .k-switch-container{border-color:#cce1e9}.kit-toggle .k-state-disabled.k-switch-on .k-switch-handle{background:#cce1e9}\n"]
+                },] }
+    ];
+    KitToggleComponent.propDecorators = {
+        label: [{ type: core.Input }],
+        disabled: [{ type: core.Input }],
+        defaultChecked: [{ type: core.Input }],
+        messageIcon: [{ type: core.Input }],
+        messageText: [{ type: core.Input }],
+        messageType: [{ type: core.Input }],
+        changed: [{ type: core.Output }]
     };
-    function __importStar(mod) {
-        if (mod && mod.__esModule)
-            return mod;
-        var result = {};
-        if (mod != null)
-            for (var k in mod)
-                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
-                    __createBinding(result, mod, k);
-        __setModuleDefault(result, mod);
-        return result;
-    }
-    function __importDefault(mod) {
-        return (mod && mod.__esModule) ? mod : { default: mod };
-    }
-    function __classPrivateFieldGet(receiver, state, kind, f) {
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a getter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot read private member from an object whose class did not declare it");
-        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-    }
-    function __classPrivateFieldSet(receiver, state, value, kind, f) {
-        if (kind === "m")
-            throw new TypeError("Private method is not writable");
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a setter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot write private member to an object whose class did not declare it");
-        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-    }
 
-    exports.KitTooltipPosition = void 0;
-    (function (KitTooltipPosition) {
-        KitTooltipPosition["TOP"] = "top";
-        KitTooltipPosition["BOTTOM"] = "bottom";
-        KitTooltipPosition["RIGHT"] = "right";
-        KitTooltipPosition["LEFT"] = "left";
-    })(exports.KitTooltipPosition || (exports.KitTooltipPosition = {}));
-    var KitTooltipDirective = /** @class */ (function (_super) {
-        __extends(KitTooltipDirective, _super);
-        function KitTooltipDirective() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.kitTooltipPosition = exports.KitTooltipPosition.BOTTOM;
-            _this.kitTooltipFilter = '';
-            return _this;
+    var KitToggleModule = /** @class */ (function () {
+        function KitToggleModule() {
         }
-        KitTooltipDirective.prototype.ngOnInit = function () {
-            if (!this.kitTooltipTemplateRef) {
+        return KitToggleModule;
+    }());
+    KitToggleModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [
+                        KitToggleComponent,
+                    ],
+                    imports: [
+                        common.CommonModule,
+                        kendoAngularInputs.SwitchModule,
+                        kendoAngularLabel.LabelModule,
+                        KitInputMessageModule,
+                    ],
+                    exports: [
+                        KitToggleComponent,
+                    ],
+                },] }
+    ];
+
+    var KitPillComponent = /** @class */ (function () {
+        function KitPillComponent() {
+            this.removable = false;
+            this.selectable = false;
+            this.selected = false;
+            this.clicked = new core.EventEmitter();
+            this.removed = new core.EventEmitter();
+            this.closeIcon = exports.KitSvgIcon.CROSS;
+        }
+        KitPillComponent.prototype.onComponentClick = function () {
+            if (!this.selectable) {
                 return;
             }
-            // we need this because assigning like "position = this.kitTooltipPosition" doesn't work because of inputs init latency
-            // so we need to ensure inputs are set
-            _super.prototype.ngOnInit.call(this);
-            this.tooltipTemplate = this.kitTooltipTemplateRef;
-            this.filter = this.kitTooltipFilter;
-            this.position = this.kitTooltipPosition;
+            this.clicked.emit(!this.selected);
         };
-        return KitTooltipDirective;
-    }(kendoAngularTooltip.TooltipDirective));
-    KitTooltipDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[kitTooltip]',
-                    providers: [
-                        kendoAngularPopup.PopupService,
-                    ],
+        return KitPillComponent;
+    }());
+    KitPillComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'kit-pill',
+                    template: "<div class=\"kit-pill display-flex flex-align-items-center\"\n     [class.kit-pill-selectable]=\"selectable\"\n     [class.kit-pill-selected]=\"selected\">\n  <div class=\"kit-pill-content display-flex flex-align-items-center\">\n    <ng-content\n    ></ng-content>\n  </div>\n  <button *ngIf=\"removable\" class=\"kit-pill-button\" (click)=\"removed.next()\">\n    <kit-svg-icon class=\"display-block kit-pill-button-icon\"\n                  [icon]=\"closeIcon\"\n    ></kit-svg-icon>\n  </button>\n</div>\n",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    styles: [".kit-pill{padding:5px 8px;background:#ffffff;border:1px solid #ebebe4;color:#9a9fa6;border-radius:20px;font-weight:400;font-size:12px;text-align:center}.kit-pill:not(.kit-pill-selectable),.kit-pill.kit-pill-selectable.kit-pill-selected{border:1px solid #a9a8a8;color:#002a3a}.kit-pill.kit-pill-selectable{cursor:pointer}.kit-pill.kit-pill-selectable:hover{background:#efefef}.kit-pill-button{margin-left:8px;cursor:pointer;background:none;outline:none;border:none;padding:0}.kit-pill-button-icon{height:14px;width:14px;stroke:#74777d}\n"]
                 },] }
     ];
-    KitTooltipDirective.propDecorators = {
-        kitTooltipPosition: [{ type: core.Input }],
-        kitTooltipFilter: [{ type: core.Input }],
-        kitTooltipTemplateRef: [{ type: core.Input }]
+    KitPillComponent.propDecorators = {
+        removable: [{ type: core.Input }],
+        selectable: [{ type: core.Input }],
+        selected: [{ type: core.Input }],
+        clicked: [{ type: core.Output }],
+        removed: [{ type: core.Output }],
+        onComponentClick: [{ type: core.HostListener, args: ['click',] }]
     };
 
-    var KitTooltipModule = /** @class */ (function () {
-        function KitTooltipModule() {
+    var KitPillModule = /** @class */ (function () {
+        function KitPillModule() {
         }
-        return KitTooltipModule;
+        return KitPillModule;
     }());
-    KitTooltipModule.decorators = [
+    KitPillModule.decorators = [
         { type: core.NgModule, args: [{
                     declarations: [
-                        KitTooltipDirective,
+                        KitPillComponent,
                     ],
                     exports: [
-                        KitTooltipDirective,
-                        kendoAngularTooltip.TooltipModule,
+                        KitPillComponent,
+                    ],
+                    imports: [
+                        KitSvgIconModule,
+                        common.CommonModule,
                     ],
                 },] }
     ];