@indigina/ui-kit 1.1.616 → 1.1.618
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.
|
@@ -9322,6 +9322,7 @@ class KitGlobalSearchComponent {
|
|
|
9322
9322
|
this.showPrompts.set(true);
|
|
9323
9323
|
this.selectedFilters$.next([]);
|
|
9324
9324
|
this.popup()?.close();
|
|
9325
|
+
this.textbox().blur();
|
|
9325
9326
|
requestAnimationFrame(() => {
|
|
9326
9327
|
this.isClearing = false;
|
|
9327
9328
|
});
|
|
@@ -12683,7 +12684,7 @@ class KitShipmentContainerCardComponent {
|
|
|
12683
12684
|
return Math.round(volume / maximumPayload * 100);
|
|
12684
12685
|
}
|
|
12685
12686
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitShipmentContainerCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12686
|
-
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 }); }
|
|
12687
|
+
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 @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.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 <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.weight' | translate\"\n [value]=\"container().weight ? container().weight + ' ' + container().unitOfMeasure : '-'\"\n [layout]=\"kitDataFieldLayout.COMPACT\"\n ></kit-data-field>\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 }); }
|
|
12687
12688
|
}
|
|
12688
12689
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitShipmentContainerCardComponent, decorators: [{
|
|
12689
12690
|
type: Component,
|
|
@@ -12697,7 +12698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
12697
12698
|
KitDataFieldComponent,
|
|
12698
12699
|
KitStatusLabelComponent,
|
|
12699
12700
|
KitTooltipDirective,
|
|
12700
|
-
], 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.
|
|
12701
|
+
], 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 @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.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 <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.weight' | translate\"\n [value]=\"container().weight ? container().weight + ' ' + container().unitOfMeasure : '-'\"\n [layout]=\"kitDataFieldLayout.COMPACT\"\n ></kit-data-field>\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"] }]
|
|
12701
12702
|
}], 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"] }] } });
|
|
12702
12703
|
|
|
12703
12704
|
var KitLanguage;
|