@indigina/ui-kit 1.1.614 → 1.1.616

package/fesm2022/indigina-ui-kit.mjs

@@ -9531,35 +9531,46 @@ const mapGlobalSearchResult = (store, requiredPermission, dataFetcher, categoryN
         })));
     }));
 };
-const findMatches = (obj, translatePrefix, excludedKeys = [], search, translateValueResolver) => {
-    const matches = [];
-    if (!search) {
+const findMatches = (obj, translatePrefix, searchableKeys, search, translateValueResolver) => {
+    if (!search || !searchableKeys.length || !obj || typeof obj !== 'object' || Array.isArray(obj)) {
         return [];
     }
-    const handleObject = (obj, path) => {
-        for (const [key, value,] of Object.entries(obj)) {
-            const currentPath = path ? `${path}.${key}` : key;
-            const isMatch = typeof value === 'string' &&
-                value.toLowerCase().includes(search.toLowerCase()) &&
-                !excludedKeys.includes(currentPath);
-            if (isMatch) {
-                matches.push({
-                    path: currentPath,
-                    key,
-                    value: translateValueResolver?.(key, value) ?? value,
-                    translateKey: `${translatePrefix}${currentPath}`,
-                });
-            }
-            traverse(value, currentPath);
-        }
+    const isStringArray = (value) => Array.isArray(value) && value.every(item => typeof item === 'string');
+    const isRecord = (value) => !!value && typeof value === 'object' && !Array.isArray(value);
+    const getPathKey = (path) => path.split('.').pop() || path;
+    const normalizedSearch = search.toLowerCase();
+    const getValueByPath = (value, path) => {
+        return path.split('.').reduce((current, segment) => isRecord(current) ? current[segment] : undefined, value);
     };
-    const traverse = (current, path) => {
-        if (current && typeof current === 'object' && !Array.isArray(current)) {
-            handleObject(current, path);
+    const getMatchValue = (value) => {
+        if (typeof value === 'string') {
+            return value.toLowerCase().includes(normalizedSearch)
+                ? { matchedValue: value, resolverValue: value }
+                : null;
+        }
+        if (isStringArray(value)) {
+            const matchedItems = value.filter(item => item.toLowerCase().includes(normalizedSearch));
+            if (!matchedItems.length) {
+                return null;
+            }
+            return { matchedValue: matchedItems.join(', '), resolverValue: matchedItems };
         }
+        return null;
     };
-    traverse(obj, '');
-    return matches;
+    return Array.from(new Set(searchableKeys)).reduce((matches, path) => {
+        const matchValue = getMatchValue(getValueByPath(obj, path));
+        if (!matchValue) {
+            return matches;
+        }
+        const key = getPathKey(path);
+        matches.push({
+            path,
+            key,
+            value: translateValueResolver?.(key, matchValue.resolverValue) ?? matchValue.matchedValue,
+            translateKey: `${translatePrefix}${path}`,
+        });
+        return matches;
+    }, []);
 };
 const changeFilterField = (filter, field) => ({
     ...filter,
@@ -12672,7 +12683,7 @@ class KitShipmentContainerCardComponent {
         return Math.round(volume / maximumPayload * 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitShipmentContainerCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitShipmentContainerCardComponent, isStandalone: true, selector: "kit-shipment-container-card", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: true, transformFunction: null }, isContainerActive: { classPropertyName: "isContainerActive", publicName: "isContainerActive", isSignal: true, isRequired: true, transformFunction: null }, isDetailsExpanded: { classPropertyName: "isDetailsExpanded", publicName: "isDetailsExpanded", isSignal: true, isRequired: true, transformFunction: null }, maxPayloadByContainerSizeMap: { classPropertyName: "maxPayloadByContainerSizeMap", publicName: "maxPayloadByContainerSizeMap", isSignal: true, isRequired: true, transformFunction: null }, showCartoonsField: { classPropertyName: "showCartoonsField", publicName: "showCartoonsField", isSignal: true, isRequired: false, transformFunction: null }, showGateInDateField: { classPropertyName: "showGateInDateField", publicName: "showGateInDateField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { containerSelected: "containerSelected" }, ngImport: i0, template: "<kit-expansion-panel class=\"kit-shipment-container-card\"\n                     [class.active]=\"isContainerActive()\"\n                     [toggleMode]=\"kitExpansionPanelToggleMode.BUTTON\"\n                     [expanded]=\"isDetailsExpanded()\"\n                     [hasToggleButton]=\"false\"\n                     [active]=\"isContainerActive()\"\n                     (panelClick)=\"containerSelected.emit(container().id)\">\n  <ng-template kitExpansionPanelHeaderTemplate>\n    <div class=\"card-header\">\n      <div class=\"card-header-left\">\n        <kit-radio-button [value]=\"container().id\"\n                          [checked]=\"isContainerActive()\" />\n        <div class=\"col-main\">\n          <div class=\"title\">{{ container().number }}</div>\n          <div class=\"subtitle\">\n            {{ \"kit.shipmentContainer.sealNumber\" | translate }}\n            {{ container().sealNumber || '-' }}\n          </div>\n        </div>\n        <div class=\"col-status\">\n          @if (container().state) {\n            <kit-status-label [color]=\"container().stateLabelColor ?? kitStatusLabelColor.WHITE\"\n                              [size]=\"kitStatusLabelSize.SMALL\">\n              {{ container().state }}\n            </kit-status-label>\n          }\n        </div>\n      </div>\n      <div class=\"card-header-right\">\n        <div class=\"col-size\">\n          <div class=\"field\">\n            <div class=\"field-label\">{{ \"kit.shipmentContainer.sizeMode\" | translate }}</div>\n            <div class=\"field-value\">{{ container().sizeModeValue }}</div>\n          </div>\n        </div>\n        <div class=\"col-utilisation\">\n          @let utilisation = getUtilisationProgress(container().size, container().volume);\n          <div class=\"field\"\n               kitTooltip\n               kitTooltipFilter=\".field\"\n               [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n               [title]=\"'kit.shipmentContainer.utilisationTooltip' | translate:{ value: utilisation }\">\n            <div class=\"field-label\">{{ \"kit.shipmentContainer.utilisation\" | translate }}</div>\n            <div class=\"field-value\">{{ utilisation }}%</div>\n          </div>\n          <div class=\"progress\">\n            <div class=\"progress-bar\"\n                [style.width.%]=\"getUtilisationProgress(container().size, container().volume)\"\n                [ngClass]=\"getUtilisationColor(container().size, container().volume)\"\n            ></div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n\n  <div class=\"card-details\">\n    <kit-data-field class=\"kit-shipment-container-card-data-field\"\n                    [label]=\"'kit.shipmentContainer.sizeMode' | translate\"\n                    [value]=\"container().sizeModeValue\"\n                    [tooltipText]=\"container().sizeWarning || undefined\"\n                    [state]=\"container().sizeWarningState ?? kitDataFieldState.DEFAULT\"\n                    [icon]=\"container().sizeWarning && kitSvgIcon.WARNING_CIRCLE || undefined\"\n                    [layout]=\"kitDataFieldLayout.COMPACT\"\n    ></kit-data-field>\n    <kit-data-field class=\"kit-shipment-container-card-data-field\"\n                    [label]=\"'kit.shipmentContainer.weight' | translate\"\n                    [value]=\"container().weight ? container().weight + ' ' + container().unitOfMeasure : '-'\"\n                    [layout]=\"kitDataFieldLayout.COMPACT\"\n    ></kit-data-field>\n    @if (showGateInDateField()) {\n      <kit-data-field class=\"kit-shipment-container-card-data-field\"\n                      [label]=\"'kit.shipmentContainer.gateInDate' | translate\"\n                      [value]=\"container().gateInDate | date: dateformat : 'UTC'\"\n                      [layout]=\"kitDataFieldLayout.COMPACT\"\n      ></kit-data-field>\n    }\n    <kit-data-field class=\"kit-shipment-container-card-data-field\"\n                    [label]=\"'kit.shipmentContainer.volume' | translate\"\n                    [value]=\"container().volume ? container().volume + ' ' + container().unitOfVolume : '-'\"\n                    [tooltipText]=\"container().volumeWarning || undefined\"\n                    [state]=\"container().volumeWarningState ?? kitDataFieldState.DEFAULT\"\n                    [icon]=\"container().volumeWarning && kitSvgIcon.WARNING_CIRCLE || undefined\"\n                    [layout]=\"kitDataFieldLayout.COMPACT\"\n    ></kit-data-field>\n    <kit-data-field class=\"kit-shipment-container-card-data-field\"\n                    [label]=\"'kit.shipmentContainer.shippedQty' | translate\"\n                    [value]=\"container().shippedQuantity\"\n                    [layout]=\"kitDataFieldLayout.COMPACT\"\n    ></kit-data-field>\n    @if (showCartoonsField()) {\n      <kit-data-field class=\"kit-shipment-container-card-data-field\"\n                      [label]=\"'kit.shipmentContainer.cartoons' | translate\"\n                      [value]=\"container().cartoons\"\n                      [layout]=\"kitDataFieldLayout.COMPACT\"\n      ></kit-data-field>\n    }\n  </div>\n</kit-expansion-panel>\n", styles: [".kit-shipment-container-card{display:block;container:containers-details/inline-size}.kit-shipment-container-card.active .card-header-right .field-label,.kit-shipment-container-card.active .card-header .col-main .subtitle{color:var(--ui-kit-color-grey-10)}.kit-shipment-container-card.active .card-header .progress{background:var(--ui-kit-color-grey-17)}.kit-shipment-container-card .card-header{display:flex;align-items:center;justify-content:space-between;gap:30px}.kit-shipment-container-card .card-header-left,.kit-shipment-container-card .card-header-right{display:flex;align-items:center}.kit-shipment-container-card .card-header-left .title,.kit-shipment-container-card .card-header-right .title{font-weight:500;font-size:16px;line-height:22px}.kit-shipment-container-card .card-header-left .subtitle,.kit-shipment-container-card .card-header-right .subtitle{color:var(--ui-kit-color-grey-12);font-size:13px}.kit-shipment-container-card .card-header-left .field,.kit-shipment-container-card .card-header-right .field{display:flex;flex-direction:column;gap:5px;text-align:center}.kit-shipment-container-card .card-header-left .field-label,.kit-shipment-container-card .card-header-right .field-label{color:var(--ui-kit-color-grey-12);font-size:13px}.kit-shipment-container-card .card-header-left .field-value,.kit-shipment-container-card .card-header-right .field-value{font-size:14px}.kit-shipment-container-card .card-header-left .progress,.kit-shipment-container-card .card-header-right .progress{width:100px;height:8px;border-radius:8px;background:var(--ui-kit-color-grey-11)}.kit-shipment-container-card .card-header-left .progress-bar,.kit-shipment-container-card .card-header-right .progress-bar{height:100%;width:0;border-radius:8px;transition:width .2s ease}.kit-shipment-container-card .card-header-left .progress-bar.green,.kit-shipment-container-card .card-header-right .progress-bar.green{background:var(--ui-kit-color-green-6)}.kit-shipment-container-card .card-header-left .progress-bar.amber,.kit-shipment-container-card .card-header-right .progress-bar.amber{background:var(--ui-kit-color-orange-5)}.kit-shipment-container-card .card-header-left .progress-bar.red,.kit-shipment-container-card .card-header-right .progress-bar.red{background:var(--ui-kit-color-red-1)}.kit-shipment-container-card .card-header-left{gap:20px}.kit-shipment-container-card .card-header-right{gap:30px}.kit-shipment-container-card .card-header .col-main{display:flex;flex-direction:column;gap:5px}.kit-shipment-container-card .card-header .col-meta{align-items:center;text-align:center}.kit-shipment-container-card .card-header .col-status{align-self:flex-start}.kit-shipment-container-card .card-header .col-utilisation{display:flex;align-items:center;gap:10px}.kit-shipment-container-card .card-details{display:grid}.kit-shipment-container-card-data-field:nth-child(-n+3){border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-shipment-container-card ::ng-deep .kit-expansion-panel{cursor:pointer}.kit-shipment-container-card ::ng-deep .kit-expansion-panel.active{background:var(--ui-kit-color-background)}.kit-shipment-container-card ::ng-deep .kit-expansion-panel:not(.active).default.k-expanded .kit-expansion-panel-content{margin-bottom:-1px}.kit-shipment-container-card ::ng-deep .kit-expansion-panel.default.k-expanded .kit-expansion-panel-content{padding-bottom:0}@container containers-details (min-width: 1100px){.card-details{grid-template-columns:repeat(3,1fr)}}@container containers-details (max-width: 1100px){.card-details{grid-template-columns:repeat(2,1fr)}.kit-shipment-container-card-data-field:nth-child(-n+4){border-bottom:1px solid var(--ui-kit-color-grey-11)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitRadioButtonComponent, selector: "kit-radio-button", inputs: ["items", "label", "name", "readonly", "type", "value", "checked", "icon", "disabled"], outputs: ["checkedChange", "disabledChange", "changed"] }, { kind: "component", type: KitExpansionPanelComponent, selector: "kit-expansion-panel", inputs: ["title", "disabled", "toggleMode", "expanded", "active", "hasToggleButton", "view"], outputs: ["expandedChange", "expand", "collapse", "panelClick"] }, { kind: "directive", type: KitExpansionPanelHeaderTemplateDirective, selector: "[kitExpansionPanelHeaderTemplate]" }, { kind: "component", type: KitDataFieldComponent, selector: "kit-data-field", inputs: ["label", "value", "link", "queryParams", "target", "state", "tooltipText", "icon", "iconType", "layout"] }, { kind: "component", type: KitStatusLabelComponent, selector: "kit-status-label", inputs: ["color", "size", "tooltip", "truncateText"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitShipmentContainerCardComponent, isStandalone: true, selector: "kit-shipment-container-card", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: true, transformFunction: null }, isContainerActive: { classPropertyName: "isContainerActive", publicName: "isContainerActive", isSignal: true, isRequired: true, transformFunction: null }, isDetailsExpanded: { classPropertyName: "isDetailsExpanded", publicName: "isDetailsExpanded", isSignal: true, isRequired: true, transformFunction: null }, maxPayloadByContainerSizeMap: { classPropertyName: "maxPayloadByContainerSizeMap", publicName: "maxPayloadByContainerSizeMap", isSignal: true, isRequired: true, transformFunction: null }, showCartoonsField: { classPropertyName: "showCartoonsField", publicName: "showCartoonsField", isSignal: true, isRequired: false, transformFunction: null }, showGateInDateField: { classPropertyName: "showGateInDateField", publicName: "showGateInDateField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { containerSelected: "containerSelected" }, ngImport: i0, template: "<kit-expansion-panel class=\"kit-shipment-container-card\"\n                     [class.active]=\"isContainerActive()\"\n                     [toggleMode]=\"kitExpansionPanelToggleMode.BUTTON\"\n                     [expanded]=\"isDetailsExpanded()\"\n                     [hasToggleButton]=\"false\"\n                     [active]=\"isContainerActive()\"\n                     (panelClick)=\"containerSelected.emit(container().id)\">\n  <ng-template kitExpansionPanelHeaderTemplate>\n    <div class=\"card-header\">\n      <div class=\"card-header-left\">\n        <kit-radio-button [value]=\"container().id\"\n                          [checked]=\"isContainerActive()\" />\n        <div class=\"col-main\">\n          <div class=\"title\">{{ container().number }}</div>\n          <div class=\"subtitle\">\n            {{ \"kit.shipmentContainer.sealNumber\" | translate }}\n            {{ container().sealNumber || '-' }}\n          </div>\n        </div>\n        <div class=\"col-status\">\n          @if (container().state) {\n            <kit-status-label [color]=\"container().stateLabelColor ?? kitStatusLabelColor.WHITE\"\n                              [size]=\"kitStatusLabelSize.SMALL\">\n              {{ container().state }}\n            </kit-status-label>\n          }\n        </div>\n      </div>\n      <div class=\"card-header-right\">\n        <div class=\"col-size\">\n          <div class=\"field\">\n            <div class=\"field-label\">{{ \"kit.shipmentContainer.sizeMode\" | translate }}</div>\n            <div class=\"field-value\">{{ container().sizeModeValue }}</div>\n          </div>\n        </div>\n        <div class=\"col-utilisation\">\n          @let utilisation = getUtilisationProgress(container().size, container().volume);\n          <div class=\"field\"\n               kitTooltip\n               kitTooltipFilter=\".field\"\n               [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n               [title]=\"'kit.shipmentContainer.utilisationTooltip' | translate:{ value: utilisation }\">\n            <div class=\"field-label\">{{ \"kit.shipmentContainer.utilisation\" | translate }}</div>\n            <div class=\"field-value\">{{ utilisation }}%</div>\n          </div>\n          <div class=\"progress\">\n            <div class=\"progress-bar\"\n                [style.width.%]=\"getUtilisationProgress(container().size, container().volume)\"\n                [ngClass]=\"getUtilisationColor(container().size, container().volume)\"\n            ></div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n\n  <div class=\"card-details\">\n    <kit-data-field class=\"kit-shipment-container-card-data-field\"\n                    [label]=\"'kit.shipmentContainer.sizeMode' | translate\"\n                    [value]=\"container().sizeModeValue\"\n                    [tooltipText]=\"container().sizeWarning || undefined\"\n                    [state]=\"container().sizeWarningState ?? kitDataFieldState.DEFAULT\"\n                    [icon]=\"container().sizeWarning && kitSvgIcon.WARNING_CIRCLE || undefined\"\n                    [layout]=\"kitDataFieldLayout.COMPACT\"\n    ></kit-data-field>\n    <kit-data-field class=\"kit-shipment-container-card-data-field\"\n                    [label]=\"'kit.shipmentContainer.weight' | translate\"\n                    [value]=\"container().weight ? container().weight + ' ' + container().unitOfMeasure : '-'\"\n                    [layout]=\"kitDataFieldLayout.COMPACT\"\n    ></kit-data-field>\n    @if (showGateInDateField()) {\n      <kit-data-field class=\"kit-shipment-container-card-data-field\"\n                      [label]=\"'kit.shipmentContainer.gateInDate' | translate\"\n                      [value]=\"container().gateInDate | date: dateformat : 'UTC'\"\n                      [layout]=\"kitDataFieldLayout.COMPACT\"\n      ></kit-data-field>\n    }\n    <kit-data-field class=\"kit-shipment-container-card-data-field\"\n                    [label]=\"'kit.shipmentContainer.volume' | translate\"\n                    [value]=\"container().volume ? container().volume + ' ' + container().unitOfVolume : '-'\"\n                    [tooltipText]=\"container().volumeWarning || undefined\"\n                    [state]=\"container().volumeWarningState ?? kitDataFieldState.DEFAULT\"\n                    [icon]=\"container().volumeWarning && kitSvgIcon.WARNING_CIRCLE || undefined\"\n                    [layout]=\"kitDataFieldLayout.COMPACT\"\n    ></kit-data-field>\n    <kit-data-field class=\"kit-shipment-container-card-data-field\"\n                    [label]=\"'kit.shipmentContainer.shippedQty' | translate\"\n                    [value]=\"container().shippedQuantity ? container().shippedQuantity + ' ' + container().packageType : '-'\"\n                    [layout]=\"kitDataFieldLayout.COMPACT\"\n    ></kit-data-field>\n    @if (showCartoonsField()) {\n      <kit-data-field class=\"kit-shipment-container-card-data-field\"\n                      [label]=\"'kit.shipmentContainer.cartoons' | translate\"\n                      [value]=\"container().cartoons\"\n                      [layout]=\"kitDataFieldLayout.COMPACT\"\n      ></kit-data-field>\n    }\n  </div>\n</kit-expansion-panel>\n", styles: [".kit-shipment-container-card{display:block;container:containers-details/inline-size}.kit-shipment-container-card.active .card-header-right .field-label,.kit-shipment-container-card.active .card-header .col-main .subtitle{color:var(--ui-kit-color-grey-10)}.kit-shipment-container-card.active .card-header .progress{background:var(--ui-kit-color-grey-17)}.kit-shipment-container-card .card-header{display:flex;align-items:center;justify-content:space-between;gap:30px}.kit-shipment-container-card .card-header-left,.kit-shipment-container-card .card-header-right{display:flex;align-items:center}.kit-shipment-container-card .card-header-left .title,.kit-shipment-container-card .card-header-right .title{font-weight:500;font-size:16px;line-height:22px}.kit-shipment-container-card .card-header-left .subtitle,.kit-shipment-container-card .card-header-right .subtitle{color:var(--ui-kit-color-grey-12);font-size:13px}.kit-shipment-container-card .card-header-left .field,.kit-shipment-container-card .card-header-right .field{display:flex;flex-direction:column;gap:5px;text-align:center}.kit-shipment-container-card .card-header-left .field-label,.kit-shipment-container-card .card-header-right .field-label{color:var(--ui-kit-color-grey-12);font-size:13px}.kit-shipment-container-card .card-header-left .field-value,.kit-shipment-container-card .card-header-right .field-value{font-size:14px}.kit-shipment-container-card .card-header-left .progress,.kit-shipment-container-card .card-header-right .progress{width:100px;height:8px;border-radius:8px;background:var(--ui-kit-color-grey-11)}.kit-shipment-container-card .card-header-left .progress-bar,.kit-shipment-container-card .card-header-right .progress-bar{height:100%;width:0;border-radius:8px;transition:width .2s ease}.kit-shipment-container-card .card-header-left .progress-bar.green,.kit-shipment-container-card .card-header-right .progress-bar.green{background:var(--ui-kit-color-green-6)}.kit-shipment-container-card .card-header-left .progress-bar.amber,.kit-shipment-container-card .card-header-right .progress-bar.amber{background:var(--ui-kit-color-orange-5)}.kit-shipment-container-card .card-header-left .progress-bar.red,.kit-shipment-container-card .card-header-right .progress-bar.red{background:var(--ui-kit-color-red-1)}.kit-shipment-container-card .card-header-left{gap:20px}.kit-shipment-container-card .card-header-right{gap:30px}.kit-shipment-container-card .card-header .col-main{display:flex;flex-direction:column;gap:5px}.kit-shipment-container-card .card-header .col-meta{align-items:center;text-align:center}.kit-shipment-container-card .card-header .col-status{align-self:flex-start}.kit-shipment-container-card .card-header .col-utilisation{display:flex;align-items:center;gap:10px}.kit-shipment-container-card .card-details{display:grid}.kit-shipment-container-card-data-field:nth-child(-n+3){border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-shipment-container-card ::ng-deep .kit-expansion-panel{cursor:pointer}.kit-shipment-container-card ::ng-deep .kit-expansion-panel.active{background:var(--ui-kit-color-background)}.kit-shipment-container-card ::ng-deep .kit-expansion-panel:not(.active).default.k-expanded .kit-expansion-panel-content{margin-bottom:-1px}.kit-shipment-container-card ::ng-deep .kit-expansion-panel.default.k-expanded .kit-expansion-panel-content{padding-bottom:0}@container containers-details (min-width: 1100px){.card-details{grid-template-columns:repeat(3,1fr)}}@container containers-details (max-width: 1100px){.card-details{grid-template-columns:repeat(2,1fr)}.kit-shipment-container-card-data-field:nth-child(-n+4){border-bottom:1px solid var(--ui-kit-color-grey-11)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitRadioButtonComponent, selector: "kit-radio-button", inputs: ["items", "label", "name", "readonly", "type", "value", "checked", "icon", "disabled"], outputs: ["checkedChange", "disabledChange", "changed"] }, { kind: "component", type: KitExpansionPanelComponent, selector: "kit-expansion-panel", inputs: ["title", "disabled", "toggleMode", "expanded", "active", "hasToggleButton", "view"], outputs: ["expandedChange", "expand", "collapse", "panelClick"] }, { kind: "directive", type: KitExpansionPanelHeaderTemplateDirective, selector: "[kitExpansionPanelHeaderTemplate]" }, { kind: "component", type: KitDataFieldComponent, selector: "kit-data-field", inputs: ["label", "value", "link", "queryParams", "target", "state", "tooltipText", "icon", "iconType", "layout"] }, { kind: "component", type: KitStatusLabelComponent, selector: "kit-status-label", inputs: ["color", "size", "tooltip", "truncateText"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitShipmentContainerCardComponent, decorators: [{
             type: Component,
@@ -12686,7 +12697,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         KitDataFieldComponent,
                         KitStatusLabelComponent,
                         KitTooltipDirective,
-                    ], template: "<kit-expansion-panel class=\"kit-shipment-container-card\"\n                     [class.active]=\"isContainerActive()\"\n                     [toggleMode]=\"kitExpansionPanelToggleMode.BUTTON\"\n                     [expanded]=\"isDetailsExpanded()\"\n                     [hasToggleButton]=\"false\"\n                     [active]=\"isContainerActive()\"\n                     (panelClick)=\"containerSelected.emit(container().id)\">\n  <ng-template kitExpansionPanelHeaderTemplate>\n    <div class=\"card-header\">\n      <div class=\"card-header-left\">\n        <kit-radio-button [value]=\"container().id\"\n                          [checked]=\"isContainerActive()\" />\n        <div class=\"col-main\">\n          <div class=\"title\">{{ container().number }}</div>\n          <div class=\"subtitle\">\n            {{ \"kit.shipmentContainer.sealNumber\" | translate }}\n            {{ container().sealNumber || '-' }}\n          </div>\n        </div>\n        <div class=\"col-status\">\n          @if (container().state) {\n            <kit-status-label [color]=\"container().stateLabelColor ?? kitStatusLabelColor.WHITE\"\n                              [size]=\"kitStatusLabelSize.SMALL\">\n              {{ container().state }}\n            </kit-status-label>\n          }\n        </div>\n      </div>\n      <div class=\"card-header-right\">\n        <div class=\"col-size\">\n          <div class=\"field\">\n            <div class=\"field-label\">{{ \"kit.shipmentContainer.sizeMode\" | translate }}</div>\n            <div class=\"field-value\">{{ container().sizeModeValue }}</div>\n          </div>\n        </div>\n        <div class=\"col-utilisation\">\n          @let utilisation = getUtilisationProgress(container().size, container().volume);\n          <div class=\"field\"\n               kitTooltip\n               kitTooltipFilter=\".field\"\n               [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n               [title]=\"'kit.shipmentContainer.utilisationTooltip' | translate:{ value: utilisation }\">\n            <div class=\"field-label\">{{ \"kit.shipmentContainer.utilisation\" | translate }}</div>\n            <div class=\"field-value\">{{ utilisation }}%</div>\n          </div>\n          <div class=\"progress\">\n            <div class=\"progress-bar\"\n                [style.width.%]=\"getUtilisationProgress(container().size, container().volume)\"\n                [ngClass]=\"getUtilisationColor(container().size, container().volume)\"\n            ></div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n\n  <div class=\"card-details\">\n    <kit-data-field class=\"kit-shipment-container-card-data-field\"\n                    [label]=\"'kit.shipmentContainer.sizeMode' | translate\"\n                    [value]=\"container().sizeModeValue\"\n                    [tooltipText]=\"container().sizeWarning || undefined\"\n                    [state]=\"container().sizeWarningState ?? kitDataFieldState.DEFAULT\"\n                    [icon]=\"container().sizeWarning && kitSvgIcon.WARNING_CIRCLE || undefined\"\n                    [layout]=\"kitDataFieldLayout.COMPACT\"\n    ></kit-data-field>\n    <kit-data-field class=\"kit-shipment-container-card-data-field\"\n                    [label]=\"'kit.shipmentContainer.weight' | translate\"\n                    [value]=\"container().weight ? container().weight + ' ' + container().unitOfMeasure : '-'\"\n                    [layout]=\"kitDataFieldLayout.COMPACT\"\n    ></kit-data-field>\n    @if (showGateInDateField()) {\n      <kit-data-field class=\"kit-shipment-container-card-data-field\"\n                      [label]=\"'kit.shipmentContainer.gateInDate' | translate\"\n                      [value]=\"container().gateInDate | date: dateformat : 'UTC'\"\n                      [layout]=\"kitDataFieldLayout.COMPACT\"\n      ></kit-data-field>\n    }\n    <kit-data-field class=\"kit-shipment-container-card-data-field\"\n                    [label]=\"'kit.shipmentContainer.volume' | translate\"\n                    [value]=\"container().volume ? container().volume + ' ' + container().unitOfVolume : '-'\"\n                    [tooltipText]=\"container().volumeWarning || undefined\"\n                    [state]=\"container().volumeWarningState ?? kitDataFieldState.DEFAULT\"\n                    [icon]=\"container().volumeWarning && kitSvgIcon.WARNING_CIRCLE || undefined\"\n                    [layout]=\"kitDataFieldLayout.COMPACT\"\n    ></kit-data-field>\n    <kit-data-field class=\"kit-shipment-container-card-data-field\"\n                    [label]=\"'kit.shipmentContainer.shippedQty' | translate\"\n                    [value]=\"container().shippedQuantity\"\n                    [layout]=\"kitDataFieldLayout.COMPACT\"\n    ></kit-data-field>\n    @if (showCartoonsField()) {\n      <kit-data-field class=\"kit-shipment-container-card-data-field\"\n                      [label]=\"'kit.shipmentContainer.cartoons' | translate\"\n                      [value]=\"container().cartoons\"\n                      [layout]=\"kitDataFieldLayout.COMPACT\"\n      ></kit-data-field>\n    }\n  </div>\n</kit-expansion-panel>\n", styles: [".kit-shipment-container-card{display:block;container:containers-details/inline-size}.kit-shipment-container-card.active .card-header-right .field-label,.kit-shipment-container-card.active .card-header .col-main .subtitle{color:var(--ui-kit-color-grey-10)}.kit-shipment-container-card.active .card-header .progress{background:var(--ui-kit-color-grey-17)}.kit-shipment-container-card .card-header{display:flex;align-items:center;justify-content:space-between;gap:30px}.kit-shipment-container-card .card-header-left,.kit-shipment-container-card .card-header-right{display:flex;align-items:center}.kit-shipment-container-card .card-header-left .title,.kit-shipment-container-card .card-header-right .title{font-weight:500;font-size:16px;line-height:22px}.kit-shipment-container-card .card-header-left .subtitle,.kit-shipment-container-card .card-header-right .subtitle{color:var(--ui-kit-color-grey-12);font-size:13px}.kit-shipment-container-card .card-header-left .field,.kit-shipment-container-card .card-header-right .field{display:flex;flex-direction:column;gap:5px;text-align:center}.kit-shipment-container-card .card-header-left .field-label,.kit-shipment-container-card .card-header-right .field-label{color:var(--ui-kit-color-grey-12);font-size:13px}.kit-shipment-container-card .card-header-left .field-value,.kit-shipment-container-card .card-header-right .field-value{font-size:14px}.kit-shipment-container-card .card-header-left .progress,.kit-shipment-container-card .card-header-right .progress{width:100px;height:8px;border-radius:8px;background:var(--ui-kit-color-grey-11)}.kit-shipment-container-card .card-header-left .progress-bar,.kit-shipment-container-card .card-header-right .progress-bar{height:100%;width:0;border-radius:8px;transition:width .2s ease}.kit-shipment-container-card .card-header-left .progress-bar.green,.kit-shipment-container-card .card-header-right .progress-bar.green{background:var(--ui-kit-color-green-6)}.kit-shipment-container-card .card-header-left .progress-bar.amber,.kit-shipment-container-card .card-header-right .progress-bar.amber{background:var(--ui-kit-color-orange-5)}.kit-shipment-container-card .card-header-left .progress-bar.red,.kit-shipment-container-card .card-header-right .progress-bar.red{background:var(--ui-kit-color-red-1)}.kit-shipment-container-card .card-header-left{gap:20px}.kit-shipment-container-card .card-header-right{gap:30px}.kit-shipment-container-card .card-header .col-main{display:flex;flex-direction:column;gap:5px}.kit-shipment-container-card .card-header .col-meta{align-items:center;text-align:center}.kit-shipment-container-card .card-header .col-status{align-self:flex-start}.kit-shipment-container-card .card-header .col-utilisation{display:flex;align-items:center;gap:10px}.kit-shipment-container-card .card-details{display:grid}.kit-shipment-container-card-data-field:nth-child(-n+3){border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-shipment-container-card ::ng-deep .kit-expansion-panel{cursor:pointer}.kit-shipment-container-card ::ng-deep .kit-expansion-panel.active{background:var(--ui-kit-color-background)}.kit-shipment-container-card ::ng-deep .kit-expansion-panel:not(.active).default.k-expanded .kit-expansion-panel-content{margin-bottom:-1px}.kit-shipment-container-card ::ng-deep .kit-expansion-panel.default.k-expanded .kit-expansion-panel-content{padding-bottom:0}@container containers-details (min-width: 1100px){.card-details{grid-template-columns:repeat(3,1fr)}}@container containers-details (max-width: 1100px){.card-details{grid-template-columns:repeat(2,1fr)}.kit-shipment-container-card-data-field:nth-child(-n+4){border-bottom:1px solid var(--ui-kit-color-grey-11)}}\n"] }]
+                    ], template: "<kit-expansion-panel class=\"kit-shipment-container-card\"\n                     [class.active]=\"isContainerActive()\"\n                     [toggleMode]=\"kitExpansionPanelToggleMode.BUTTON\"\n                     [expanded]=\"isDetailsExpanded()\"\n                     [hasToggleButton]=\"false\"\n                     [active]=\"isContainerActive()\"\n                     (panelClick)=\"containerSelected.emit(container().id)\">\n  <ng-template kitExpansionPanelHeaderTemplate>\n    <div class=\"card-header\">\n      <div class=\"card-header-left\">\n        <kit-radio-button [value]=\"container().id\"\n                          [checked]=\"isContainerActive()\" />\n        <div class=\"col-main\">\n          <div class=\"title\">{{ container().number }}</div>\n          <div class=\"subtitle\">\n            {{ \"kit.shipmentContainer.sealNumber\" | translate }}\n            {{ container().sealNumber || '-' }}\n          </div>\n        </div>\n        <div class=\"col-status\">\n          @if (container().state) {\n            <kit-status-label [color]=\"container().stateLabelColor ?? kitStatusLabelColor.WHITE\"\n                              [size]=\"kitStatusLabelSize.SMALL\">\n              {{ container().state }}\n            </kit-status-label>\n          }\n        </div>\n      </div>\n      <div class=\"card-header-right\">\n        <div class=\"col-size\">\n          <div class=\"field\">\n            <div class=\"field-label\">{{ \"kit.shipmentContainer.sizeMode\" | translate }}</div>\n            <div class=\"field-value\">{{ container().sizeModeValue }}</div>\n          </div>\n        </div>\n        <div class=\"col-utilisation\">\n          @let utilisation = getUtilisationProgress(container().size, container().volume);\n          <div class=\"field\"\n               kitTooltip\n               kitTooltipFilter=\".field\"\n               [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n               [title]=\"'kit.shipmentContainer.utilisationTooltip' | translate:{ value: utilisation }\">\n            <div class=\"field-label\">{{ \"kit.shipmentContainer.utilisation\" | translate }}</div>\n            <div class=\"field-value\">{{ utilisation }}%</div>\n          </div>\n          <div class=\"progress\">\n            <div class=\"progress-bar\"\n                [style.width.%]=\"getUtilisationProgress(container().size, container().volume)\"\n                [ngClass]=\"getUtilisationColor(container().size, container().volume)\"\n            ></div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n\n  <div class=\"card-details\">\n    <kit-data-field class=\"kit-shipment-container-card-data-field\"\n                    [label]=\"'kit.shipmentContainer.sizeMode' | translate\"\n                    [value]=\"container().sizeModeValue\"\n                    [tooltipText]=\"container().sizeWarning || undefined\"\n                    [state]=\"container().sizeWarningState ?? kitDataFieldState.DEFAULT\"\n                    [icon]=\"container().sizeWarning && kitSvgIcon.WARNING_CIRCLE || undefined\"\n                    [layout]=\"kitDataFieldLayout.COMPACT\"\n    ></kit-data-field>\n    <kit-data-field class=\"kit-shipment-container-card-data-field\"\n                    [label]=\"'kit.shipmentContainer.weight' | translate\"\n                    [value]=\"container().weight ? container().weight + ' ' + container().unitOfMeasure : '-'\"\n                    [layout]=\"kitDataFieldLayout.COMPACT\"\n    ></kit-data-field>\n    @if (showGateInDateField()) {\n      <kit-data-field class=\"kit-shipment-container-card-data-field\"\n                      [label]=\"'kit.shipmentContainer.gateInDate' | translate\"\n                      [value]=\"container().gateInDate | date: dateformat : 'UTC'\"\n                      [layout]=\"kitDataFieldLayout.COMPACT\"\n      ></kit-data-field>\n    }\n    <kit-data-field class=\"kit-shipment-container-card-data-field\"\n                    [label]=\"'kit.shipmentContainer.volume' | translate\"\n                    [value]=\"container().volume ? container().volume + ' ' + container().unitOfVolume : '-'\"\n                    [tooltipText]=\"container().volumeWarning || undefined\"\n                    [state]=\"container().volumeWarningState ?? kitDataFieldState.DEFAULT\"\n                    [icon]=\"container().volumeWarning && kitSvgIcon.WARNING_CIRCLE || undefined\"\n                    [layout]=\"kitDataFieldLayout.COMPACT\"\n    ></kit-data-field>\n    <kit-data-field class=\"kit-shipment-container-card-data-field\"\n                    [label]=\"'kit.shipmentContainer.shippedQty' | translate\"\n                    [value]=\"container().shippedQuantity ? container().shippedQuantity + ' ' + container().packageType : '-'\"\n                    [layout]=\"kitDataFieldLayout.COMPACT\"\n    ></kit-data-field>\n    @if (showCartoonsField()) {\n      <kit-data-field class=\"kit-shipment-container-card-data-field\"\n                      [label]=\"'kit.shipmentContainer.cartoons' | translate\"\n                      [value]=\"container().cartoons\"\n                      [layout]=\"kitDataFieldLayout.COMPACT\"\n      ></kit-data-field>\n    }\n  </div>\n</kit-expansion-panel>\n", styles: [".kit-shipment-container-card{display:block;container:containers-details/inline-size}.kit-shipment-container-card.active .card-header-right .field-label,.kit-shipment-container-card.active .card-header .col-main .subtitle{color:var(--ui-kit-color-grey-10)}.kit-shipment-container-card.active .card-header .progress{background:var(--ui-kit-color-grey-17)}.kit-shipment-container-card .card-header{display:flex;align-items:center;justify-content:space-between;gap:30px}.kit-shipment-container-card .card-header-left,.kit-shipment-container-card .card-header-right{display:flex;align-items:center}.kit-shipment-container-card .card-header-left .title,.kit-shipment-container-card .card-header-right .title{font-weight:500;font-size:16px;line-height:22px}.kit-shipment-container-card .card-header-left .subtitle,.kit-shipment-container-card .card-header-right .subtitle{color:var(--ui-kit-color-grey-12);font-size:13px}.kit-shipment-container-card .card-header-left .field,.kit-shipment-container-card .card-header-right .field{display:flex;flex-direction:column;gap:5px;text-align:center}.kit-shipment-container-card .card-header-left .field-label,.kit-shipment-container-card .card-header-right .field-label{color:var(--ui-kit-color-grey-12);font-size:13px}.kit-shipment-container-card .card-header-left .field-value,.kit-shipment-container-card .card-header-right .field-value{font-size:14px}.kit-shipment-container-card .card-header-left .progress,.kit-shipment-container-card .card-header-right .progress{width:100px;height:8px;border-radius:8px;background:var(--ui-kit-color-grey-11)}.kit-shipment-container-card .card-header-left .progress-bar,.kit-shipment-container-card .card-header-right .progress-bar{height:100%;width:0;border-radius:8px;transition:width .2s ease}.kit-shipment-container-card .card-header-left .progress-bar.green,.kit-shipment-container-card .card-header-right .progress-bar.green{background:var(--ui-kit-color-green-6)}.kit-shipment-container-card .card-header-left .progress-bar.amber,.kit-shipment-container-card .card-header-right .progress-bar.amber{background:var(--ui-kit-color-orange-5)}.kit-shipment-container-card .card-header-left .progress-bar.red,.kit-shipment-container-card .card-header-right .progress-bar.red{background:var(--ui-kit-color-red-1)}.kit-shipment-container-card .card-header-left{gap:20px}.kit-shipment-container-card .card-header-right{gap:30px}.kit-shipment-container-card .card-header .col-main{display:flex;flex-direction:column;gap:5px}.kit-shipment-container-card .card-header .col-meta{align-items:center;text-align:center}.kit-shipment-container-card .card-header .col-status{align-self:flex-start}.kit-shipment-container-card .card-header .col-utilisation{display:flex;align-items:center;gap:10px}.kit-shipment-container-card .card-details{display:grid}.kit-shipment-container-card-data-field:nth-child(-n+3){border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-shipment-container-card ::ng-deep .kit-expansion-panel{cursor:pointer}.kit-shipment-container-card ::ng-deep .kit-expansion-panel.active{background:var(--ui-kit-color-background)}.kit-shipment-container-card ::ng-deep .kit-expansion-panel:not(.active).default.k-expanded .kit-expansion-panel-content{margin-bottom:-1px}.kit-shipment-container-card ::ng-deep .kit-expansion-panel.default.k-expanded .kit-expansion-panel-content{padding-bottom:0}@container containers-details (min-width: 1100px){.card-details{grid-template-columns:repeat(3,1fr)}}@container containers-details (max-width: 1100px){.card-details{grid-template-columns:repeat(2,1fr)}.kit-shipment-container-card-data-field:nth-child(-n+4){border-bottom:1px solid var(--ui-kit-color-grey-11)}}\n"] }]
         }], propDecorators: { container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: true }] }], isContainerActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isContainerActive", required: true }] }], isDetailsExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDetailsExpanded", required: true }] }], maxPayloadByContainerSizeMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPayloadByContainerSizeMap", required: true }] }], showCartoonsField: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCartoonsField", required: false }] }], showGateInDateField: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGateInDateField", required: false }] }], containerSelected: [{ type: i0.Output, args: ["containerSelected"] }] } });
 
 var KitLanguage;