@indigina/ui-kit 1.1.617 → 1.1.619
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.
|
@@ -12684,7 +12684,7 @@ class KitShipmentContainerCardComponent {
|
|
|
12684
12684
|
return Math.round(volume / maximumPayload * 100);
|
|
12685
12685
|
}
|
|
12686
12686
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitShipmentContainerCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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 <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 }); }
|
|
12688
12688
|
}
|
|
12689
12689
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitShipmentContainerCardComponent, decorators: [{
|
|
12690
12690
|
type: Component,
|
|
@@ -12698,7 +12698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
12698
12698
|
KitDataFieldComponent,
|
|
12699
12699
|
KitStatusLabelComponent,
|
|
12700
12700
|
KitTooltipDirective,
|
|
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 <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"] }]
|
|
12702
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"] }] } });
|
|
12703
12703
|
|
|
12704
12704
|
var KitLanguage;
|
|
@@ -15294,13 +15294,6 @@ class KitFilterCheckboxComponent {
|
|
|
15294
15294
|
});
|
|
15295
15295
|
return Array.from(uniqueTitles);
|
|
15296
15296
|
}
|
|
15297
|
-
get isContentOverflowing() {
|
|
15298
|
-
const element = this.popupContent()?.nativeElement;
|
|
15299
|
-
if (element) {
|
|
15300
|
-
return element.scrollHeight > element.clientHeight;
|
|
15301
|
-
}
|
|
15302
|
-
return false;
|
|
15303
|
-
}
|
|
15304
15297
|
constructor() {
|
|
15305
15298
|
this.translateService = inject(TranslateService);
|
|
15306
15299
|
this.filter = input.required(/* @ts-ignore */
|
|
@@ -15316,10 +15309,12 @@ class KitFilterCheckboxComponent {
|
|
|
15316
15309
|
this.filterRemoved = output();
|
|
15317
15310
|
this.filterChanged = output();
|
|
15318
15311
|
this.anchor = viewChild.required('toggleButton', { ...(ngDevMode ? { debugName: "anchor" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
15319
|
-
this.
|
|
15312
|
+
this.filterItems = viewChild('filterItems', { ...(ngDevMode ? { debugName: "filterItems" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
15320
15313
|
this.popup = viewChild('popup', { ...(ngDevMode ? { debugName: "popup" } : /* istanbul ignore next */ {}), read: KitPopupComponent });
|
|
15321
15314
|
this.allSelected = signal(false, /* @ts-ignore */
|
|
15322
15315
|
...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
|
|
15316
|
+
this.isContentOverflowing = signal(false, /* @ts-ignore */
|
|
15317
|
+
...(ngDevMode ? [{ debugName: "isContentOverflowing" }] : /* istanbul ignore next */ []));
|
|
15323
15318
|
this.searchTerm = signal('', /* @ts-ignore */
|
|
15324
15319
|
...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
|
|
15325
15320
|
this.selectedValues = signal([], /* @ts-ignore */
|
|
@@ -15355,6 +15350,7 @@ class KitFilterCheckboxComponent {
|
|
|
15355
15350
|
this.kitTextboxSize = KitTextboxSize;
|
|
15356
15351
|
this.popupToggleRafId = null;
|
|
15357
15352
|
effect(() => this.allSelected.set(this.groupedItems().every(item => item.checked)));
|
|
15353
|
+
effect(() => this.updateOverflowState());
|
|
15358
15354
|
}
|
|
15359
15355
|
ngOnInit() {
|
|
15360
15356
|
this.initializeSelectedValues();
|
|
@@ -15496,8 +15492,12 @@ class KitFilterCheckboxComponent {
|
|
|
15496
15492
|
this.onPopupToggle();
|
|
15497
15493
|
});
|
|
15498
15494
|
}
|
|
15495
|
+
updateOverflowState() {
|
|
15496
|
+
const element = this.filterItems()?.nativeElement;
|
|
15497
|
+
this.isContentOverflowing.set(!!element && element.scrollHeight > element.clientHeight);
|
|
15498
|
+
}
|
|
15499
15499
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15500
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitFilterCheckboxComponent, isStandalone: true, selector: "kit-filter-checkbox", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, translateKeyPrefix: { classPropertyName: "translateKeyPrefix", publicName: "translateKeyPrefix", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", isSignal: true, isRequired: false, transformFunction: null }, guidField: { classPropertyName: "guidField", publicName: "guidField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "
|
|
15500
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitFilterCheckboxComponent, isStandalone: true, selector: "kit-filter-checkbox", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, translateKeyPrefix: { classPropertyName: "translateKeyPrefix", publicName: "translateKeyPrefix", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", isSignal: true, isRequired: false, transformFunction: null }, guidField: { classPropertyName: "guidField", publicName: "guidField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "filterItems", first: true, predicate: ["filterItems"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-filter-checkbox\">\n <kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly && (filter().removable ?? true)\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (allSelected()) {\n <div class=\"kit-filter-checkbox-tooltip\"\n kitTooltip\n kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n [kitTooltipTemplateRef]=\"tooltipTemplate\">\n {{ 'kit.filters.all' | translate }}\n </div>\n } @else if (displayedValues.length > 1) {\n <div class=\"kit-filter-checkbox-tooltip\"\n kitTooltip\n kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n [kitTooltipTemplateRef]=\"tooltipTemplate\">\n <span class=\"kit-filter-checkbox-single-item\">{{ displayedValues[0] }}</span>\n <span class=\"kit-filter-checkbox-tooltip-count\">+{{ displayedValues.length - 1 }}</span>\n </div>\n } @else {\n <span class=\"kit-filter-checkbox-single-item\">{{ displayedValues[0] ?? '' }}</span>\n }\n </kit-pill>\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-filter-checkbox-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [closePopupOnCancel]=\"false\"\n (applyAction)=\"applyFilter()\"\n (cancelAction)=\"clearAllFilters()\"\n (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <div class=\"filter-search\"\n [hidden]=\"!isContentOverflowing() && !searchTerm()\">\n <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n [size]=\"kitTextboxSize.SMALL\"\n [defaultValue]=\"searchTerm()\"\n (changed)=\"searchTerm.set($event)\"\n ></kit-textbox>\n </div>\n\n <div #filterItems\n class=\"filter-items\">\n @if (!searchTerm()) {\n <kit-checkbox class=\"checkbox-item\"\n [label]=\"'kit.filters.all' | translate\"\n [(ngModel)]=\"allSelected\"\n (changed)=\"toggleAll($event)\">\n </kit-checkbox>\n }\n\n @for (item of visibleItems(); track $index) {\n <kit-checkbox class=\"checkbox-item\"\n [label]=\"buildTranslateKey(item.title) | translate\"\n [(ngModel)]=\"item.checked\"\n (changed)=\"onChange($event, item.value)\"\n ></kit-checkbox>\n }\n\n @if (!visibleItems().length) {\n {{ ('kit.filters.noDataFound' | translate) }}\n }\n </div>\n </div>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n @for (item of (displayedValues.length > 1 && !allSelected() ? displayedValues.slice(1) : displayedValues); track item) {\n <div class=\"kit-filter-checkbox-tooltip-item\">{{ item }}</div>\n }\n</ng-template>\n", styles: [".kit-filter-checkbox-tooltip{display:flex;align-items:center;gap:3px}.kit-filter-checkbox-tooltip-count{color:var(--ui-kit-color-main)}.kit-filter-checkbox-tooltip-item{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500;line-height:20px}.kit-filter-checkbox-single-item{display:block;max-width:180px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}::ng-deep .kit-filter-checkbox-popup .popup-content{width:172px}::ng-deep .kit-filter-checkbox-popup .filter-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-filter-checkbox-popup .filter-items{padding-left:2px;max-height:400px;overflow-y:auto}::ng-deep .kit-filter-checkbox-popup .filter-items::-webkit-scrollbar{width:4px;height:4px}::ng-deep .kit-filter-checkbox-popup .filter-items::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}::ng-deep .kit-filter-checkbox-popup .filter-items::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-10)}::ng-deep .kit-filter-checkbox-popup .checkbox-item{display:block;padding:6px 0}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText", "indeterminate"], outputs: ["changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
15501
15501
|
}
|
|
15502
15502
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterCheckboxComponent, decorators: [{
|
|
15503
15503
|
type: Component,
|
|
@@ -15509,8 +15509,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
15509
15509
|
FormsModule,
|
|
15510
15510
|
KitPopupComponent,
|
|
15511
15511
|
KitTextboxComponent,
|
|
15512
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-checkbox\">\n <kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly && (filter().removable ?? true)\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (allSelected()) {\n <div class=\"kit-filter-checkbox-tooltip\"\n kitTooltip\n kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n [kitTooltipTemplateRef]=\"tooltipTemplate\">\n {{ 'kit.filters.all' | translate }}\n </div>\n } @else if (displayedValues.length > 1) {\n <div class=\"kit-filter-checkbox-tooltip\"\n kitTooltip\n kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n [kitTooltipTemplateRef]=\"tooltipTemplate\">\n <span class=\"kit-filter-checkbox-single-item\">{{ displayedValues[0] }}</span>\n <span class=\"kit-filter-checkbox-tooltip-count\">+{{ displayedValues.length - 1 }}</span>\n </div>\n } @else {\n <span class=\"kit-filter-checkbox-single-item\">{{ displayedValues[0] ?? '' }}</span>\n }\n </kit-pill>\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-filter-checkbox-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [closePopupOnCancel]=\"false\"\n (applyAction)=\"applyFilter()\"\n (cancelAction)=\"clearAllFilters()\"\n (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-search\"\n
|
|
15513
|
-
}], ctorParameters: () => [], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], translateKeyPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "translateKeyPrefix", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], showPopupOnInit: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPopupOnInit", required: false }] }], guidField: [{ type: i0.Input, args: [{ isSignal: true, alias: "guidField", required: false }] }], filterRemoved: [{ type: i0.Output, args: ["filterRemoved"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], anchor: [{ type: i0.ViewChild, args: ['toggleButton', { ...{ read: ElementRef }, isSignal: true }] }],
|
|
15512
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-checkbox\">\n <kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly && (filter().removable ?? true)\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (allSelected()) {\n <div class=\"kit-filter-checkbox-tooltip\"\n kitTooltip\n kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n [kitTooltipTemplateRef]=\"tooltipTemplate\">\n {{ 'kit.filters.all' | translate }}\n </div>\n } @else if (displayedValues.length > 1) {\n <div class=\"kit-filter-checkbox-tooltip\"\n kitTooltip\n kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n [kitTooltipTemplateRef]=\"tooltipTemplate\">\n <span class=\"kit-filter-checkbox-single-item\">{{ displayedValues[0] }}</span>\n <span class=\"kit-filter-checkbox-tooltip-count\">+{{ displayedValues.length - 1 }}</span>\n </div>\n } @else {\n <span class=\"kit-filter-checkbox-single-item\">{{ displayedValues[0] ?? '' }}</span>\n }\n </kit-pill>\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-filter-checkbox-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [closePopupOnCancel]=\"false\"\n (applyAction)=\"applyFilter()\"\n (cancelAction)=\"clearAllFilters()\"\n (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <div class=\"filter-search\"\n [hidden]=\"!isContentOverflowing() && !searchTerm()\">\n <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n [size]=\"kitTextboxSize.SMALL\"\n [defaultValue]=\"searchTerm()\"\n (changed)=\"searchTerm.set($event)\"\n ></kit-textbox>\n </div>\n\n <div #filterItems\n class=\"filter-items\">\n @if (!searchTerm()) {\n <kit-checkbox class=\"checkbox-item\"\n [label]=\"'kit.filters.all' | translate\"\n [(ngModel)]=\"allSelected\"\n (changed)=\"toggleAll($event)\">\n </kit-checkbox>\n }\n\n @for (item of visibleItems(); track $index) {\n <kit-checkbox class=\"checkbox-item\"\n [label]=\"buildTranslateKey(item.title) | translate\"\n [(ngModel)]=\"item.checked\"\n (changed)=\"onChange($event, item.value)\"\n ></kit-checkbox>\n }\n\n @if (!visibleItems().length) {\n {{ ('kit.filters.noDataFound' | translate) }}\n }\n </div>\n </div>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n @for (item of (displayedValues.length > 1 && !allSelected() ? displayedValues.slice(1) : displayedValues); track item) {\n <div class=\"kit-filter-checkbox-tooltip-item\">{{ item }}</div>\n }\n</ng-template>\n", styles: [".kit-filter-checkbox-tooltip{display:flex;align-items:center;gap:3px}.kit-filter-checkbox-tooltip-count{color:var(--ui-kit-color-main)}.kit-filter-checkbox-tooltip-item{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500;line-height:20px}.kit-filter-checkbox-single-item{display:block;max-width:180px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}::ng-deep .kit-filter-checkbox-popup .popup-content{width:172px}::ng-deep .kit-filter-checkbox-popup .filter-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-filter-checkbox-popup .filter-items{padding-left:2px;max-height:400px;overflow-y:auto}::ng-deep .kit-filter-checkbox-popup .filter-items::-webkit-scrollbar{width:4px;height:4px}::ng-deep .kit-filter-checkbox-popup .filter-items::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}::ng-deep .kit-filter-checkbox-popup .filter-items::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-10)}::ng-deep .kit-filter-checkbox-popup .checkbox-item{display:block;padding:6px 0}\n"] }]
|
|
15513
|
+
}], ctorParameters: () => [], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], translateKeyPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "translateKeyPrefix", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], showPopupOnInit: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPopupOnInit", required: false }] }], guidField: [{ type: i0.Input, args: [{ isSignal: true, alias: "guidField", required: false }] }], filterRemoved: [{ type: i0.Output, args: ["filterRemoved"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], anchor: [{ type: i0.ViewChild, args: ['toggleButton', { ...{ read: ElementRef }, isSignal: true }] }], filterItems: [{ type: i0.ViewChild, args: ['filterItems', { ...{ read: ElementRef }, isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }] } });
|
|
15514
15514
|
|
|
15515
15515
|
class KitFilterCustomInputComponent {
|
|
15516
15516
|
constructor() {
|
|
@@ -16187,7 +16187,7 @@ class KitFilterNullCheckComponent {
|
|
|
16187
16187
|
});
|
|
16188
16188
|
}
|
|
16189
16189
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterNullCheckComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16190
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: KitFilterNullCheckComponent, isStandalone: true, selector: "kit-filter-null-check", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, nullLabel: { classPropertyName: "nullLabel", publicName: "nullLabel", isSignal: true, isRequired: false, transformFunction: null }, notNullLabel: { classPropertyName: "notNullLabel", publicName: "notNullLabel", isSignal: true, isRequired: false, transformFunction: null }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", isSignal: true, isRequired: false, transformFunction: null }, selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged", selectedOption: "selectedOptionChange", options: "optionsChange" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-null\">\n <kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly && (filter().removable ?? true)\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}: {{ selectedOption()?.label }}\n </kit-pill>\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-filter-null-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [closePopupOnCancel]=\"false\"\n (applyAction)=\"applyFilter()\"\n (cancelAction)=\"clearFilter()\"\n (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <kit-radio-button [items]=\"options()\"\n (changed)=\"onRadioButtonChange($event)\"\n ></kit-radio-button>\n </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-null-popup .popup-content{width:172px}::ng-deep .kit-filter-null-popup .kit-radio-button .kit-radio-button-items{flex-direction:column;gap:0}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitRadioButtonComponent, selector: "kit-radio-button", inputs: ["items", "label", "name", "readonly", "type", "value", "checked", "icon", "disabled"], outputs: ["checkedChange", "disabledChange", "changed"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
16190
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: KitFilterNullCheckComponent, isStandalone: true, selector: "kit-filter-null-check", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, nullLabel: { classPropertyName: "nullLabel", publicName: "nullLabel", isSignal: true, isRequired: false, transformFunction: null }, notNullLabel: { classPropertyName: "notNullLabel", publicName: "notNullLabel", isSignal: true, isRequired: false, transformFunction: null }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", isSignal: true, isRequired: false, transformFunction: null }, selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged", selectedOption: "selectedOptionChange", options: "optionsChange" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-null\">\n <kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly && (filter().removable ?? true)\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}: {{ selectedOption()?.label }}\n </kit-pill>\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-filter-null-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [closePopupOnCancel]=\"false\"\n (applyAction)=\"applyFilter()\"\n (cancelAction)=\"clearFilter()\"\n (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <kit-radio-button [items]=\"options()\"\n (changed)=\"onRadioButtonChange($event)\"\n ></kit-radio-button>\n </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-null-popup .popup-content{padding-left:2px;width:172px}::ng-deep .kit-filter-null-popup .kit-radio-button .kit-radio-button-items{flex-direction:column;gap:0}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitRadioButtonComponent, selector: "kit-radio-button", inputs: ["items", "label", "name", "readonly", "type", "value", "checked", "icon", "disabled"], outputs: ["checkedChange", "disabledChange", "changed"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
16191
16191
|
}
|
|
16192
16192
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterNullCheckComponent, decorators: [{
|
|
16193
16193
|
type: Component,
|
|
@@ -16197,7 +16197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
16197
16197
|
FormsModule,
|
|
16198
16198
|
KitPopupComponent,
|
|
16199
16199
|
KitRadioButtonComponent,
|
|
16200
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-null\">\n <kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly && (filter().removable ?? true)\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}: {{ selectedOption()?.label }}\n </kit-pill>\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-filter-null-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [closePopupOnCancel]=\"false\"\n (applyAction)=\"applyFilter()\"\n (cancelAction)=\"clearFilter()\"\n (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <kit-radio-button [items]=\"options()\"\n (changed)=\"onRadioButtonChange($event)\"\n ></kit-radio-button>\n </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-null-popup .popup-content{width:172px}::ng-deep .kit-filter-null-popup .kit-radio-button .kit-radio-button-items{flex-direction:column;gap:0}\n"] }]
|
|
16200
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-null\">\n <kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly && (filter().removable ?? true)\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}: {{ selectedOption()?.label }}\n </kit-pill>\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-filter-null-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [closePopupOnCancel]=\"false\"\n (applyAction)=\"applyFilter()\"\n (cancelAction)=\"clearFilter()\"\n (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <kit-radio-button [items]=\"options()\"\n (changed)=\"onRadioButtonChange($event)\"\n ></kit-radio-button>\n </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-null-popup .popup-content{padding-left:2px;width:172px}::ng-deep .kit-filter-null-popup .kit-radio-button .kit-radio-button-items{flex-direction:column;gap:0}\n"] }]
|
|
16201
16201
|
}], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], nullLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nullLabel", required: false }] }], notNullLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "notNullLabel", required: false }] }], showPopupOnInit: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPopupOnInit", required: false }] }], filterRemoved: [{ type: i0.Output, args: ["filterRemoved"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], anchor: [{ type: i0.ViewChild, args: ['toggleButton', { ...{ read: ElementRef }, isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }], selectedOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedOption", required: false }] }, { type: i0.Output, args: ["selectedOptionChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }, { type: i0.Output, args: ["optionsChange"] }] } });
|
|
16202
16202
|
|
|
16203
16203
|
class KitFilterRadioComponent {
|
|
@@ -16331,7 +16331,7 @@ class KitFilterRadioComponent {
|
|
|
16331
16331
|
});
|
|
16332
16332
|
}
|
|
16333
16333
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16334
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitFilterRadioComponent, isStandalone: true, selector: "kit-filter-radio", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, translateKeyPrefix: { classPropertyName: "translateKeyPrefix", publicName: "translateKeyPrefix", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-filter-radio\">\n <kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly && (filter().removable ?? true)\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (hasSelectedFilters(selectedFilterValue)) {\n <kit-truncate-text class=\"kit-filter-radio-selected-values\">\n {{ getSelectedFilterText(selectedFilterValue) | translate }}\n </kit-truncate-text>\n }\n </kit-pill>\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-filter-radio-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [closePopupOnCancel]=\"false\"\n (applyAction)=\"applyFilter()\"\n (cancelAction)=\"clearAllFilters()\"\n (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <kit-radio-button [items]=\"buildRadioButtonItems(items())\"\n (changed)=\"onRadioButtonChange($event)\"\n ></kit-radio-button>\n </div>\n</ng-template>\n", styles: [".kit-filter-radio-selected-values{max-width:180px}::ng-deep .kit-filter-radio-popup .popup-content{width:172px;max-height:400px;overflow-y:auto}::ng-deep .kit-filter-radio-popup .kit-radio-button .kit-radio-button-items{flex-direction:column;gap:0}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { 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: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
16334
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitFilterRadioComponent, isStandalone: true, selector: "kit-filter-radio", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, translateKeyPrefix: { classPropertyName: "translateKeyPrefix", publicName: "translateKeyPrefix", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-filter-radio\">\n <kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly && (filter().removable ?? true)\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (hasSelectedFilters(selectedFilterValue)) {\n <kit-truncate-text class=\"kit-filter-radio-selected-values\">\n {{ getSelectedFilterText(selectedFilterValue) | translate }}\n </kit-truncate-text>\n }\n </kit-pill>\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-filter-radio-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [closePopupOnCancel]=\"false\"\n (applyAction)=\"applyFilter()\"\n (cancelAction)=\"clearAllFilters()\"\n (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <kit-radio-button [items]=\"buildRadioButtonItems(items())\"\n (changed)=\"onRadioButtonChange($event)\"\n ></kit-radio-button>\n </div>\n</ng-template>\n", styles: [".kit-filter-radio-selected-values{max-width:180px}::ng-deep .kit-filter-radio-popup .popup-content{padding-left:2px;width:172px;max-height:400px;overflow-y:auto}::ng-deep .kit-filter-radio-popup .kit-radio-button .kit-radio-button-items{flex-direction:column;gap:0}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { 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: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
16335
16335
|
}
|
|
16336
16336
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterRadioComponent, decorators: [{
|
|
16337
16337
|
type: Component,
|
|
@@ -16341,7 +16341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
16341
16341
|
KitPopupComponent,
|
|
16342
16342
|
KitRadioButtonComponent,
|
|
16343
16343
|
KitTruncateTextComponent,
|
|
16344
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-radio\">\n <kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly && (filter().removable ?? true)\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (hasSelectedFilters(selectedFilterValue)) {\n <kit-truncate-text class=\"kit-filter-radio-selected-values\">\n {{ getSelectedFilterText(selectedFilterValue) | translate }}\n </kit-truncate-text>\n }\n </kit-pill>\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-filter-radio-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [closePopupOnCancel]=\"false\"\n (applyAction)=\"applyFilter()\"\n (cancelAction)=\"clearAllFilters()\"\n (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <kit-radio-button [items]=\"buildRadioButtonItems(items())\"\n (changed)=\"onRadioButtonChange($event)\"\n ></kit-radio-button>\n </div>\n</ng-template>\n", styles: [".kit-filter-radio-selected-values{max-width:180px}::ng-deep .kit-filter-radio-popup .popup-content{width:172px;max-height:400px;overflow-y:auto}::ng-deep .kit-filter-radio-popup .kit-radio-button .kit-radio-button-items{flex-direction:column;gap:0}\n"] }]
|
|
16344
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-radio\">\n <kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly && (filter().removable ?? true)\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (hasSelectedFilters(selectedFilterValue)) {\n <kit-truncate-text class=\"kit-filter-radio-selected-values\">\n {{ getSelectedFilterText(selectedFilterValue) | translate }}\n </kit-truncate-text>\n }\n </kit-pill>\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-filter-radio-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [closePopupOnCancel]=\"false\"\n (applyAction)=\"applyFilter()\"\n (cancelAction)=\"clearAllFilters()\"\n (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <kit-radio-button [items]=\"buildRadioButtonItems(items())\"\n (changed)=\"onRadioButtonChange($event)\"\n ></kit-radio-button>\n </div>\n</ng-template>\n", styles: [".kit-filter-radio-selected-values{max-width:180px}::ng-deep .kit-filter-radio-popup .popup-content{padding-left:2px;width:172px;max-height:400px;overflow-y:auto}::ng-deep .kit-filter-radio-popup .kit-radio-button .kit-radio-button-items{flex-direction:column;gap:0}\n"] }]
|
|
16345
16345
|
}], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], translateKeyPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "translateKeyPrefix", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], showPopupOnInit: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPopupOnInit", required: false }] }], filterRemoved: [{ type: i0.Output, args: ["filterRemoved"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], anchor: [{ type: i0.ViewChild, args: ['toggleButton', { ...{ read: ElementRef }, isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }] } });
|
|
16346
16346
|
|
|
16347
16347
|
class KitFilterSelectorComponent {
|
|
@@ -16842,6 +16842,9 @@ class KitGridSearchComponent {
|
|
|
16842
16842
|
closeSearch() {
|
|
16843
16843
|
this.kitSearchBarComponent().onCloseButtonClick();
|
|
16844
16844
|
}
|
|
16845
|
+
isSearchVisible() {
|
|
16846
|
+
return this.kitSearchBarComponent().searchVisible();
|
|
16847
|
+
}
|
|
16845
16848
|
hideSearch() {
|
|
16846
16849
|
this.kitSearchBarComponent().searchVisible.set(false);
|
|
16847
16850
|
this.toggleSearch.emit(false);
|
|
@@ -17151,6 +17154,7 @@ class KitEntityGridComponent {
|
|
|
17151
17154
|
this.kitGridComponent()?.forwardedColumnMarkers.set(markers);
|
|
17152
17155
|
this.archiveModeEnabled.set(this.gridState().archive ?? false);
|
|
17153
17156
|
});
|
|
17157
|
+
effect(() => this.searchIsOpen.set(this.search()?.isSearchVisible() ?? false));
|
|
17154
17158
|
effect(() => {
|
|
17155
17159
|
const state = this.gridState();
|
|
17156
17160
|
const currentSearch = state.search;
|
|
@@ -17196,7 +17200,6 @@ class KitEntityGridComponent {
|
|
|
17196
17200
|
}
|
|
17197
17201
|
onGridViewChange() {
|
|
17198
17202
|
this.gridViewChanged.emit();
|
|
17199
|
-
this.searchIsOpen.set(!!this.gridState()?.search);
|
|
17200
17203
|
if (this.enableSelectedRowsView()) {
|
|
17201
17204
|
this.resetSelectedRowsState();
|
|
17202
17205
|
}
|