@indigina/ui-kit 1.1.224 → 1.1.226
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.
- package/fesm2022/indigina-ui-kit.mjs +61 -86
- package/fesm2022/indigina-ui-kit.mjs.map +1 -1
- package/index.d.ts +45 -45
- package/package.json +1 -1
|
@@ -5290,79 +5290,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
5290
5290
|
}]
|
|
5291
5291
|
}] });
|
|
5292
5292
|
|
|
5293
|
-
class KitRoutePathComponent {
|
|
5294
|
-
constructor() {
|
|
5295
|
-
this.originPort = input('', ...(ngDevMode ? [{ debugName: "originPort" }] : []));
|
|
5296
|
-
this.destinationPort = input('', ...(ngDevMode ? [{ debugName: "destinationPort" }] : []));
|
|
5297
|
-
this.type = input('', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
5298
|
-
this.containerMode = input('', ...(ngDevMode ? [{ debugName: "containerMode" }] : []));
|
|
5299
|
-
this.kitSvgIcon = KitSvgIcon;
|
|
5300
|
-
}
|
|
5301
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitRoutePathComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5302
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitRoutePathComponent, isStandalone: true, selector: "kit-route-path", inputs: { originPort: { classPropertyName: "originPort", publicName: "originPort", isSignal: true, isRequired: false, transformFunction: null }, destinationPort: { classPropertyName: "destinationPort", publicName: "destinationPort", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, containerMode: { classPropertyName: "containerMode", publicName: "containerMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"route-path\">\n <kit-pill class=\"route-origin-port\">\n <kit-truncate-text>{{ originPort() || ('kit.routePath.tbc' | translate ) }}</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>{{ destinationPort() || ('kit.routePath.tbc' | translate ) }}</kit-truncate-text>\n </kit-pill>\n @if (type()) {\n <div class=\"route-mode\">\n <span>{{ 'kit.routePath.by' | translate }}</span>\n <kit-pill class=\"route-mode-value\">\n <kit-truncate-text>{{ type() }} {{ containerMode() }}</kit-truncate-text>\n </kit-pill>\n </div>\n }\n</div>\n", styles: [".route-path{height:22px;width:100%;display:grid;grid-template-columns:minmax(0,auto) 22px minmax(0,auto) min-content min-content;grid-auto-flow:column;justify-content:stretch}.route-path .icon.arrow{fill:var(--ui-kit-color-grey-10);margin:auto;width:16px;height:16px}.route-path ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14);margin:auto;padding:0 5px}.route-path ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.route-path ::ng-deep .kit-pill .kit-pill-content,.route-path ::ng-deep .kit-pill span{width:100%;font-size:12px;max-width:150px}.route-path ::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)}.route-path ::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)}.route-path ::ng-deep .route-mode{display:flex}.route-path ::ng-deep .route-mode-value .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)}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5303
|
-
}
|
|
5304
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitRoutePathComponent, decorators: [{
|
|
5305
|
-
type: Component,
|
|
5306
|
-
args: [{ selector: 'kit-route-path', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
5307
|
-
KitPillComponent,
|
|
5308
|
-
KitTruncateTextComponent,
|
|
5309
|
-
KitSvgIconModule,
|
|
5310
|
-
TranslateModule,
|
|
5311
|
-
], template: "<div class=\"route-path\">\n <kit-pill class=\"route-origin-port\">\n <kit-truncate-text>{{ originPort() || ('kit.routePath.tbc' | translate ) }}</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>{{ destinationPort() || ('kit.routePath.tbc' | translate ) }}</kit-truncate-text>\n </kit-pill>\n @if (type()) {\n <div class=\"route-mode\">\n <span>{{ 'kit.routePath.by' | translate }}</span>\n <kit-pill class=\"route-mode-value\">\n <kit-truncate-text>{{ type() }} {{ containerMode() }}</kit-truncate-text>\n </kit-pill>\n </div>\n }\n</div>\n", styles: [".route-path{height:22px;width:100%;display:grid;grid-template-columns:minmax(0,auto) 22px minmax(0,auto) min-content min-content;grid-auto-flow:column;justify-content:stretch}.route-path .icon.arrow{fill:var(--ui-kit-color-grey-10);margin:auto;width:16px;height:16px}.route-path ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14);margin:auto;padding:0 5px}.route-path ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.route-path ::ng-deep .kit-pill .kit-pill-content,.route-path ::ng-deep .kit-pill span{width:100%;font-size:12px;max-width:150px}.route-path ::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)}.route-path ::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)}.route-path ::ng-deep .route-mode{display:flex}.route-path ::ng-deep .route-mode-value .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)}\n"] }]
|
|
5312
|
-
}] });
|
|
5313
|
-
|
|
5314
|
-
class KitShipmentCard {
|
|
5315
|
-
constructor() {
|
|
5316
|
-
this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
5317
|
-
this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
|
|
5318
|
-
this.headLabel = input(...(ngDevMode ? [undefined, { debugName: "headLabel" }] : []));
|
|
5319
|
-
this.kitSvgIcon = KitSvgIcon;
|
|
5320
|
-
this.kitButtonType = KitButtonType;
|
|
5321
|
-
this.kitButtonKind = KitButtonKind;
|
|
5322
|
-
this.containersExpanded = false;
|
|
5323
|
-
this.timelineExpanded = true;
|
|
5324
|
-
}
|
|
5325
|
-
get shipmentModeIcon() {
|
|
5326
|
-
switch (this.data().type) {
|
|
5327
|
-
case ('Air'):
|
|
5328
|
-
return this.kitSvgIcon.AIR;
|
|
5329
|
-
case ('Sea'):
|
|
5330
|
-
return this.kitSvgIcon.SHIP;
|
|
5331
|
-
default:
|
|
5332
|
-
return this.kitSvgIcon.LOGISTICS;
|
|
5333
|
-
}
|
|
5334
|
-
}
|
|
5335
|
-
get timelineItems() {
|
|
5336
|
-
return this.data().timelineItems.filter(item => item.value);
|
|
5337
|
-
}
|
|
5338
|
-
get containerItems() {
|
|
5339
|
-
return this.data().containerItems.filter(item => item.value);
|
|
5340
|
-
}
|
|
5341
|
-
showContainers(event) {
|
|
5342
|
-
event.stopPropagation();
|
|
5343
|
-
this.timelineExpanded = false;
|
|
5344
|
-
this.containersExpanded = true;
|
|
5345
|
-
}
|
|
5346
|
-
showTimeline(event) {
|
|
5347
|
-
event.stopPropagation();
|
|
5348
|
-
this.containersExpanded = false;
|
|
5349
|
-
this.timelineExpanded = true;
|
|
5350
|
-
}
|
|
5351
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitShipmentCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5352
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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 <ng-container *ngTemplateOutlet=\"headLabel()\"/>\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-route-path [containerMode]=\"data().containerMode\"\n [destinationPort]=\"data().destinationPort\"\n [originPort]=\"data().originPort\"\n [type]=\"data().type\"/>\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;width:50%}.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 .title{font-size:18px;font-weight:500;line-height:24px}.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", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { 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" }, { kind: "component", type: KitRoutePathComponent, selector: "kit-route-path", inputs: ["originPort", "destinationPort", "type", "containerMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5353
|
-
}
|
|
5354
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitShipmentCard, decorators: [{
|
|
5355
|
-
type: Component,
|
|
5356
|
-
args: [{ selector: 'kit-shipment-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
5357
|
-
KitButtonModule,
|
|
5358
|
-
KitSvgIconModule,
|
|
5359
|
-
NgClass,
|
|
5360
|
-
NgTemplateOutlet,
|
|
5361
|
-
KitTruncateTextComponent,
|
|
5362
|
-
KitRoutePathComponent,
|
|
5363
|
-
], 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 <ng-container *ngTemplateOutlet=\"headLabel()\"/>\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-route-path [containerMode]=\"data().containerMode\"\n [destinationPort]=\"data().destinationPort\"\n [originPort]=\"data().originPort\"\n [type]=\"data().type\"/>\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;width:50%}.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 .title{font-size:18px;font-weight:500;line-height:24px}.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"] }]
|
|
5364
|
-
}] });
|
|
5365
|
-
|
|
5366
5293
|
class KitBreadcrumbsComponent {
|
|
5367
5294
|
constructor() {
|
|
5368
5295
|
/**
|
|
@@ -6666,6 +6593,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
6666
6593
|
}]
|
|
6667
6594
|
}] });
|
|
6668
6595
|
|
|
6596
|
+
class KitRoutePathComponent {
|
|
6597
|
+
constructor() {
|
|
6598
|
+
this.originPort = input('', ...(ngDevMode ? [{ debugName: "originPort" }] : []));
|
|
6599
|
+
this.destinationPort = input('', ...(ngDevMode ? [{ debugName: "destinationPort" }] : []));
|
|
6600
|
+
this.type = input('', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
6601
|
+
this.containerMode = input('', ...(ngDevMode ? [{ debugName: "containerMode" }] : []));
|
|
6602
|
+
this.kitSvgIcon = KitSvgIcon;
|
|
6603
|
+
}
|
|
6604
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitRoutePathComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6605
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitRoutePathComponent, isStandalone: true, selector: "kit-route-path", inputs: { originPort: { classPropertyName: "originPort", publicName: "originPort", isSignal: true, isRequired: false, transformFunction: null }, destinationPort: { classPropertyName: "destinationPort", publicName: "destinationPort", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, containerMode: { classPropertyName: "containerMode", publicName: "containerMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"route-path\">\n <kit-pill class=\"route-origin-port\">\n <kit-truncate-text>{{ originPort() || ('kit.routePath.tbc' | translate ) }}</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>{{ destinationPort() || ('kit.routePath.tbc' | translate ) }}</kit-truncate-text>\n </kit-pill>\n @if (type()) {\n <div class=\"route-mode\">\n <span>{{ 'kit.routePath.by' | translate }}</span>\n <kit-pill class=\"route-mode-value\">\n <kit-truncate-text>{{ type() }} {{ containerMode() }}</kit-truncate-text>\n </kit-pill>\n </div>\n }\n</div>\n", styles: [".route-path{height:22px;width:100%;display:grid;grid-template-columns:minmax(0,auto) 22px minmax(0,auto) min-content min-content;grid-auto-flow:column;justify-content:stretch}.route-path .icon.arrow{fill:var(--ui-kit-color-grey-10);margin:auto;width:16px;height:16px}.route-path ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14);margin:auto;padding:0 5px}.route-path ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.route-path ::ng-deep .kit-pill .kit-pill-content,.route-path ::ng-deep .kit-pill span{width:100%;font-size:12px;max-width:150px}.route-path ::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)}.route-path ::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)}.route-path ::ng-deep .route-mode{display:flex}.route-path ::ng-deep .route-mode-value .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)}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6606
|
+
}
|
|
6607
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitRoutePathComponent, decorators: [{
|
|
6608
|
+
type: Component,
|
|
6609
|
+
args: [{ selector: 'kit-route-path', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
6610
|
+
KitPillComponent,
|
|
6611
|
+
KitTruncateTextComponent,
|
|
6612
|
+
KitSvgIconModule,
|
|
6613
|
+
TranslateModule,
|
|
6614
|
+
], template: "<div class=\"route-path\">\n <kit-pill class=\"route-origin-port\">\n <kit-truncate-text>{{ originPort() || ('kit.routePath.tbc' | translate ) }}</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>{{ destinationPort() || ('kit.routePath.tbc' | translate ) }}</kit-truncate-text>\n </kit-pill>\n @if (type()) {\n <div class=\"route-mode\">\n <span>{{ 'kit.routePath.by' | translate }}</span>\n <kit-pill class=\"route-mode-value\">\n <kit-truncate-text>{{ type() }} {{ containerMode() }}</kit-truncate-text>\n </kit-pill>\n </div>\n }\n</div>\n", styles: [".route-path{height:22px;width:100%;display:grid;grid-template-columns:minmax(0,auto) 22px minmax(0,auto) min-content min-content;grid-auto-flow:column;justify-content:stretch}.route-path .icon.arrow{fill:var(--ui-kit-color-grey-10);margin:auto;width:16px;height:16px}.route-path ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14);margin:auto;padding:0 5px}.route-path ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.route-path ::ng-deep .kit-pill .kit-pill-content,.route-path ::ng-deep .kit-pill span{width:100%;font-size:12px;max-width:150px}.route-path ::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)}.route-path ::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)}.route-path ::ng-deep .route-mode{display:flex}.route-path ::ng-deep .route-mode-value .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)}\n"] }]
|
|
6615
|
+
}] });
|
|
6616
|
+
|
|
6669
6617
|
const KIT_DATE_FORMAT = 'dd MMM yyyy';
|
|
6670
6618
|
const KIT_DATETIME_FORMAT_LONG = 'dd MMM yyyy HH:mm:ss';
|
|
6671
6619
|
|
|
@@ -7240,7 +7188,6 @@ const kitTranslations = {
|
|
|
7240
7188
|
},
|
|
7241
7189
|
userSettings: {
|
|
7242
7190
|
title: 'User Settings',
|
|
7243
|
-
expandNotesPanel: 'Expand notes panel on details page by default',
|
|
7244
7191
|
},
|
|
7245
7192
|
},
|
|
7246
7193
|
},
|
|
@@ -8257,10 +8204,6 @@ class SetUserSettingByKey extends AbstractPayloadAction {
|
|
|
8257
8204
|
}
|
|
8258
8205
|
|
|
8259
8206
|
const KIT_USER_SETTINGS_GROUP_NAME = 'userSettings';
|
|
8260
|
-
var KitUserSettingKeys;
|
|
8261
|
-
(function (KitUserSettingKeys) {
|
|
8262
|
-
KitUserSettingKeys["ExpandNotesPanel"] = "expandNotesPanel";
|
|
8263
|
-
})(KitUserSettingKeys || (KitUserSettingKeys = {}));
|
|
8264
8207
|
|
|
8265
8208
|
var KitUserSettingsState_1;
|
|
8266
8209
|
const KIT_USER_SETTINGS_STATE_TOKEN = new StateToken(KIT_USER_SETTINGS_GROUP_NAME);
|
|
@@ -8311,28 +8254,28 @@ class KitUserSettingsComponent {
|
|
|
8311
8254
|
constructor(store, kitBreadcrumbsService) {
|
|
8312
8255
|
this.store = store;
|
|
8313
8256
|
this.kitBreadcrumbsService = kitBreadcrumbsService;
|
|
8257
|
+
this.kitUserSettings = input([], ...(ngDevMode ? [{ debugName: "kitUserSettings" }] : []));
|
|
8314
8258
|
this.breadcrumbs = this.kitBreadcrumbsService.breadcrumbs;
|
|
8315
8259
|
this.userSettings$ = this.store.select(KIT_USER_SETTINGS_STATE_TOKEN);
|
|
8316
|
-
this.userSettingsKeys = KitUserSettingKeys;
|
|
8317
8260
|
}
|
|
8318
|
-
|
|
8261
|
+
setUserSettingByKey(key, value) {
|
|
8319
8262
|
this.store.dispatch(new SetUserSettingByKey({
|
|
8320
|
-
key
|
|
8321
|
-
value: JSON.stringify(
|
|
8263
|
+
key,
|
|
8264
|
+
value: JSON.stringify(value),
|
|
8322
8265
|
}));
|
|
8323
8266
|
}
|
|
8324
8267
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitUserSettingsComponent, deps: [{ token: i1$e.Store }, { token: KitBreadcrumbsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8325
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitUserSettingsComponent, isStandalone: true, selector: "
|
|
8268
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitUserSettingsComponent, isStandalone: true, selector: "kit-user-settings", inputs: { kitUserSettings: { classPropertyName: "kitUserSettings", publicName: "kitUserSettings", isSignal: true, isRequired: false, transformFunction: null } }, providers: [KitBreadcrumbsService], ngImport: i0, template: "<kit-breadcrumbs [items]=\"breadcrumbs()\" />\n<div class=\"kit-user-settings-title\">\n <kit-entity-title>\n {{ \"kit.userSettings.title\" | translate }}\n </kit-entity-title>\n</div>\n\n@if (userSettings$ | async; as userSettings) {\n <div class=\"kit-user-settings-content\">\n @for (setting of kitUserSettings(); track setting.key) {\n <p class=\"text\">{{ setting.title }}</p>\n <kit-toggle class=\"switcher\"\n [defaultChecked]=\"userSettings[setting.key] === 'true'\"\n (changed)=\"setUserSettingByKey(setting.key, $event)\" />\n }\n </div>\n}\n", styles: [".kit-user-settings-title{margin-top:25px;margin-bottom:25px}.kit-user-settings-content{display:grid;grid-template-columns:repeat(2,1fr);align-items:center;gap:10px}.kit-user-settings-content .text{color:var(--color-grey-4);font-size:14px;font-weight:400}.kit-user-settings-content .switcher{justify-self:end}\n"], dependencies: [{ kind: "ngmodule", type: KitBreadcrumbsModule }, { kind: "component", type: KitBreadcrumbsComponent, selector: "kit-breadcrumbs", inputs: ["items"] }, { kind: "ngmodule", type: KitToggleModule }, { kind: "component", type: KitToggleComponent, selector: "kit-toggle", inputs: ["label", "disabled", "readonly", "defaultChecked", "leftLabel", "rightLabel", "messageIcon", "messageText"], outputs: ["changed"] }, { kind: "ngmodule", type: KitEntityTitleModule }, { kind: "component", type: KitEntityTitleComponent, selector: "kit-entity-title" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8326
8269
|
}
|
|
8327
8270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitUserSettingsComponent, decorators: [{
|
|
8328
8271
|
type: Component,
|
|
8329
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
8272
|
+
args: [{ selector: 'kit-user-settings', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
8330
8273
|
KitBreadcrumbsModule,
|
|
8331
8274
|
KitToggleModule,
|
|
8332
8275
|
KitEntityTitleModule,
|
|
8333
8276
|
TranslatePipe,
|
|
8334
8277
|
AsyncPipe,
|
|
8335
|
-
], providers: [KitBreadcrumbsService], template: "<kit-breadcrumbs [items]=\"breadcrumbs()\" />\n<div class=\"kit-user-settings-title\">\n <kit-entity-title>\n {{ \"kit.userSettings.title\" | translate }}\n </kit-entity-title>\n</div>\n\n@if (userSettings$ | async; as userSettings) {\n <div class=\"kit-user-settings-content\">\n
|
|
8278
|
+
], providers: [KitBreadcrumbsService], template: "<kit-breadcrumbs [items]=\"breadcrumbs()\" />\n<div class=\"kit-user-settings-title\">\n <kit-entity-title>\n {{ \"kit.userSettings.title\" | translate }}\n </kit-entity-title>\n</div>\n\n@if (userSettings$ | async; as userSettings) {\n <div class=\"kit-user-settings-content\">\n @for (setting of kitUserSettings(); track setting.key) {\n <p class=\"text\">{{ setting.title }}</p>\n <kit-toggle class=\"switcher\"\n [defaultChecked]=\"userSettings[setting.key] === 'true'\"\n (changed)=\"setUserSettingByKey(setting.key, $event)\" />\n }\n </div>\n}\n", styles: [".kit-user-settings-title{margin-top:25px;margin-bottom:25px}.kit-user-settings-content{display:grid;grid-template-columns:repeat(2,1fr);align-items:center;gap:10px}.kit-user-settings-content .text{color:var(--color-grey-4);font-size:14px;font-weight:400}.kit-user-settings-content .switcher{justify-self:end}\n"] }]
|
|
8336
8279
|
}], ctorParameters: () => [{ type: i1$e.Store }, { type: KitBreadcrumbsService }] });
|
|
8337
8280
|
|
|
8338
8281
|
class KitFilterSelectorComponent {
|
|
@@ -9961,11 +9904,43 @@ class KitTranslateLoader {
|
|
|
9961
9904
|
}
|
|
9962
9905
|
}
|
|
9963
9906
|
|
|
9907
|
+
class KitTrackingCardComponent {
|
|
9908
|
+
constructor() {
|
|
9909
|
+
this.tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : []));
|
|
9910
|
+
this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
|
|
9911
|
+
this.contentIsHighlighted = input(false, ...(ngDevMode ? [{ debugName: "contentIsHighlighted" }] : []));
|
|
9912
|
+
this.firstTabIsActive = signal(true, ...(ngDevMode ? [{ debugName: "firstTabIsActive" }] : []));
|
|
9913
|
+
this.kitButtonType = KitButtonType;
|
|
9914
|
+
}
|
|
9915
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitTrackingCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9916
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: KitTrackingCardComponent, isStandalone: true, selector: "kit-tracking-card", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, contentIsHighlighted: { classPropertyName: "contentIsHighlighted", publicName: "contentIsHighlighted", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-tracking-card\"\n [class.selected]=\"selected()\">\n <div class=\"kit-tracking-card-head\">\n <ng-content select=\"[headTemplate]\"></ng-content>\n </div>\n\n <div class=\"kit-tracking-card-content\">\n <ng-content select=\"[contentTemplate]\"></ng-content>\n </div>\n\n <div class=\"kit-tracking-card-tabs\"\n [class.highlighted]=\"contentIsHighlighted()\">\n <div class=\"kit-tracking-card-tabs-head\">\n <kit-button class=\"text-ellipsis\"\n [class.active]=\"firstTabIsActive()\"\n [label]=\"tabs().first\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"firstTabIsActive.set(true)\"/>\n <kit-button class=\"text-ellipsis\"\n [class.active]=\"!firstTabIsActive()\"\n [label]=\"tabs().second\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"firstTabIsActive.set(false)\"/>\n </div>\n\n <div class=\"kit-tracking-card-tabs-content\"\n [class.active]=\"firstTabIsActive()\">\n <ng-content select=\"[firstTabTemplate]\"></ng-content>\n </div>\n\n <div class=\"kit-tracking-card-tabs-content\"\n [class.active]=\"!firstTabIsActive()\">\n <ng-content select=\"[secondTabTemplate]\"></ng-content>\n </div>\n </div>\n</div>", styles: [".kit-tracking-card{display:flex;flex-direction:column;padding:25px;border:2px solid var(--ui-kit-color-grey-11);border-radius:10px;box-sizing:border-box;background-color:var(--ui-kit-color-white);width:360px;min-height:337px;gap:15px}.kit-tracking-card-head{padding-bottom:12px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-tracking-card.selected{border:2px solid var(--ui-kit-color-main)}.kit-tracking-card-tabs{border-radius:8px;padding:10px;min-height:105px}.kit-tracking-card-tabs.highlighted{background-color:var(--ui-kit-color-grey-13)}.kit-tracking-card-tabs-head{display:flex;justify-content:space-between;margin-bottom:12px}.kit-tracking-card-tabs-head ::ng-deep .k-button{color:var(--ui-kit-color-grey-14);padding:0;height:auto;font-size:14px}.kit-tracking-card-tabs-head ::ng-deep .k-button:hover{color:var(--ui-kit-color-main)}.kit-tracking-card-tabs-head ::ng-deep .active .k-button{color:var(--ui-kit-color-main);text-decoration:underline}.kit-tracking-card-tabs-content{display:none}.kit-tracking-card-tabs-content.active{display:block}.kit-tracking-card .text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}@media screen and (max-width: 1512px){.kit-tracking-card{width:320px;min-height:320px}.kit-tracking-card-tabs{padding:0}.kit-tracking-card-tabs.highlighted{background-color:inherit}}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9917
|
+
}
|
|
9918
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitTrackingCardComponent, decorators: [{
|
|
9919
|
+
type: Component,
|
|
9920
|
+
args: [{ selector: 'kit-tracking-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
9921
|
+
KitButtonModule,
|
|
9922
|
+
], template: "<div class=\"kit-tracking-card\"\n [class.selected]=\"selected()\">\n <div class=\"kit-tracking-card-head\">\n <ng-content select=\"[headTemplate]\"></ng-content>\n </div>\n\n <div class=\"kit-tracking-card-content\">\n <ng-content select=\"[contentTemplate]\"></ng-content>\n </div>\n\n <div class=\"kit-tracking-card-tabs\"\n [class.highlighted]=\"contentIsHighlighted()\">\n <div class=\"kit-tracking-card-tabs-head\">\n <kit-button class=\"text-ellipsis\"\n [class.active]=\"firstTabIsActive()\"\n [label]=\"tabs().first\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"firstTabIsActive.set(true)\"/>\n <kit-button class=\"text-ellipsis\"\n [class.active]=\"!firstTabIsActive()\"\n [label]=\"tabs().second\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"firstTabIsActive.set(false)\"/>\n </div>\n\n <div class=\"kit-tracking-card-tabs-content\"\n [class.active]=\"firstTabIsActive()\">\n <ng-content select=\"[firstTabTemplate]\"></ng-content>\n </div>\n\n <div class=\"kit-tracking-card-tabs-content\"\n [class.active]=\"!firstTabIsActive()\">\n <ng-content select=\"[secondTabTemplate]\"></ng-content>\n </div>\n </div>\n</div>", styles: [".kit-tracking-card{display:flex;flex-direction:column;padding:25px;border:2px solid var(--ui-kit-color-grey-11);border-radius:10px;box-sizing:border-box;background-color:var(--ui-kit-color-white);width:360px;min-height:337px;gap:15px}.kit-tracking-card-head{padding-bottom:12px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-tracking-card.selected{border:2px solid var(--ui-kit-color-main)}.kit-tracking-card-tabs{border-radius:8px;padding:10px;min-height:105px}.kit-tracking-card-tabs.highlighted{background-color:var(--ui-kit-color-grey-13)}.kit-tracking-card-tabs-head{display:flex;justify-content:space-between;margin-bottom:12px}.kit-tracking-card-tabs-head ::ng-deep .k-button{color:var(--ui-kit-color-grey-14);padding:0;height:auto;font-size:14px}.kit-tracking-card-tabs-head ::ng-deep .k-button:hover{color:var(--ui-kit-color-main)}.kit-tracking-card-tabs-head ::ng-deep .active .k-button{color:var(--ui-kit-color-main);text-decoration:underline}.kit-tracking-card-tabs-content{display:none}.kit-tracking-card-tabs-content.active{display:block}.kit-tracking-card .text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}@media screen and (max-width: 1512px){.kit-tracking-card{width:320px;min-height:320px}.kit-tracking-card-tabs{padding:0}.kit-tracking-card-tabs.highlighted{background-color:inherit}}\n"] }]
|
|
9923
|
+
}] });
|
|
9924
|
+
|
|
9925
|
+
class KitTrackingTimelineComponent {
|
|
9926
|
+
constructor() {
|
|
9927
|
+
this.timelineItems = input.required(...(ngDevMode ? [{ debugName: "timelineItems" }] : []));
|
|
9928
|
+
}
|
|
9929
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitTrackingTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9930
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitTrackingTimelineComponent, isStandalone: true, selector: "kit-tracking-timeline", inputs: { timelineItems: { classPropertyName: "timelineItems", publicName: "timelineItems", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-tracking-timeline\">\n @for (item of timelineItems(); track $index) {\n <div class=\"kit-tracking-timeline-item\">\n <kit-truncate-text>\n <span class=\"kit-tracking-timeline-item-title\">{{ item.label }}: </span>\n <span class=\"kit-tracking-timeline-item-text\">{{ item.value }}</span>\n </kit-truncate-text>\n </div>\n }\n</div>", styles: [".kit-tracking-timeline{display:flex;flex-direction:column;gap:5px}.kit-tracking-timeline-item{padding-left:30px;position:relative;line-height:20px}.kit-tracking-timeline-item-title{font-size:13px;font-weight:400;color:var(--ui-kit-color-grey-10)}.kit-tracking-timeline-item-text{font-size:14px;font-weight:500}.kit-tracking-timeline-item:before{content:\"\";display:inline-block;position:absolute;width:10px;height:10px;border-radius:50%;background:var(--ui-kit-color-grey-12);top:5px;left:0}.kit-tracking-timeline-item:after{content:\"\";display:inline-block;width:1px;background:var(--ui-kit-color-grey-12);height:calc(100% + 10px);position:absolute;top:10px;left:5px;transform:translate(-50%)}.kit-tracking-timeline-item:last-child:after{display:none}\n"], dependencies: [{ kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9931
|
+
}
|
|
9932
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitTrackingTimelineComponent, decorators: [{
|
|
9933
|
+
type: Component,
|
|
9934
|
+
args: [{ selector: 'kit-tracking-timeline', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
9935
|
+
KitTruncateTextComponent,
|
|
9936
|
+
], template: "<div class=\"kit-tracking-timeline\">\n @for (item of timelineItems(); track $index) {\n <div class=\"kit-tracking-timeline-item\">\n <kit-truncate-text>\n <span class=\"kit-tracking-timeline-item-title\">{{ item.label }}: </span>\n <span class=\"kit-tracking-timeline-item-text\">{{ item.value }}</span>\n </kit-truncate-text>\n </div>\n }\n</div>", styles: [".kit-tracking-timeline{display:flex;flex-direction:column;gap:5px}.kit-tracking-timeline-item{padding-left:30px;position:relative;line-height:20px}.kit-tracking-timeline-item-title{font-size:13px;font-weight:400;color:var(--ui-kit-color-grey-10)}.kit-tracking-timeline-item-text{font-size:14px;font-weight:500}.kit-tracking-timeline-item:before{content:\"\";display:inline-block;position:absolute;width:10px;height:10px;border-radius:50%;background:var(--ui-kit-color-grey-12);top:5px;left:0}.kit-tracking-timeline-item:after{content:\"\";display:inline-block;width:1px;background:var(--ui-kit-color-grey-12);height:calc(100% + 10px);position:absolute;top:10px;left:5px;transform:translate(-50%)}.kit-tracking-timeline-item:last-child:after{display:none}\n"] }]
|
|
9937
|
+
}] });
|
|
9938
|
+
|
|
9964
9939
|
// KitButton
|
|
9965
9940
|
|
|
9966
9941
|
/**
|
|
9967
9942
|
* Generated bundle index. Do not edit.
|
|
9968
9943
|
*/
|
|
9969
9944
|
|
|
9970
|
-
export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, FetchUserPermissions, FetchUserSettings, HighlightPipe, KIT_BASE_PATH, KIT_DATETIME_FORMAT_LONG, KIT_DATE_FORMAT, KIT_GRID_CELL_DATE_FORMAT_CONFIG, KIT_GRID_STATE_TOKEN, KIT_USER_PERMISSIONS_STATE_TOKEN, KIT_USER_STATE_TOKEN, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitBreadcrumbsService, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonState, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCollapsedListComponent, KitCollapsedListDropdownAlign, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDataFieldComponent, KitDataFieldState, KitDatepickerComponent, KitDatepickerModule, KitDatepickerSize, KitDaterangeComponent, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDropdownComponent, KitDropdownItemTemplateDirective, KitDropdownModule, KitDropdownSize, KitEmptySectionComponent, KitEntityGridComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntityTitleComponent, KitEntityTitleModule, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardModule, KitFileUploadComponent, KitFileUploadModule, KitFilterCheckboxComponent, KitFilterLogic, KitFilterOperator, KitFilterType, KitGlobalSearchComponent, KitGridCellComponent, KitGridCellService, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridColumnManagerComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridDetailsButtonComponent, KitGridExportComponent, KitGridFiltersComponent, KitGridModule, KitGridSearchComponent, KitGridSortSettingsMode, KitGridState, KitGridUrlStateService, KitGridViewType, KitGridViewsComponent, KitGridViewsState, KitInputLabelComponent, KitInputLabelModule, KitInputMessageComponent, KitInputMessageModule, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsModule, KitNavigationTabsType, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitNumericTextboxSize, KitNumericTextboxState, KitOptionToggleComponent, KitPageLayoutComponent, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillTheme, KitPillType, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitRadioButtonType, KitSchedulerComponent, KitSchedulerMonthEventTemplateDirective, KitSchedulerWeekEventTemplateDirective, KitScrollNavigationComponent, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSearchBarModule,
|
|
9945
|
+
export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, FetchUserPermissions, FetchUserSettings, HighlightPipe, KIT_BASE_PATH, KIT_DATETIME_FORMAT_LONG, KIT_DATE_FORMAT, KIT_GRID_CELL_DATE_FORMAT_CONFIG, KIT_GRID_STATE_TOKEN, KIT_USER_PERMISSIONS_STATE_TOKEN, KIT_USER_STATE_TOKEN, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitBreadcrumbsService, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonState, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCollapsedListComponent, KitCollapsedListDropdownAlign, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDataFieldComponent, KitDataFieldState, KitDatepickerComponent, KitDatepickerModule, KitDatepickerSize, KitDaterangeComponent, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDropdownComponent, KitDropdownItemTemplateDirective, KitDropdownModule, KitDropdownSize, KitEmptySectionComponent, KitEntityGridComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntityTitleComponent, KitEntityTitleModule, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardModule, KitFileUploadComponent, KitFileUploadModule, KitFilterCheckboxComponent, KitFilterLogic, KitFilterOperator, KitFilterType, KitGlobalSearchComponent, KitGridCellComponent, KitGridCellService, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridColumnManagerComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridDetailsButtonComponent, KitGridExportComponent, KitGridFiltersComponent, KitGridModule, KitGridSearchComponent, KitGridSortSettingsMode, KitGridState, KitGridUrlStateService, KitGridViewType, KitGridViewsComponent, KitGridViewsState, KitInputLabelComponent, KitInputLabelModule, KitInputMessageComponent, KitInputMessageModule, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsModule, KitNavigationTabsType, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitNumericTextboxSize, KitNumericTextboxState, KitOptionToggleComponent, KitPageLayoutComponent, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillTheme, KitPillType, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitRadioButtonType, KitRoutePathComponent, KitSchedulerComponent, KitSchedulerMonthEventTemplateDirective, KitSchedulerWeekEventTemplateDirective, KitScrollNavigationComponent, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSearchBarModule, KitSidebarComponent, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgIconType, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTabComponent, KitTabContentDirective, KitTabsComponent, KitTabsModule, KitTabsSize, KitTabsType, KitTextLabelComponent, KitTextLabelModule, KitTextLabelState, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTextboxSize, KitTextboxState, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTileLayoutModule, KitTimelineCardComponent, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTimepickerModule, KitTitleTemplateDirective, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipPosition, KitTopBarComponent, KitTrackingCardComponent, KitTrackingTimelineComponent, KitTranslateLoader, KitTranslateService, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, KitUserApplicationsState, KitUserPermissionsState, KitUserSettingsComponent, KitUserSettingsState, KitUserState, RemoveGridFilter, SetGridColumns, SetGridFilters, SetGridSearch, SetGridSkip, SetGridSort, SetGridTake, UpdateGridFilter, buildRandomUUID, changeFilterField, createDataFetcherFactory, findMatches, kitBuildFilterBooleanOptions, kitBuildFilterListOptions, kitBuildFilters, kitBuildGridColumn, kitBuildGridDataResults, kitBuildOdataFilter, kitBuildSortString, kitDataStateToODataString, kitEncodeViewNameToUrl, mapGlobalSearchResult };
|
|
9971
9946
|
//# sourceMappingURL=indigina-ui-kit.mjs.map
|