npm - @indigina/ui-kit - Versions diffs - 1.1.112 → 1.1.114 - Mend

@indigina/ui-kit 1.1.112 → 1.1.114

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/fesm2022/indigina-ui-kit.mjs +21 -10
package/fesm2022/indigina-ui-kit.mjs.map +1 -1
package/lib/components/kit-button/kit-button.component.d.ts +1 -1
package/lib/components/kit-grid/kit-grid.component.d.ts +3 -1
package/lib/components/kit-shipment-card/kit-shipment-card.component.d.ts +5 -4
package/package.json +1 -1
package/styles/breakpoints.scss +1 -1

package/fesm2022/indigina-ui-kit.mjs CHANGED Viewed

@@ -40,6 +40,7 @@ import { LayoutModule, TileLayoutModule } from '@progress/kendo-angular-layout';
 import * as i2$3 from '@progress/kendo-angular-grid';
 import { GridComponent, GridModule, ExcelModule, PDFModule } from '@progress/kendo-angular-grid';
 export { ExcelExportEvent } from '@progress/kendo-angular-grid';
+import * as i3 from '@progress/kendo-angular-pager';
 export { encodeBase64, saveAs } from '@progress/kendo-file-saver';
 export { Workbook } from '@progress/kendo-ooxml';
 export { pdf } from '@progress/kendo-drawing';
