@indigina/ui-kit 1.1.39 → 1.1.40

package/esm2022/lib/components/kit-grid/kit-grid.component.mjs

@@ -21,7 +21,19 @@ export class KitGridComponent {
          */
         this.sort = [];
         /**
-         * An action which is emitted once the sorting of the grid changed
+         * Enables the pager of the grid
+         */
+        this.pageable = false;
+        /**
+         * Defines the number of records to be skipped by the pager
+         */
+        this.skip = 0;
+        /**
+         * An action which is emitted when the page of the grid is changed
+         */
+        this.pageChanged = new EventEmitter();
+        /**
+         * An action which is emitted once the sorting of the grid is changed
          */
         this.sortChanged = new EventEmitter();
         /**
@@ -32,7 +44,6 @@ export class KitGridComponent {
         this.kitGridDetailTemplate = null;
         this.KitSvgIcon = KitSvgIcon;
         this.KitGridSortDirection = KitGridSortDirection;
-        this.state = {};
         this.expandedRows = [];
         this.getCssRowClass = (context) => {
             const expanded = this.expandedRows.includes(context.index);
@@ -42,14 +53,14 @@ export class KitGridComponent {
         };
     }
     onDataStateChange(event) {
-        this.state = event;
         this.dataStateChanged.emit(event);
     }
     onSortChange(event) {
+        this.sort = event;
         this.sortChanged.emit(event);
     }
-    getSortingDirection() {
-        return this.state.sort?.[0]?.dir ?? null;
+    getSortingDirection(columnField) {
+        return this.sort.find(item => item.field === columnField)?.dir ?? null;
     }
     isDetailTemplateVisible(dataItem) {
         return !!dataItem.children?.length;
@@ -57,6 +68,9 @@ export class KitGridComponent {
     hasDetailColumn() {
         return this.data.some(item => !!item.children?.length);
     }
+    isColumnSortable(column) {
+        return !!this.sortable && column.sortable;
+    }
     onDetailExpand(event) {
         this.expandedRows.push(event.index);
     }
@@ -64,18 +78,37 @@ export class KitGridComponent {
         const index = this.expandedRows.indexOf(event.index);
         this.expandedRows.splice(index, 1);
     }
+    onPageChange(event) {
+        this.skip = event.skip;
+        this.pageChanged.emit(event);
+    }
+    getPagerSettings() {
+        const pagerSettings = {
+            buttonCount: 5,
+            info: false,
+        };
+        return this.pageable && pagerSettings || false;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitGridComponent, selector: "kit-grid", inputs: { data: "data", sortable: "sortable", sort: "sort" }, outputs: { sortChanged: "sortChanged", dataStateChanged: "dataStateChanged" }, queries: [{ propertyName: "kitGridDetailTemplate", first: true, predicate: ["kitGridDetailTemplate"], descendants: true }, { propertyName: "columns", predicate: KitGridColumnComponent }], ngImport: i0, template: "<kendo-grid class=\"kit-grid\"\n            [kendoGridBinding]=\"data\"\n            [sortable]=\"sortable\"\n            [sort]=\"sort\"\n            [rowClass]=\"getCssRowClass\"\n            (detailExpand)=\"onDetailExpand($event)\"\n            (detailCollapse)=\"onDetailCollapse($event)\"\n            (sortChange)=\"onSortChange($event)\"\n            (dataStateChange)=\"onDataStateChange($event)\">\n  @for (column of columns; track column) {\n    <kendo-grid-column [field]=\"column.field\"\n                       [sortable]=\"column.sortable\"\n                       [width]=\"column.width\">\n      <ng-template kendoGridHeaderTemplate>\n        <div class=\"grid-title\"\n             [class.sortable]=\"column.sortable\">\n          @if (column.titleIcon) {\n            <kit-svg-icon class=\"grid-title-icon\"\n                          [icon]=\"column.titleIcon\"\n                          [ngClass]=\"column.titleIconType\"\n            ></kit-svg-icon>\n          }\n\n          <div class=\"grid-title-text\">\n            {{ column.title }}\n          </div>\n\n          @if (sortable && column.sortable) {\n            @switch (getSortingDirection()) {\n              @case (KitGridSortDirection.ASC) {\n                <kit-svg-icon class=\"grid-title-sort-icon\"\n                              [icon]=\"KitSvgIcon.SORT_ASCENDING\"\n                ></kit-svg-icon>\n              }\n              @case (KitGridSortDirection.DESC) {\n                <kit-svg-icon class=\"grid-title-sort-icon\"\n                              [icon]=\"KitSvgIcon.SORT_DESCENDING\"\n                ></kit-svg-icon>\n              }\n            }\n          }\n        </div>\n      </ng-template>\n\n      @if (column.cellTemplate) {\n        <ng-template kendoGridCellTemplate let-dataItem>\n          <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n          ></ng-container>\n        </ng-template>\n      }\n    </kendo-grid-column>\n\n    @if (hasDetailColumn()) {\n      <div *kendoGridDetailTemplate=\"let dataItem; showIf: isDetailTemplateVisible\">\n        <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n        ></ng-container>\n      </div>\n    }\n  }\n</kendo-grid>\n", styles: [".kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1}.kit-grid .grid-title-icon{display:block;width:16px;height:16px}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid.k-grid{border:none}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-content{overflow:hidden}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-master-row.expanded .k-svg-icon{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-table-row:last-child .k-table-td{border-bottom:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i2.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "component", type: i2.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i2.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "directive", type: i2.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i2.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitGridComponent, selector: "kit-grid", inputs: { data: "data", sortable: "sortable", sort: "sort", pageable: "pageable", pageSize: "pageSize", skip: "skip" }, outputs: { pageChanged: "pageChanged", sortChanged: "sortChanged", dataStateChanged: "dataStateChanged" }, queries: [{ propertyName: "kitGridDetailTemplate", first: true, predicate: ["kitGridDetailTemplate"], descendants: true }, { propertyName: "columns", predicate: KitGridColumnComponent }], ngImport: i0, template: "<kendo-grid class=\"kit-grid\"\n            [kendoGridBinding]=\"data\"\n            [sortable]=\"sortable\"\n            [sort]=\"sort\"\n            [rowClass]=\"getCssRowClass\"\n            [pageable]=\"getPagerSettings()\"\n            [pageSize]=\"pageSize\"\n            [skip]=\"skip\"\n            (detailExpand)=\"onDetailExpand($event)\"\n            (detailCollapse)=\"onDetailCollapse($event)\"\n            (sortChange)=\"onSortChange($event)\"\n            (pageChange)=\"onPageChange($event)\"\n            (dataStateChange)=\"onDataStateChange($event)\">\n  @for (column of columns; track column) {\n    <kendo-grid-column [field]=\"column.field\"\n                       [sortable]=\"column.sortable\"\n                       [width]=\"column.width\">\n      <ng-template kendoGridHeaderTemplate>\n        <div class=\"grid-title\"\n             [class.sortable]=\"isColumnSortable(column)\">\n          @if (column.titleIcon) {\n            <kit-svg-icon class=\"grid-title-icon\"\n                          [icon]=\"column.titleIcon\"\n                          [ngClass]=\"column.titleIconType\"\n            ></kit-svg-icon>\n          }\n\n          <div class=\"grid-title-text\">\n            {{ column.title }}\n          </div>\n\n          @if (sortable && column.sortable) {\n            @switch (getSortingDirection(column.field)) {\n              @case (KitGridSortDirection.ASC) {\n                <kit-svg-icon class=\"grid-title-sort-icon\"\n                              [icon]=\"KitSvgIcon.SORT_ASCENDING\"\n                ></kit-svg-icon>\n              }\n              @case (KitGridSortDirection.DESC) {\n                <kit-svg-icon class=\"grid-title-sort-icon\"\n                              [icon]=\"KitSvgIcon.SORT_DESCENDING\"\n                ></kit-svg-icon>\n              }\n            }\n          }\n        </div>\n      </ng-template>\n\n      @if (column.cellTemplate) {\n        <ng-template kendoGridCellTemplate let-dataItem>\n          <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n          ></ng-container>\n        </ng-template>\n      }\n    </kendo-grid-column>\n\n    @if (hasDetailColumn()) {\n      <div *kendoGridDetailTemplate=\"let dataItem; showIf: isDetailTemplateVisible\">\n        <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n        ></ng-container>\n      </div>\n    }\n  }\n</kendo-grid>\n", styles: [".kit-grid{border:none;background:none}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1}.kit-grid .grid-title-icon{display:block;width:16px;height:16px}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-content{overflow:hidden}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th .k-sort-order{margin-left:2px;color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px;background:var(--ui-kit-color-white)}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-svg-icon{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-table-row:last-child .k-table-td{border-bottom:none}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-hierarchy-cell .k-svg-i-plus:before{content:\"\\e005\"}.kit-grid ::ng-deep .k-hierarchy-cell .k-svg-i-minus:before{content:\"\\e006\"}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:0;border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-nav{width:32px;height:32px;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-nav:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-nav:after{opacity:0}.kit-grid ::ng-deep .k-pager-nav.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-nav.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager .k-pager-first,.kit-grid ::ng-deep .k-pager .k-pager-last{display:none}.kit-grid ::ng-deep .k-pager .k-button-icon{font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-left:before{content:\"\\e016\"}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-right:before{content:\"\\e014\"}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i2.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "component", type: i2.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i2.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "directive", type: i2.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i2.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kit-grid', changeDetection: ChangeDetectionStrategy.OnPush, template: "<kendo-grid class=\"kit-grid\"\n            [kendoGridBinding]=\"data\"\n            [sortable]=\"sortable\"\n            [sort]=\"sort\"\n            [rowClass]=\"getCssRowClass\"\n            (detailExpand)=\"onDetailExpand($event)\"\n            (detailCollapse)=\"onDetailCollapse($event)\"\n            (sortChange)=\"onSortChange($event)\"\n            (dataStateChange)=\"onDataStateChange($event)\">\n  @for (column of columns; track column) {\n    <kendo-grid-column [field]=\"column.field\"\n                       [sortable]=\"column.sortable\"\n                       [width]=\"column.width\">\n      <ng-template kendoGridHeaderTemplate>\n        <div class=\"grid-title\"\n             [class.sortable]=\"column.sortable\">\n          @if (column.titleIcon) {\n            <kit-svg-icon class=\"grid-title-icon\"\n                          [icon]=\"column.titleIcon\"\n                          [ngClass]=\"column.titleIconType\"\n            ></kit-svg-icon>\n          }\n\n          <div class=\"grid-title-text\">\n            {{ column.title }}\n          </div>\n\n          @if (sortable && column.sortable) {\n            @switch (getSortingDirection()) {\n              @case (KitGridSortDirection.ASC) {\n                <kit-svg-icon class=\"grid-title-sort-icon\"\n                              [icon]=\"KitSvgIcon.SORT_ASCENDING\"\n                ></kit-svg-icon>\n              }\n              @case (KitGridSortDirection.DESC) {\n                <kit-svg-icon class=\"grid-title-sort-icon\"\n                              [icon]=\"KitSvgIcon.SORT_DESCENDING\"\n                ></kit-svg-icon>\n              }\n            }\n          }\n        </div>\n      </ng-template>\n\n      @if (column.cellTemplate) {\n        <ng-template kendoGridCellTemplate let-dataItem>\n          <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n          ></ng-container>\n        </ng-template>\n      }\n    </kendo-grid-column>\n\n    @if (hasDetailColumn()) {\n      <div *kendoGridDetailTemplate=\"let dataItem; showIf: isDetailTemplateVisible\">\n        <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n        ></ng-container>\n      </div>\n    }\n  }\n</kendo-grid>\n", styles: [".kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1}.kit-grid .grid-title-icon{display:block;width:16px;height:16px}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid.k-grid{border:none}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-content{overflow:hidden}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-master-row.expanded .k-svg-icon{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-table-row:last-child .k-table-td{border-bottom:none}\n"] }]
+            args: [{ selector: 'kit-grid', changeDetection: ChangeDetectionStrategy.OnPush, template: "<kendo-grid class=\"kit-grid\"\n            [kendoGridBinding]=\"data\"\n            [sortable]=\"sortable\"\n            [sort]=\"sort\"\n            [rowClass]=\"getCssRowClass\"\n            [pageable]=\"getPagerSettings()\"\n            [pageSize]=\"pageSize\"\n            [skip]=\"skip\"\n            (detailExpand)=\"onDetailExpand($event)\"\n            (detailCollapse)=\"onDetailCollapse($event)\"\n            (sortChange)=\"onSortChange($event)\"\n            (pageChange)=\"onPageChange($event)\"\n            (dataStateChange)=\"onDataStateChange($event)\">\n  @for (column of columns; track column) {\n    <kendo-grid-column [field]=\"column.field\"\n                       [sortable]=\"column.sortable\"\n                       [width]=\"column.width\">\n      <ng-template kendoGridHeaderTemplate>\n        <div class=\"grid-title\"\n             [class.sortable]=\"isColumnSortable(column)\">\n          @if (column.titleIcon) {\n            <kit-svg-icon class=\"grid-title-icon\"\n                          [icon]=\"column.titleIcon\"\n                          [ngClass]=\"column.titleIconType\"\n            ></kit-svg-icon>\n          }\n\n          <div class=\"grid-title-text\">\n            {{ column.title }}\n          </div>\n\n          @if (sortable && column.sortable) {\n            @switch (getSortingDirection(column.field)) {\n              @case (KitGridSortDirection.ASC) {\n                <kit-svg-icon class=\"grid-title-sort-icon\"\n                              [icon]=\"KitSvgIcon.SORT_ASCENDING\"\n                ></kit-svg-icon>\n              }\n              @case (KitGridSortDirection.DESC) {\n                <kit-svg-icon class=\"grid-title-sort-icon\"\n                              [icon]=\"KitSvgIcon.SORT_DESCENDING\"\n                ></kit-svg-icon>\n              }\n            }\n          }\n        </div>\n      </ng-template>\n\n      @if (column.cellTemplate) {\n        <ng-template kendoGridCellTemplate let-dataItem>\n          <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n          ></ng-container>\n        </ng-template>\n      }\n    </kendo-grid-column>\n\n    @if (hasDetailColumn()) {\n      <div *kendoGridDetailTemplate=\"let dataItem; showIf: isDetailTemplateVisible\">\n        <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n        ></ng-container>\n      </div>\n    }\n  }\n</kendo-grid>\n", styles: [".kit-grid{border:none;background:none}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1}.kit-grid .grid-title-icon{display:block;width:16px;height:16px}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-content{overflow:hidden}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th .k-sort-order{margin-left:2px;color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px;background:var(--ui-kit-color-white)}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-svg-icon{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-table-row:last-child .k-table-td{border-bottom:none}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-hierarchy-cell .k-svg-i-plus:before{content:\"\\e005\"}.kit-grid ::ng-deep .k-hierarchy-cell .k-svg-i-minus:before{content:\"\\e006\"}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:0;border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-nav{width:32px;height:32px;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-nav:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-nav:after{opacity:0}.kit-grid ::ng-deep .k-pager-nav.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-nav.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager .k-pager-first,.kit-grid ::ng-deep .k-pager .k-pager-last{display:none}.kit-grid ::ng-deep .k-pager .k-button-icon{font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-left:before{content:\"\\e016\"}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-right:before{content:\"\\e014\"}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], sortable: [{
                 type: Input
             }], sort: [{
                 type: Input
+            }], pageable: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], skip: [{
+                type: Input
+            }], pageChanged: [{
+                type: Output
             }], sortChanged: [{
                 type: Output
             }], dataStateChanged: [{
@@ -87,4 +120,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
                 type: ContentChild,
                 args: ['kitGridDetailTemplate']
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2l0LWdyaWQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkta2l0L3NyYy9saWIvY29tcG9uZW50cy9raXQtZ3JpZC9raXQtZ3JpZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1ncmlkL2tpdC1ncmlkLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixlQUFlLEVBQ2YsWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEdBR1AsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sNkNBQTZDLENBQUM7QUFFckYsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBR2hFLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLGtCQUFrQixDQUFDOzs7OztBQVF4RCxNQUFNLE9BQU8sZ0JBQWdCO0lBTjdCO1FBT0U7O1dBRUc7UUFDTSxTQUFJLEdBQVEsRUFBRSxDQUFDO1FBRXhCOztXQUVHO1FBQ00sYUFBUSxHQUFZLEtBQUssQ0FBQztRQUVuQzs7V0FFRztRQUNNLFNBQUksR0FBNEIsRUFBRSxDQUFDO1FBRTVDOztXQUVHO1FBQ08sZ0JBQVcsR0FBMEMsSUFBSSxZQUFZLEVBQTJCLENBQUM7UUFFM0c7O1dBRUc7UUFDTyxxQkFBZ0IsR0FBOEMsSUFBSSxZQUFZLEVBQStCLENBQUM7UUFFL0UsWUFBTyxHQUE2QyxJQUFJLENBQUM7UUFDM0QsMEJBQXFCLEdBQW9DLElBQUksQ0FBQztRQUU1RixlQUFVLEdBQXNCLFVBQVUsQ0FBQztRQUMzQyx5QkFBb0IsR0FBZ0Msb0JBQW9CLENBQUM7UUFDMUUsVUFBSyxHQUFVLEVBQUUsQ0FBQztRQUNsQixpQkFBWSxHQUFhLEVBQUUsQ0FBQztRQWdDcEMsbUJBQWMsR0FBRyxDQUFDLE9BQXFCLEVBQTJCLEVBQUU7WUFDbEUsTUFBTSxRQUFRLEdBQVksSUFBSSxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBRXBFLE9BQU87Z0JBQ0wsUUFBUTthQUNULENBQUM7UUFDSixDQUFDLENBQUM7S0FDSDtJQXJDQyxpQkFBaUIsQ0FBQyxLQUEyQjtRQUMzQyxJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQztRQUNuQixJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3BDLENBQUM7SUFFRCxZQUFZLENBQUMsS0FBdUI7UUFDbEMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDL0IsQ0FBQztJQUVELG1CQUFtQjtRQUNqQixPQUFPLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsR0FBRyxJQUFJLElBQUksQ0FBQztJQUMzQyxDQUFDO0lBRUQsdUJBQXVCLENBQUMsUUFBVztRQUNqQyxPQUFPLENBQUMsQ0FBQyxRQUFRLENBQUMsUUFBUSxFQUFFLE1BQU0sQ0FBQztJQUNyQyxDQUFDO0lBRUQsZUFBZTtRQUNiLE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRSxNQUFNLENBQUMsQ0FBQztJQUN6RCxDQUFDO0lBRUQsY0FBYyxDQUFDLEtBQXdCO1FBQ3JDLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN0QyxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsS0FBMEI7UUFDekMsTUFBTSxLQUFLLEdBQVcsSUFBSSxDQUFDLFlBQVksQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzdELElBQUksQ0FBQyxZQUFZLENBQUMsTUFBTSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQztJQUNyQyxDQUFDOzhHQTlEVSxnQkFBZ0I7a0dBQWhCLGdCQUFnQixzVUEwQlYsc0JBQXNCLDZCQ2xEekMsMnVFQTREQTs7MkZEcENhLGdCQUFnQjtrQkFONUIsU0FBUzsrQkFDRSxVQUFVLG1CQUdILHVCQUF1QixDQUFDLE1BQU07OEJBTXRDLElBQUk7c0JBQVosS0FBSztnQkFLRyxRQUFRO3NCQUFoQixLQUFLO2dCQUtHLElBQUk7c0JBQVosS0FBSztnQkFLSSxXQUFXO3NCQUFwQixNQUFNO2dCQUtHLGdCQUFnQjtzQkFBekIsTUFBTTtnQkFFa0MsT0FBTztzQkFBL0MsZUFBZTt1QkFBQyxzQkFBc0I7Z0JBQ0EscUJBQXFCO3NCQUEzRCxZQUFZO3VCQUFDLHVCQUF1QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIENvbnRlbnRDaGlsZCxcbiAgQ29udGVudENoaWxkcmVuLFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPdXRwdXQsXG4gIFF1ZXJ5TGlzdCxcbiAgVGVtcGxhdGVSZWYsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgS2l0R3JpZENvbHVtbkNvbXBvbmVudCB9IGZyb20gJy4va2l0LWdyaWQtY29sdW1uL2tpdC1ncmlkLWNvbHVtbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgRGF0YVN0YXRlQ2hhbmdlRXZlbnQsIERldGFpbENvbGxhcHNlRXZlbnQsIERldGFpbEV4cGFuZEV2ZW50LCBSb3dDbGFzc0FyZ3MgfSBmcm9tICdAcHJvZ3Jlc3Mva2VuZG8tYW5ndWxhci1ncmlkJztcbmltcG9ydCB7IEtpdFN2Z0ljb24gfSBmcm9tICcuLi9raXQtc3ZnLWljb24va2l0LXN2Zy1pY29uLmNvbnN0JztcbmltcG9ydCB7IFNvcnREZXNjcmlwdG9yLCBTdGF0ZSB9IGZyb20gJ0Bwcm9ncmVzcy9rZW5kby1kYXRhLXF1ZXJ5JztcbmltcG9ydCB7IEtpdEdyaWREYXRhU3RhdGVDaGFuZ2VFdmVudCwgS2l0R3JpZE5lc3RlZERhdGEsIEtpdEdyaWRTb3J0RGVzY3JpcHRvciB9IGZyb20gJy4va2l0LWdyaWQubW9kZWwnO1xuaW1wb3J0IHsgS2l0R3JpZFNvcnREaXJlY3Rpb24gfSBmcm9tICcuL2tpdC1ncmlkLmNvbnN0JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAna2l0LWdyaWQnLFxuICB0ZW1wbGF0ZVVybDogJy4va2l0LWdyaWQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4va2l0LWdyaWQuY29tcG9uZW50LnNjc3MnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgS2l0R3JpZENvbXBvbmVudDxUIGV4dGVuZHMgS2l0R3JpZE5lc3RlZERhdGE8VT4sIFUgPSB1bmtub3duPiB7XG4gIC8qKlxuICAgKiBTZXRzIHRoZSBkYXRhIG9mIHRoZSBncmlkXG4gICAqL1xuICBASW5wdXQoKSBkYXRhOiBUW10gPSBbXTtcblxuICAvKipcbiAgICogRW5hYmxlcyB0aGUgc29ydGluZyBvZiB0aGUgZ3JpZCBjb2x1bW5zXG4gICAqL1xuICBASW5wdXQoKSBzb3J0YWJsZTogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBUaGUgZGVzY3JpcHRvcnMgYnkgd2hpY2ggdGhlIGRhdGEgd2lsbCBiZSBzb3J0ZWRcbiAgICovXG4gIEBJbnB1dCgpIHNvcnQ6IEtpdEdyaWRTb3J0RGVzY3JpcHRvcltdID0gW107XG5cbiAgLyoqXG4gICAqIEFuIGFjdGlvbiB3aGljaCBpcyBlbWl0dGVkIG9uY2UgdGhlIHNvcnRpbmcgb2YgdGhlIGdyaWQgY2hhbmdlZFxuICAgKi9cbiAgQE91dHB1dCgpIHNvcnRDaGFuZ2VkOiBFdmVudEVtaXR0ZXI8S2l0R3JpZFNvcnREZXNjcmlwdG9yW10+ID0gbmV3IEV2ZW50RW1pdHRlcjxLaXRHcmlkU29ydERlc2NyaXB0b3JbXT4oKTtcblxuICAvKipcbiAgICogQW4gYWN0aW9uIHdoaWNoIGlzIGVtaXR0ZWQgd2hlbiB0aGUgZGF0YSBzdGF0ZSBvZiB0aGUgZ3JpZCBpcyBjaGFuZ2VkXG4gICAqL1xuICBAT3V0cHV0KCkgZGF0YVN0YXRlQ2hhbmdlZDogRXZlbnRFbWl0dGVyPEtpdEdyaWREYXRhU3RhdGVDaGFuZ2VFdmVudD4gPSBuZXcgRXZlbnRFbWl0dGVyPEtpdEdyaWREYXRhU3RhdGVDaGFuZ2VFdmVudD4oKTtcblxuICBAQ29udGVudENoaWxkcmVuKEtpdEdyaWRDb2x1bW5Db21wb25lbnQpIGNvbHVtbnM6IFF1ZXJ5TGlzdDxLaXRHcmlkQ29sdW1uQ29tcG9uZW50PiB8IG51bGwgPSBudWxsO1xuICBAQ29udGVudENoaWxkKCdraXRHcmlkRGV0YWlsVGVtcGxhdGUnKSBraXRHcmlkRGV0YWlsVGVtcGxhdGU6IFRlbXBsYXRlUmVmPEhUTUxFbGVtZW50PiB8IG51bGwgPSBudWxsO1xuXG4gIHJlYWRvbmx5IEtpdFN2Z0ljb246IHR5cGVvZiBLaXRTdmdJY29uID0gS2l0U3ZnSWNvbjtcbiAgcmVhZG9ubHkgS2l0R3JpZFNvcnREaXJlY3Rpb246IHR5cGVvZiBLaXRHcmlkU29ydERpcmVjdGlvbiA9IEtpdEdyaWRTb3J0RGlyZWN0aW9uO1xuICBwcml2YXRlIHN0YXRlOiBTdGF0ZSA9IHt9O1xuICBwcml2YXRlIGV4cGFuZGVkUm93czogbnVtYmVyW10gPSBbXTtcblxuICBvbkRhdGFTdGF0ZUNoYW5nZShldmVudDogRGF0YVN0YXRlQ2hhbmdlRXZlbnQpOiB2b2lkIHtcbiAgICB0aGlzLnN0YXRlID0gZXZlbnQ7XG4gICAgdGhpcy5kYXRhU3RhdGVDaGFuZ2VkLmVtaXQoZXZlbnQpO1xuICB9XG5cbiAgb25Tb3J0Q2hhbmdlKGV2ZW50OiBTb3J0RGVzY3JpcHRvcltdKTogdm9pZCB7XG4gICAgdGhpcy5zb3J0Q2hhbmdlZC5lbWl0KGV2ZW50KTtcbiAgfVxuXG4gIGdldFNvcnRpbmdEaXJlY3Rpb24oKTogc3RyaW5nIHwgbnVsbCB7XG4gICAgcmV0dXJuIHRoaXMuc3RhdGUuc29ydD8uWzBdPy5kaXIgPz8gbnVsbDtcbiAgfVxuXG4gIGlzRGV0YWlsVGVtcGxhdGVWaXNpYmxlKGRhdGFJdGVtOiBUKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuICEhZGF0YUl0ZW0uY2hpbGRyZW4/Lmxlbmd0aDtcbiAgfVxuXG4gIGhhc0RldGFpbENvbHVtbigpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5kYXRhLnNvbWUoaXRlbSA9PiAhIWl0ZW0uY2hpbGRyZW4/Lmxlbmd0aCk7XG4gIH1cblxuICBvbkRldGFpbEV4cGFuZChldmVudDogRGV0YWlsRXhwYW5kRXZlbnQpOiB2b2lkIHtcbiAgICB0aGlzLmV4cGFuZGVkUm93cy5wdXNoKGV2ZW50LmluZGV4KTtcbiAgfVxuXG4gIG9uRGV0YWlsQ29sbGFwc2UoZXZlbnQ6IERldGFpbENvbGxhcHNlRXZlbnQpOiB2b2lkIHtcbiAgICBjb25zdCBpbmRleDogbnVtYmVyID0gdGhpcy5leHBhbmRlZFJvd3MuaW5kZXhPZihldmVudC5pbmRleCk7XG4gICAgdGhpcy5leHBhbmRlZFJvd3Muc3BsaWNlKGluZGV4LCAxKTtcbiAgfVxuXG4gIGdldENzc1Jvd0NsYXNzID0gKGNvbnRleHQ6IFJvd0NsYXNzQXJncyk6IFJlY29yZDxzdHJpbmcsIGJvb2xlYW4+ID0+IHtcbiAgICBjb25zdCBleHBhbmRlZDogYm9vbGVhbiA9IHRoaXMuZXhwYW5kZWRSb3dzLmluY2x1ZGVzKGNvbnRleHQuaW5kZXgpO1xuXG4gICAgcmV0dXJuIHtcbiAgICAgIGV4cGFuZGVkLFxuICAgIH07XG4gIH07XG59XG4iLCI8a2VuZG8tZ3JpZCBjbGFzcz1cImtpdC1ncmlkXCJcbiAgICAgICAgICAgIFtrZW5kb0dyaWRCaW5kaW5nXT1cImRhdGFcIlxuICAgICAgICAgICAgW3NvcnRhYmxlXT1cInNvcnRhYmxlXCJcbiAgICAgICAgICAgIFtzb3J0XT1cInNvcnRcIlxuICAgICAgICAgICAgW3Jvd0NsYXNzXT1cImdldENzc1Jvd0NsYXNzXCJcbiAgICAgICAgICAgIChkZXRhaWxFeHBhbmQpPVwib25EZXRhaWxFeHBhbmQoJGV2ZW50KVwiXG4gICAgICAgICAgICAoZGV0YWlsQ29sbGFwc2UpPVwib25EZXRhaWxDb2xsYXBzZSgkZXZlbnQpXCJcbiAgICAgICAgICAgIChzb3J0Q2hhbmdlKT1cIm9uU29ydENoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgICAgIChkYXRhU3RhdGVDaGFuZ2UpPVwib25EYXRhU3RhdGVDaGFuZ2UoJGV2ZW50KVwiPlxuICBAZm9yIChjb2x1bW4gb2YgY29sdW1uczsgdHJhY2sgY29sdW1uKSB7XG4gICAgPGtlbmRvLWdyaWQtY29sdW1uIFtmaWVsZF09XCJjb2x1bW4uZmllbGRcIlxuICAgICAgICAgICAgICAgICAgICAgICBbc29ydGFibGVdPVwiY29sdW1uLnNvcnRhYmxlXCJcbiAgICAgICAgICAgICAgICAgICAgICAgW3dpZHRoXT1cImNvbHVtbi53aWR0aFwiPlxuICAgICAgPG5nLXRlbXBsYXRlIGtlbmRvR3JpZEhlYWRlclRlbXBsYXRlPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZ3JpZC10aXRsZVwiXG4gICAgICAgICAgICAgW2NsYXNzLnNvcnRhYmxlXT1cImNvbHVtbi5zb3J0YWJsZVwiPlxuICAgICAgICAgIEBpZiAoY29sdW1uLnRpdGxlSWNvbikge1xuICAgICAgICAgICAgPGtpdC1zdmctaWNvbiBjbGFzcz1cImdyaWQtdGl0bGUtaWNvblwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgIFtpY29uXT1cImNvbHVtbi50aXRsZUljb25cIlxuICAgICAgICAgICAgICAgICAgICAgICAgICBbbmdDbGFzc109XCJjb2x1bW4udGl0bGVJY29uVHlwZVwiXG4gICAgICAgICAgICA+PC9raXQtc3ZnLWljb24+XG4gICAgICAgICAgfVxuXG4gICAgICAgICAgPGRpdiBjbGFzcz1cImdyaWQtdGl0bGUtdGV4dFwiPlxuICAgICAgICAgICAge3sgY29sdW1uLnRpdGxlIH19XG4gICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICBAaWYgKHNvcnRhYmxlICYmIGNvbHVtbi5zb3J0YWJsZSkge1xuICAgICAgICAgICAgQHN3aXRjaCAoZ2V0U29ydGluZ0RpcmVjdGlvbigpKSB7XG4gICAgICAgICAgICAgIEBjYXNlIChLaXRHcmlkU29ydERpcmVjdGlvbi5BU0MpIHtcbiAgICAgICAgICAgICAgICA8a2l0LXN2Zy1pY29uIGNsYXNzPVwiZ3JpZC10aXRsZS1zb3J0LWljb25cIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgW2ljb25dPVwiS2l0U3ZnSWNvbi5TT1JUX0FTQ0VORElOR1wiXG4gICAgICAgICAgICAgICAgPjwva2l0LXN2Zy1pY29uPlxuICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgIEBjYXNlIChLaXRHcmlkU29ydERpcmVjdGlvbi5ERVNDKSB7XG4gICAgICAgICAgICAgICAgPGtpdC1zdmctaWNvbiBjbGFzcz1cImdyaWQtdGl0bGUtc29ydC1pY29uXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtpY29uXT1cIktpdFN2Z0ljb24uU09SVF9ERVNDRU5ESU5HXCJcbiAgICAgICAgICAgICAgICA+PC9raXQtc3ZnLWljb24+XG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgICB9XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9uZy10ZW1wbGF0ZT5cblxuICAgICAgQGlmIChjb2x1bW4uY2VsbFRlbXBsYXRlKSB7XG4gICAgICAgIDxuZy10ZW1wbGF0ZSBrZW5kb0dyaWRDZWxsVGVtcGxhdGUgbGV0LWRhdGFJdGVtPlxuICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjb2x1bW4uY2VsbFRlbXBsYXRlOyBjb250ZXh0OiB7ICRpbXBsaWNpdDogZGF0YUl0ZW0gfVwiXG4gICAgICAgICAgPjwvbmctY29udGFpbmVyPlxuICAgICAgICA8L25nLXRlbXBsYXRlPlxuICAgICAgfVxuICAgIDwva2VuZG8tZ3JpZC1jb2x1bW4+XG5cbiAgICBAaWYgKGhhc0RldGFpbENvbHVtbigpKSB7XG4gICAgICA8ZGl2ICprZW5kb0dyaWREZXRhaWxUZW1wbGF0ZT1cImxldCBkYXRhSXRlbTsgc2hvd0lmOiBpc0RldGFpbFRlbXBsYXRlVmlzaWJsZVwiPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwia2l0R3JpZERldGFpbFRlbXBsYXRlOyBjb250ZXh0OiB7ICRpbXBsaWNpdDogZGF0YUl0ZW0gfVwiXG4gICAgICAgID48L25nLWNvbnRhaW5lcj5cbiAgICAgIDwvZGl2PlxuICAgIH1cbiAgfVxuPC9rZW5kby1ncmlkPlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2l0LWdyaWQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkta2l0L3NyYy9saWIvY29tcG9uZW50cy9raXQtZ3JpZC9raXQtZ3JpZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1ncmlkL2tpdC1ncmlkLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixlQUFlLEVBQ2YsWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEdBR1AsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sNkNBQTZDLENBQUM7QUFTckYsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBU2hFLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLGtCQUFrQixDQUFDOzs7OztBQVF4RCxNQUFNLE9BQU8sZ0JBQWdCO0lBTjdCO1FBT0U7O1dBRUc7UUFDTSxTQUFJLEdBQVEsRUFBRSxDQUFDO1FBRXhCOztXQUVHO1FBQ00sYUFBUSxHQUFrQyxLQUFLLENBQUM7UUFFekQ7O1dBRUc7UUFDTSxTQUFJLEdBQTRCLEVBQUUsQ0FBQztRQUU1Qzs7V0FFRztRQUNNLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFPbkM7O1dBRUc7UUFDTSxTQUFJLEdBQVcsQ0FBQyxDQUFDO1FBRTFCOztXQUVHO1FBQ08sZ0JBQVcsR0FBeUMsSUFBSSxZQUFZLEVBQTBCLENBQUM7UUFFekc7O1dBRUc7UUFDTyxnQkFBVyxHQUEwQyxJQUFJLFlBQVksRUFBMkIsQ0FBQztRQUUzRzs7V0FFRztRQUNPLHFCQUFnQixHQUE4QyxJQUFJLFlBQVksRUFBK0IsQ0FBQztRQUUvRSxZQUFPLEdBQTZDLElBQUksQ0FBQztRQUMzRCwwQkFBcUIsR0FBb0MsSUFBSSxDQUFDO1FBRTVGLGVBQVUsR0FBc0IsVUFBVSxDQUFDO1FBQzNDLHlCQUFvQixHQUFnQyxvQkFBb0IsQ0FBQztRQUMxRSxpQkFBWSxHQUFhLEVBQUUsQ0FBQztRQXlDcEMsbUJBQWMsR0FBRyxDQUFDLE9BQXFCLEVBQTJCLEVBQUU7WUFDbEUsTUFBTSxRQUFRLEdBQVksSUFBSSxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBRXBFLE9BQU87Z0JBQ0wsUUFBUTthQUNULENBQUM7UUFDSixDQUFDLENBQUM7S0FVSDtJQXZEQyxpQkFBaUIsQ0FBQyxLQUEyQjtRQUMzQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3BDLENBQUM7SUFFRCxZQUFZLENBQUMsS0FBdUI7UUFDbEMsSUFBSSxDQUFDLElBQUksR0FBRyxLQUFLLENBQUM7UUFDbEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDL0IsQ0FBQztJQUVELG1CQUFtQixDQUFDLFdBQW1CO1FBQ3JDLE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsS0FBSyxLQUFLLFdBQVcsQ0FBQyxFQUFFLEdBQUcsSUFBSSxJQUFJLENBQUM7SUFDekUsQ0FBQztJQUVELHVCQUF1QixDQUFDLFFBQVc7UUFDakMsT0FBTyxDQUFDLENBQUMsUUFBUSxDQUFDLFFBQVEsRUFBRSxNQUFNLENBQUM7SUFDckMsQ0FBQztJQUVELGVBQWU7UUFDYixPQUFPLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsTUFBTSxDQUFDLENBQUM7SUFDekQsQ0FBQztJQUVELGdCQUFnQixDQUFDLE1BQThCO1FBQzdDLE9BQU8sQ0FBQyxDQUFDLElBQUksQ0FBQyxRQUFRLElBQUksTUFBTSxDQUFDLFFBQVEsQ0FBQztJQUM1QyxDQUFDO0lBRUQsY0FBYyxDQUFDLEtBQXdCO1FBQ3JDLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN0QyxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsS0FBMEI7UUFDekMsTUFBTSxLQUFLLEdBQVcsSUFBSSxDQUFDLFlBQVksQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzdELElBQUksQ0FBQyxZQUFZLENBQUMsTUFBTSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQztJQUNyQyxDQUFDO0lBRUQsWUFBWSxDQUFDLEtBQXNCO1FBQ2pDLElBQUksQ0FBQyxJQUFJLEdBQUcsS0FBSyxDQUFDLElBQUksQ0FBQztRQUN2QixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUMvQixDQUFDO0lBVUQsZ0JBQWdCO1FBQ2QsTUFBTSxhQUFhLEdBQWtCO1lBQ25DLFdBQVcsRUFBRSxDQUFDO1lBQ2QsSUFBSSxFQUFFLEtBQUs7U0FDWixDQUFDO1FBRUYsT0FBTyxJQUFJLENBQUMsUUFBUSxJQUFJLGFBQWEsSUFBSSxLQUFLLENBQUM7SUFDakQsQ0FBQzs4R0EzR1UsZ0JBQWdCO2tHQUFoQixnQkFBZ0IsNFpBOENWLHNCQUFzQiw2QkNuRnpDLG82RUFnRUE7OzJGRDNCYSxnQkFBZ0I7a0JBTjVCLFNBQVM7K0JBQ0UsVUFBVSxtQkFHSCx1QkFBdUIsQ0FBQyxNQUFNOzhCQU10QyxJQUFJO3NCQUFaLEtBQUs7Z0JBS0csUUFBUTtzQkFBaEIsS0FBSztnQkFLRyxJQUFJO3NCQUFaLEtBQUs7Z0JBS0csUUFBUTtzQkFBaEIsS0FBSztnQkFLRyxRQUFRO3NCQUFoQixLQUFLO2dCQUtHLElBQUk7c0JBQVosS0FBSztnQkFLSSxXQUFXO3NCQUFwQixNQUFNO2dCQUtHLFdBQVc7c0JBQXBCLE1BQU07Z0JBS0csZ0JBQWdCO3NCQUF6QixNQUFNO2dCQUVrQyxPQUFPO3NCQUEvQyxlQUFlO3VCQUFDLHNCQUFzQjtnQkFDQSxxQkFBcUI7c0JBQTNELFlBQVk7dUJBQUMsdUJBQXVCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkLFxuICBDb250ZW50Q2hpbGRyZW4sXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE91dHB1dCxcbiAgUXVlcnlMaXN0LFxuICBUZW1wbGF0ZVJlZixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBLaXRHcmlkQ29sdW1uQ29tcG9uZW50IH0gZnJvbSAnLi9raXQtZ3JpZC1jb2x1bW4va2l0LWdyaWQtY29sdW1uLmNvbXBvbmVudCc7XG5pbXBvcnQge1xuICBEYXRhU3RhdGVDaGFuZ2VFdmVudCxcbiAgRGV0YWlsQ29sbGFwc2VFdmVudCxcbiAgRGV0YWlsRXhwYW5kRXZlbnQsXG4gIFBhZ2VDaGFuZ2VFdmVudCxcbiAgUGFnZXJTZXR0aW5ncyxcbiAgUm93Q2xhc3NBcmdzLFxufSBmcm9tICdAcHJvZ3Jlc3Mva2VuZG8tYW5ndWxhci1ncmlkJztcbmltcG9ydCB7IEtpdFN2Z0ljb24gfSBmcm9tICcuLi9raXQtc3ZnLWljb24va2l0LXN2Zy1pY29uLmNvbnN0JztcbmltcG9ydCB7IFNvcnREZXNjcmlwdG9yIH0gZnJvbSAnQHByb2dyZXNzL2tlbmRvLWRhdGEtcXVlcnknO1xuaW1wb3J0IHtcbiAgS2l0R3JpZERhdGFTdGF0ZUNoYW5nZUV2ZW50LFxuICBLaXRHcmlkTmVzdGVkRGF0YSxcbiAgS2l0R3JpZFNvcnREZXNjcmlwdG9yLFxuICBLaXRHcmlkU29ydFNldHRpbmdzLFxuICBLaXRHcmlkUGFnZUNoYW5nZUV2ZW50LFxufSBmcm9tICcuL2tpdC1ncmlkLm1vZGVsJztcbmltcG9ydCB7IEtpdEdyaWRTb3J0RGlyZWN0aW9uIH0gZnJvbSAnLi9raXQtZ3JpZC5jb25zdCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2tpdC1ncmlkJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2tpdC1ncmlkLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2tpdC1ncmlkLmNvbXBvbmVudC5zY3NzJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEtpdEdyaWRDb21wb25lbnQ8VCBleHRlbmRzIEtpdEdyaWROZXN0ZWREYXRhPFU+LCBVID0gdW5rbm93bj4ge1xuICAvKipcbiAgICogU2V0cyB0aGUgZGF0YSBvZiB0aGUgZ3JpZFxuICAgKi9cbiAgQElucHV0KCkgZGF0YTogVFtdID0gW107XG5cbiAgLyoqXG4gICAqIEVuYWJsZXMgdGhlIHNvcnRpbmcgb2YgdGhlIGdyaWQgY29sdW1uc1xuICAgKi9cbiAgQElucHV0KCkgc29ydGFibGU6IEtpdEdyaWRTb3J0U2V0dGluZ3MgfCBib29sZWFuID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIFRoZSBkZXNjcmlwdG9ycyBieSB3aGljaCB0aGUgZGF0YSB3aWxsIGJlIHNvcnRlZFxuICAgKi9cbiAgQElucHV0KCkgc29ydDogS2l0R3JpZFNvcnREZXNjcmlwdG9yW10gPSBbXTtcblxuICAvKipcbiAgICogRW5hYmxlcyB0aGUgcGFnZXIgb2YgdGhlIGdyaWRcbiAgICovXG4gIEBJbnB1dCgpIHBhZ2VhYmxlOiBib29sZWFuID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIERlZmluZXMgdGhlIHBhZ2Ugc2l6ZVxuICAgKi9cbiAgQElucHV0KCkgcGFnZVNpemU/OiBudW1iZXI7XG5cbiAgLyoqXG4gICAqIERlZmluZXMgdGhlIG51bWJlciBvZiByZWNvcmRzIHRvIGJlIHNraXBwZWQgYnkgdGhlIHBhZ2VyXG4gICAqL1xuICBASW5wdXQoKSBza2lwOiBudW1iZXIgPSAwO1xuXG4gIC8qKlxuICAgKiBBbiBhY3Rpb24gd2hpY2ggaXMgZW1pdHRlZCB3aGVuIHRoZSBwYWdlIG9mIHRoZSBncmlkIGlzIGNoYW5nZWRcbiAgICovXG4gIEBPdXRwdXQoKSBwYWdlQ2hhbmdlZDogRXZlbnRFbWl0dGVyPEtpdEdyaWRQYWdlQ2hhbmdlRXZlbnQ+ID0gbmV3IEV2ZW50RW1pdHRlcjxLaXRHcmlkUGFnZUNoYW5nZUV2ZW50PigpO1xuXG4gIC8qKlxuICAgKiBBbiBhY3Rpb24gd2hpY2ggaXMgZW1pdHRlZCBvbmNlIHRoZSBzb3J0aW5nIG9mIHRoZSBncmlkIGlzIGNoYW5nZWRcbiAgICovXG4gIEBPdXRwdXQoKSBzb3J0Q2hhbmdlZDogRXZlbnRFbWl0dGVyPEtpdEdyaWRTb3J0RGVzY3JpcHRvcltdPiA9IG5ldyBFdmVudEVtaXR0ZXI8S2l0R3JpZFNvcnREZXNjcmlwdG9yW10+KCk7XG5cbiAgLyoqXG4gICAqIEFuIGFjdGlvbiB3aGljaCBpcyBlbWl0dGVkIHdoZW4gdGhlIGRhdGEgc3RhdGUgb2YgdGhlIGdyaWQgaXMgY2hhbmdlZFxuICAgKi9cbiAgQE91dHB1dCgpIGRhdGFTdGF0ZUNoYW5nZWQ6IEV2ZW50RW1pdHRlcjxLaXRHcmlkRGF0YVN0YXRlQ2hhbmdlRXZlbnQ+ID0gbmV3IEV2ZW50RW1pdHRlcjxLaXRHcmlkRGF0YVN0YXRlQ2hhbmdlRXZlbnQ+KCk7XG5cbiAgQENvbnRlbnRDaGlsZHJlbihLaXRHcmlkQ29sdW1uQ29tcG9uZW50KSBjb2x1bW5zOiBRdWVyeUxpc3Q8S2l0R3JpZENvbHVtbkNvbXBvbmVudD4gfCBudWxsID0gbnVsbDtcbiAgQENvbnRlbnRDaGlsZCgna2l0R3JpZERldGFpbFRlbXBsYXRlJykga2l0R3JpZERldGFpbFRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxIVE1MRWxlbWVudD4gfCBudWxsID0gbnVsbDtcblxuICByZWFkb25seSBLaXRTdmdJY29uOiB0eXBlb2YgS2l0U3ZnSWNvbiA9IEtpdFN2Z0ljb247XG4gIHJlYWRvbmx5IEtpdEdyaWRTb3J0RGlyZWN0aW9uOiB0eXBlb2YgS2l0R3JpZFNvcnREaXJlY3Rpb24gPSBLaXRHcmlkU29ydERpcmVjdGlvbjtcbiAgcHJpdmF0ZSBleHBhbmRlZFJvd3M6IG51bWJlcltdID0gW107XG5cbiAgb25EYXRhU3RhdGVDaGFuZ2UoZXZlbnQ6IERhdGFTdGF0ZUNoYW5nZUV2ZW50KTogdm9pZCB7XG4gICAgdGhpcy5kYXRhU3RhdGVDaGFuZ2VkLmVtaXQoZXZlbnQpO1xuICB9XG5cbiAgb25Tb3J0Q2hhbmdlKGV2ZW50OiBTb3J0RGVzY3JpcHRvcltdKTogdm9pZCB7XG4gICAgdGhpcy5zb3J0ID0gZXZlbnQ7XG4gICAgdGhpcy5zb3J0Q2hhbmdlZC5lbWl0KGV2ZW50KTtcbiAgfVxuXG4gIGdldFNvcnRpbmdEaXJlY3Rpb24oY29sdW1uRmllbGQ6IHN0cmluZyk6IHN0cmluZyB8IG51bGwge1xuICAgIHJldHVybiB0aGlzLnNvcnQuZmluZChpdGVtID0+IGl0ZW0uZmllbGQgPT09IGNvbHVtbkZpZWxkKT8uZGlyID8/IG51bGw7XG4gIH1cblxuICBpc0RldGFpbFRlbXBsYXRlVmlzaWJsZShkYXRhSXRlbTogVCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiAhIWRhdGFJdGVtLmNoaWxkcmVuPy5sZW5ndGg7XG4gIH1cblxuICBoYXNEZXRhaWxDb2x1bW4oKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuZGF0YS5zb21lKGl0ZW0gPT4gISFpdGVtLmNoaWxkcmVuPy5sZW5ndGgpO1xuICB9XG5cbiAgaXNDb2x1bW5Tb3J0YWJsZShjb2x1bW46IEtpdEdyaWRDb2x1bW5Db21wb25lbnQpOiBib29sZWFuIHtcbiAgICByZXR1cm4gISF0aGlzLnNvcnRhYmxlICYmIGNvbHVtbi5zb3J0YWJsZTtcbiAgfVxuXG4gIG9uRGV0YWlsRXhwYW5kKGV2ZW50OiBEZXRhaWxFeHBhbmRFdmVudCk6IHZvaWQge1xuICAgIHRoaXMuZXhwYW5kZWRSb3dzLnB1c2goZXZlbnQuaW5kZXgpO1xuICB9XG5cbiAgb25EZXRhaWxDb2xsYXBzZShldmVudDogRGV0YWlsQ29sbGFwc2VFdmVudCk6IHZvaWQge1xuICAgIGNvbnN0IGluZGV4OiBudW1iZXIgPSB0aGlzLmV4cGFuZGVkUm93cy5pbmRleE9mKGV2ZW50LmluZGV4KTtcbiAgICB0aGlzLmV4cGFuZGVkUm93cy5zcGxpY2UoaW5kZXgsIDEpO1xuICB9XG5cbiAgb25QYWdlQ2hhbmdlKGV2ZW50OiBQYWdlQ2hhbmdlRXZlbnQpOiB2b2lkIHtcbiAgICB0aGlzLnNraXAgPSBldmVudC5za2lwO1xuICAgIHRoaXMucGFnZUNoYW5nZWQuZW1pdChldmVudCk7XG4gIH1cblxuICBnZXRDc3NSb3dDbGFzcyA9IChjb250ZXh0OiBSb3dDbGFzc0FyZ3MpOiBSZWNvcmQ8c3RyaW5nLCBib29sZWFuPiA9PiB7XG4gICAgY29uc3QgZXhwYW5kZWQ6IGJvb2xlYW4gPSB0aGlzLmV4cGFuZGVkUm93cy5pbmNsdWRlcyhjb250ZXh0LmluZGV4KTtcblxuICAgIHJldHVybiB7XG4gICAgICBleHBhbmRlZCxcbiAgICB9O1xuICB9O1xuXG4gIGdldFBhZ2VyU2V0dGluZ3MoKTogYm9vbGVhbiB8IFBhZ2VyU2V0dGluZ3Mge1xuICAgIGNvbnN0IHBhZ2VyU2V0dGluZ3M6IFBhZ2VyU2V0dGluZ3MgPSB7XG4gICAgICBidXR0b25Db3VudDogNSxcbiAgICAgIGluZm86IGZhbHNlLFxuICAgIH07XG5cbiAgICByZXR1cm4gdGhpcy5wYWdlYWJsZSAmJiBwYWdlclNldHRpbmdzIHx8IGZhbHNlO1xuICB9XG59XG4iLCI8a2VuZG8tZ3JpZCBjbGFzcz1cImtpdC1ncmlkXCJcbiAgICAgICAgICAgIFtrZW5kb0dyaWRCaW5kaW5nXT1cImRhdGFcIlxuICAgICAgICAgICAgW3NvcnRhYmxlXT1cInNvcnRhYmxlXCJcbiAgICAgICAgICAgIFtzb3J0XT1cInNvcnRcIlxuICAgICAgICAgICAgW3Jvd0NsYXNzXT1cImdldENzc1Jvd0NsYXNzXCJcbiAgICAgICAgICAgIFtwYWdlYWJsZV09XCJnZXRQYWdlclNldHRpbmdzKClcIlxuICAgICAgICAgICAgW3BhZ2VTaXplXT1cInBhZ2VTaXplXCJcbiAgICAgICAgICAgIFtza2lwXT1cInNraXBcIlxuICAgICAgICAgICAgKGRldGFpbEV4cGFuZCk9XCJvbkRldGFpbEV4cGFuZCgkZXZlbnQpXCJcbiAgICAgICAgICAgIChkZXRhaWxDb2xsYXBzZSk9XCJvbkRldGFpbENvbGxhcHNlKCRldmVudClcIlxuICAgICAgICAgICAgKHNvcnRDaGFuZ2UpPVwib25Tb3J0Q2hhbmdlKCRldmVudClcIlxuICAgICAgICAgICAgKHBhZ2VDaGFuZ2UpPVwib25QYWdlQ2hhbmdlKCRldmVudClcIlxuICAgICAgICAgICAgKGRhdGFTdGF0ZUNoYW5nZSk9XCJvbkRhdGFTdGF0ZUNoYW5nZSgkZXZlbnQpXCI+XG4gIEBmb3IgKGNvbHVtbiBvZiBjb2x1bW5zOyB0cmFjayBjb2x1bW4pIHtcbiAgICA8a2VuZG8tZ3JpZC1jb2x1bW4gW2ZpZWxkXT1cImNvbHVtbi5maWVsZFwiXG4gICAgICAgICAgICAgICAgICAgICAgIFtzb3J0YWJsZV09XCJjb2x1bW4uc29ydGFibGVcIlxuICAgICAgICAgICAgICAgICAgICAgICBbd2lkdGhdPVwiY29sdW1uLndpZHRoXCI+XG4gICAgICA8bmctdGVtcGxhdGUga2VuZG9HcmlkSGVhZGVyVGVtcGxhdGU+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJncmlkLXRpdGxlXCJcbiAgICAgICAgICAgICBbY2xhc3Muc29ydGFibGVdPVwiaXNDb2x1bW5Tb3J0YWJsZShjb2x1bW4pXCI+XG4gICAgICAgICAgQGlmIChjb2x1bW4udGl0bGVJY29uKSB7XG4gICAgICAgICAgICA8a2l0LXN2Zy1pY29uIGNsYXNzPVwiZ3JpZC10aXRsZS1pY29uXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgW2ljb25dPVwiY29sdW1uLnRpdGxlSWNvblwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgIFtuZ0NsYXNzXT1cImNvbHVtbi50aXRsZUljb25UeXBlXCJcbiAgICAgICAgICAgID48L2tpdC1zdmctaWNvbj5cbiAgICAgICAgICB9XG5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiZ3JpZC10aXRsZS10ZXh0XCI+XG4gICAgICAgICAgICB7eyBjb2x1bW4udGl0bGUgfX1cbiAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgIEBpZiAoc29ydGFibGUgJiYgY29sdW1uLnNvcnRhYmxlKSB7XG4gICAgICAgICAgICBAc3dpdGNoIChnZXRTb3J0aW5nRGlyZWN0aW9uKGNvbHVtbi5maWVsZCkpIHtcbiAgICAgICAgICAgICAgQGNhc2UgKEtpdEdyaWRTb3J0RGlyZWN0aW9uLkFTQykge1xuICAgICAgICAgICAgICAgIDxraXQtc3ZnLWljb24gY2xhc3M9XCJncmlkLXRpdGxlLXNvcnQtaWNvblwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICBbaWNvbl09XCJLaXRTdmdJY29uLlNPUlRfQVNDRU5ESU5HXCJcbiAgICAgICAgICAgICAgICA+PC9raXQtc3ZnLWljb24+XG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgQGNhc2UgKEtpdEdyaWRTb3J0RGlyZWN0aW9uLkRFU0MpIHtcbiAgICAgICAgICAgICAgICA8a2l0LXN2Zy1pY29uIGNsYXNzPVwiZ3JpZC10aXRsZS1zb3J0LWljb25cIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgW2ljb25dPVwiS2l0U3ZnSWNvbi5TT1JUX0RFU0NFTkRJTkdcIlxuICAgICAgICAgICAgICAgID48L2tpdC1zdmctaWNvbj5cbiAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICAgIH1cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L25nLXRlbXBsYXRlPlxuXG4gICAgICBAaWYgKGNvbHVtbi5jZWxsVGVtcGxhdGUpIHtcbiAgICAgICAgPG5nLXRlbXBsYXRlIGtlbmRvR3JpZENlbGxUZW1wbGF0ZSBsZXQtZGF0YUl0ZW0+XG4gICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImNvbHVtbi5jZWxsVGVtcGxhdGU7IGNvbnRleHQ6IHsgJGltcGxpY2l0OiBkYXRhSXRlbSB9XCJcbiAgICAgICAgICA+PC9uZy1jb250YWluZXI+XG4gICAgICAgIDwvbmctdGVtcGxhdGU+XG4gICAgICB9XG4gICAgPC9rZW5kby1ncmlkLWNvbHVtbj5cblxuICAgIEBpZiAoaGFzRGV0YWlsQ29sdW1uKCkpIHtcbiAgICAgIDxkaXYgKmtlbmRvR3JpZERldGFpbFRlbXBsYXRlPVwibGV0IGRhdGFJdGVtOyBzaG93SWY6IGlzRGV0YWlsVGVtcGxhdGVWaXNpYmxlXCI+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJraXRHcmlkRGV0YWlsVGVtcGxhdGU7IGNvbnRleHQ6IHsgJGltcGxpY2l0OiBkYXRhSXRlbSB9XCJcbiAgICAgICAgPjwvbmctY29udGFpbmVyPlxuICAgICAgPC9kaXY+XG4gICAgfVxuICB9XG48L2tlbmRvLWdyaWQ+XG4iXX0=

package/esm2022/lib/components/kit-grid/kit-grid.const.mjs

@@ -3,4 +3,9 @@ export var KitGridSortDirection;
     KitGridSortDirection["ASC"] = "asc";
     KitGridSortDirection["DESC"] = "desc";
 })(KitGridSortDirection || (KitGridSortDirection = {}));
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2l0LWdyaWQuY29uc3QuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1ncmlkL2tpdC1ncmlkLmNvbnN0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBTixJQUFZLG9CQUdYO0FBSEQsV0FBWSxvQkFBb0I7SUFDOUIsbUNBQVcsQ0FBQTtJQUNYLHFDQUFhLENBQUE7QUFDZixDQUFDLEVBSFcsb0JBQW9CLEtBQXBCLG9CQUFvQixRQUcvQiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBlbnVtIEtpdEdyaWRTb3J0RGlyZWN0aW9uIHtcbiAgQVNDID0gJ2FzYycsXG4gIERFU0MgPSAnZGVzYycsXG59XG4iXX0=
+export var KitGridSortSettingsMode;
+(function (KitGridSortSettingsMode) {
+    KitGridSortSettingsMode["SINGLE"] = "single";
+    KitGridSortSettingsMode["MULTIPLE"] = "multiple";
+})(KitGridSortSettingsMode || (KitGridSortSettingsMode = {}));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2l0LWdyaWQuY29uc3QuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1ncmlkL2tpdC1ncmlkLmNvbnN0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBTixJQUFZLG9CQUdYO0FBSEQsV0FBWSxvQkFBb0I7SUFDOUIsbUNBQVcsQ0FBQTtJQUNYLHFDQUFhLENBQUE7QUFDZixDQUFDLEVBSFcsb0JBQW9CLEtBQXBCLG9CQUFvQixRQUcvQjtBQUVELE1BQU0sQ0FBTixJQUFZLHVCQUdYO0FBSEQsV0FBWSx1QkFBdUI7SUFDakMsNENBQWlCLENBQUE7SUFDakIsZ0RBQXFCLENBQUE7QUFDdkIsQ0FBQyxFQUhXLHVCQUF1QixLQUF2Qix1QkFBdUIsUUFHbEMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZW51bSBLaXRHcmlkU29ydERpcmVjdGlvbiB7XG4gIEFTQyA9ICdhc2MnLFxuICBERVNDID0gJ2Rlc2MnLFxufVxuXG5leHBvcnQgZW51bSBLaXRHcmlkU29ydFNldHRpbmdzTW9kZSB7XG4gIFNJTkdMRSA9ICdzaW5nbGUnLFxuICBNVUxUSVBMRSA9ICdtdWx0aXBsZScsXG59XG4iXX0=

package/esm2022/lib/components/kit-grid/kit-grid.model.mjs

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2l0LWdyaWQubW9kZWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1ncmlkL2tpdC1ncmlkLm1vZGVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEYXRhU3RhdGVDaGFuZ2VFdmVudCB9IGZyb20gJ0Bwcm9ncmVzcy9rZW5kby1hbmd1bGFyLWdyaWQnO1xuaW1wb3J0IHsgU29ydERlc2NyaXB0b3IgfSBmcm9tICdAcHJvZ3Jlc3Mva2VuZG8tZGF0YS1xdWVyeSc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgS2l0R3JpZE5lc3RlZERhdGE8VT4ge1xuICBjaGlsZHJlbj86IFVbXTtcbn1cblxuZXhwb3J0IHR5cGUgS2l0R3JpZFNvcnREZXNjcmlwdG9yID0gU29ydERlc2NyaXB0b3I7XG5cbmV4cG9ydCB0eXBlIEtpdEdyaWREYXRhU3RhdGVDaGFuZ2VFdmVudCA9IERhdGFTdGF0ZUNoYW5nZUV2ZW50O1xuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2l0LWdyaWQubW9kZWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1ncmlkL2tpdC1ncmlkLm1vZGVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEYXRhU3RhdGVDaGFuZ2VFdmVudCwgUGFnZUNoYW5nZUV2ZW50IH0gZnJvbSAnQHByb2dyZXNzL2tlbmRvLWFuZ3VsYXItZ3JpZCc7XG5pbXBvcnQgeyBTb3J0RGVzY3JpcHRvciB9IGZyb20gJ0Bwcm9ncmVzcy9rZW5kby1kYXRhLXF1ZXJ5JztcbmltcG9ydCB7IEtpdEdyaWRTb3J0U2V0dGluZ3NNb2RlIH0gZnJvbSAnLi9raXQtZ3JpZC5jb25zdCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgS2l0R3JpZE5lc3RlZERhdGE8VT4ge1xuICBjaGlsZHJlbj86IFVbXTtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBLaXRHcmlkU29ydFNldHRpbmdzIHtcbiAgbW9kZTogS2l0R3JpZFNvcnRTZXR0aW5nc01vZGU7XG59XG5cbmV4cG9ydCB0eXBlIEtpdEdyaWRTb3J0RGVzY3JpcHRvciA9IFNvcnREZXNjcmlwdG9yO1xuXG5leHBvcnQgdHlwZSBLaXRHcmlkRGF0YVN0YXRlQ2hhbmdlRXZlbnQgPSBEYXRhU3RhdGVDaGFuZ2VFdmVudDtcblxuZXhwb3J0IHR5cGUgS2l0R3JpZFBhZ2VDaGFuZ2VFdmVudCA9IFBhZ2VDaGFuZ2VFdmVudDtcbiJdfQ==

package/esm2022/lib/components/kit-location-stepper/kit-location-stepper.component.mjs

@@ -15,11 +15,11 @@ export class KitLocationStepperComponent {
         this.KitSvgIcon = KitSvgIcon;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitLocationStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitLocationStepperComponent, selector: "kit-location-stepper", inputs: { items: "items", toolTipPosition: "toolTipPosition" }, ngImport: i0, template: "<ng-template #icon let-item=\"item\">\n  <kit-svg-icon [icon]=\"item.icon\" class=\"display-block location-icon\"\n                [title]=\"item.title\"\n  ></kit-svg-icon>\n</ng-template>\n\n<ng-template #description let-item=\"item\">\n  <ng-template #toolTip>\n    <span class=\"location-tooltip\">{{ item.toolTipText }}</span>\n  </ng-template>\n  <div *ngIf=\"item.toolTipText\" class=\"description-location\" kitTooltip\n       kitTooltipFilter=\"div.description-location\"\n       tooltipClass=\"location-tooltip-wrapper\"\n       [kitTooltipTemplateRef]=\"toolTip\"\n       [kitTooltipPosition]=\"toolTipPosition\">\n    <div class=\"title\">{{ item.title }}</div>\n    <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n  </div>\n\n  <div *ngIf=\"!item.toolTipText\" class=\"description-location\">\n    <div class=\"title\">{{ item.title }}</div>\n    <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n  </div>\n\n  <div *ngIf=\"item.name\" class=\"description-name\">{{ item.name }}</div>\n</ng-template>\n\n<ng-template #dates let-dates=\"dates\">\n  <div *ngFor=\"let date of dates\" class=\"date display-flex\">\n    <span class=\"date-description\">{{ date.description }}</span>\n    <span>{{ date.value }}</span>\n  </div>\n</ng-template>\n\n<div class=\"kit-location-stepper\">\n  <div *ngFor=\"let item of items; let first = first; let last = last\" class=\"step {{ item.cssClass }}\"\n       [class.first]=\"first\"\n       [class.last]=\"last\"\n       [class.has-sub-items]=\"!!item.subItems\">\n    <div class=\"step-inner display-flex\">\n      <div *ngIf=\"item.dates?.length\" class=\"dates\">\n        <ng-container *ngTemplateOutlet=\"dates; context: { dates: item.dates }\"></ng-container>\n      </div>\n\n      <ng-container *ngTemplateOutlet=\"icon; context: { item: item }\"></ng-container>\n\n      <div class=\"description\">\n        <ng-container *ngTemplateOutlet=\"description; context: { item: item }\"></ng-container>\n      </div>\n    </div>\n    <div *ngIf=\"item.subItems?.length\" class=\"sub-items\">\n      <div *ngFor=\"let subItem of item.subItems\" class=\"sub-item display-flex {{ subItem.cssClass }}\">\n        <div *ngIf=\"subItem.dates?.length\" class=\"dates\">\n          <ng-container *ngTemplateOutlet=\"dates; context: { dates: subItem.dates }\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"icon; context: { item: subItem }\"></ng-container>\n\n        <div class=\"description\">\n          <ng-container *ngTemplateOutlet=\"description; context: { item: subItem }\"></ng-container>\n        </div>\n      </div>\n    </div>\n    <div class=\"step-line\"></div>\n  </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-location-stepper .step{position:relative}.kit-location-stepper .step:not(:first-child){margin-top:1px}.kit-location-stepper .step:last-child .step-line{display:none}.kit-location-stepper .step-line{position:absolute;top:24px;left:197px;width:2px;height:100%;background-color:#efefef}.kit-location-stepper .step-inner{position:relative;padding:20px 0 12px;z-index:2}.kit-location-stepper .caption{margin-top:6px;color:#002a3a;font-size:14px;font-weight:500}.kit-location-stepper .title{text-transform:uppercase;color:#00b0ad;font-size:12px;font-weight:500;letter-spacing:.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-location-stepper .date:not(:first-child){margin-top:10px}.kit-location-stepper .description{display:flex;justify-content:space-between;margin-left:10px;flex:1 0;text-overflow:ellipsis;overflow:hidden}.kit-location-stepper .description-location,.kit-location-stepper .description-name{text-overflow:ellipsis;overflow:hidden}.kit-location-stepper .description-location{display:inline-block}.kit-location-stepper .description-name{padding-left:10px;min-width:80px;text-transform:uppercase;color:#56a2f7;font-size:12px;font-weight:500;letter-spacing:.2em;text-align:right}.kit-location-stepper .location-icon{flex-shrink:0;width:24px;height:24px;background:#fff;stroke:#a9a8a8;fill:#fff;position:relative;z-index:1}.kit-location-stepper .last .location-icon{stroke:#4e4696}.kit-location-stepper .first .location-icon{stroke:#00b0ad}.kit-location-stepper .dates{padding-left:10px;min-width:176px;min-height:40px;color:#002a3a;font-size:13px}.kit-location-stepper .date-description{margin-right:18px;width:30px;color:#a9a8a8;font-weight:500;text-align:right}.kit-location-stepper .danger .step-inner{border:1px solid #ef3e42;border-radius:4px;background-color:#f8e0e0}.kit-location-stepper .danger .location-icon{fill:#f8e0e0;background-color:#f8e0e0}.kit-location-stepper .danger:not(:first-child){margin-top:20px}.kit-location-stepper .sub-item{position:relative;padding:14px 0 12px;z-index:1}.kit-location-stepper .sub-item .dates{margin-right:34px}.kit-location-stepper .sub-item .location-icon{background:#fff}.kit-location-stepper .sub-item .location-icon:before{content:\"\";position:absolute;left:calc(50% - 1px);top:-18px;width:2px;height:18px;background-color:#efefef}.kit-location-stepper .sub-item .description{margin-left:6px}.kit-location-stepper .sub-item.danger{margin-top:20px;border:1px solid #ef3e42;border-radius:4px;background-color:#f8e0e0}.kit-location-stepper .sub-item.danger .location-icon{background-color:#f8e0e0}.kit-location-stepper .sub-item.danger .location-icon:before{display:none}.location-tooltip-wrapper .location-tooltip{white-space:pre-wrap}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i3.KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitLocationStepperComponent, selector: "kit-location-stepper", inputs: { items: "items", toolTipPosition: "toolTipPosition" }, ngImport: i0, template: "<ng-template #icon let-item=\"item\">\n  <kit-svg-icon [icon]=\"item.icon\" class=\"display-block location-icon\"\n                [title]=\"item.title\"\n  ></kit-svg-icon>\n</ng-template>\n\n<ng-template #description let-item=\"item\">\n  <ng-template #toolTip>\n    <span class=\"location-tooltip\">{{ item.toolTipText }}</span>\n  </ng-template>\n  <div *ngIf=\"item.toolTipText\" class=\"description-location\" kitTooltip\n       kitTooltipFilter=\"div.description-location\"\n       tooltipClass=\"location-tooltip-wrapper\"\n       [kitTooltipTemplateRef]=\"toolTip\"\n       [kitTooltipPosition]=\"toolTipPosition\">\n    <div class=\"title\">{{ item.title }}</div>\n    <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n  </div>\n\n  <div *ngIf=\"!item.toolTipText\" class=\"description-location\">\n    <div class=\"title\">{{ item.title }}</div>\n    <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n  </div>\n\n  <div *ngIf=\"item.name\" class=\"description-name\">{{ item.name }}</div>\n</ng-template>\n\n<ng-template #dates let-dates=\"dates\">\n  <div *ngFor=\"let date of dates\" class=\"date display-flex\">\n    <span class=\"date-description\">{{ date.description }}</span>\n    <span>{{ date.value }}</span>\n  </div>\n</ng-template>\n\n<div class=\"kit-location-stepper\">\n  <div *ngFor=\"let item of items; let first = first; let last = last\" class=\"step {{ item.cssClass }}\"\n       [class.first]=\"first\"\n       [class.last]=\"last\"\n       [class.has-sub-items]=\"!!item.subItems\">\n    <div class=\"step-inner display-flex\">\n      <div *ngIf=\"item.dates?.length\" class=\"dates\">\n        <ng-container *ngTemplateOutlet=\"dates; context: { dates: item.dates }\"></ng-container>\n      </div>\n\n      <ng-container *ngTemplateOutlet=\"icon; context: { item: item }\"></ng-container>\n\n      <div class=\"description\">\n        <ng-container *ngTemplateOutlet=\"description; context: { item: item }\"></ng-container>\n      </div>\n    </div>\n    <div *ngIf=\"item.subItems?.length\" class=\"sub-items\">\n      <div *ngFor=\"let subItem of item.subItems\" class=\"sub-item display-flex {{ subItem.cssClass }}\">\n        <div *ngIf=\"subItem.dates?.length\" class=\"dates\">\n          <ng-container *ngTemplateOutlet=\"dates; context: { dates: subItem.dates }\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"icon; context: { item: subItem }\"></ng-container>\n\n        <div class=\"description\">\n          <ng-container *ngTemplateOutlet=\"description; context: { item: subItem }\"></ng-container>\n        </div>\n      </div>\n    </div>\n    <div class=\"step-line\"></div>\n  </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-location-stepper .step{position:relative}.kit-location-stepper .step:not(:first-child){margin-top:1px}.kit-location-stepper .step:last-child .step-line{display:none}.kit-location-stepper .step-line{position:absolute;top:24px;left:197px;width:2px;height:100%;background-color:#efefef}.kit-location-stepper .step-inner{position:relative;padding:20px 0 12px;z-index:2}.kit-location-stepper .caption{margin-top:6px;color:#002a3a;font-size:14px;font-weight:500}.kit-location-stepper .title{text-transform:uppercase;color:#00b0ad;font-size:12px;font-weight:500;letter-spacing:.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-location-stepper .date:not(:first-child){margin-top:10px}.kit-location-stepper .description{display:flex;justify-content:space-between;margin-left:10px;flex:1 0;text-overflow:ellipsis;overflow:hidden}.kit-location-stepper .description-location,.kit-location-stepper .description-name{text-overflow:ellipsis;overflow:hidden}.kit-location-stepper .description-location{display:inline-block}.kit-location-stepper .description-name{padding-left:10px;min-width:80px;text-transform:uppercase;color:#56a2f7;font-size:12px;font-weight:500;letter-spacing:.2em;text-align:right}.kit-location-stepper .location-icon{flex-shrink:0;width:24px;height:24px;background:#fff;stroke:#a9a8a8;fill:#fff;position:relative;z-index:1}.kit-location-stepper .last .location-icon{stroke:#4e4696}.kit-location-stepper .first .location-icon{stroke:#00b0ad}.kit-location-stepper .dates{padding-left:10px;min-width:176px;min-height:40px;color:#002a3a;font-size:13px}.kit-location-stepper .date-description{margin-right:18px;width:30px;color:#a9a8a8;font-weight:500;text-align:right}.kit-location-stepper .danger .step-inner{border:1px solid #ef3e42;border-radius:4px;background-color:#f8e0e0}.kit-location-stepper .danger .location-icon{fill:#f8e0e0;background-color:#f8e0e0}.kit-location-stepper .danger:not(:first-child){margin-top:20px}.kit-location-stepper .sub-item{position:relative;padding:14px 0 12px;z-index:1}.kit-location-stepper .sub-item .dates{margin-right:34px}.kit-location-stepper .sub-item .location-icon{background:#fff}.kit-location-stepper .sub-item .location-icon:before{content:\"\";position:absolute;left:calc(50% - 1px);top:-18px;width:2px;height:18px;background-color:#efefef}.kit-location-stepper .sub-item .description{margin-left:6px}.kit-location-stepper .sub-item.danger{margin-top:20px;border:1px solid #ef3e42;border-radius:4px;background-color:#f8e0e0}.kit-location-stepper .sub-item.danger .location-icon{background-color:#f8e0e0}.kit-location-stepper .sub-item.danger .location-icon:before{display:none}.location-tooltip-wrapper .location-tooltip{white-space:pre-wrap}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i3.KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitLocationStepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kit-location-stepper', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #icon let-item=\"item\">\n  <kit-svg-icon [icon]=\"item.icon\" class=\"display-block location-icon\"\n                [title]=\"item.title\"\n  ></kit-svg-icon>\n</ng-template>\n\n<ng-template #description let-item=\"item\">\n  <ng-template #toolTip>\n    <span class=\"location-tooltip\">{{ item.toolTipText }}</span>\n  </ng-template>\n  <div *ngIf=\"item.toolTipText\" class=\"description-location\" kitTooltip\n       kitTooltipFilter=\"div.description-location\"\n       tooltipClass=\"location-tooltip-wrapper\"\n       [kitTooltipTemplateRef]=\"toolTip\"\n       [kitTooltipPosition]=\"toolTipPosition\">\n    <div class=\"title\">{{ item.title }}</div>\n    <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n  </div>\n\n  <div *ngIf=\"!item.toolTipText\" class=\"description-location\">\n    <div class=\"title\">{{ item.title }}</div>\n    <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n  </div>\n\n  <div *ngIf=\"item.name\" class=\"description-name\">{{ item.name }}</div>\n</ng-template>\n\n<ng-template #dates let-dates=\"dates\">\n  <div *ngFor=\"let date of dates\" class=\"date display-flex\">\n    <span class=\"date-description\">{{ date.description }}</span>\n    <span>{{ date.value }}</span>\n  </div>\n</ng-template>\n\n<div class=\"kit-location-stepper\">\n  <div *ngFor=\"let item of items; let first = first; let last = last\" class=\"step {{ item.cssClass }}\"\n       [class.first]=\"first\"\n       [class.last]=\"last\"\n       [class.has-sub-items]=\"!!item.subItems\">\n    <div class=\"step-inner display-flex\">\n      <div *ngIf=\"item.dates?.length\" class=\"dates\">\n        <ng-container *ngTemplateOutlet=\"dates; context: { dates: item.dates }\"></ng-container>\n      </div>\n\n      <ng-container *ngTemplateOutlet=\"icon; context: { item: item }\"></ng-container>\n\n      <div class=\"description\">\n        <ng-container *ngTemplateOutlet=\"description; context: { item: item }\"></ng-container>\n      </div>\n    </div>\n    <div *ngIf=\"item.subItems?.length\" class=\"sub-items\">\n      <div *ngFor=\"let subItem of item.subItems\" class=\"sub-item display-flex {{ subItem.cssClass }}\">\n        <div *ngIf=\"subItem.dates?.length\" class=\"dates\">\n          <ng-container *ngTemplateOutlet=\"dates; context: { dates: subItem.dates }\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"icon; context: { item: subItem }\"></ng-container>\n\n        <div class=\"description\">\n          <ng-container *ngTemplateOutlet=\"description; context: { item: subItem }\"></ng-container>\n        </div>\n      </div>\n    </div>\n    <div class=\"step-line\"></div>\n  </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-location-stepper .step{position:relative}.kit-location-stepper .step:not(:first-child){margin-top:1px}.kit-location-stepper .step:last-child .step-line{display:none}.kit-location-stepper .step-line{position:absolute;top:24px;left:197px;width:2px;height:100%;background-color:#efefef}.kit-location-stepper .step-inner{position:relative;padding:20px 0 12px;z-index:2}.kit-location-stepper .caption{margin-top:6px;color:#002a3a;font-size:14px;font-weight:500}.kit-location-stepper .title{text-transform:uppercase;color:#00b0ad;font-size:12px;font-weight:500;letter-spacing:.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-location-stepper .date:not(:first-child){margin-top:10px}.kit-location-stepper .description{display:flex;justify-content:space-between;margin-left:10px;flex:1 0;text-overflow:ellipsis;overflow:hidden}.kit-location-stepper .description-location,.kit-location-stepper .description-name{text-overflow:ellipsis;overflow:hidden}.kit-location-stepper .description-location{display:inline-block}.kit-location-stepper .description-name{padding-left:10px;min-width:80px;text-transform:uppercase;color:#56a2f7;font-size:12px;font-weight:500;letter-spacing:.2em;text-align:right}.kit-location-stepper .location-icon{flex-shrink:0;width:24px;height:24px;background:#fff;stroke:#a9a8a8;fill:#fff;position:relative;z-index:1}.kit-location-stepper .last .location-icon{stroke:#4e4696}.kit-location-stepper .first .location-icon{stroke:#00b0ad}.kit-location-stepper .dates{padding-left:10px;min-width:176px;min-height:40px;color:#002a3a;font-size:13px}.kit-location-stepper .date-description{margin-right:18px;width:30px;color:#a9a8a8;font-weight:500;text-align:right}.kit-location-stepper .danger .step-inner{border:1px solid #ef3e42;border-radius:4px;background-color:#f8e0e0}.kit-location-stepper .danger .location-icon{fill:#f8e0e0;background-color:#f8e0e0}.kit-location-stepper .danger:not(:first-child){margin-top:20px}.kit-location-stepper .sub-item{position:relative;padding:14px 0 12px;z-index:1}.kit-location-stepper .sub-item .dates{margin-right:34px}.kit-location-stepper .sub-item .location-icon{background:#fff}.kit-location-stepper .sub-item .location-icon:before{content:\"\";position:absolute;left:calc(50% - 1px);top:-18px;width:2px;height:18px;background-color:#efefef}.kit-location-stepper .sub-item .description{margin-left:6px}.kit-location-stepper .sub-item.danger{margin-top:20px;border:1px solid #ef3e42;border-radius:4px;background-color:#f8e0e0}.kit-location-stepper .sub-item.danger .location-icon{background-color:#f8e0e0}.kit-location-stepper .sub-item.danger .location-icon:before{display:none}.location-tooltip-wrapper .location-tooltip{white-space:pre-wrap}\n"] }]
+            args: [{ selector: 'kit-location-stepper', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #icon let-item=\"item\">\n  <kit-svg-icon [icon]=\"item.icon\" class=\"display-block location-icon\"\n                [title]=\"item.title\"\n  ></kit-svg-icon>\n</ng-template>\n\n<ng-template #description let-item=\"item\">\n  <ng-template #toolTip>\n    <span class=\"location-tooltip\">{{ item.toolTipText }}</span>\n  </ng-template>\n  <div *ngIf=\"item.toolTipText\" class=\"description-location\" kitTooltip\n       kitTooltipFilter=\"div.description-location\"\n       tooltipClass=\"location-tooltip-wrapper\"\n       [kitTooltipTemplateRef]=\"toolTip\"\n       [kitTooltipPosition]=\"toolTipPosition\">\n    <div class=\"title\">{{ item.title }}</div>\n    <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n  </div>\n\n  <div *ngIf=\"!item.toolTipText\" class=\"description-location\">\n    <div class=\"title\">{{ item.title }}</div>\n    <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n  </div>\n\n  <div *ngIf=\"item.name\" class=\"description-name\">{{ item.name }}</div>\n</ng-template>\n\n<ng-template #dates let-dates=\"dates\">\n  <div *ngFor=\"let date of dates\" class=\"date display-flex\">\n    <span class=\"date-description\">{{ date.description }}</span>\n    <span>{{ date.value }}</span>\n  </div>\n</ng-template>\n\n<div class=\"kit-location-stepper\">\n  <div *ngFor=\"let item of items; let first = first; let last = last\" class=\"step {{ item.cssClass }}\"\n       [class.first]=\"first\"\n       [class.last]=\"last\"\n       [class.has-sub-items]=\"!!item.subItems\">\n    <div class=\"step-inner display-flex\">\n      <div *ngIf=\"item.dates?.length\" class=\"dates\">\n        <ng-container *ngTemplateOutlet=\"dates; context: { dates: item.dates }\"></ng-container>\n      </div>\n\n      <ng-container *ngTemplateOutlet=\"icon; context: { item: item }\"></ng-container>\n\n      <div class=\"description\">\n        <ng-container *ngTemplateOutlet=\"description; context: { item: item }\"></ng-container>\n      </div>\n    </div>\n    <div *ngIf=\"item.subItems?.length\" class=\"sub-items\">\n      <div *ngFor=\"let subItem of item.subItems\" class=\"sub-item display-flex {{ subItem.cssClass }}\">\n        <div *ngIf=\"subItem.dates?.length\" class=\"dates\">\n          <ng-container *ngTemplateOutlet=\"dates; context: { dates: subItem.dates }\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"icon; context: { item: subItem }\"></ng-container>\n\n        <div class=\"description\">\n          <ng-container *ngTemplateOutlet=\"description; context: { item: subItem }\"></ng-container>\n        </div>\n      </div>\n    </div>\n    <div class=\"step-line\"></div>\n  </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-location-stepper .step{position:relative}.kit-location-stepper .step:not(:first-child){margin-top:1px}.kit-location-stepper .step:last-child .step-line{display:none}.kit-location-stepper .step-line{position:absolute;top:24px;left:197px;width:2px;height:100%;background-color:#efefef}.kit-location-stepper .step-inner{position:relative;padding:20px 0 12px;z-index:2}.kit-location-stepper .caption{margin-top:6px;color:#002a3a;font-size:14px;font-weight:500}.kit-location-stepper .title{text-transform:uppercase;color:#00b0ad;font-size:12px;font-weight:500;letter-spacing:.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-location-stepper .date:not(:first-child){margin-top:10px}.kit-location-stepper .description{display:flex;justify-content:space-between;margin-left:10px;flex:1 0;text-overflow:ellipsis;overflow:hidden}.kit-location-stepper .description-location,.kit-location-stepper .description-name{text-overflow:ellipsis;overflow:hidden}.kit-location-stepper .description-location{display:inline-block}.kit-location-stepper .description-name{padding-left:10px;min-width:80px;text-transform:uppercase;color:#56a2f7;font-size:12px;font-weight:500;letter-spacing:.2em;text-align:right}.kit-location-stepper .location-icon{flex-shrink:0;width:24px;height:24px;background:#fff;stroke:#a9a8a8;fill:#fff;position:relative;z-index:1}.kit-location-stepper .last .location-icon{stroke:#4e4696}.kit-location-stepper .first .location-icon{stroke:#00b0ad}.kit-location-stepper .dates{padding-left:10px;min-width:176px;min-height:40px;color:#002a3a;font-size:13px}.kit-location-stepper .date-description{margin-right:18px;width:30px;color:#a9a8a8;font-weight:500;text-align:right}.kit-location-stepper .danger .step-inner{border:1px solid #ef3e42;border-radius:4px;background-color:#f8e0e0}.kit-location-stepper .danger .location-icon{fill:#f8e0e0;background-color:#f8e0e0}.kit-location-stepper .danger:not(:first-child){margin-top:20px}.kit-location-stepper .sub-item{position:relative;padding:14px 0 12px;z-index:1}.kit-location-stepper .sub-item .dates{margin-right:34px}.kit-location-stepper .sub-item .location-icon{background:#fff}.kit-location-stepper .sub-item .location-icon:before{content:\"\";position:absolute;left:calc(50% - 1px);top:-18px;width:2px;height:18px;background-color:#efefef}.kit-location-stepper .sub-item .description{margin-left:6px}.kit-location-stepper .sub-item.danger{margin-top:20px;border:1px solid #ef3e42;border-radius:4px;background-color:#f8e0e0}.kit-location-stepper .sub-item.danger .location-icon{background-color:#f8e0e0}.kit-location-stepper .sub-item.danger .location-icon:before{display:none}.location-tooltip-wrapper .location-tooltip{white-space:pre-wrap}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }], toolTipPosition: [{

package/esm2022/lib/components/kit-notification/kit-notification.component.mjs

@@ -16,11 +16,11 @@ export class KitNotificationComponent {
         this.type = KitNotificationType.INFO;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitNotificationComponent, selector: "kit-notification", inputs: { type: "type" }, ngImport: i0, template: "<div class=\"kit-notification notification-{{ type }}\">\n  <kit-svg-icon class=\"notification-icon\"\n                [icon]=\"type\"\n  ></kit-svg-icon>\n  <div class=\"notification-text\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-notification{display:flex;align-items:center;padding:12px}.kit-notification .notification-icon{margin-right:10px;width:20px;height:20px;fill:none;flex-shrink:0}.kit-notification .notification-text{color:#000;font-size:14px;font-weight:400;line-height:1.26;white-space:pre-wrap}.kit-notification.notification-info{background-color:#fff8e0}.kit-notification.notification-warning{background-color:#ffeee5}.kit-notification.notification-error{background-color:#f8e0e0}.kit-notification.notification-success{background-color:#e7f4ec}\n"], dependencies: [{ kind: "component", type: i1.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitNotificationComponent, selector: "kit-notification", inputs: { type: "type" }, ngImport: i0, template: "<div class=\"kit-notification notification-{{ type }}\">\n  <kit-svg-icon class=\"notification-icon\"\n                [icon]=\"type\"\n  ></kit-svg-icon>\n  <div class=\"notification-text\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-notification{display:flex;align-items:center;padding:12px}.kit-notification .notification-icon{margin-right:10px;width:20px;height:20px;fill:none;flex-shrink:0}.kit-notification .notification-text{color:#000;font-size:14px;font-weight:400;line-height:1.26;white-space:pre-wrap}.kit-notification.notification-info{background-color:#fff8e0}.kit-notification.notification-warning{background-color:#ffeee5}.kit-notification.notification-error{background-color:#f8e0e0}.kit-notification.notification-success{background-color:#e7f4ec}\n"], dependencies: [{ kind: "component", type: i1.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kit-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-notification notification-{{ type }}\">\n  <kit-svg-icon class=\"notification-icon\"\n                [icon]=\"type\"\n  ></kit-svg-icon>\n  <div class=\"notification-text\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-notification{display:flex;align-items:center;padding:12px}.kit-notification .notification-icon{margin-right:10px;width:20px;height:20px;fill:none;flex-shrink:0}.kit-notification .notification-text{color:#000;font-size:14px;font-weight:400;line-height:1.26;white-space:pre-wrap}.kit-notification.notification-info{background-color:#fff8e0}.kit-notification.notification-warning{background-color:#ffeee5}.kit-notification.notification-error{background-color:#f8e0e0}.kit-notification.notification-success{background-color:#e7f4ec}\n"] }]
+            args: [{ selector: 'kit-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-notification notification-{{ type }}\">\n  <kit-svg-icon class=\"notification-icon\"\n                [icon]=\"type\"\n  ></kit-svg-icon>\n  <div class=\"notification-text\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-notification{display:flex;align-items:center;padding:12px}.kit-notification .notification-icon{margin-right:10px;width:20px;height:20px;fill:none;flex-shrink:0}.kit-notification .notification-text{color:#000;font-size:14px;font-weight:400;line-height:1.26;white-space:pre-wrap}.kit-notification.notification-info{background-color:#fff8e0}.kit-notification.notification-warning{background-color:#ffeee5}.kit-notification.notification-error{background-color:#f8e0e0}.kit-notification.notification-success{background-color:#e7f4ec}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }] } });

package/esm2022/lib/components/kit-switch/kit-switch.component.mjs

@@ -69,11 +69,11 @@ export class KitSwitchComponent {
         return this.mode === KitSwitchMode.SINGLE;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitSwitchComponent, selector: "kit-switch", inputs: { items: "items", mode: "mode", label: "label", disabled: "disabled", selection: "selection", messageIcon: "messageIcon", messageText: "messageText", state: "state" }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"kit-switch {{ state }}\">\n  <ng-container *ngIf=\"items.length\">\n    @if (label) {\n      <kit-input-label class=\"label\"\n                       [text]=\"label\"\n      ></kit-input-label>\n    }\n\n    <kendo-buttongroup look=\"outline\" class=\"button-group\"\n                       [selection]=\"mode\"\n                       [class.disabled]=\"disabled\">\n      <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n              [selected]=\"isItemSelected(item)\"\n              [togglable]=\"true\"\n              [disabled]=\"item.disabled && item.disabled(item)\"\n              (selectedChange)=\"onItemSelect($event, item)\">\n        <ng-container *ngIf=\"item.title; else icon\">\n          {{ item.title }}\n        </ng-container>\n\n        <ng-template #icon>\n          <kit-svg-icon class=\"icon-wrapper\"\n                        [icon]=\"item.icon\"\n          ></kit-svg-icon>\n        </ng-template>\n      </button>\n    </kendo-buttongroup>\n    <kit-input-message *ngIf=\"messageText\"\n                       [icon]=\"messageIcon\"\n                       [message]=\"messageText\"\n    ></kit-input-message>\n  </ng-container>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-pink: #cd1159;--ui-kit-color-purple: #7673ce}.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-switch .label{display:block;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{stroke:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{stroke:var(--ui-kit-color-cobalt);fill:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{stroke:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "component", type: i1.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i4.KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: i5.KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitSwitchComponent, selector: "kit-switch", inputs: { items: "items", mode: "mode", label: "label", disabled: "disabled", selection: "selection", messageIcon: "messageIcon", messageText: "messageText", state: "state" }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"kit-switch {{ state }}\">\n  <ng-container *ngIf=\"items.length\">\n    @if (label) {\n      <kit-input-label class=\"label\"\n                       [text]=\"label\"\n      ></kit-input-label>\n    }\n\n    <kendo-buttongroup look=\"outline\" class=\"button-group\"\n                       [selection]=\"mode\"\n                       [class.disabled]=\"disabled\">\n      <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n              [selected]=\"isItemSelected(item)\"\n              [togglable]=\"true\"\n              [disabled]=\"item.disabled && item.disabled(item)\"\n              (selectedChange)=\"onItemSelect($event, item)\">\n        <ng-container *ngIf=\"item.title; else icon\">\n          {{ item.title }}\n        </ng-container>\n\n        <ng-template #icon>\n          <kit-svg-icon class=\"icon-wrapper\"\n                        [icon]=\"item.icon\"\n          ></kit-svg-icon>\n        </ng-template>\n      </button>\n    </kendo-buttongroup>\n    <kit-input-message *ngIf=\"messageText\"\n                       [icon]=\"messageIcon\"\n                       [message]=\"messageText\"\n    ></kit-input-message>\n  </ng-container>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-pink: #cd1159;--ui-kit-color-purple: #7673ce}.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-switch .label{display:block;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{stroke:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{stroke:var(--ui-kit-color-cobalt);fill:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{stroke:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "component", type: i1.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i4.KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: i5.KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitSwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kit-switch', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-switch {{ state }}\">\n  <ng-container *ngIf=\"items.length\">\n    @if (label) {\n      <kit-input-label class=\"label\"\n                       [text]=\"label\"\n      ></kit-input-label>\n    }\n\n    <kendo-buttongroup look=\"outline\" class=\"button-group\"\n                       [selection]=\"mode\"\n                       [class.disabled]=\"disabled\">\n      <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n              [selected]=\"isItemSelected(item)\"\n              [togglable]=\"true\"\n              [disabled]=\"item.disabled && item.disabled(item)\"\n              (selectedChange)=\"onItemSelect($event, item)\">\n        <ng-container *ngIf=\"item.title; else icon\">\n          {{ item.title }}\n        </ng-container>\n\n        <ng-template #icon>\n          <kit-svg-icon class=\"icon-wrapper\"\n                        [icon]=\"item.icon\"\n          ></kit-svg-icon>\n        </ng-template>\n      </button>\n    </kendo-buttongroup>\n    <kit-input-message *ngIf=\"messageText\"\n                       [icon]=\"messageIcon\"\n                       [message]=\"messageText\"\n    ></kit-input-message>\n  </ng-container>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-pink: #cd1159;--ui-kit-color-purple: #7673ce}.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-switch .label{display:block;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{stroke:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{stroke:var(--ui-kit-color-cobalt);fill:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{stroke:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"] }]
+            args: [{ selector: 'kit-switch', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-switch {{ state }}\">\n  <ng-container *ngIf=\"items.length\">\n    @if (label) {\n      <kit-input-label class=\"label\"\n                       [text]=\"label\"\n      ></kit-input-label>\n    }\n\n    <kendo-buttongroup look=\"outline\" class=\"button-group\"\n                       [selection]=\"mode\"\n                       [class.disabled]=\"disabled\">\n      <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n              [selected]=\"isItemSelected(item)\"\n              [togglable]=\"true\"\n              [disabled]=\"item.disabled && item.disabled(item)\"\n              (selectedChange)=\"onItemSelect($event, item)\">\n        <ng-container *ngIf=\"item.title; else icon\">\n          {{ item.title }}\n        </ng-container>\n\n        <ng-template #icon>\n          <kit-svg-icon class=\"icon-wrapper\"\n                        [icon]=\"item.icon\"\n          ></kit-svg-icon>\n        </ng-template>\n      </button>\n    </kendo-buttongroup>\n    <kit-input-message *ngIf=\"messageText\"\n                       [icon]=\"messageIcon\"\n                       [message]=\"messageText\"\n    ></kit-input-message>\n  </ng-container>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-pink: #cd1159;--ui-kit-color-purple: #7673ce}.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-switch .label{display:block;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{stroke:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{stroke:var(--ui-kit-color-cobalt);fill:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{stroke:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }], mode: [{

package/esm2022/lib/components/kit-text-label/kit-text-label.component.mjs

@@ -28,11 +28,11 @@ export class KitTextLabelComponent {
         this.state = KitTextLabelState.REGULAR;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitTextLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitTextLabelComponent, selector: "kit-text-label", inputs: { label: "label", value: "value", htmlMode: "htmlMode", noValueMessage: "noValueMessage", messageText: "messageText", state: "state" }, ngImport: i0, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n  @if (value) {\n    <kit-input-label class=\"label\"\n                     [text]=\"label\"\n    ></kit-input-label>\n  }\n\n  @if (!value) {\n    <kit-input-label class=\"label\"\n                     [text]=\"noValueMessage || label\"\n    ></kit-input-label>\n  }\n\n  <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n  <ng-template #htmlModeTemplate>\n    <div class=\"value\" [innerHTML]=\"value\"></div>\n  </ng-template>\n  <kit-input-message *ngIf=\"messageText && value\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-pink: #cd1159;--ui-kit-color-purple: #7673ce}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .label{display:block;margin-bottom:4px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: i3.KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitTextLabelComponent, selector: "kit-text-label", inputs: { label: "label", value: "value", htmlMode: "htmlMode", noValueMessage: "noValueMessage", messageText: "messageText", state: "state" }, ngImport: i0, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n  @if (value) {\n    <kit-input-label class=\"label\"\n                     [text]=\"label\"\n    ></kit-input-label>\n  }\n\n  @if (!value) {\n    <kit-input-label class=\"label\"\n                     [text]=\"noValueMessage || label\"\n    ></kit-input-label>\n  }\n\n  <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n  <ng-template #htmlModeTemplate>\n    <div class=\"value\" [innerHTML]=\"value\"></div>\n  </ng-template>\n  <kit-input-message *ngIf=\"messageText && value\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-pink: #cd1159;--ui-kit-color-purple: #7673ce}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .label{display:block;margin-bottom:4px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: i3.KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitTextLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kit-text-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n  @if (value) {\n    <kit-input-label class=\"label\"\n                     [text]=\"label\"\n    ></kit-input-label>\n  }\n\n  @if (!value) {\n    <kit-input-label class=\"label\"\n                     [text]=\"noValueMessage || label\"\n    ></kit-input-label>\n  }\n\n  <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n  <ng-template #htmlModeTemplate>\n    <div class=\"value\" [innerHTML]=\"value\"></div>\n  </ng-template>\n  <kit-input-message *ngIf=\"messageText && value\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-pink: #cd1159;--ui-kit-color-purple: #7673ce}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .label{display:block;margin-bottom:4px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"] }]
+            args: [{ selector: 'kit-text-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n  @if (value) {\n    <kit-input-label class=\"label\"\n                     [text]=\"label\"\n    ></kit-input-label>\n  }\n\n  @if (!value) {\n    <kit-input-label class=\"label\"\n                     [text]=\"noValueMessage || label\"\n    ></kit-input-label>\n  }\n\n  <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n  <ng-template #htmlModeTemplate>\n    <div class=\"value\" [innerHTML]=\"value\"></div>\n  </ng-template>\n  <kit-input-message *ngIf=\"messageText && value\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-pink: #cd1159;--ui-kit-color-purple: #7673ce}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .label{display:block;margin-bottom:4px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], value: [{

package/esm2022/lib/components/kit-units-textbox/kit-units-textbox.component.mjs

@@ -116,11 +116,11 @@ export class KitUnitsTextboxComponent {
         this.dropdownFormControl.markAsTouched();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitUnitsTextboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitUnitsTextboxComponent, selector: "kit-units-textbox", inputs: { placeholder: "placeholder", label: "label", disabledTextBox: "disabledTextBox", disabledDropdown: "disabledDropdown", dropdownItems: "dropdownItems", selectedDropdownItem: "selectedDropdownItem", textBoxValue: "textBoxValue", textBoxFormControl: "textBoxFormControl", dropdownFormControl: "dropdownFormControl", messageIcon: "messageIcon", messageText: "messageText", dropdownPosition: "dropdownPosition", textboxType: "textboxType", decimals: "decimals", min: "min", max: "max", maxlength: "maxlength", format: "format", state: "state" }, outputs: { blured: "blured", selected: "selected", changed: "changed" }, ngImport: i0, template: "<div class=\"kit-units-textbox {{ state }}\" [class.textbox-disabled]=\"disabledTextBox\"\n                               [class.dropdown-disabled]=\"disabledDropdown\"\n                               [class.units-left]=\"dropdownPosition === KitUnitsTextboxDropdownPosition.LEFT\">\n  @if (label) {\n    <kit-input-label class=\"label\"\n                     [text]=\"label\"\n    ></kit-input-label>\n  }\n  <div class=\"units-textbox-wrap\">\n    <kendo-textbox *ngIf=\"textboxType === KitUnitsTextboxType.TEXT; else numericTextboxTemplate\"\n                   [placeholder]=\"placeholder\"\n                   [value]=\"textBoxFormControl.value || textBoxValue\"\n                   [disabled]=\"disabledTextBox\"\n                   [maxlength]=\"maxlength\"\n                   (blur)=\"onInputBlur()\"\n                   (valueChange)=\"onInputChange($event)\"\n    ></kendo-textbox>\n    <ng-template #numericTextboxTemplate>\n      <kendo-numerictextbox [placeholder]=\"placeholder\"\n                            [value]=\"textBoxFormControl.value || textBoxValue\"\n                            [decimals]=\"decimals\"\n                            [min]=\"min\"\n                            [max]=\"max\"\n                            [maxlength]=\"maxlength\"\n                            [format]=\"format\"\n                            [autoCorrect]=\"true\"\n                            [spinners]=\"false\"\n                            [selectOnFocus]=\"false\"\n                            [disabled]=\"disabledTextBox\"\n                            (blur)=\"onInputBlur()\"\n                            (valueChange)=\"onInputChange($event)\"\n      ></kendo-numerictextbox>\n    </ng-template>\n    <kendo-dropdownlist valueField=\"value\" textField=\"text\"\n                        [data]=\"dropdownItems\"\n                        [value]=\"dropdownFormControl.value || selectedDropdownItem\"\n                        [valuePrimitive]=\"true\"\n                        [disabled]=\"disabledDropdown\"\n                        [popupSettings]=\"dropdownPopupSettings\"\n                        [itemDisabled]=\"onItemDisabled()\"\n                        (selectionChange)=\"onItemSelect($event)\"\n                        (blur)=\"onDropdownBlur()\"\n    >\n      <ng-template kendoDropDownListValueTemplate let-dataItem>\n        <span class=\"value-text\">{{ dataItem?.text }}</span>\n        <kit-svg-icon class=\"value-icon\"\n                      [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n        ></kit-svg-icon>\n      </ng-template>\n    </kendo-dropdownlist>\n  </div>\n  <kit-input-message *ngIf=\"messageText\"\n                     [icon]=\"messageIcon\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-units-textbox .label{display:block;margin-bottom:4px}.kit-units-textbox .units-textbox-wrap{display:flex;height:34px;border:1px solid #efefef;border-radius:4px;background:#fff;box-sizing:border-box}.kit-units-textbox .k-textbox,.kit-units-textbox .k-numerictextbox{height:100%;width:auto;opacity:1;border:none;box-shadow:none;flex-grow:1;background:none}.kit-units-textbox .k-textbox .k-input-inner,.kit-units-textbox .k-numerictextbox .k-input-inner{padding:0 8px;width:100%;color:#002a3a;font-size:13px;line-height:1}.kit-units-textbox .k-dropdownlist{position:relative;width:auto;overflow:visible;border:none;background:none}.kit-units-textbox .k-dropdownlist.k-focus{box-shadow:none}.kit-units-textbox .k-dropdownlist:hover{background:none}.kit-units-textbox .k-dropdownlist .k-input-inner{padding:0;height:100%;justify-content:flex-end;font-size:13px;font-weight:500;color:#56a2f7;overflow:visible}.kit-units-textbox .k-dropdownlist .k-input-value-text{display:flex;align-items:center;overflow:visible}.kit-units-textbox .k-dropdownlist .k-input-button{display:none}.kit-units-textbox .k-dropdownlist .value{display:flex;align-items:center}.kit-units-textbox .k-dropdownlist .value-text{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-units-textbox .k-dropdownlist .value-icon{display:block;padding:4px;width:16px;height:16px;fill:none;stroke:#002a3a;box-sizing:initial}.kit-units-textbox:focus-within .units-textbox-wrap{border:1px solid #00b0ad}.kit-units-textbox .k-animation-container{position:absolute;left:auto!important;right:0!important}.kit-units-textbox .kit-dropdown-popup{margin-top:8px;min-width:75px;border:1px solid #c1c7d0;border-radius:4px;box-shadow:0 0 8px #003e5680;background-color:#f3f4f6;padding:4px}.kit-units-textbox .kit-dropdown-popup .k-list-ul{background-color:#f3f4f6}.kit-units-textbox .kit-dropdown-popup .k-list-item{background-color:#fff;font-size:13px;font-weight:500;box-shadow:none;border-radius:2px;color:#002a3a;justify-content:flex-end;text-align:right}.kit-units-textbox .kit-dropdown-popup .k-list-item:not(:last-of-type){margin-bottom:4px}.kit-units-textbox .kit-dropdown-popup .k-list-item.k-state-focused{background-color:#fff;color:#27282a}.kit-units-textbox .kit-dropdown-popup .k-list-item:hover,.kit-units-textbox .kit-dropdown-popup .k-list-item.k-focus:hover{background-color:#f3f5fa;color:#56a2f7}.kit-units-textbox .kit-dropdown-popup .k-list-item.k-selected{background-color:#56a2f7;color:#fff}.kit-units-textbox .kit-dropdown-popup .k-list-item.k-disabled{background-color:#f3f4f6;color:#9a9fa6}.kit-units-textbox.textbox-disabled .label{color:#74777d}.kit-units-textbox.textbox-disabled .units-textbox-wrap{border-color:#c1c7d0;background-color:#f3f4f6;box-shadow:none}.kit-units-textbox.textbox-disabled .k-textbox .k-input-inner,.kit-units-textbox.textbox-disabled .k-numerictextbox .k-input-inner{color:#9a9fa6}.kit-units-textbox.units-left .units-textbox-wrap{flex-direction:row-reverse}.kit-units-textbox.units-left .k-textbox,.kit-units-textbox.units-left .k-numerictextbox{grid-column:2;grid-row:1}.kit-units-textbox.units-left .k-textbox .k-input,.kit-units-textbox.units-left .k-numerictextbox .k-input{padding-left:0}.kit-units-textbox.units-left .k-dropdownlist{grid-column:1}.kit-units-textbox.units-left .k-dropdownlist .k-input-inner{padding-left:8px;width:auto}.kit-units-textbox.units-left .k-animation-container{left:0!important;right:auto!important}.kit-units-textbox.units-left .kit-dropdown-popup .k-list-item{justify-content:flex-start;text-align:left}.kit-units-textbox .k-input-prefix,.kit-units-textbox .k-input-suffix{height:0}.kit-units-textbox.dropdown-disabled .k-dropdownlist .k-input-inner{color:#9a9fa6}.kit-units-textbox.dropdown-disabled .k-dropdownlist .value-icon{stroke:#9a9fa6}.kit-units-textbox.danger .units-textbox-wrap{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i2.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: i3.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "component", type: i4.KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: i5.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i6.KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitUnitsTextboxComponent, selector: "kit-units-textbox", inputs: { placeholder: "placeholder", label: "label", disabledTextBox: "disabledTextBox", disabledDropdown: "disabledDropdown", dropdownItems: "dropdownItems", selectedDropdownItem: "selectedDropdownItem", textBoxValue: "textBoxValue", textBoxFormControl: "textBoxFormControl", dropdownFormControl: "dropdownFormControl", messageIcon: "messageIcon", messageText: "messageText", dropdownPosition: "dropdownPosition", textboxType: "textboxType", decimals: "decimals", min: "min", max: "max", maxlength: "maxlength", format: "format", state: "state" }, outputs: { blured: "blured", selected: "selected", changed: "changed" }, ngImport: i0, template: "<div class=\"kit-units-textbox {{ state }}\" [class.textbox-disabled]=\"disabledTextBox\"\n                               [class.dropdown-disabled]=\"disabledDropdown\"\n                               [class.units-left]=\"dropdownPosition === KitUnitsTextboxDropdownPosition.LEFT\">\n  @if (label) {\n    <kit-input-label class=\"label\"\n                     [text]=\"label\"\n    ></kit-input-label>\n  }\n  <div class=\"units-textbox-wrap\">\n    <kendo-textbox *ngIf=\"textboxType === KitUnitsTextboxType.TEXT; else numericTextboxTemplate\"\n                   [placeholder]=\"placeholder\"\n                   [value]=\"textBoxFormControl.value || textBoxValue\"\n                   [disabled]=\"disabledTextBox\"\n                   [maxlength]=\"maxlength\"\n                   (blur)=\"onInputBlur()\"\n                   (valueChange)=\"onInputChange($event)\"\n    ></kendo-textbox>\n    <ng-template #numericTextboxTemplate>\n      <kendo-numerictextbox [placeholder]=\"placeholder\"\n                            [value]=\"textBoxFormControl.value || textBoxValue\"\n                            [decimals]=\"decimals\"\n                            [min]=\"min\"\n                            [max]=\"max\"\n                            [maxlength]=\"maxlength\"\n                            [format]=\"format\"\n                            [autoCorrect]=\"true\"\n                            [spinners]=\"false\"\n                            [selectOnFocus]=\"false\"\n                            [disabled]=\"disabledTextBox\"\n                            (blur)=\"onInputBlur()\"\n                            (valueChange)=\"onInputChange($event)\"\n      ></kendo-numerictextbox>\n    </ng-template>\n    <kendo-dropdownlist valueField=\"value\" textField=\"text\"\n                        [data]=\"dropdownItems\"\n                        [value]=\"dropdownFormControl.value || selectedDropdownItem\"\n                        [valuePrimitive]=\"true\"\n                        [disabled]=\"disabledDropdown\"\n                        [popupSettings]=\"dropdownPopupSettings\"\n                        [itemDisabled]=\"onItemDisabled()\"\n                        (selectionChange)=\"onItemSelect($event)\"\n                        (blur)=\"onDropdownBlur()\"\n    >\n      <ng-template kendoDropDownListValueTemplate let-dataItem>\n        <span class=\"value-text\">{{ dataItem?.text }}</span>\n        <kit-svg-icon class=\"value-icon\"\n                      [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n        ></kit-svg-icon>\n      </ng-template>\n    </kendo-dropdownlist>\n  </div>\n  <kit-input-message *ngIf=\"messageText\"\n                     [icon]=\"messageIcon\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-units-textbox .label{display:block;margin-bottom:4px}.kit-units-textbox .units-textbox-wrap{display:flex;height:34px;border:1px solid #efefef;border-radius:4px;background:#fff;box-sizing:border-box}.kit-units-textbox .k-textbox,.kit-units-textbox .k-numerictextbox{height:100%;width:auto;opacity:1;border:none;box-shadow:none;flex-grow:1;background:none}.kit-units-textbox .k-textbox .k-input-inner,.kit-units-textbox .k-numerictextbox .k-input-inner{padding:0 8px;width:100%;color:#002a3a;font-size:13px;line-height:1}.kit-units-textbox .k-dropdownlist{position:relative;width:auto;overflow:visible;border:none;background:none}.kit-units-textbox .k-dropdownlist.k-focus{box-shadow:none}.kit-units-textbox .k-dropdownlist:hover{background:none}.kit-units-textbox .k-dropdownlist .k-input-inner{padding:0;height:100%;justify-content:flex-end;font-size:13px;font-weight:500;color:#56a2f7;overflow:visible}.kit-units-textbox .k-dropdownlist .k-input-value-text{display:flex;align-items:center;overflow:visible}.kit-units-textbox .k-dropdownlist .k-input-button{display:none}.kit-units-textbox .k-dropdownlist .value{display:flex;align-items:center}.kit-units-textbox .k-dropdownlist .value-text{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-units-textbox .k-dropdownlist .value-icon{display:block;padding:4px;width:16px;height:16px;fill:none;stroke:#002a3a;box-sizing:initial}.kit-units-textbox:focus-within .units-textbox-wrap{border:1px solid #00b0ad}.kit-units-textbox .k-animation-container{position:absolute;left:auto!important;right:0!important}.kit-units-textbox .kit-dropdown-popup{margin-top:8px;min-width:75px;border:1px solid #c1c7d0;border-radius:4px;box-shadow:0 0 8px #003e5680;background-color:#f3f4f6;padding:4px}.kit-units-textbox .kit-dropdown-popup .k-list-ul{background-color:#f3f4f6}.kit-units-textbox .kit-dropdown-popup .k-list-item{background-color:#fff;font-size:13px;font-weight:500;box-shadow:none;border-radius:2px;color:#002a3a;justify-content:flex-end;text-align:right}.kit-units-textbox .kit-dropdown-popup .k-list-item:not(:last-of-type){margin-bottom:4px}.kit-units-textbox .kit-dropdown-popup .k-list-item.k-state-focused{background-color:#fff;color:#27282a}.kit-units-textbox .kit-dropdown-popup .k-list-item:hover,.kit-units-textbox .kit-dropdown-popup .k-list-item.k-focus:hover{background-color:#f3f5fa;color:#56a2f7}.kit-units-textbox .kit-dropdown-popup .k-list-item.k-selected{background-color:#56a2f7;color:#fff}.kit-units-textbox .kit-dropdown-popup .k-list-item.k-disabled{background-color:#f3f4f6;color:#9a9fa6}.kit-units-textbox.textbox-disabled .label{color:#74777d}.kit-units-textbox.textbox-disabled .units-textbox-wrap{border-color:#c1c7d0;background-color:#f3f4f6;box-shadow:none}.kit-units-textbox.textbox-disabled .k-textbox .k-input-inner,.kit-units-textbox.textbox-disabled .k-numerictextbox .k-input-inner{color:#9a9fa6}.kit-units-textbox.units-left .units-textbox-wrap{flex-direction:row-reverse}.kit-units-textbox.units-left .k-textbox,.kit-units-textbox.units-left .k-numerictextbox{grid-column:2;grid-row:1}.kit-units-textbox.units-left .k-textbox .k-input,.kit-units-textbox.units-left .k-numerictextbox .k-input{padding-left:0}.kit-units-textbox.units-left .k-dropdownlist{grid-column:1}.kit-units-textbox.units-left .k-dropdownlist .k-input-inner{padding-left:8px;width:auto}.kit-units-textbox.units-left .k-animation-container{left:0!important;right:auto!important}.kit-units-textbox.units-left .kit-dropdown-popup .k-list-item{justify-content:flex-start;text-align:left}.kit-units-textbox .k-input-prefix,.kit-units-textbox .k-input-suffix{height:0}.kit-units-textbox.dropdown-disabled .k-dropdownlist .k-input-inner{color:#9a9fa6}.kit-units-textbox.dropdown-disabled .k-dropdownlist .value-icon{stroke:#9a9fa6}.kit-units-textbox.danger .units-textbox-wrap{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i2.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: i3.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "component", type: i4.KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: i5.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i6.KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitUnitsTextboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kit-units-textbox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-units-textbox {{ state }}\" [class.textbox-disabled]=\"disabledTextBox\"\n                               [class.dropdown-disabled]=\"disabledDropdown\"\n                               [class.units-left]=\"dropdownPosition === KitUnitsTextboxDropdownPosition.LEFT\">\n  @if (label) {\n    <kit-input-label class=\"label\"\n                     [text]=\"label\"\n    ></kit-input-label>\n  }\n  <div class=\"units-textbox-wrap\">\n    <kendo-textbox *ngIf=\"textboxType === KitUnitsTextboxType.TEXT; else numericTextboxTemplate\"\n                   [placeholder]=\"placeholder\"\n                   [value]=\"textBoxFormControl.value || textBoxValue\"\n                   [disabled]=\"disabledTextBox\"\n                   [maxlength]=\"maxlength\"\n                   (blur)=\"onInputBlur()\"\n                   (valueChange)=\"onInputChange($event)\"\n    ></kendo-textbox>\n    <ng-template #numericTextboxTemplate>\n      <kendo-numerictextbox [placeholder]=\"placeholder\"\n                            [value]=\"textBoxFormControl.value || textBoxValue\"\n                            [decimals]=\"decimals\"\n                            [min]=\"min\"\n                            [max]=\"max\"\n                            [maxlength]=\"maxlength\"\n                            [format]=\"format\"\n                            [autoCorrect]=\"true\"\n                            [spinners]=\"false\"\n                            [selectOnFocus]=\"false\"\n                            [disabled]=\"disabledTextBox\"\n                            (blur)=\"onInputBlur()\"\n                            (valueChange)=\"onInputChange($event)\"\n      ></kendo-numerictextbox>\n    </ng-template>\n    <kendo-dropdownlist valueField=\"value\" textField=\"text\"\n                        [data]=\"dropdownItems\"\n                        [value]=\"dropdownFormControl.value || selectedDropdownItem\"\n                        [valuePrimitive]=\"true\"\n                        [disabled]=\"disabledDropdown\"\n                        [popupSettings]=\"dropdownPopupSettings\"\n                        [itemDisabled]=\"onItemDisabled()\"\n                        (selectionChange)=\"onItemSelect($event)\"\n                        (blur)=\"onDropdownBlur()\"\n    >\n      <ng-template kendoDropDownListValueTemplate let-dataItem>\n        <span class=\"value-text\">{{ dataItem?.text }}</span>\n        <kit-svg-icon class=\"value-icon\"\n                      [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n        ></kit-svg-icon>\n      </ng-template>\n    </kendo-dropdownlist>\n  </div>\n  <kit-input-message *ngIf=\"messageText\"\n                     [icon]=\"messageIcon\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-units-textbox .label{display:block;margin-bottom:4px}.kit-units-textbox .units-textbox-wrap{display:flex;height:34px;border:1px solid #efefef;border-radius:4px;background:#fff;box-sizing:border-box}.kit-units-textbox .k-textbox,.kit-units-textbox .k-numerictextbox{height:100%;width:auto;opacity:1;border:none;box-shadow:none;flex-grow:1;background:none}.kit-units-textbox .k-textbox .k-input-inner,.kit-units-textbox .k-numerictextbox .k-input-inner{padding:0 8px;width:100%;color:#002a3a;font-size:13px;line-height:1}.kit-units-textbox .k-dropdownlist{position:relative;width:auto;overflow:visible;border:none;background:none}.kit-units-textbox .k-dropdownlist.k-focus{box-shadow:none}.kit-units-textbox .k-dropdownlist:hover{background:none}.kit-units-textbox .k-dropdownlist .k-input-inner{padding:0;height:100%;justify-content:flex-end;font-size:13px;font-weight:500;color:#56a2f7;overflow:visible}.kit-units-textbox .k-dropdownlist .k-input-value-text{display:flex;align-items:center;overflow:visible}.kit-units-textbox .k-dropdownlist .k-input-button{display:none}.kit-units-textbox .k-dropdownlist .value{display:flex;align-items:center}.kit-units-textbox .k-dropdownlist .value-text{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-units-textbox .k-dropdownlist .value-icon{display:block;padding:4px;width:16px;height:16px;fill:none;stroke:#002a3a;box-sizing:initial}.kit-units-textbox:focus-within .units-textbox-wrap{border:1px solid #00b0ad}.kit-units-textbox .k-animation-container{position:absolute;left:auto!important;right:0!important}.kit-units-textbox .kit-dropdown-popup{margin-top:8px;min-width:75px;border:1px solid #c1c7d0;border-radius:4px;box-shadow:0 0 8px #003e5680;background-color:#f3f4f6;padding:4px}.kit-units-textbox .kit-dropdown-popup .k-list-ul{background-color:#f3f4f6}.kit-units-textbox .kit-dropdown-popup .k-list-item{background-color:#fff;font-size:13px;font-weight:500;box-shadow:none;border-radius:2px;color:#002a3a;justify-content:flex-end;text-align:right}.kit-units-textbox .kit-dropdown-popup .k-list-item:not(:last-of-type){margin-bottom:4px}.kit-units-textbox .kit-dropdown-popup .k-list-item.k-state-focused{background-color:#fff;color:#27282a}.kit-units-textbox .kit-dropdown-popup .k-list-item:hover,.kit-units-textbox .kit-dropdown-popup .k-list-item.k-focus:hover{background-color:#f3f5fa;color:#56a2f7}.kit-units-textbox .kit-dropdown-popup .k-list-item.k-selected{background-color:#56a2f7;color:#fff}.kit-units-textbox .kit-dropdown-popup .k-list-item.k-disabled{background-color:#f3f4f6;color:#9a9fa6}.kit-units-textbox.textbox-disabled .label{color:#74777d}.kit-units-textbox.textbox-disabled .units-textbox-wrap{border-color:#c1c7d0;background-color:#f3f4f6;box-shadow:none}.kit-units-textbox.textbox-disabled .k-textbox .k-input-inner,.kit-units-textbox.textbox-disabled .k-numerictextbox .k-input-inner{color:#9a9fa6}.kit-units-textbox.units-left .units-textbox-wrap{flex-direction:row-reverse}.kit-units-textbox.units-left .k-textbox,.kit-units-textbox.units-left .k-numerictextbox{grid-column:2;grid-row:1}.kit-units-textbox.units-left .k-textbox .k-input,.kit-units-textbox.units-left .k-numerictextbox .k-input{padding-left:0}.kit-units-textbox.units-left .k-dropdownlist{grid-column:1}.kit-units-textbox.units-left .k-dropdownlist .k-input-inner{padding-left:8px;width:auto}.kit-units-textbox.units-left .k-animation-container{left:0!important;right:auto!important}.kit-units-textbox.units-left .kit-dropdown-popup .k-list-item{justify-content:flex-start;text-align:left}.kit-units-textbox .k-input-prefix,.kit-units-textbox .k-input-suffix{height:0}.kit-units-textbox.dropdown-disabled .k-dropdownlist .k-input-inner{color:#9a9fa6}.kit-units-textbox.dropdown-disabled .k-dropdownlist .value-icon{stroke:#9a9fa6}.kit-units-textbox.danger .units-textbox-wrap{border-color:#ef3e42;background:#f8e0e0}\n"] }]
+            args: [{ selector: 'kit-units-textbox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-units-textbox {{ state }}\" [class.textbox-disabled]=\"disabledTextBox\"\n                               [class.dropdown-disabled]=\"disabledDropdown\"\n                               [class.units-left]=\"dropdownPosition === KitUnitsTextboxDropdownPosition.LEFT\">\n  @if (label) {\n    <kit-input-label class=\"label\"\n                     [text]=\"label\"\n    ></kit-input-label>\n  }\n  <div class=\"units-textbox-wrap\">\n    <kendo-textbox *ngIf=\"textboxType === KitUnitsTextboxType.TEXT; else numericTextboxTemplate\"\n                   [placeholder]=\"placeholder\"\n                   [value]=\"textBoxFormControl.value || textBoxValue\"\n                   [disabled]=\"disabledTextBox\"\n                   [maxlength]=\"maxlength\"\n                   (blur)=\"onInputBlur()\"\n                   (valueChange)=\"onInputChange($event)\"\n    ></kendo-textbox>\n    <ng-template #numericTextboxTemplate>\n      <kendo-numerictextbox [placeholder]=\"placeholder\"\n                            [value]=\"textBoxFormControl.value || textBoxValue\"\n                            [decimals]=\"decimals\"\n                            [min]=\"min\"\n                            [max]=\"max\"\n                            [maxlength]=\"maxlength\"\n                            [format]=\"format\"\n                            [autoCorrect]=\"true\"\n                            [spinners]=\"false\"\n                            [selectOnFocus]=\"false\"\n                            [disabled]=\"disabledTextBox\"\n                            (blur)=\"onInputBlur()\"\n                            (valueChange)=\"onInputChange($event)\"\n      ></kendo-numerictextbox>\n    </ng-template>\n    <kendo-dropdownlist valueField=\"value\" textField=\"text\"\n                        [data]=\"dropdownItems\"\n                        [value]=\"dropdownFormControl.value || selectedDropdownItem\"\n                        [valuePrimitive]=\"true\"\n                        [disabled]=\"disabledDropdown\"\n                        [popupSettings]=\"dropdownPopupSettings\"\n                        [itemDisabled]=\"onItemDisabled()\"\n                        (selectionChange)=\"onItemSelect($event)\"\n                        (blur)=\"onDropdownBlur()\"\n    >\n      <ng-template kendoDropDownListValueTemplate let-dataItem>\n        <span class=\"value-text\">{{ dataItem?.text }}</span>\n        <kit-svg-icon class=\"value-icon\"\n                      [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n        ></kit-svg-icon>\n      </ng-template>\n    </kendo-dropdownlist>\n  </div>\n  <kit-input-message *ngIf=\"messageText\"\n                     [icon]=\"messageIcon\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-units-textbox .label{display:block;margin-bottom:4px}.kit-units-textbox .units-textbox-wrap{display:flex;height:34px;border:1px solid #efefef;border-radius:4px;background:#fff;box-sizing:border-box}.kit-units-textbox .k-textbox,.kit-units-textbox .k-numerictextbox{height:100%;width:auto;opacity:1;border:none;box-shadow:none;flex-grow:1;background:none}.kit-units-textbox .k-textbox .k-input-inner,.kit-units-textbox .k-numerictextbox .k-input-inner{padding:0 8px;width:100%;color:#002a3a;font-size:13px;line-height:1}.kit-units-textbox .k-dropdownlist{position:relative;width:auto;overflow:visible;border:none;background:none}.kit-units-textbox .k-dropdownlist.k-focus{box-shadow:none}.kit-units-textbox .k-dropdownlist:hover{background:none}.kit-units-textbox .k-dropdownlist .k-input-inner{padding:0;height:100%;justify-content:flex-end;font-size:13px;font-weight:500;color:#56a2f7;overflow:visible}.kit-units-textbox .k-dropdownlist .k-input-value-text{display:flex;align-items:center;overflow:visible}.kit-units-textbox .k-dropdownlist .k-input-button{display:none}.kit-units-textbox .k-dropdownlist .value{display:flex;align-items:center}.kit-units-textbox .k-dropdownlist .value-text{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-units-textbox .k-dropdownlist .value-icon{display:block;padding:4px;width:16px;height:16px;fill:none;stroke:#002a3a;box-sizing:initial}.kit-units-textbox:focus-within .units-textbox-wrap{border:1px solid #00b0ad}.kit-units-textbox .k-animation-container{position:absolute;left:auto!important;right:0!important}.kit-units-textbox .kit-dropdown-popup{margin-top:8px;min-width:75px;border:1px solid #c1c7d0;border-radius:4px;box-shadow:0 0 8px #003e5680;background-color:#f3f4f6;padding:4px}.kit-units-textbox .kit-dropdown-popup .k-list-ul{background-color:#f3f4f6}.kit-units-textbox .kit-dropdown-popup .k-list-item{background-color:#fff;font-size:13px;font-weight:500;box-shadow:none;border-radius:2px;color:#002a3a;justify-content:flex-end;text-align:right}.kit-units-textbox .kit-dropdown-popup .k-list-item:not(:last-of-type){margin-bottom:4px}.kit-units-textbox .kit-dropdown-popup .k-list-item.k-state-focused{background-color:#fff;color:#27282a}.kit-units-textbox .kit-dropdown-popup .k-list-item:hover,.kit-units-textbox .kit-dropdown-popup .k-list-item.k-focus:hover{background-color:#f3f5fa;color:#56a2f7}.kit-units-textbox .kit-dropdown-popup .k-list-item.k-selected{background-color:#56a2f7;color:#fff}.kit-units-textbox .kit-dropdown-popup .k-list-item.k-disabled{background-color:#f3f4f6;color:#9a9fa6}.kit-units-textbox.textbox-disabled .label{color:#74777d}.kit-units-textbox.textbox-disabled .units-textbox-wrap{border-color:#c1c7d0;background-color:#f3f4f6;box-shadow:none}.kit-units-textbox.textbox-disabled .k-textbox .k-input-inner,.kit-units-textbox.textbox-disabled .k-numerictextbox .k-input-inner{color:#9a9fa6}.kit-units-textbox.units-left .units-textbox-wrap{flex-direction:row-reverse}.kit-units-textbox.units-left .k-textbox,.kit-units-textbox.units-left .k-numerictextbox{grid-column:2;grid-row:1}.kit-units-textbox.units-left .k-textbox .k-input,.kit-units-textbox.units-left .k-numerictextbox .k-input{padding-left:0}.kit-units-textbox.units-left .k-dropdownlist{grid-column:1}.kit-units-textbox.units-left .k-dropdownlist .k-input-inner{padding-left:8px;width:auto}.kit-units-textbox.units-left .k-animation-container{left:0!important;right:auto!important}.kit-units-textbox.units-left .kit-dropdown-popup .k-list-item{justify-content:flex-start;text-align:left}.kit-units-textbox .k-input-prefix,.kit-units-textbox .k-input-suffix{height:0}.kit-units-textbox.dropdown-disabled .k-dropdownlist .k-input-inner{color:#9a9fa6}.kit-units-textbox.dropdown-disabled .k-dropdownlist .value-icon{stroke:#9a9fa6}.kit-units-textbox.danger .units-textbox-wrap{border-color:#ef3e42;background:#f8e0e0}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], label: [{