@indigina/ui-kit 1.1.117 → 1.1.118
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.
|
@@ -5039,7 +5039,7 @@ class KitShipmentCard {
|
|
|
5039
5039
|
this.timelineExpanded = true;
|
|
5040
5040
|
}
|
|
5041
5041
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitShipmentCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5042
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitShipmentCard, isStandalone: true, selector: "kit-shipment-card", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, headLabel: { classPropertyName: "headLabel", publicName: "headLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-shipment-card\"\n [ngClass]=\"{ selected: selected() }\">\n <div class=\"kit-shipment-card-head\">\n <kit-truncate-text class=\"head-title\">{{ data().reference }}</kit-truncate-text>\n <kit-truncate-text>\n <ng-container *ngTemplateOutlet=\"headLabel()\"/>\n </kit-truncate-text>\n </div>\n <div class=\"kit-shipment-card-content\">\n <div class=\"content-row\">\n <kit-svg-icon class=\"icon info\"\n [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n <kit-truncate-text class=\"title\">{{ data().latestRequiredByDate }}</kit-truncate-text>\n </div>\n\n <div class=\"content-row\">\n <kit-svg-icon class=\"{{ 'icon ' + shipmentModeIcon.toLowerCase() }} \"\n [icon]=\"shipmentModeIcon\"/>\n <kit-truncate-text>{{ data().vesselName }}</kit-truncate-text>\n </div>\n\n <div class=\"content-row route\">\n <kit-pill class=\"route-origin-port\">\n <kit-truncate-text>{{ data().originPort }}</kit-truncate-text>\n </kit-pill>\n <kit-svg-icon class=\"icon arrow\"\n [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"/>\n <kit-pill class=\"route-destination-port\">\n <kit-truncate-text>{{ data().destinationPort }}</kit-truncate-text>\n </kit-pill>\n <span>by</span>\n <kit-pill class=\"route-mode\">\n <kit-truncate-text>{{ data().type }} {{ data().containerMode }}</kit-truncate-text>\n </kit-pill>\n </div>\n\n <div class=\"content-footer\">\n <div class=\"footer-buttons\">\n <kit-button class=\"text-ellipsis\"\n [ngClass]=\"{ active: timelineExpanded }\"\n [label]=\"data().timelineActionBtnLabel\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"showTimeline($event)\"/>\n @if (containerItems.length) {\n <kit-button class=\"text-ellipsis\"\n [ngClass]=\"{ active: containersExpanded }\"\n [label]=\"data().containerActionBtnLabel\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"showContainers($event)\"/>\n }\n </div>\n \n @if (timelineExpanded) {\n <div class=\"card-timeline-content\">\n @for (timelineItem of timelineItems; track $index) {\n <div class=\"timeline-row\">\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <kit-truncate-text>\n <span class=\"title\">{{ timelineItem.label }}: </span>\n {{ timelineItem.value }}\n </kit-truncate-text>\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n @if (containersExpanded) {\n <div class=\"card-container-content\">\n @for (containerItem of containerItems; track $index) {\n <kit-truncate-text>\n <p class=\"container-item\">\n <span class=\"title\">{{ containerItem.value }} </span>\n {{ containerItem.label }}\n </p>\n </kit-truncate-text>\n }\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".kit-shipment-card{display:flex;flex-direction:column;padding:25px;color:var(--ui-kit-color-grey-10);font-weight:400;border:2px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box;background-color:var(--ui-kit-color-white);width:360px;font-size:14px;min-height:337px;line-height:20px}.kit-shipment-card.selected{border:2px solid var(--ui-kit-color-main)}.kit-shipment-card .text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-shipment-card-head{border-bottom:1px solid var(--ui-kit-color-grey-11);padding-bottom:12px;display:flex;justify-content:space-between;gap:15px}.kit-shipment-card-head .head-title{font-size:16px;line-height:22px}.kit-shipment-card-content{padding-top:15px;display:flex;flex-direction:column;gap:12px;justify-content:space-between;min-height:233px}.kit-shipment-card-content .content-row{display:flex;align-items:center}.kit-shipment-card-content .content-row .icon{width:24px;height:24px;margin-right:10px}.kit-shipment-card-content .content-row .icon.info{fill:var(--ui-kit-color-grey-12)}.kit-shipment-card-content .content-row .icon.ship{fill:none;stroke:var(--ui-kit-color-teal);width:26px}.kit-shipment-card-content .content-row .icon.air{fill:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.logistics{fill:none;stroke:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.arrow{fill:none;stroke:var(--ui-kit-color-grey-10);margin-right:0;width:22px}.kit-shipment-card-content .content-row .title{font-size:18px;font-weight:500;line-height:24px}.kit-shipment-card-content .content-row.route{height:22px}.kit-shipment-card-content .content-row.route ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14)}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill .kit-pill-content,.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill span{width:100%;font-size:12px}.kit-shipment-card-content .content-row.route ::ng-deep .route-origin-port{max-width:30%}.kit-shipment-card-content .content-row.route ::ng-deep .route-origin-port .kit-pill{border:1px solid var(--ui-kit-color-orange-5);background-color:var(--ui-kit-color-orange-3);color:var(--ui-kit-color-orange-2)}.kit-shipment-card-content .content-row.route ::ng-deep .route-destination-port{margin-right:5px;max-width:30%}.kit-shipment-card-content .content-row.route ::ng-deep .route-destination-port .kit-pill{border:1px solid var(--ui-kit-color-purple-2);background-color:var(--ui-kit-color-purple-1);color:var(--ui-kit-color-purple)}.kit-shipment-card-content .content-row.route ::ng-deep .route-mode{margin-left:5px;max-width:25%}.kit-shipment-card-content .content-row.route ::ng-deep .route-mode .kit-pill{border:1px solid var(--ui-kit-color-teal-2);background-color:var(--ui-kit-color-teal-1);color:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-footer{background-color:var(--ui-kit-color-grey-13);border-radius:8px;padding:10px;min-height:105px}.kit-shipment-card-content .content-footer .footer-buttons{display:flex;justify-content:space-between;margin-bottom:12px}.kit-shipment-card-content .content-footer ::ng-deep .k-button{color:var(--ui-kit-color-grey-14);padding:0;height:auto;font-size:14px}.kit-shipment-card-content .content-footer ::ng-deep .k-button:hover{color:var(--ui-kit-color-main)}.kit-shipment-card-content .content-footer ::ng-deep .active .k-button{color:var(--ui-kit-color-main);text-decoration:underline}.kit-shipment-card .card-timeline-content .timeline-row{padding-bottom:5px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content{padding-left:30px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content:before{transform:translate(calc(-50% - 20px))}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:after{top:10px}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child{padding-bottom:0}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:after{bottom:10px;display:none}.kit-shipment-card .card-timeline-content .timeline-item{display:flex;position:relative}.kit-shipment-card .card-timeline-content .timeline-item:after,.kit-shipment-card .card-timeline-content .timeline-item:before{content:\"\";position:absolute;width:1px;background:var(--ui-kit-color-grey-12);height:calc(100% + 10px);transform:translate(10px)}.kit-shipment-card .card-timeline-content .timeline-content{position:relative;font-weight:500;color:var(--ui-kit-color-grey-19);width:90%}.kit-shipment-card .card-timeline-content .timeline-content .title{font-weight:400;color:var(--ui-kit-color-grey-10);font-size:13px}.kit-shipment-card .card-timeline-content .timeline-content:before{content:\"\";position:absolute;top:5px;width:10px;height:10px;border-radius:50%;background:var(--ui-kit-color-grey-12);box-sizing:border-box}.kit-shipment-card .card-container-content{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.kit-shipment-card .card-container-content .container-item{padding:0;margin:0;color:var(--ui-kit-color-grey-14);width:95%}.kit-shipment-card .card-container-content .container-item .title{font-weight:500;color:var(--ui-kit-color-grey-10);max-width:45%}.kit-shipment-card .card-container-content>*:nth-child(2n){text-align:right}@media screen and (max-width: 1512px){.kit-shipment-card{width:320px;min-height:320px}.kit-shipment-card-content{min-height:200px}.kit-shipment-card .content-footer{background-color:inherit;padding:0}}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5042
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitShipmentCard, isStandalone: true, selector: "kit-shipment-card", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, headLabel: { classPropertyName: "headLabel", publicName: "headLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-shipment-card\"\n [ngClass]=\"{ selected: selected() }\">\n <div class=\"kit-shipment-card-head\">\n <kit-truncate-text class=\"head-title\">{{ data().reference }}</kit-truncate-text>\n <kit-truncate-text>\n <ng-container *ngTemplateOutlet=\"headLabel()\"/>\n </kit-truncate-text>\n </div>\n <div class=\"kit-shipment-card-content\">\n <div class=\"content-row\">\n <kit-svg-icon class=\"icon info\"\n [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n <kit-truncate-text class=\"title\">{{ data().latestRequiredByDate }}</kit-truncate-text>\n </div>\n\n <div class=\"content-row\">\n <kit-svg-icon class=\"{{ 'icon ' + shipmentModeIcon.toLowerCase() }} \"\n [icon]=\"shipmentModeIcon\"/>\n <kit-truncate-text>{{ data().vesselName }}</kit-truncate-text>\n </div>\n\n <div class=\"content-row route\">\n <kit-pill class=\"route-origin-port\">\n <kit-truncate-text>{{ data().originPort }}</kit-truncate-text>\n </kit-pill>\n <kit-svg-icon class=\"icon arrow\"\n [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"/>\n <kit-pill class=\"route-destination-port\">\n <kit-truncate-text>{{ data().destinationPort }}</kit-truncate-text>\n </kit-pill>\n <span>by</span>\n <kit-pill class=\"route-mode\">\n <kit-truncate-text>{{ data().type }} {{ data().containerMode }}</kit-truncate-text>\n </kit-pill>\n </div>\n\n <div class=\"content-footer\">\n <div class=\"footer-buttons\">\n <kit-button class=\"text-ellipsis\"\n [ngClass]=\"{ active: timelineExpanded }\"\n [label]=\"data().timelineActionBtnLabel\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"showTimeline($event)\"/>\n @if (containerItems.length) {\n <kit-button class=\"text-ellipsis\"\n [ngClass]=\"{ active: containersExpanded }\"\n [label]=\"data().containerActionBtnLabel\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"showContainers($event)\"/>\n }\n </div>\n \n @if (timelineExpanded) {\n <div class=\"card-timeline-content\">\n @for (timelineItem of timelineItems; track $index) {\n <div class=\"timeline-row\">\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <kit-truncate-text>\n <span class=\"title\">{{ timelineItem.label }}: </span>\n {{ timelineItem.value }}\n </kit-truncate-text>\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n @if (containersExpanded) {\n <div class=\"card-container-content\">\n @for (containerItem of containerItems; track $index) {\n <kit-truncate-text>\n <p class=\"container-item\">\n <span class=\"title\">{{ containerItem.value }} </span>\n {{ containerItem.label }}\n </p>\n </kit-truncate-text>\n }\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".kit-shipment-card{display:flex;flex-direction:column;padding:25px;color:var(--ui-kit-color-grey-10);font-weight:400;border:2px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box;background-color:var(--ui-kit-color-white);width:360px;font-size:14px;min-height:337px;line-height:20px}.kit-shipment-card.selected{border:2px solid var(--ui-kit-color-main)}.kit-shipment-card .text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-shipment-card-head{border-bottom:1px solid var(--ui-kit-color-grey-11);padding-bottom:12px;display:flex;justify-content:space-between;gap:15px}.kit-shipment-card-head .head-title{font-size:16px;line-height:22px}.kit-shipment-card-content{padding-top:15px;display:flex;flex-direction:column;gap:12px;justify-content:space-between;min-height:233px}.kit-shipment-card-content .content-row{display:flex;align-items:center}.kit-shipment-card-content .content-row .icon{width:24px;height:24px;margin-right:10px}.kit-shipment-card-content .content-row .icon.info{fill:var(--ui-kit-color-grey-12)}.kit-shipment-card-content .content-row .icon.ship{fill:none;stroke:var(--ui-kit-color-teal);width:26px}.kit-shipment-card-content .content-row .icon.air{fill:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.logistics{fill:none;stroke:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.arrow{fill:none;stroke:var(--ui-kit-color-grey-10);margin-right:0;width:22px}.kit-shipment-card-content .content-row .title{font-size:18px;font-weight:500;line-height:24px}.kit-shipment-card-content .content-row.route{height:22px;width:100%;display:grid;grid-template-columns:minmax(0,auto) 22px minmax(0,auto) 24px min-content;grid-auto-flow:column;justify-content:stretch}.kit-shipment-card-content .content-row.route ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14);margin:auto}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill .kit-pill-content,.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill span{width:100%;font-size:12px}.kit-shipment-card-content .content-row.route ::ng-deep .route-origin-port .kit-pill{border:1px solid var(--ui-kit-color-orange-5);background-color:var(--ui-kit-color-orange-3);color:var(--ui-kit-color-orange-2)}.kit-shipment-card-content .content-row.route ::ng-deep .route-destination-port .kit-pill{border:1px solid var(--ui-kit-color-purple-2);background-color:var(--ui-kit-color-purple-1);color:var(--ui-kit-color-purple)}.kit-shipment-card-content .content-row.route ::ng-deep .route-mode .kit-pill{border:1px solid var(--ui-kit-color-teal-2);background-color:var(--ui-kit-color-teal-1);color:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-footer{background-color:var(--ui-kit-color-grey-13);border-radius:8px;padding:10px;min-height:105px}.kit-shipment-card-content .content-footer .footer-buttons{display:flex;justify-content:space-between;margin-bottom:12px}.kit-shipment-card-content .content-footer ::ng-deep .k-button{color:var(--ui-kit-color-grey-14);padding:0;height:auto;font-size:14px}.kit-shipment-card-content .content-footer ::ng-deep .k-button:hover{color:var(--ui-kit-color-main)}.kit-shipment-card-content .content-footer ::ng-deep .active .k-button{color:var(--ui-kit-color-main);text-decoration:underline}.kit-shipment-card .card-timeline-content .timeline-row{padding-bottom:5px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content{padding-left:30px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content:before{transform:translate(calc(-50% - 20px))}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:after{top:10px}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child{padding-bottom:0}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:after{bottom:10px;display:none}.kit-shipment-card .card-timeline-content .timeline-item{display:flex;position:relative}.kit-shipment-card .card-timeline-content .timeline-item:after,.kit-shipment-card .card-timeline-content .timeline-item:before{content:\"\";position:absolute;width:1px;background:var(--ui-kit-color-grey-12);height:calc(100% + 10px);transform:translate(10px)}.kit-shipment-card .card-timeline-content .timeline-content{position:relative;font-weight:500;color:var(--ui-kit-color-grey-19);width:90%}.kit-shipment-card .card-timeline-content .timeline-content .title{font-weight:400;color:var(--ui-kit-color-grey-10);font-size:13px}.kit-shipment-card .card-timeline-content .timeline-content:before{content:\"\";position:absolute;top:5px;width:10px;height:10px;border-radius:50%;background:var(--ui-kit-color-grey-12);box-sizing:border-box}.kit-shipment-card .card-container-content{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.kit-shipment-card .card-container-content .container-item{padding:0;margin:0;color:var(--ui-kit-color-grey-14);width:95%}.kit-shipment-card .card-container-content .container-item .title{font-weight:500;color:var(--ui-kit-color-grey-10);max-width:45%}.kit-shipment-card .card-container-content>*:nth-child(2n){text-align:right}@media screen and (max-width: 1512px){.kit-shipment-card{width:320px;min-height:320px}.kit-shipment-card-content{min-height:200px}.kit-shipment-card .content-footer{background-color:inherit;padding:0}}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5043
5043
|
}
|
|
5044
5044
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitShipmentCard, decorators: [{
|
|
5045
5045
|
type: Component,
|
|
@@ -5050,7 +5050,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
5050
5050
|
NgClass,
|
|
5051
5051
|
NgTemplateOutlet,
|
|
5052
5052
|
KitTruncateTextComponent,
|
|
5053
|
-
], template: "<div class=\"kit-shipment-card\"\n [ngClass]=\"{ selected: selected() }\">\n <div class=\"kit-shipment-card-head\">\n <kit-truncate-text class=\"head-title\">{{ data().reference }}</kit-truncate-text>\n <kit-truncate-text>\n <ng-container *ngTemplateOutlet=\"headLabel()\"/>\n </kit-truncate-text>\n </div>\n <div class=\"kit-shipment-card-content\">\n <div class=\"content-row\">\n <kit-svg-icon class=\"icon info\"\n [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n <kit-truncate-text class=\"title\">{{ data().latestRequiredByDate }}</kit-truncate-text>\n </div>\n\n <div class=\"content-row\">\n <kit-svg-icon class=\"{{ 'icon ' + shipmentModeIcon.toLowerCase() }} \"\n [icon]=\"shipmentModeIcon\"/>\n <kit-truncate-text>{{ data().vesselName }}</kit-truncate-text>\n </div>\n\n <div class=\"content-row route\">\n <kit-pill class=\"route-origin-port\">\n <kit-truncate-text>{{ data().originPort }}</kit-truncate-text>\n </kit-pill>\n <kit-svg-icon class=\"icon arrow\"\n [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"/>\n <kit-pill class=\"route-destination-port\">\n <kit-truncate-text>{{ data().destinationPort }}</kit-truncate-text>\n </kit-pill>\n <span>by</span>\n <kit-pill class=\"route-mode\">\n <kit-truncate-text>{{ data().type }} {{ data().containerMode }}</kit-truncate-text>\n </kit-pill>\n </div>\n\n <div class=\"content-footer\">\n <div class=\"footer-buttons\">\n <kit-button class=\"text-ellipsis\"\n [ngClass]=\"{ active: timelineExpanded }\"\n [label]=\"data().timelineActionBtnLabel\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"showTimeline($event)\"/>\n @if (containerItems.length) {\n <kit-button class=\"text-ellipsis\"\n [ngClass]=\"{ active: containersExpanded }\"\n [label]=\"data().containerActionBtnLabel\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"showContainers($event)\"/>\n }\n </div>\n \n @if (timelineExpanded) {\n <div class=\"card-timeline-content\">\n @for (timelineItem of timelineItems; track $index) {\n <div class=\"timeline-row\">\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <kit-truncate-text>\n <span class=\"title\">{{ timelineItem.label }}: </span>\n {{ timelineItem.value }}\n </kit-truncate-text>\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n @if (containersExpanded) {\n <div class=\"card-container-content\">\n @for (containerItem of containerItems; track $index) {\n <kit-truncate-text>\n <p class=\"container-item\">\n <span class=\"title\">{{ containerItem.value }} </span>\n {{ containerItem.label }}\n </p>\n </kit-truncate-text>\n }\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".kit-shipment-card{display:flex;flex-direction:column;padding:25px;color:var(--ui-kit-color-grey-10);font-weight:400;border:2px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box;background-color:var(--ui-kit-color-white);width:360px;font-size:14px;min-height:337px;line-height:20px}.kit-shipment-card.selected{border:2px solid var(--ui-kit-color-main)}.kit-shipment-card .text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-shipment-card-head{border-bottom:1px solid var(--ui-kit-color-grey-11);padding-bottom:12px;display:flex;justify-content:space-between;gap:15px}.kit-shipment-card-head .head-title{font-size:16px;line-height:22px}.kit-shipment-card-content{padding-top:15px;display:flex;flex-direction:column;gap:12px;justify-content:space-between;min-height:233px}.kit-shipment-card-content .content-row{display:flex;align-items:center}.kit-shipment-card-content .content-row .icon{width:24px;height:24px;margin-right:10px}.kit-shipment-card-content .content-row .icon.info{fill:var(--ui-kit-color-grey-12)}.kit-shipment-card-content .content-row .icon.ship{fill:none;stroke:var(--ui-kit-color-teal);width:26px}.kit-shipment-card-content .content-row .icon.air{fill:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.logistics{fill:none;stroke:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.arrow{fill:none;stroke:var(--ui-kit-color-grey-10);margin-right:0;width:22px}.kit-shipment-card-content .content-row .title{font-size:18px;font-weight:500;line-height:24px}.kit-shipment-card-content .content-row.route{height:22px}.kit-shipment-card-content .content-row.route ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14)}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill .kit-pill-content,.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill span{width:100%;font-size:12px}.kit-shipment-card-content .content-row.route ::ng-deep .route-origin-port
|
|
5053
|
+
], template: "<div class=\"kit-shipment-card\"\n [ngClass]=\"{ selected: selected() }\">\n <div class=\"kit-shipment-card-head\">\n <kit-truncate-text class=\"head-title\">{{ data().reference }}</kit-truncate-text>\n <kit-truncate-text>\n <ng-container *ngTemplateOutlet=\"headLabel()\"/>\n </kit-truncate-text>\n </div>\n <div class=\"kit-shipment-card-content\">\n <div class=\"content-row\">\n <kit-svg-icon class=\"icon info\"\n [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n <kit-truncate-text class=\"title\">{{ data().latestRequiredByDate }}</kit-truncate-text>\n </div>\n\n <div class=\"content-row\">\n <kit-svg-icon class=\"{{ 'icon ' + shipmentModeIcon.toLowerCase() }} \"\n [icon]=\"shipmentModeIcon\"/>\n <kit-truncate-text>{{ data().vesselName }}</kit-truncate-text>\n </div>\n\n <div class=\"content-row route\">\n <kit-pill class=\"route-origin-port\">\n <kit-truncate-text>{{ data().originPort }}</kit-truncate-text>\n </kit-pill>\n <kit-svg-icon class=\"icon arrow\"\n [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"/>\n <kit-pill class=\"route-destination-port\">\n <kit-truncate-text>{{ data().destinationPort }}</kit-truncate-text>\n </kit-pill>\n <span>by</span>\n <kit-pill class=\"route-mode\">\n <kit-truncate-text>{{ data().type }} {{ data().containerMode }}</kit-truncate-text>\n </kit-pill>\n </div>\n\n <div class=\"content-footer\">\n <div class=\"footer-buttons\">\n <kit-button class=\"text-ellipsis\"\n [ngClass]=\"{ active: timelineExpanded }\"\n [label]=\"data().timelineActionBtnLabel\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"showTimeline($event)\"/>\n @if (containerItems.length) {\n <kit-button class=\"text-ellipsis\"\n [ngClass]=\"{ active: containersExpanded }\"\n [label]=\"data().containerActionBtnLabel\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"showContainers($event)\"/>\n }\n </div>\n \n @if (timelineExpanded) {\n <div class=\"card-timeline-content\">\n @for (timelineItem of timelineItems; track $index) {\n <div class=\"timeline-row\">\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <kit-truncate-text>\n <span class=\"title\">{{ timelineItem.label }}: </span>\n {{ timelineItem.value }}\n </kit-truncate-text>\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n @if (containersExpanded) {\n <div class=\"card-container-content\">\n @for (containerItem of containerItems; track $index) {\n <kit-truncate-text>\n <p class=\"container-item\">\n <span class=\"title\">{{ containerItem.value }} </span>\n {{ containerItem.label }}\n </p>\n </kit-truncate-text>\n }\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".kit-shipment-card{display:flex;flex-direction:column;padding:25px;color:var(--ui-kit-color-grey-10);font-weight:400;border:2px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box;background-color:var(--ui-kit-color-white);width:360px;font-size:14px;min-height:337px;line-height:20px}.kit-shipment-card.selected{border:2px solid var(--ui-kit-color-main)}.kit-shipment-card .text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-shipment-card-head{border-bottom:1px solid var(--ui-kit-color-grey-11);padding-bottom:12px;display:flex;justify-content:space-between;gap:15px}.kit-shipment-card-head .head-title{font-size:16px;line-height:22px}.kit-shipment-card-content{padding-top:15px;display:flex;flex-direction:column;gap:12px;justify-content:space-between;min-height:233px}.kit-shipment-card-content .content-row{display:flex;align-items:center}.kit-shipment-card-content .content-row .icon{width:24px;height:24px;margin-right:10px}.kit-shipment-card-content .content-row .icon.info{fill:var(--ui-kit-color-grey-12)}.kit-shipment-card-content .content-row .icon.ship{fill:none;stroke:var(--ui-kit-color-teal);width:26px}.kit-shipment-card-content .content-row .icon.air{fill:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.logistics{fill:none;stroke:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.arrow{fill:none;stroke:var(--ui-kit-color-grey-10);margin-right:0;width:22px}.kit-shipment-card-content .content-row .title{font-size:18px;font-weight:500;line-height:24px}.kit-shipment-card-content .content-row.route{height:22px;width:100%;display:grid;grid-template-columns:minmax(0,auto) 22px minmax(0,auto) 24px min-content;grid-auto-flow:column;justify-content:stretch}.kit-shipment-card-content .content-row.route ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14);margin:auto}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill .kit-pill-content,.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill span{width:100%;font-size:12px}.kit-shipment-card-content .content-row.route ::ng-deep .route-origin-port .kit-pill{border:1px solid var(--ui-kit-color-orange-5);background-color:var(--ui-kit-color-orange-3);color:var(--ui-kit-color-orange-2)}.kit-shipment-card-content .content-row.route ::ng-deep .route-destination-port .kit-pill{border:1px solid var(--ui-kit-color-purple-2);background-color:var(--ui-kit-color-purple-1);color:var(--ui-kit-color-purple)}.kit-shipment-card-content .content-row.route ::ng-deep .route-mode .kit-pill{border:1px solid var(--ui-kit-color-teal-2);background-color:var(--ui-kit-color-teal-1);color:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-footer{background-color:var(--ui-kit-color-grey-13);border-radius:8px;padding:10px;min-height:105px}.kit-shipment-card-content .content-footer .footer-buttons{display:flex;justify-content:space-between;margin-bottom:12px}.kit-shipment-card-content .content-footer ::ng-deep .k-button{color:var(--ui-kit-color-grey-14);padding:0;height:auto;font-size:14px}.kit-shipment-card-content .content-footer ::ng-deep .k-button:hover{color:var(--ui-kit-color-main)}.kit-shipment-card-content .content-footer ::ng-deep .active .k-button{color:var(--ui-kit-color-main);text-decoration:underline}.kit-shipment-card .card-timeline-content .timeline-row{padding-bottom:5px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content{padding-left:30px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content:before{transform:translate(calc(-50% - 20px))}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:after{top:10px}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child{padding-bottom:0}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:after{bottom:10px;display:none}.kit-shipment-card .card-timeline-content .timeline-item{display:flex;position:relative}.kit-shipment-card .card-timeline-content .timeline-item:after,.kit-shipment-card .card-timeline-content .timeline-item:before{content:\"\";position:absolute;width:1px;background:var(--ui-kit-color-grey-12);height:calc(100% + 10px);transform:translate(10px)}.kit-shipment-card .card-timeline-content .timeline-content{position:relative;font-weight:500;color:var(--ui-kit-color-grey-19);width:90%}.kit-shipment-card .card-timeline-content .timeline-content .title{font-weight:400;color:var(--ui-kit-color-grey-10);font-size:13px}.kit-shipment-card .card-timeline-content .timeline-content:before{content:\"\";position:absolute;top:5px;width:10px;height:10px;border-radius:50%;background:var(--ui-kit-color-grey-12);box-sizing:border-box}.kit-shipment-card .card-container-content{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.kit-shipment-card .card-container-content .container-item{padding:0;margin:0;color:var(--ui-kit-color-grey-14);width:95%}.kit-shipment-card .card-container-content .container-item .title{font-weight:500;color:var(--ui-kit-color-grey-10);max-width:45%}.kit-shipment-card .card-container-content>*:nth-child(2n){text-align:right}@media screen and (max-width: 1512px){.kit-shipment-card{width:320px;min-height:320px}.kit-shipment-card-content{min-height:200px}.kit-shipment-card .content-footer{background-color:inherit;padding:0}}\n"] }]
|
|
5054
5054
|
}] });
|
|
5055
5055
|
|
|
5056
5056
|
class KitBreadcrumbsComponent {
|