@@ -285,11 +286,11 @@ class KitButtonComponent {
         this.KitSvgIconType = KitSvgIconType;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitButtonComponent, isStandalone: false, selector: "kit-button", inputs: { disabled: "disabled", label: "label", type: "type", icon: "icon", iconType: "iconType", kind: "kind", iconPosition: "iconPosition", buttonClass: "buttonClass", active: "active" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"kit-button\">\n  <button kendoButton\n          [disabled]=\"disabled\"\n          [class.no-label]=\"!label\"\n          [class.active]=\"active\"\n          [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n          (click)=\"clicked.emit()\">\n    {{ label }}\n    @if (icon) {\n      <kit-svg-icon class=\"kit-button-icon\"\n                    [icon]=\"icon\"\n                    [ngClass]=\"iconType ?? KitSvgIconType.FILL\"\n      ></kit-svg-icon>\n    }\n  </button>\n</div>\n", styles: [".kit-button .k-button-text{display:flex;align-items:center;gap:8px}.kit-button .kit-button-icon{display:block}.kit-button .k-button{font-weight:400;border:1px solid transparent;transition:none}.kit-button .k-button:focus{box-shadow:none}.kit-button .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-button .primary:hover{background:var(--ui-kit-color-hover)}.kit-button .primary.active,.kit-button .primary:active{background:var(--ui-kit-color-main)}.kit-button .primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .ghost.active,.kit-button .ghost:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}.kit-button .ghost.active .kit-button-icon.fill,.kit-button .ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .ghost.active .kit-button-icon.stroke,.kit-button .ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .text{color:var(--ui-kit-color-grey-10);background:none}.kit-button .text:disabled{border:none;background:none}.kit-button .text:hover,.kit-button .text.active,.kit-button .text:active{background:var(--ui-kit-color-grey-13)}.kit-button .text:hover{color:var(--ui-kit-color-hover)}.kit-button .text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .text.active,.kit-button .text:active{color:var(--ui-kit-color-main)}.kit-button .text.active .kit-button-icon.fill,.kit-button .text:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .text.active .kit-button-icon.stroke,.kit-button .text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .link{color:var(--ui-kit-color-main);background:none}.kit-button .link:disabled{border:none;background:none}.kit-button .link:hover{color:var(--ui-kit-color-hover)}.kit-button .link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .link.active,.kit-button .link:active{color:var(--ui-kit-color-main)}.kit-button .link.active .kit-button-icon.fill,.kit-button .link:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link.active .kit-button-icon.stroke,.kit-button .link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .link .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);border-style:dashed;background:var(--ui-kit-color-white)}.kit-button .dashed:disabled{border-style:dashed}.kit-button .dashed:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .dashed.active,.kit-button .dashed:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-button .dashed.active .kit-button-icon.fill,.kit-button .dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed.active .kit-button-icon.stroke,.kit-button .dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .success{color:var(--ui-kit-color-white);background:var(--ui-kit-color-green-1)}.kit-button .success .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .success .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .success:hover{background:var(--ui-kit-color-green-6)}.kit-button .success:disabled{border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .success:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .success:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .large{padding:0 16px;height:40px;font-size:16px;border-radius:8px}.kit-button .large .kit-button-icon{width:18px;height:18px}.kit-button .medium{padding:0 16px;height:32px;font-size:14px;border-radius:6px}.kit-button .medium .kit-button-icon{width:16px;height:16px}.kit-button .small{padding:0 8px;height:24px;font-size:14px;border-radius:4px}.kit-button .small .kit-button-icon{width:14px;height:14px}.kit-button .leading .k-button-text{flex-direction:row-reverse}.kit-button .trailing .k-button-text{flex-direction:row}.kit-button .no-label.large{padding:0 11px}.kit-button .no-label.medium{padding:0 8px}.kit-button .no-label.small{padding:0 6px}\n"], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitButtonComponent, isStandalone: false, selector: "kit-button", inputs: { disabled: "disabled", label: "label", type: "type", icon: "icon", iconType: "iconType", kind: "kind", iconPosition: "iconPosition", buttonClass: "buttonClass", active: "active" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"kit-button\">\n  <button kendoButton\n          [disabled]=\"disabled\"\n          [class.no-label]=\"!label\"\n          [class.active]=\"active\"\n          [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n          (click)=\"clicked.emit($event)\">\n    {{ label }}\n    @if (icon) {\n      <kit-svg-icon class=\"kit-button-icon\"\n                    [icon]=\"icon\"\n                    [ngClass]=\"iconType ?? KitSvgIconType.FILL\"\n      ></kit-svg-icon>\n    }\n  </button>\n</div>\n", styles: [".kit-button .k-button-text{display:flex;align-items:center;gap:8px}.kit-button .kit-button-icon{display:block}.kit-button .k-button{font-weight:400;border:1px solid transparent;transition:none}.kit-button .k-button:focus{box-shadow:none}.kit-button .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-button .primary:hover{background:var(--ui-kit-color-hover)}.kit-button .primary.active,.kit-button .primary:active{background:var(--ui-kit-color-main)}.kit-button .primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .ghost.active,.kit-button .ghost:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}.kit-button .ghost.active .kit-button-icon.fill,.kit-button .ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .ghost.active .kit-button-icon.stroke,.kit-button .ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .text{color:var(--ui-kit-color-grey-10);background:none}.kit-button .text:disabled{border:none;background:none}.kit-button .text:hover,.kit-button .text.active,.kit-button .text:active{background:var(--ui-kit-color-grey-13)}.kit-button .text:hover{color:var(--ui-kit-color-hover)}.kit-button .text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .text.active,.kit-button .text:active{color:var(--ui-kit-color-main)}.kit-button .text.active .kit-button-icon.fill,.kit-button .text:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .text.active .kit-button-icon.stroke,.kit-button .text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .link{color:var(--ui-kit-color-main);background:none}.kit-button .link:disabled{border:none;background:none}.kit-button .link:hover{color:var(--ui-kit-color-hover)}.kit-button .link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .link.active,.kit-button .link:active{color:var(--ui-kit-color-main)}.kit-button .link.active .kit-button-icon.fill,.kit-button .link:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link.active .kit-button-icon.stroke,.kit-button .link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .link .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);border-style:dashed;background:var(--ui-kit-color-white)}.kit-button .dashed:disabled{border-style:dashed}.kit-button .dashed:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .dashed.active,.kit-button .dashed:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-button .dashed.active .kit-button-icon.fill,.kit-button .dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed.active .kit-button-icon.stroke,.kit-button .dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .success{color:var(--ui-kit-color-white);background:var(--ui-kit-color-green-1)}.kit-button .success .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .success .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .success:hover{background:var(--ui-kit-color-green-6)}.kit-button .success:disabled{border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .success:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .success:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .large{padding:0 16px;height:40px;font-size:16px;border-radius:8px}.kit-button .large .kit-button-icon{width:18px;height:18px}.kit-button .medium{padding:0 16px;height:32px;font-size:14px;border-radius:6px}.kit-button .medium .kit-button-icon{width:16px;height:16px}.kit-button .small{padding:0 8px;height:24px;font-size:14px;border-radius:4px}.kit-button .small .kit-button-icon{width:14px;height:14px}.kit-button .leading .k-button-text{flex-direction:row-reverse}.kit-button .trailing .k-button-text{flex-direction:row}.kit-button .no-label.large{padding:0 11px}.kit-button .no-label.medium{padding:0 8px}.kit-button .no-label.small{padding:0 6px}\n"], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kit-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"kit-button\">\n  <button kendoButton\n          [disabled]=\"disabled\"\n          [class.no-label]=\"!label\"\n          [class.active]=\"active\"\n          [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n          (click)=\"clicked.emit()\">\n    {{ label }}\n    @if (icon) {\n      <kit-svg-icon class=\"kit-button-icon\"\n                    [icon]=\"icon\"\n                    [ngClass]=\"iconType ?? KitSvgIconType.FILL\"\n      ></kit-svg-icon>\n    }\n  </button>\n</div>\n", styles: [".kit-button .k-button-text{display:flex;align-items:center;gap:8px}.kit-button .kit-button-icon{display:block}.kit-button .k-button{font-weight:400;border:1px solid transparent;transition:none}.kit-button .k-button:focus{box-shadow:none}.kit-button .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-button .primary:hover{background:var(--ui-kit-color-hover)}.kit-button .primary.active,.kit-button .primary:active{background:var(--ui-kit-color-main)}.kit-button .primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .ghost.active,.kit-button .ghost:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}.kit-button .ghost.active .kit-button-icon.fill,.kit-button .ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .ghost.active .kit-button-icon.stroke,.kit-button .ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .text{color:var(--ui-kit-color-grey-10);background:none}.kit-button .text:disabled{border:none;background:none}.kit-button .text:hover,.kit-button .text.active,.kit-button .text:active{background:var(--ui-kit-color-grey-13)}.kit-button .text:hover{color:var(--ui-kit-color-hover)}.kit-button .text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .text.active,.kit-button .text:active{color:var(--ui-kit-color-main)}.kit-button .text.active .kit-button-icon.fill,.kit-button .text:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .text.active .kit-button-icon.stroke,.kit-button .text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .link{color:var(--ui-kit-color-main);background:none}.kit-button .link:disabled{border:none;background:none}.kit-button .link:hover{color:var(--ui-kit-color-hover)}.kit-button .link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .link.active,.kit-button .link:active{color:var(--ui-kit-color-main)}.kit-button .link.active .kit-button-icon.fill,.kit-button .link:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link.active .kit-button-icon.stroke,.kit-button .link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .link .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);border-style:dashed;background:var(--ui-kit-color-white)}.kit-button .dashed:disabled{border-style:dashed}.kit-button .dashed:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .dashed.active,.kit-button .dashed:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-button .dashed.active .kit-button-icon.fill,.kit-button .dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed.active .kit-button-icon.stroke,.kit-button .dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .success{color:var(--ui-kit-color-white);background:var(--ui-kit-color-green-1)}.kit-button .success .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .success .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .success:hover{background:var(--ui-kit-color-green-6)}.kit-button .success:disabled{border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .success:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .success:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .large{padding:0 16px;height:40px;font-size:16px;border-radius:8px}.kit-button .large .kit-button-icon{width:18px;height:18px}.kit-button .medium{padding:0 16px;height:32px;font-size:14px;border-radius:6px}.kit-button .medium .kit-button-icon{width:16px;height:16px}.kit-button .small{padding:0 8px;height:24px;font-size:14px;border-radius:4px}.kit-button .small .kit-button-icon{width:14px;height:14px}.kit-button .leading .k-button-text{flex-direction:row-reverse}.kit-button .trailing .k-button-text{flex-direction:row}.kit-button .no-label.large{padding:0 11px}.kit-button .no-label.medium{padding:0 8px}.kit-button .no-label.small{padding:0 6px}\n"] }]
+            args: [{ selector: 'kit-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"kit-button\">\n  <button kendoButton\n          [disabled]=\"disabled\"\n          [class.no-label]=\"!label\"\n          [class.active]=\"active\"\n          [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n          (click)=\"clicked.emit($event)\">\n    {{ label }}\n    @if (icon) {\n      <kit-svg-icon class=\"kit-button-icon\"\n                    [icon]=\"icon\"\n                    [ngClass]=\"iconType ?? KitSvgIconType.FILL\"\n      ></kit-svg-icon>\n    }\n  </button>\n</div>\n", styles: [".kit-button .k-button-text{display:flex;align-items:center;gap:8px}.kit-button .kit-button-icon{display:block}.kit-button .k-button{font-weight:400;border:1px solid transparent;transition:none}.kit-button .k-button:focus{box-shadow:none}.kit-button .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-button .primary:hover{background:var(--ui-kit-color-hover)}.kit-button .primary.active,.kit-button .primary:active{background:var(--ui-kit-color-main)}.kit-button .primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .ghost.active,.kit-button .ghost:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}.kit-button .ghost.active .kit-button-icon.fill,.kit-button .ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .ghost.active .kit-button-icon.stroke,.kit-button .ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .text{color:var(--ui-kit-color-grey-10);background:none}.kit-button .text:disabled{border:none;background:none}.kit-button .text:hover,.kit-button .text.active,.kit-button .text:active{background:var(--ui-kit-color-grey-13)}.kit-button .text:hover{color:var(--ui-kit-color-hover)}.kit-button .text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .text.active,.kit-button .text:active{color:var(--ui-kit-color-main)}.kit-button .text.active .kit-button-icon.fill,.kit-button .text:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .text.active .kit-button-icon.stroke,.kit-button .text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .link{color:var(--ui-kit-color-main);background:none}.kit-button .link:disabled{border:none;background:none}.kit-button .link:hover{color:var(--ui-kit-color-hover)}.kit-button .link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .link.active,.kit-button .link:active{color:var(--ui-kit-color-main)}.kit-button .link.active .kit-button-icon.fill,.kit-button .link:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link.active .kit-button-icon.stroke,.kit-button .link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .link .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);border-style:dashed;background:var(--ui-kit-color-white)}.kit-button .dashed:disabled{border-style:dashed}.kit-button .dashed:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .dashed.active,.kit-button .dashed:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-button .dashed.active .kit-button-icon.fill,.kit-button .dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed.active .kit-button-icon.stroke,.kit-button .dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .success{color:var(--ui-kit-color-white);background:var(--ui-kit-color-green-1)}.kit-button .success .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .success .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .success:hover{background:var(--ui-kit-color-green-6)}.kit-button .success:disabled{border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .success:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .success:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .large{padding:0 16px;height:40px;font-size:16px;border-radius:8px}.kit-button .large .kit-button-icon{width:18px;height:18px}.kit-button .medium{padding:0 16px;height:32px;font-size:14px;border-radius:6px}.kit-button .medium .kit-button-icon{width:16px;height:16px}.kit-button .small{padding:0 8px;height:24px;font-size:14px;border-radius:4px}.kit-button .small .kit-button-icon{width:14px;height:14px}.kit-button .leading .k-button-text{flex-direction:row-reverse}.kit-button .trailing .k-button-text{flex-direction:row}.kit-button .no-label.large{padding:0 11px}.kit-button .no-label.medium{padding:0 8px}.kit-button .no-label.small{padding:0 6px}\n"] }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], label: [{
@@ -4940,6 +4941,7 @@ class KitShipmentCard {
     constructor() {
         this.data = input.required();
         this.selected = input(false);
+        this.headLabel = input();
         this.kitSvgIcon = KitSvgIcon;
         this.kitButtonType = KitButtonType;
         this.kitButtonKind = KitButtonKind;
@@ -4962,16 +4964,18 @@ class KitShipmentCard {
     get containerItems() {
         return this.data().containerItems.filter(item => item.value);
     }
-    showContainers() {
+    showContainers(event) {
+        event.stopPropagation();
         this.timelineExpanded = false;
         this.containersExpanded = true;
     }
-    showTimeline() {
+    showTimeline(event) {
+        event.stopPropagation();
         this.containersExpanded = false;
         this.timelineExpanded = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitShipmentCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitShipmentCard, isStandalone: true, selector: "kit-shipment-card", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-shipment-card\"\n     [ngClass]=\"{ selected: selected() }\">\n  <div class=\"kit-shipment-card-head\">\n    <div class=\"head-title text-ellipsis\">{{ data().reference }}</div>\n  </div>\n  <div class=\"kit-shipment-card-content\">\n    <div class=\"content-row\">\n      <kit-svg-icon class=\"icon info\"\n                    [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n      <span class=\"title text-ellipsis\">{{ data().latestRequiredByDate }}</span>\n    </div>\n\n    <div class=\"content-row\">\n      <kit-svg-icon class=\"{{ 'icon ' + shipmentModeIcon.toLowerCase() }} \"\n                    [icon]=\"shipmentModeIcon\"/>\n      <span class=\"text-ellipsis\">{{ data().vesselName }}</span>\n    </div>\n\n    <div class=\"content-row route\">\n      <kit-pill class=\"route-origin-port\">\n        <span class=\"text-ellipsis\">{{ data().originPort }}</span>\n      </kit-pill>\n      <kit-svg-icon class=\"icon arrow\"\n                    [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"/>\n      <kit-pill class=\"route-destination-port\">\n        <span class=\"text-ellipsis\">{{ data().destinationPort }}</span>\n      </kit-pill>\n      <span>by</span>\n      <kit-pill class=\"route-mode\">\n        <span class=\"text-ellipsis\">{{ data().type }} {{ data().containerMode }}</span>\n      </kit-pill>\n    </div>\n\n    <div class=\"content-footer\">\n      <div class=\"footer-buttons\">\n        <kit-button class=\"text-ellipsis\"\n                    [ngClass]=\"{ active: timelineExpanded }\"\n                    [label]=\"data().timelineActionBtnLabel\"\n                    [type]=\"kitButtonType.LINK\"\n                    (clicked)=\"showTimeline()\"/>\n        @if (containerItems.length) {\n          <kit-button class=\"text-ellipsis\"\n                      [ngClass]=\"{ active: containersExpanded }\"\n                      [label]=\"data().containerActionBtnLabel\"\n                      [type]=\"kitButtonType.LINK\"\n                      (clicked)=\"showContainers()\"/>\n        }\n      </div>\n  \n      @if (timelineExpanded) {\n        <div class=\"card-timeline-content\">\n          @for (timelineItem of timelineItems; track $index) {\n            <div class=\"timeline-row\">\n              <div class=\"timeline-item\">\n                <div class=\"timeline-content text-ellipsis\">\n                  <span class=\"title\">{{ timelineItem.label }}: </span>\n                  {{ timelineItem.value }}\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      @if (containersExpanded) {\n        <div class=\"card-container-content\">\n          @for (containerItem of containerItems; track $index) {\n            <p class=\"container-item text-ellipsis\">\n              <span class=\"title\">{{ containerItem.value }} </span>\n              {{ containerItem.label }}\n            </p>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".kit-shipment-card{display:flex;flex-direction:column;padding:25px;color:var(--ui-kit-color-grey-10);font-weight:400;border:2px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box;background-color:var(--ui-kit-color-white);width:360px;font-size:14px;min-height:337px;line-height:20px}.kit-shipment-card.selected{border:2px solid var(--ui-kit-color-main)}.kit-shipment-card .text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-shipment-card-head{border-bottom:1px solid var(--ui-kit-color-grey-11);padding-bottom:12px;display:flex;justify-content:space-between}.kit-shipment-card-head .head-title{font-size:16px;line-height:22px}.kit-shipment-card-content{padding-top:15px;display:flex;flex-direction:column;gap:12px;justify-content:space-between;min-height:233px}.kit-shipment-card-content .content-row{display:flex;align-items:center}.kit-shipment-card-content .content-row .icon{width:24px;height:24px;margin-right:10px}.kit-shipment-card-content .content-row .icon.info{fill:var(--ui-kit-color-grey-12)}.kit-shipment-card-content .content-row .icon.ship{fill:none;stroke:var(--ui-kit-color-teal);width:26px}.kit-shipment-card-content .content-row .icon.air{fill:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.logistics{fill:none;stroke:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.arrow{fill:none;stroke:var(--ui-kit-color-grey-10);margin-right:0;width:22px}.kit-shipment-card-content .content-row .title{font-size:18px;font-weight:500;line-height:24px}.kit-shipment-card-content .content-row.route ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14)}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill .kit-pill-content,.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill span{width:100%;font-size:12px}.kit-shipment-card-content .content-row.route ::ng-deep .route-origin-port{max-width:30%}.kit-shipment-card-content .content-row.route ::ng-deep .route-origin-port .kit-pill{border:1px solid var(--ui-kit-color-orange-5);background-color:var(--ui-kit-color-orange-3);color:var(--ui-kit-color-orange-2)}.kit-shipment-card-content .content-row.route ::ng-deep .route-destination-port{margin-right:5px;max-width:30%}.kit-shipment-card-content .content-row.route ::ng-deep .route-destination-port .kit-pill{border:1px solid var(--ui-kit-color-purple-2);background-color:var(--ui-kit-color-purple-1);color:var(--ui-kit-color-purple)}.kit-shipment-card-content .content-row.route ::ng-deep .route-mode{margin-left:5px;max-width:25%}.kit-shipment-card-content .content-row.route ::ng-deep .route-mode .kit-pill{border:1px solid var(--ui-kit-color-teal-2);background-color:var(--ui-kit-color-teal-1);color:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-footer{background-color:var(--ui-kit-color-grey-13);border-radius:8px;padding:10px;min-height:105px}.kit-shipment-card-content .content-footer .footer-buttons{display:flex;justify-content:space-between;margin-bottom:12px}.kit-shipment-card-content .content-footer ::ng-deep .k-button{color:var(--ui-kit-color-grey-14);padding:0;height:auto;font-size:14px}.kit-shipment-card-content .content-footer ::ng-deep .k-button:hover{color:var(--ui-kit-color-main)}.kit-shipment-card-content .content-footer ::ng-deep .active .k-button{color:var(--ui-kit-color-main);text-decoration:underline}.kit-shipment-card .card-timeline-content .timeline-row{padding-bottom:5px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content{padding-left:30px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content:before{transform:translate(calc(-50% - 20px))}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:after{top:10px}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child{padding-bottom:0}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:after{bottom:10px;display:none}.kit-shipment-card .card-timeline-content .timeline-item{display:flex;position:relative}.kit-shipment-card .card-timeline-content .timeline-item:after,.kit-shipment-card .card-timeline-content .timeline-item:before{content:\"\";position:absolute;width:1px;background:var(--ui-kit-color-grey-12);height:calc(100% + 10px);transform:translate(10px)}.kit-shipment-card .card-timeline-content .timeline-content{position:relative;font-weight:500;color:var(--ui-kit-color-grey-19)}.kit-shipment-card .card-timeline-content .timeline-content .title{font-weight:400;color:var(--ui-kit-color-grey-10)}.kit-shipment-card .card-timeline-content .timeline-content:before{content:\"\";position:absolute;top:5px;width:10px;height:10px;border-radius:50%;background:var(--ui-kit-color-grey-12);box-sizing:border-box}.kit-shipment-card .card-container-content{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.kit-shipment-card .card-container-content .container-item{padding:0;margin:0;color:var(--ui-kit-color-grey-14);width:95%}.kit-shipment-card .card-container-content .container-item .title{font-weight:500;color:var(--ui-kit-color-grey-10);max-width:45%}.kit-shipment-card .card-container-content>*:nth-child(2n){text-align:right}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitShipmentCard, isStandalone: true, selector: "kit-shipment-card", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, headLabel: { classPropertyName: "headLabel", publicName: "headLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-shipment-card\"\n     [ngClass]=\"{ selected: selected() }\">\n  <div class=\"kit-shipment-card-head\">\n    <div class=\"head-title text-ellipsis\">{{ data().reference }}</div>\n    <div class=\"text-ellipsis\">\n      <ng-container *ngTemplateOutlet=\"headLabel()\"/>\n    </div>\n  </div>\n  <div class=\"kit-shipment-card-content\">\n    <div class=\"content-row\">\n      <kit-svg-icon class=\"icon info\"\n                    [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n      <span class=\"title text-ellipsis\">{{ data().latestRequiredByDate }}</span>\n    </div>\n\n    <div class=\"content-row\">\n      <kit-svg-icon class=\"{{ 'icon ' + shipmentModeIcon.toLowerCase() }} \"\n                    [icon]=\"shipmentModeIcon\"/>\n      <span class=\"text-ellipsis\">{{ data().vesselName }}</span>\n    </div>\n\n    <div class=\"content-row route\">\n      <kit-pill class=\"route-origin-port\">\n        <span class=\"text-ellipsis\">{{ data().originPort }}</span>\n      </kit-pill>\n      <kit-svg-icon class=\"icon arrow\"\n                    [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"/>\n      <kit-pill class=\"route-destination-port\">\n        <span class=\"text-ellipsis\">{{ data().destinationPort }}</span>\n      </kit-pill>\n      <span>by</span>\n      <kit-pill class=\"route-mode\">\n        <span class=\"text-ellipsis\">{{ data().type }} {{ data().containerMode }}</span>\n      </kit-pill>\n    </div>\n\n    <div class=\"content-footer\">\n      <div class=\"footer-buttons\">\n        <kit-button class=\"text-ellipsis\"\n                    [ngClass]=\"{ active: timelineExpanded }\"\n                    [label]=\"data().timelineActionBtnLabel\"\n                    [type]=\"kitButtonType.LINK\"\n                    (clicked)=\"showTimeline($event)\"/>\n        @if (containerItems.length) {\n          <kit-button class=\"text-ellipsis\"\n                      [ngClass]=\"{ active: containersExpanded }\"\n                      [label]=\"data().containerActionBtnLabel\"\n                      [type]=\"kitButtonType.LINK\"\n                      (clicked)=\"showContainers($event)\"/>\n        }\n      </div>\n  \n      @if (timelineExpanded) {\n        <div class=\"card-timeline-content\">\n          @for (timelineItem of timelineItems; track $index) {\n            <div class=\"timeline-row\">\n              <div class=\"timeline-item\">\n                <div class=\"timeline-content text-ellipsis\">\n                  <span class=\"title\">{{ timelineItem.label }}: </span>\n                  {{ timelineItem.value }}\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      @if (containersExpanded) {\n        <div class=\"card-container-content\">\n          @for (containerItem of containerItems; track $index) {\n            <p class=\"container-item text-ellipsis\">\n              <span class=\"title\">{{ containerItem.value }} </span>\n              {{ containerItem.label }}\n            </p>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".kit-shipment-card{display:flex;flex-direction:column;padding:25px;color:var(--ui-kit-color-grey-10);font-weight:400;border:2px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box;background-color:var(--ui-kit-color-white);width:360px;font-size:14px;min-height:337px;line-height:20px}.kit-shipment-card.selected{border:2px solid var(--ui-kit-color-main)}.kit-shipment-card .text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-shipment-card-head{border-bottom:1px solid var(--ui-kit-color-grey-11);padding-bottom:12px;display:flex;justify-content:space-between;gap:15px}.kit-shipment-card-head .head-title{font-size:16px;line-height:22px}.kit-shipment-card-content{padding-top:15px;display:flex;flex-direction:column;gap:12px;justify-content:space-between;min-height:233px}.kit-shipment-card-content .content-row{display:flex;align-items:center}.kit-shipment-card-content .content-row .icon{width:24px;height:24px;margin-right:10px}.kit-shipment-card-content .content-row .icon.info{fill:var(--ui-kit-color-grey-12)}.kit-shipment-card-content .content-row .icon.ship{fill:none;stroke:var(--ui-kit-color-teal);width:26px}.kit-shipment-card-content .content-row .icon.air{fill:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.logistics{fill:none;stroke:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.arrow{fill:none;stroke:var(--ui-kit-color-grey-10);margin-right:0;width:22px}.kit-shipment-card-content .content-row .title{font-size:18px;font-weight:500;line-height:24px}.kit-shipment-card-content .content-row.route{height:22px}.kit-shipment-card-content .content-row.route ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14)}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill .kit-pill-content,.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill span{width:100%;font-size:12px}.kit-shipment-card-content .content-row.route ::ng-deep .route-origin-port{max-width:30%}.kit-shipment-card-content .content-row.route ::ng-deep .route-origin-port .kit-pill{border:1px solid var(--ui-kit-color-orange-5);background-color:var(--ui-kit-color-orange-3);color:var(--ui-kit-color-orange-2)}.kit-shipment-card-content .content-row.route ::ng-deep .route-destination-port{margin-right:5px;max-width:30%}.kit-shipment-card-content .content-row.route ::ng-deep .route-destination-port .kit-pill{border:1px solid var(--ui-kit-color-purple-2);background-color:var(--ui-kit-color-purple-1);color:var(--ui-kit-color-purple)}.kit-shipment-card-content .content-row.route ::ng-deep .route-mode{margin-left:5px;max-width:25%}.kit-shipment-card-content .content-row.route ::ng-deep .route-mode .kit-pill{border:1px solid var(--ui-kit-color-teal-2);background-color:var(--ui-kit-color-teal-1);color:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-footer{background-color:var(--ui-kit-color-grey-13);border-radius:8px;padding:10px;min-height:105px}.kit-shipment-card-content .content-footer .footer-buttons{display:flex;justify-content:space-between;margin-bottom:12px}.kit-shipment-card-content .content-footer ::ng-deep .k-button{color:var(--ui-kit-color-grey-14);padding:0;height:auto;font-size:14px}.kit-shipment-card-content .content-footer ::ng-deep .k-button:hover{color:var(--ui-kit-color-main)}.kit-shipment-card-content .content-footer ::ng-deep .active .k-button{color:var(--ui-kit-color-main);text-decoration:underline}.kit-shipment-card .card-timeline-content .timeline-row{padding-bottom:5px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content{padding-left:30px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content:before{transform:translate(calc(-50% - 20px))}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:after{top:10px}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child{padding-bottom:0}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:after{bottom:10px;display:none}.kit-shipment-card .card-timeline-content .timeline-item{display:flex;position:relative}.kit-shipment-card .card-timeline-content .timeline-item:after,.kit-shipment-card .card-timeline-content .timeline-item:before{content:\"\";position:absolute;width:1px;background:var(--ui-kit-color-grey-12);height:calc(100% + 10px);transform:translate(10px)}.kit-shipment-card .card-timeline-content .timeline-content{position:relative;font-weight:500;color:var(--ui-kit-color-grey-19)}.kit-shipment-card .card-timeline-content .timeline-content .title{font-weight:400;color:var(--ui-kit-color-grey-10);font-size:13px}.kit-shipment-card .card-timeline-content .timeline-content:before{content:\"\";position:absolute;top:5px;width:10px;height:10px;border-radius:50%;background:var(--ui-kit-color-grey-12);box-sizing:border-box}.kit-shipment-card .card-container-content{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.kit-shipment-card .card-container-content .container-item{padding:0;margin:0;color:var(--ui-kit-color-grey-14);width:95%}.kit-shipment-card .card-container-content .container-item .title{font-weight:500;color:var(--ui-kit-color-grey-10);max-width:45%}.kit-shipment-card .card-container-content>*:nth-child(2n){text-align:right}@media screen and (max-width: 1512px){.kit-shipment-card{width:320px;min-height:320px}.kit-shipment-card-content{min-height:200px}.kit-shipment-card .content-footer{background-color:inherit;padding:0}}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitShipmentCard, decorators: [{
             type: Component,
@@ -4980,7 +4984,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         KitSvgIconModule,
                         KitPillComponent,
                         NgClass,
-                    ], template: "<div class=\"kit-shipment-card\"\n     [ngClass]=\"{ selected: selected() }\">\n  <div class=\"kit-shipment-card-head\">\n    <div class=\"head-title text-ellipsis\">{{ data().reference }}</div>\n  </div>\n  <div class=\"kit-shipment-card-content\">\n    <div class=\"content-row\">\n      <kit-svg-icon class=\"icon info\"\n                    [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n      <span class=\"title text-ellipsis\">{{ data().latestRequiredByDate }}</span>\n    </div>\n\n    <div class=\"content-row\">\n      <kit-svg-icon class=\"{{ 'icon ' + shipmentModeIcon.toLowerCase() }} \"\n                    [icon]=\"shipmentModeIcon\"/>\n      <span class=\"text-ellipsis\">{{ data().vesselName }}</span>\n    </div>\n\n    <div class=\"content-row route\">\n      <kit-pill class=\"route-origin-port\">\n        <span class=\"text-ellipsis\">{{ data().originPort }}</span>\n      </kit-pill>\n      <kit-svg-icon class=\"icon arrow\"\n                    [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"/>\n      <kit-pill class=\"route-destination-port\">\n        <span class=\"text-ellipsis\">{{ data().destinationPort }}</span>\n      </kit-pill>\n      <span>by</span>\n      <kit-pill class=\"route-mode\">\n        <span class=\"text-ellipsis\">{{ data().type }} {{ data().containerMode }}</span>\n      </kit-pill>\n    </div>\n\n    <div class=\"content-footer\">\n      <div class=\"footer-buttons\">\n        <kit-button class=\"text-ellipsis\"\n                    [ngClass]=\"{ active: timelineExpanded }\"\n                    [label]=\"data().timelineActionBtnLabel\"\n                    [type]=\"kitButtonType.LINK\"\n                    (clicked)=\"showTimeline()\"/>\n        @if (containerItems.length) {\n          <kit-button class=\"text-ellipsis\"\n                      [ngClass]=\"{ active: containersExpanded }\"\n                      [label]=\"data().containerActionBtnLabel\"\n                      [type]=\"kitButtonType.LINK\"\n                      (clicked)=\"showContainers()\"/>\n        }\n      </div>\n  \n      @if (timelineExpanded) {\n        <div class=\"card-timeline-content\">\n          @for (timelineItem of timelineItems; track $index) {\n            <div class=\"timeline-row\">\n              <div class=\"timeline-item\">\n                <div class=\"timeline-content text-ellipsis\">\n                  <span class=\"title\">{{ timelineItem.label }}: </span>\n                  {{ timelineItem.value }}\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      @if (containersExpanded) {\n        <div class=\"card-container-content\">\n          @for (containerItem of containerItems; track $index) {\n            <p class=\"container-item text-ellipsis\">\n              <span class=\"title\">{{ containerItem.value }} </span>\n              {{ containerItem.label }}\n            </p>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".kit-shipment-card{display:flex;flex-direction:column;padding:25px;color:var(--ui-kit-color-grey-10);font-weight:400;border:2px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box;background-color:var(--ui-kit-color-white);width:360px;font-size:14px;min-height:337px;line-height:20px}.kit-shipment-card.selected{border:2px solid var(--ui-kit-color-main)}.kit-shipment-card .text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-shipment-card-head{border-bottom:1px solid var(--ui-kit-color-grey-11);padding-bottom:12px;display:flex;justify-content:space-between}.kit-shipment-card-head .head-title{font-size:16px;line-height:22px}.kit-shipment-card-content{padding-top:15px;display:flex;flex-direction:column;gap:12px;justify-content:space-between;min-height:233px}.kit-shipment-card-content .content-row{display:flex;align-items:center}.kit-shipment-card-content .content-row .icon{width:24px;height:24px;margin-right:10px}.kit-shipment-card-content .content-row .icon.info{fill:var(--ui-kit-color-grey-12)}.kit-shipment-card-content .content-row .icon.ship{fill:none;stroke:var(--ui-kit-color-teal);width:26px}.kit-shipment-card-content .content-row .icon.air{fill:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.logistics{fill:none;stroke:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.arrow{fill:none;stroke:var(--ui-kit-color-grey-10);margin-right:0;width:22px}.kit-shipment-card-content .content-row .title{font-size:18px;font-weight:500;line-height:24px}.kit-shipment-card-content .content-row.route ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14)}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill .kit-pill-content,.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill span{width:100%;font-size:12px}.kit-shipment-card-content .content-row.route ::ng-deep .route-origin-port{max-width:30%}.kit-shipment-card-content .content-row.route ::ng-deep .route-origin-port .kit-pill{border:1px solid var(--ui-kit-color-orange-5);background-color:var(--ui-kit-color-orange-3);color:var(--ui-kit-color-orange-2)}.kit-shipment-card-content .content-row.route ::ng-deep .route-destination-port{margin-right:5px;max-width:30%}.kit-shipment-card-content .content-row.route ::ng-deep .route-destination-port .kit-pill{border:1px solid var(--ui-kit-color-purple-2);background-color:var(--ui-kit-color-purple-1);color:var(--ui-kit-color-purple)}.kit-shipment-card-content .content-row.route ::ng-deep .route-mode{margin-left:5px;max-width:25%}.kit-shipment-card-content .content-row.route ::ng-deep .route-mode .kit-pill{border:1px solid var(--ui-kit-color-teal-2);background-color:var(--ui-kit-color-teal-1);color:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-footer{background-color:var(--ui-kit-color-grey-13);border-radius:8px;padding:10px;min-height:105px}.kit-shipment-card-content .content-footer .footer-buttons{display:flex;justify-content:space-between;margin-bottom:12px}.kit-shipment-card-content .content-footer ::ng-deep .k-button{color:var(--ui-kit-color-grey-14);padding:0;height:auto;font-size:14px}.kit-shipment-card-content .content-footer ::ng-deep .k-button:hover{color:var(--ui-kit-color-main)}.kit-shipment-card-content .content-footer ::ng-deep .active .k-button{color:var(--ui-kit-color-main);text-decoration:underline}.kit-shipment-card .card-timeline-content .timeline-row{padding-bottom:5px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content{padding-left:30px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content:before{transform:translate(calc(-50% - 20px))}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:after{top:10px}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child{padding-bottom:0}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:after{bottom:10px;display:none}.kit-shipment-card .card-timeline-content .timeline-item{display:flex;position:relative}.kit-shipment-card .card-timeline-content .timeline-item:after,.kit-shipment-card .card-timeline-content .timeline-item:before{content:\"\";position:absolute;width:1px;background:var(--ui-kit-color-grey-12);height:calc(100% + 10px);transform:translate(10px)}.kit-shipment-card .card-timeline-content .timeline-content{position:relative;font-weight:500;color:var(--ui-kit-color-grey-19)}.kit-shipment-card .card-timeline-content .timeline-content .title{font-weight:400;color:var(--ui-kit-color-grey-10)}.kit-shipment-card .card-timeline-content .timeline-content:before{content:\"\";position:absolute;top:5px;width:10px;height:10px;border-radius:50%;background:var(--ui-kit-color-grey-12);box-sizing:border-box}.kit-shipment-card .card-container-content{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.kit-shipment-card .card-container-content .container-item{padding:0;margin:0;color:var(--ui-kit-color-grey-14);width:95%}.kit-shipment-card .card-container-content .container-item .title{font-weight:500;color:var(--ui-kit-color-grey-10);max-width:45%}.kit-shipment-card .card-container-content>*:nth-child(2n){text-align:right}\n"] }]
+                        NgTemplateOutlet,
+                    ], template: "<div class=\"kit-shipment-card\"\n     [ngClass]=\"{ selected: selected() }\">\n  <div class=\"kit-shipment-card-head\">\n    <div class=\"head-title text-ellipsis\">{{ data().reference }}</div>\n    <div class=\"text-ellipsis\">\n      <ng-container *ngTemplateOutlet=\"headLabel()\"/>\n    </div>\n  </div>\n  <div class=\"kit-shipment-card-content\">\n    <div class=\"content-row\">\n      <kit-svg-icon class=\"icon info\"\n                    [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n      <span class=\"title text-ellipsis\">{{ data().latestRequiredByDate }}</span>\n    </div>\n\n    <div class=\"content-row\">\n      <kit-svg-icon class=\"{{ 'icon ' + shipmentModeIcon.toLowerCase() }} \"\n                    [icon]=\"shipmentModeIcon\"/>\n      <span class=\"text-ellipsis\">{{ data().vesselName }}</span>\n    </div>\n\n    <div class=\"content-row route\">\n      <kit-pill class=\"route-origin-port\">\n        <span class=\"text-ellipsis\">{{ data().originPort }}</span>\n      </kit-pill>\n      <kit-svg-icon class=\"icon arrow\"\n                    [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"/>\n      <kit-pill class=\"route-destination-port\">\n        <span class=\"text-ellipsis\">{{ data().destinationPort }}</span>\n      </kit-pill>\n      <span>by</span>\n      <kit-pill class=\"route-mode\">\n        <span class=\"text-ellipsis\">{{ data().type }} {{ data().containerMode }}</span>\n      </kit-pill>\n    </div>\n\n    <div class=\"content-footer\">\n      <div class=\"footer-buttons\">\n        <kit-button class=\"text-ellipsis\"\n                    [ngClass]=\"{ active: timelineExpanded }\"\n                    [label]=\"data().timelineActionBtnLabel\"\n                    [type]=\"kitButtonType.LINK\"\n                    (clicked)=\"showTimeline($event)\"/>\n        @if (containerItems.length) {\n          <kit-button class=\"text-ellipsis\"\n                      [ngClass]=\"{ active: containersExpanded }\"\n                      [label]=\"data().containerActionBtnLabel\"\n                      [type]=\"kitButtonType.LINK\"\n                      (clicked)=\"showContainers($event)\"/>\n        }\n      </div>\n  \n      @if (timelineExpanded) {\n        <div class=\"card-timeline-content\">\n          @for (timelineItem of timelineItems; track $index) {\n            <div class=\"timeline-row\">\n              <div class=\"timeline-item\">\n                <div class=\"timeline-content text-ellipsis\">\n                  <span class=\"title\">{{ timelineItem.label }}: </span>\n                  {{ timelineItem.value }}\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      @if (containersExpanded) {\n        <div class=\"card-container-content\">\n          @for (containerItem of containerItems; track $index) {\n            <p class=\"container-item text-ellipsis\">\n              <span class=\"title\">{{ containerItem.value }} </span>\n              {{ containerItem.label }}\n            </p>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".kit-shipment-card{display:flex;flex-direction:column;padding:25px;color:var(--ui-kit-color-grey-10);font-weight:400;border:2px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box;background-color:var(--ui-kit-color-white);width:360px;font-size:14px;min-height:337px;line-height:20px}.kit-shipment-card.selected{border:2px solid var(--ui-kit-color-main)}.kit-shipment-card .text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-shipment-card-head{border-bottom:1px solid var(--ui-kit-color-grey-11);padding-bottom:12px;display:flex;justify-content:space-between;gap:15px}.kit-shipment-card-head .head-title{font-size:16px;line-height:22px}.kit-shipment-card-content{padding-top:15px;display:flex;flex-direction:column;gap:12px;justify-content:space-between;min-height:233px}.kit-shipment-card-content .content-row{display:flex;align-items:center}.kit-shipment-card-content .content-row .icon{width:24px;height:24px;margin-right:10px}.kit-shipment-card-content .content-row .icon.info{fill:var(--ui-kit-color-grey-12)}.kit-shipment-card-content .content-row .icon.ship{fill:none;stroke:var(--ui-kit-color-teal);width:26px}.kit-shipment-card-content .content-row .icon.air{fill:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.logistics{fill:none;stroke:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.arrow{fill:none;stroke:var(--ui-kit-color-grey-10);margin-right:0;width:22px}.kit-shipment-card-content .content-row .title{font-size:18px;font-weight:500;line-height:24px}.kit-shipment-card-content .content-row.route{height:22px}.kit-shipment-card-content .content-row.route ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14)}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill .kit-pill-content,.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill span{width:100%;font-size:12px}.kit-shipment-card-content .content-row.route ::ng-deep .route-origin-port{max-width:30%}.kit-shipment-card-content .content-row.route ::ng-deep .route-origin-port .kit-pill{border:1px solid var(--ui-kit-color-orange-5);background-color:var(--ui-kit-color-orange-3);color:var(--ui-kit-color-orange-2)}.kit-shipment-card-content .content-row.route ::ng-deep .route-destination-port{margin-right:5px;max-width:30%}.kit-shipment-card-content .content-row.route ::ng-deep .route-destination-port .kit-pill{border:1px solid var(--ui-kit-color-purple-2);background-color:var(--ui-kit-color-purple-1);color:var(--ui-kit-color-purple)}.kit-shipment-card-content .content-row.route ::ng-deep .route-mode{margin-left:5px;max-width:25%}.kit-shipment-card-content .content-row.route ::ng-deep .route-mode .kit-pill{border:1px solid var(--ui-kit-color-teal-2);background-color:var(--ui-kit-color-teal-1);color:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-footer{background-color:var(--ui-kit-color-grey-13);border-radius:8px;padding:10px;min-height:105px}.kit-shipment-card-content .content-footer .footer-buttons{display:flex;justify-content:space-between;margin-bottom:12px}.kit-shipment-card-content .content-footer ::ng-deep .k-button{color:var(--ui-kit-color-grey-14);padding:0;height:auto;font-size:14px}.kit-shipment-card-content .content-footer ::ng-deep .k-button:hover{color:var(--ui-kit-color-main)}.kit-shipment-card-content .content-footer ::ng-deep .active .k-button{color:var(--ui-kit-color-main);text-decoration:underline}.kit-shipment-card .card-timeline-content .timeline-row{padding-bottom:5px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content{padding-left:30px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content:before{transform:translate(calc(-50% - 20px))}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:after{top:10px}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child{padding-bottom:0}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:after{bottom:10px;display:none}.kit-shipment-card .card-timeline-content .timeline-item{display:flex;position:relative}.kit-shipment-card .card-timeline-content .timeline-item:after,.kit-shipment-card .card-timeline-content .timeline-item:before{content:\"\";position:absolute;width:1px;background:var(--ui-kit-color-grey-12);height:calc(100% + 10px);transform:translate(10px)}.kit-shipment-card .card-timeline-content .timeline-content{position:relative;font-weight:500;color:var(--ui-kit-color-grey-19)}.kit-shipment-card .card-timeline-content .timeline-content .title{font-weight:400;color:var(--ui-kit-color-grey-10);font-size:13px}.kit-shipment-card .card-timeline-content .timeline-content:before{content:\"\";position:absolute;top:5px;width:10px;height:10px;border-radius:50%;background:var(--ui-kit-color-grey-12);box-sizing:border-box}.kit-shipment-card .card-container-content{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.kit-shipment-card .card-container-content .container-item{padding:0;margin:0;color:var(--ui-kit-color-grey-14);width:95%}.kit-shipment-card .card-container-content .container-item .title{font-weight:500;color:var(--ui-kit-color-grey-10);max-width:45%}.kit-shipment-card .card-container-content>*:nth-child(2n){text-align:right}@media screen and (max-width: 1512px){.kit-shipment-card{width:320px;min-height:320px}.kit-shipment-card-content{min-height:200px}.kit-shipment-card .content-footer{background-color:inherit;padding:0}}\n"] }]
         }] });
 class KitBreadcrumbsComponent {
@@ -5166,6 +5171,8 @@ class KitGridComponent {
          */
         this.footerTitle = '';
         this.pdfOptions = {};
+        this.pagerButtonCount = 5;
+        this.pagerInfoText = 'items';
         /**
          * An action which is emitted when the page of the grid is changed
          */
@@ -5240,8 +5247,8 @@ class KitGridComponent {
     }
     getPagerSettings() {
         const pagerSettings = {
-            buttonCount: 5,
-            info: false,
+            responsive: false,
+            buttonCount: this.pagerButtonCount,
         };
         return this.pageable && pagerSettings || false;
     }
@@ -5255,11 +5262,11 @@ class KitGridComponent {
         this.expandedRows = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridComponent, isStandalone: false, selector: "kit-grid", inputs: { data: "data", gridDataBinding: "gridDataBinding", sortable: "sortable", sort: "sort", pageable: "pageable", pageSize: "pageSize", skip: "skip", loading: "loading", detailTemplateShowIf: "detailTemplateShowIf", detailTemplateExpandDisableIf: "detailTemplateExpandDisableIf", showFooter: "showFooter", footerTitle: "footerTitle", footerData: "footerData", pdfOptions: "pdfOptions" }, outputs: { pageChanged: "pageChanged", sortChanged: "sortChanged", dataStateChanged: "dataStateChanged", detailExpanded: "detailExpanded", detailCollapsed: "detailCollapsed", cellClicked: "cellClicked", excelExport: "excelExport", pdfExport: "pdfExport" }, queries: [{ propertyName: "columns", predicate: KitGridColumnComponent, isSignal: true }, { propertyName: "kitGridDetailTemplate", first: true, predicate: KitGridDetailTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "gridComponent", first: true, predicate: GridComponent, descendants: true }], ngImport: i0, template: "@if (data) {\n  <kendo-grid class=\"kit-grid\"\n              kendoGridExpandDetailsBy\n              [data]=\"data\"\n              [sortable]=\"sortable\"\n              [sort]=\"sort\"\n              [rowClass]=\"getCssRowClass\"\n              [pageable]=\"getPagerSettings()\"\n              [pageSize]=\"pageSize\"\n              [skip]=\"skip\"\n              [loading]=\"loading\"\n              [(expandedDetailKeys)]=\"expandedRows\"\n              (cellClick)=\"onCellClick($event)\"\n              (detailExpand)=\"onDetailExpand($event)\"\n              (detailCollapse)=\"onDetailCollapse($event)\"\n              (sortChange)=\"onSortChange($event)\"\n              (pageChange)=\"onPageChange($event)\"\n              (dataStateChange)=\"onDataStateChange($event)\"\n              (excelExport)=\"excelExport.emit($event)\">\n    @for (column of columns(); track column) {\n      <kendo-grid-column [field]=\"column.field\"\n                         [sortable]=\"column.sortable\"\n                         [hidden]=\"column.hidden\"\n                         [width]=\"column.width\">\n        <ng-template kendoGridHeaderTemplate>\n          <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n          ></ng-container>\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\n        @if (showFooter) {\n          <ng-template kendoGridFooterTemplate>\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n          </ng-template>\n        }\n      </kendo-grid-column>\n\n      @if (kitGridDetailTemplate) {\n        <ng-template kendoGridDetailTemplate let-dataItem\n                     [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n          <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n          ></ng-container>\n        </ng-template>\n      }\n    }\n    <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n    <kendo-grid-pdf\n      [fileName]=\"pdfOptions.fileName\"\n      [allPages]=\"pdfOptions.allPages\"\n      [paperSize]=\"pdfOptions.paperSize\"\n      [scale]=\"pdfOptions.scale\"\n      [landscape]=\"pdfOptions.landscape\"\n      [repeatHeaders]=\"true\" />\n  </kendo-grid>\n}\n\n@if (gridDataBinding) {\n  <kendo-grid class=\"kit-grid\"\n              kendoGridExpandDetailsBy\n              [kendoGridBinding]=\"gridDataBinding\"\n              [rowClass]=\"getCssRowClass\"\n              [pageable]=\"getPagerSettings()\"\n              [pageSize]=\"pageSize\"\n              [sortable]=\"sortable\"\n              [sort]=\"sort\"\n              [skip]=\"skip\"\n              [loading]=\"loading\"\n              [(expandedDetailKeys)]=\"expandedRows\"\n              (cellClick)=\"onCellClick($event)\"\n              (detailExpand)=\"onDetailExpand($event)\"\n              (detailCollapse)=\"onDetailCollapse($event)\"\n              (pageChange)=\"onPageChange($event)\"\n              (sortChange)=\"onSortChange($event)\"\n              (dataStateChange)=\"onDataStateChange($event)\"\n              (excelExport)=\"excelExport.emit($event)\">\n    @for (column of columns(); track column) {\n      <kendo-grid-column [field]=\"column.field\"\n                         [sortable]=\"column.sortable\"\n                         [hidden]=\"column.hidden\"\n                         [width]=\"column.width\">\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\n        <ng-template kendoGridHeaderTemplate>\n          <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n          ></ng-container>\n        </ng-template>\n\n        @if (showFooter) {\n          <ng-template kendoGridFooterTemplate>\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n          </ng-template>\n        }\n      </kendo-grid-column>\n\n      @if (kitGridDetailTemplate) {\n        <ng-template kendoGridDetailTemplate let-dataItem\n                     [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n          <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n          ></ng-container>\n        </ng-template>\n      }\n    }\n    <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n    <kendo-grid-pdf\n      [fileName]=\"pdfOptions.fileName\"\n      [allPages]=\"pdfOptions.allPages\"\n      [paperSize]=\"pdfOptions.paperSize\"\n      [scale]=\"pdfOptions.scale\"\n      [landscape]=\"pdfOptions.landscape\" \n      [repeatHeaders]=\"true\" />\n  </kendo-grid>\n}\n\n<ng-template #columnHeaderTemplate let-column>\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 (kitSortDirection.ASC) {\n          <kit-svg-icon class=\"grid-title-sort-icon\"\n                        [icon]=\"kitSvgIcon.SORT_ASCENDING\"\n          ></kit-svg-icon>\n        }\n        @case (kitSortDirection.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<ng-template #footerTemplate let-column>\n  @if (columns()) {\n    @if (footerTitle && column === columns()[0]) {\n      {{ footerTitle }}\n    }\n    @else {\n      {{ footerData?.[column.field] || '' }}\n    }\n  }\n</ng-template>\n", styles: [".kit-grid{border:none;background:none}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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-footer{padding:0!important}.kit-grid ::ng-deep .k-grid-content{overflow-y:auto}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar{height:8px;width:8px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-12);border-radius:4px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-18)}.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-15)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-cell-inner .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);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.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-pager{margin:20px 0;justify-content:flex-start}.kit-grid ::ng-deep .k-detail-row .k-grid-norecords{text-align:left}.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:before{content:\"\\e005\";color:var(--ui-kit-color-grey-14);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.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-numbers .k-button{width:32px;height:32px;color:inherit;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-numbers .k-button:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-numbers .k-button:after{opacity:0}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers .k-button:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-numbers .k-button.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\"}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.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", "isRowSelectable", "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$3.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "directive", type: i2$3.ExpandDetailsDirective, selector: "[kendoGridExpandDetailsBy]", inputs: ["kendoGridExpandDetailsBy", "expandDetailBy", "expandedDetailKeys", "initiallyExpanded"], outputs: ["expandedDetailKeysChange"], exportAs: ["kendoGridExpandDetailsBy"] }, { kind: "component", type: i2$3.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i2$3.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { kind: "directive", type: i2$3.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "directive", type: i2$3.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i2$3.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i2$3.ExcelComponent, selector: "kendo-grid-excel", inputs: ["fileName", "filterable", "creator", "date", "forceProxy", "proxyURL", "fetchData", "paddingCellOptions", "headerPaddingCellOptions", "collapsible"] }, { kind: "component", type: i2$3.PDFComponent, selector: "kendo-grid-pdf", inputs: ["allPages", "delay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridComponent, isStandalone: false, selector: "kit-grid", inputs: { data: "data", gridDataBinding: "gridDataBinding", sortable: "sortable", sort: "sort", pageable: "pageable", pageSize: "pageSize", skip: "skip", loading: "loading", detailTemplateShowIf: "detailTemplateShowIf", detailTemplateExpandDisableIf: "detailTemplateExpandDisableIf", showFooter: "showFooter", footerTitle: "footerTitle", footerData: "footerData", pdfOptions: "pdfOptions", pagerButtonCount: "pagerButtonCount", pagerInfoText: "pagerInfoText" }, outputs: { pageChanged: "pageChanged", sortChanged: "sortChanged", dataStateChanged: "dataStateChanged", detailExpanded: "detailExpanded", detailCollapsed: "detailCollapsed", cellClicked: "cellClicked", excelExport: "excelExport", pdfExport: "pdfExport" }, queries: [{ propertyName: "columns", predicate: KitGridColumnComponent, isSignal: true }, { propertyName: "kitGridDetailTemplate", first: true, predicate: KitGridDetailTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "gridComponent", first: true, predicate: GridComponent, descendants: true }], ngImport: i0, template: "@if (data) {\n  <kendo-grid class=\"kit-grid\"\n              kendoGridExpandDetailsBy\n              [data]=\"data\"\n              [sortable]=\"sortable\"\n              [sort]=\"sort\"\n              [rowClass]=\"getCssRowClass\"\n              [pageable]=\"getPagerSettings()\"\n              [pageSize]=\"pageSize\"\n              [skip]=\"skip\"\n              [loading]=\"loading\"\n              [(expandedDetailKeys)]=\"expandedRows\"\n              (cellClick)=\"onCellClick($event)\"\n              (detailExpand)=\"onDetailExpand($event)\"\n              (detailCollapse)=\"onDetailCollapse($event)\"\n              (sortChange)=\"onSortChange($event)\"\n              (pageChange)=\"onPageChange($event)\"\n              (dataStateChange)=\"onDataStateChange($event)\"\n              (excelExport)=\"excelExport.emit($event)\">\n    @for (column of columns(); track column) {\n      <kendo-grid-column [field]=\"column.field\"\n                         [sortable]=\"column.sortable\"\n                         [hidden]=\"column.hidden\"\n                         [width]=\"column.width\">\n        <ng-template kendoGridHeaderTemplate>\n          <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n          ></ng-container>\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\n        @if (showFooter) {\n          <ng-template kendoGridFooterTemplate>\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n          </ng-template>\n        }\n      </kendo-grid-column>\n\n      @if (kitGridDetailTemplate) {\n        <ng-template kendoGridDetailTemplate let-dataItem\n                     [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n          <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n          ></ng-container>\n        </ng-template>\n      }\n    }\n    <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n    <kendo-grid-pdf\n      [fileName]=\"pdfOptions.fileName\"\n      [allPages]=\"pdfOptions.allPages\"\n      [paperSize]=\"pdfOptions.paperSize\"\n      [scale]=\"pdfOptions.scale\"\n      [landscape]=\"pdfOptions.landscape\"\n      [repeatHeaders]=\"true\" />\n    \n    <ng-container *ngTemplateOutlet=\"pagerTemplate\"/>\n    <kendo-grid-messages [pagerItems]=\"pagerInfoText\" \n                         [pagerOf]=\"'of'\">\n    </kendo-grid-messages>\n  </kendo-grid>\n}\n\n@if (gridDataBinding) {\n  <kendo-grid class=\"kit-grid\"\n              kendoGridExpandDetailsBy\n              [kendoGridBinding]=\"gridDataBinding\"\n              [rowClass]=\"getCssRowClass\"\n              [pageable]=\"getPagerSettings()\"\n              [pageSize]=\"pageSize\"\n              [sortable]=\"sortable\"\n              [sort]=\"sort\"\n              [skip]=\"skip\"\n              [loading]=\"loading\"\n              [(expandedDetailKeys)]=\"expandedRows\"\n              (cellClick)=\"onCellClick($event)\"\n              (detailExpand)=\"onDetailExpand($event)\"\n              (detailCollapse)=\"onDetailCollapse($event)\"\n              (pageChange)=\"onPageChange($event)\"\n              (sortChange)=\"onSortChange($event)\"\n              (dataStateChange)=\"onDataStateChange($event)\"\n              (excelExport)=\"excelExport.emit($event)\">\n    @for (column of columns(); track column) {\n      <kendo-grid-column [field]=\"column.field\"\n                         [sortable]=\"column.sortable\"\n                         [hidden]=\"column.hidden\"\n                         [width]=\"column.width\">\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\n        <ng-template kendoGridHeaderTemplate>\n          <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n          ></ng-container>\n        </ng-template>\n\n        @if (showFooter) {\n          <ng-template kendoGridFooterTemplate>\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n          </ng-template>\n        }\n      </kendo-grid-column>\n\n      @if (kitGridDetailTemplate) {\n        <ng-template kendoGridDetailTemplate let-dataItem\n                     [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n          <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n          ></ng-container>\n        </ng-template>\n      }\n    }\n    <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n    <kendo-grid-pdf\n      [fileName]=\"pdfOptions.fileName\"\n      [allPages]=\"pdfOptions.allPages\"\n      [paperSize]=\"pdfOptions.paperSize\"\n      [scale]=\"pdfOptions.scale\"\n      [landscape]=\"pdfOptions.landscape\" \n      [repeatHeaders]=\"true\" />\n\n    <ng-container *ngTemplateOutlet=\"pagerTemplate\"/>\n    <kendo-grid-messages pagerOf=\"of\"\n                         [pagerItems]=\"pagerInfoText\">\n    </kendo-grid-messages>\n  </kendo-grid>\n}\n\n<ng-template #columnHeaderTemplate let-column>\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 (kitSortDirection.ASC) {\n          <kit-svg-icon class=\"grid-title-sort-icon\"\n                        [icon]=\"kitSvgIcon.SORT_ASCENDING\"\n          ></kit-svg-icon>\n        }\n        @case (kitSortDirection.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<ng-template #footerTemplate let-column>\n  @if (columns()) {\n    @if (footerTitle && column === columns()[0]) {\n      {{ footerTitle }}\n    }\n    @else {\n      {{ footerData?.[column.field] || '' }}\n    }\n  }\n</ng-template>\n\n<ng-template #pagerTemplate\n              kendoPagerTemplate\n              let-totalPages=\"totalPages\"\n              let-currentPage=\"currentPage\">\n  <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n  <kendo-pager-numeric-buttons></kendo-pager-numeric-buttons>\n  <kendo-pager-next-buttons></kendo-pager-next-buttons>\n  <kendo-pager-info></kendo-pager-info>\n</ng-template>\n", styles: [".kit-grid{border:none;background:none}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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-footer{padding:0!important}.kit-grid ::ng-deep .k-grid-content{overflow-y:auto}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar{height:8px;width:8px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-12);border-radius:4px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-18)}.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-15)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-cell-inner .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);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.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-pager{margin:20px 0;justify-content:flex-start}.kit-grid ::ng-deep .k-detail-row .k-grid-norecords{text-align:left}.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:before{content:\"\\e005\";color:var(--ui-kit-color-grey-14);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.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-numbers .k-button{width:32px;height:32px;color:inherit;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-numbers .k-button:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-numbers .k-button:after{opacity:0}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers .k-button:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager-info{flex:initial;border-radius:8px;background-color:#fff;padding:5px 16px}.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\"}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.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", "isRowSelectable", "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$3.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "component", type: i2$3.CustomMessagesComponent, selector: "kendo-grid-messages" }, { kind: "directive", type: i2$3.ExpandDetailsDirective, selector: "[kendoGridExpandDetailsBy]", inputs: ["kendoGridExpandDetailsBy", "expandDetailBy", "expandedDetailKeys", "initiallyExpanded"], outputs: ["expandedDetailKeysChange"], exportAs: ["kendoGridExpandDetailsBy"] }, { kind: "component", type: i2$3.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i2$3.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { kind: "directive", type: i2$3.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "directive", type: i2$3.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i2$3.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "component", type: i3.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i3.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i3.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i3.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i3.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i2$3.ExcelComponent, selector: "kendo-grid-excel", inputs: ["fileName", "filterable", "creator", "date", "forceProxy", "proxyURL", "fetchData", "paddingCellOptions", "headerPaddingCellOptions", "collapsible"] }, { kind: "component", type: i2$3.PDFComponent, selector: "kendo-grid-pdf", inputs: ["allPages", "delay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kit-grid', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (data) {\n  <kendo-grid class=\"kit-grid\"\n              kendoGridExpandDetailsBy\n              [data]=\"data\"\n              [sortable]=\"sortable\"\n              [sort]=\"sort\"\n              [rowClass]=\"getCssRowClass\"\n              [pageable]=\"getPagerSettings()\"\n              [pageSize]=\"pageSize\"\n              [skip]=\"skip\"\n              [loading]=\"loading\"\n              [(expandedDetailKeys)]=\"expandedRows\"\n              (cellClick)=\"onCellClick($event)\"\n              (detailExpand)=\"onDetailExpand($event)\"\n              (detailCollapse)=\"onDetailCollapse($event)\"\n              (sortChange)=\"onSortChange($event)\"\n              (pageChange)=\"onPageChange($event)\"\n              (dataStateChange)=\"onDataStateChange($event)\"\n              (excelExport)=\"excelExport.emit($event)\">\n    @for (column of columns(); track column) {\n      <kendo-grid-column [field]=\"column.field\"\n                         [sortable]=\"column.sortable\"\n                         [hidden]=\"column.hidden\"\n                         [width]=\"column.width\">\n        <ng-template kendoGridHeaderTemplate>\n          <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n          ></ng-container>\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\n        @if (showFooter) {\n          <ng-template kendoGridFooterTemplate>\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n          </ng-template>\n        }\n      </kendo-grid-column>\n\n      @if (kitGridDetailTemplate) {\n        <ng-template kendoGridDetailTemplate let-dataItem\n                     [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n          <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n          ></ng-container>\n        </ng-template>\n      }\n    }\n    <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n    <kendo-grid-pdf\n      [fileName]=\"pdfOptions.fileName\"\n      [allPages]=\"pdfOptions.allPages\"\n      [paperSize]=\"pdfOptions.paperSize\"\n      [scale]=\"pdfOptions.scale\"\n      [landscape]=\"pdfOptions.landscape\"\n      [repeatHeaders]=\"true\" />\n  </kendo-grid>\n}\n\n@if (gridDataBinding) {\n  <kendo-grid class=\"kit-grid\"\n              kendoGridExpandDetailsBy\n              [kendoGridBinding]=\"gridDataBinding\"\n              [rowClass]=\"getCssRowClass\"\n              [pageable]=\"getPagerSettings()\"\n              [pageSize]=\"pageSize\"\n              [sortable]=\"sortable\"\n              [sort]=\"sort\"\n              [skip]=\"skip\"\n              [loading]=\"loading\"\n              [(expandedDetailKeys)]=\"expandedRows\"\n              (cellClick)=\"onCellClick($event)\"\n              (detailExpand)=\"onDetailExpand($event)\"\n              (detailCollapse)=\"onDetailCollapse($event)\"\n              (pageChange)=\"onPageChange($event)\"\n              (sortChange)=\"onSortChange($event)\"\n              (dataStateChange)=\"onDataStateChange($event)\"\n              (excelExport)=\"excelExport.emit($event)\">\n    @for (column of columns(); track column) {\n      <kendo-grid-column [field]=\"column.field\"\n                         [sortable]=\"column.sortable\"\n                         [hidden]=\"column.hidden\"\n                         [width]=\"column.width\">\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\n        <ng-template kendoGridHeaderTemplate>\n          <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n          ></ng-container>\n        </ng-template>\n\n        @if (showFooter) {\n          <ng-template kendoGridFooterTemplate>\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n          </ng-template>\n        }\n      </kendo-grid-column>\n\n      @if (kitGridDetailTemplate) {\n        <ng-template kendoGridDetailTemplate let-dataItem\n                     [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n          <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n          ></ng-container>\n        </ng-template>\n      }\n    }\n    <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n    <kendo-grid-pdf\n      [fileName]=\"pdfOptions.fileName\"\n      [allPages]=\"pdfOptions.allPages\"\n      [paperSize]=\"pdfOptions.paperSize\"\n      [scale]=\"pdfOptions.scale\"\n      [landscape]=\"pdfOptions.landscape\" \n      [repeatHeaders]=\"true\" />\n  </kendo-grid>\n}\n\n<ng-template #columnHeaderTemplate let-column>\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 (kitSortDirection.ASC) {\n          <kit-svg-icon class=\"grid-title-sort-icon\"\n                        [icon]=\"kitSvgIcon.SORT_ASCENDING\"\n          ></kit-svg-icon>\n        }\n        @case (kitSortDirection.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<ng-template #footerTemplate let-column>\n  @if (columns()) {\n    @if (footerTitle && column === columns()[0]) {\n      {{ footerTitle }}\n    }\n    @else {\n      {{ footerData?.[column.field] || '' }}\n    }\n  }\n</ng-template>\n", styles: [".kit-grid{border:none;background:none}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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-footer{padding:0!important}.kit-grid ::ng-deep .k-grid-content{overflow-y:auto}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar{height:8px;width:8px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-12);border-radius:4px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-18)}.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-15)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-cell-inner .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);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.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-pager{margin:20px 0;justify-content:flex-start}.kit-grid ::ng-deep .k-detail-row .k-grid-norecords{text-align:left}.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:before{content:\"\\e005\";color:var(--ui-kit-color-grey-14);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.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-numbers .k-button{width:32px;height:32px;color:inherit;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-numbers .k-button:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-numbers .k-button:after{opacity:0}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers .k-button:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-numbers .k-button.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\"}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.3}\n"] }]
+            args: [{ selector: 'kit-grid', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (data) {\n  <kendo-grid class=\"kit-grid\"\n              kendoGridExpandDetailsBy\n              [data]=\"data\"\n              [sortable]=\"sortable\"\n              [sort]=\"sort\"\n              [rowClass]=\"getCssRowClass\"\n              [pageable]=\"getPagerSettings()\"\n              [pageSize]=\"pageSize\"\n              [skip]=\"skip\"\n              [loading]=\"loading\"\n              [(expandedDetailKeys)]=\"expandedRows\"\n              (cellClick)=\"onCellClick($event)\"\n              (detailExpand)=\"onDetailExpand($event)\"\n              (detailCollapse)=\"onDetailCollapse($event)\"\n              (sortChange)=\"onSortChange($event)\"\n              (pageChange)=\"onPageChange($event)\"\n              (dataStateChange)=\"onDataStateChange($event)\"\n              (excelExport)=\"excelExport.emit($event)\">\n    @for (column of columns(); track column) {\n      <kendo-grid-column [field]=\"column.field\"\n                         [sortable]=\"column.sortable\"\n                         [hidden]=\"column.hidden\"\n                         [width]=\"column.width\">\n        <ng-template kendoGridHeaderTemplate>\n          <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n          ></ng-container>\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\n        @if (showFooter) {\n          <ng-template kendoGridFooterTemplate>\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n          </ng-template>\n        }\n      </kendo-grid-column>\n\n      @if (kitGridDetailTemplate) {\n        <ng-template kendoGridDetailTemplate let-dataItem\n                     [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n          <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n          ></ng-container>\n        </ng-template>\n      }\n    }\n    <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n    <kendo-grid-pdf\n      [fileName]=\"pdfOptions.fileName\"\n      [allPages]=\"pdfOptions.allPages\"\n      [paperSize]=\"pdfOptions.paperSize\"\n      [scale]=\"pdfOptions.scale\"\n      [landscape]=\"pdfOptions.landscape\"\n      [repeatHeaders]=\"true\" />\n    \n    <ng-container *ngTemplateOutlet=\"pagerTemplate\"/>\n    <kendo-grid-messages [pagerItems]=\"pagerInfoText\" \n                         [pagerOf]=\"'of'\">\n    </kendo-grid-messages>\n  </kendo-grid>\n}\n\n@if (gridDataBinding) {\n  <kendo-grid class=\"kit-grid\"\n              kendoGridExpandDetailsBy\n              [kendoGridBinding]=\"gridDataBinding\"\n              [rowClass]=\"getCssRowClass\"\n              [pageable]=\"getPagerSettings()\"\n              [pageSize]=\"pageSize\"\n              [sortable]=\"sortable\"\n              [sort]=\"sort\"\n              [skip]=\"skip\"\n              [loading]=\"loading\"\n              [(expandedDetailKeys)]=\"expandedRows\"\n              (cellClick)=\"onCellClick($event)\"\n              (detailExpand)=\"onDetailExpand($event)\"\n              (detailCollapse)=\"onDetailCollapse($event)\"\n              (pageChange)=\"onPageChange($event)\"\n              (sortChange)=\"onSortChange($event)\"\n              (dataStateChange)=\"onDataStateChange($event)\"\n              (excelExport)=\"excelExport.emit($event)\">\n    @for (column of columns(); track column) {\n      <kendo-grid-column [field]=\"column.field\"\n                         [sortable]=\"column.sortable\"\n                         [hidden]=\"column.hidden\"\n                         [width]=\"column.width\">\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\n        <ng-template kendoGridHeaderTemplate>\n          <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n          ></ng-container>\n        </ng-template>\n\n        @if (showFooter) {\n          <ng-template kendoGridFooterTemplate>\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n          </ng-template>\n        }\n      </kendo-grid-column>\n\n      @if (kitGridDetailTemplate) {\n        <ng-template kendoGridDetailTemplate let-dataItem\n                     [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n          <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n          ></ng-container>\n        </ng-template>\n      }\n    }\n    <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n    <kendo-grid-pdf\n      [fileName]=\"pdfOptions.fileName\"\n      [allPages]=\"pdfOptions.allPages\"\n      [paperSize]=\"pdfOptions.paperSize\"\n      [scale]=\"pdfOptions.scale\"\n      [landscape]=\"pdfOptions.landscape\" \n      [repeatHeaders]=\"true\" />\n\n    <ng-container *ngTemplateOutlet=\"pagerTemplate\"/>\n    <kendo-grid-messages pagerOf=\"of\"\n                         [pagerItems]=\"pagerInfoText\">\n    </kendo-grid-messages>\n  </kendo-grid>\n}\n\n<ng-template #columnHeaderTemplate let-column>\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 (kitSortDirection.ASC) {\n          <kit-svg-icon class=\"grid-title-sort-icon\"\n                        [icon]=\"kitSvgIcon.SORT_ASCENDING\"\n          ></kit-svg-icon>\n        }\n        @case (kitSortDirection.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<ng-template #footerTemplate let-column>\n  @if (columns()) {\n    @if (footerTitle && column === columns()[0]) {\n      {{ footerTitle }}\n    }\n    @else {\n      {{ footerData?.[column.field] || '' }}\n    }\n  }\n</ng-template>\n\n<ng-template #pagerTemplate\n              kendoPagerTemplate\n              let-totalPages=\"totalPages\"\n              let-currentPage=\"currentPage\">\n  <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n  <kendo-pager-numeric-buttons></kendo-pager-numeric-buttons>\n  <kendo-pager-next-buttons></kendo-pager-next-buttons>\n  <kendo-pager-info></kendo-pager-info>\n</ng-template>\n", styles: [".kit-grid{border:none;background:none}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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-footer{padding:0!important}.kit-grid ::ng-deep .k-grid-content{overflow-y:auto}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar{height:8px;width:8px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-12);border-radius:4px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-18)}.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-15)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-cell-inner .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);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.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-pager{margin:20px 0;justify-content:flex-start}.kit-grid ::ng-deep .k-detail-row .k-grid-norecords{text-align:left}.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:before{content:\"\\e005\";color:var(--ui-kit-color-grey-14);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.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-numbers .k-button{width:32px;height:32px;color:inherit;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-numbers .k-button:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-numbers .k-button:after{opacity:0}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers .k-button:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager-info{flex:initial;border-radius:8px;background-color:#fff;padding:5px 16px}.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\"}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.3}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], gridDataBinding: [{
@@ -5288,6 +5295,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 type: Input
             }], pdfOptions: [{
                 type: Input
+            }], pagerButtonCount: [{
+                type: Input
+            }], pagerInfoText: [{
+                type: Input
             }], pageChanged: [{
                 type: Output
             }], sortChanged: [{