@indigina/ui-kit 1.1.601 → 1.1.603
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.
|
@@ -6923,22 +6923,25 @@ class KitStatusLabelComponent {
|
|
|
6923
6923
|
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
6924
6924
|
this.tooltip = input(/* @ts-ignore */
|
|
6925
6925
|
...(ngDevMode ? [undefined, { debugName: "tooltip" }] : /* istanbul ignore next */ []));
|
|
6926
|
+
this.truncateText = input(true, /* @ts-ignore */
|
|
6927
|
+
...(ngDevMode ? [{ debugName: "truncateText" }] : /* istanbul ignore next */ []));
|
|
6926
6928
|
this.cssClasses = computed(() => [
|
|
6927
6929
|
this.color(),
|
|
6928
6930
|
this.size(),
|
|
6931
|
+
this.truncateText() ? undefined : 'no-truncate',
|
|
6929
6932
|
].filter((value) => !!value), /* @ts-ignore */
|
|
6930
6933
|
...(ngDevMode ? [{ debugName: "cssClasses" }] : /* istanbul ignore next */ []));
|
|
6931
6934
|
}
|
|
6932
6935
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitStatusLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6933
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: KitStatusLabelComponent, isStandalone: true, selector: "kit-status-label", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-status-label\"\n [ngClass]=\"cssClasses()\">\n <kit-truncate-text [tooltipText]=\"tooltip()\">\n <ng-content></ng-content>\n </kit-truncate-text>\n</div>\n", styles: [".kit-status-label{display:inline-flex;align-items:center;justify-content:center;padding:0 8px;font-weight:500;border-width:1px;border-style:solid;border-radius:4px;line-height:1;box-sizing:border-box}.kit-status-label.small{height:20px;font-size:12px}.kit-status-label.large{height:28px;font-size:16px}.kit-status-label.white{color:var(--ui-kit-color-grey-14);border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-white)}.kit-status-label.purple{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-status-label.teal{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-status-label.grey{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-16)}.kit-status-label.orange{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-3)}.kit-status-label.green{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background-color:var(--ui-kit-color-green-4)}.kit-status-label.blue{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-status-label.pink{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-status-label.red{color:var(--ui-kit-color-red-4);border-color:var(--ui-kit-color-red-4);background:var(--ui-kit-color-red-3)}\n"], dependencies: [{ kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6936
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: KitStatusLabelComponent, isStandalone: true, selector: "kit-status-label", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, truncateText: { classPropertyName: "truncateText", publicName: "truncateText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-status-label\"\n [ngClass]=\"cssClasses()\">\n <kit-truncate-text [tooltipText]=\"tooltip()\">\n <ng-content></ng-content>\n </kit-truncate-text>\n</div>\n", styles: [".kit-status-label{display:inline-flex;align-items:center;justify-content:center;padding:0 8px;font-weight:500;border-width:1px;border-style:solid;border-radius:4px;line-height:1;box-sizing:border-box}.kit-status-label.small{min-height:20px;font-size:12px}.kit-status-label.large{min-height:28px;font-size:16px}.kit-status-label.white{color:var(--ui-kit-color-grey-14);border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-white)}.kit-status-label.purple{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-status-label.teal{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-status-label.grey{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-16)}.kit-status-label.orange{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-3)}.kit-status-label.green{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background-color:var(--ui-kit-color-green-4)}.kit-status-label.blue{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-status-label.pink{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-status-label.red{color:var(--ui-kit-color-red-4);border-color:var(--ui-kit-color-red-4);background:var(--ui-kit-color-red-3)}.kit-status-label.no-truncate{height:auto}.kit-status-label.no-truncate ::ng-deep .truncate-text{display:-webkit-box;-webkit-box-orient:vertical;white-space:normal}\n"], dependencies: [{ kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6934
6937
|
}
|
|
6935
6938
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitStatusLabelComponent, decorators: [{
|
|
6936
6939
|
type: Component,
|
|
6937
6940
|
args: [{ selector: 'kit-status-label', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
6938
6941
|
KitTruncateTextComponent,
|
|
6939
6942
|
NgClass,
|
|
6940
|
-
], template: "<div class=\"kit-status-label\"\n [ngClass]=\"cssClasses()\">\n <kit-truncate-text [tooltipText]=\"tooltip()\">\n <ng-content></ng-content>\n </kit-truncate-text>\n</div>\n", styles: [".kit-status-label{display:inline-flex;align-items:center;justify-content:center;padding:0 8px;font-weight:500;border-width:1px;border-style:solid;border-radius:4px;line-height:1;box-sizing:border-box}.kit-status-label.small{height:20px;font-size:12px}.kit-status-label.large{height:28px;font-size:16px}.kit-status-label.white{color:var(--ui-kit-color-grey-14);border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-white)}.kit-status-label.purple{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-status-label.teal{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-status-label.grey{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-16)}.kit-status-label.orange{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-3)}.kit-status-label.green{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background-color:var(--ui-kit-color-green-4)}.kit-status-label.blue{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-status-label.pink{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-status-label.red{color:var(--ui-kit-color-red-4);border-color:var(--ui-kit-color-red-4);background:var(--ui-kit-color-red-3)}\n"] }]
|
|
6941
|
-
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }] } });
|
|
6943
|
+
], template: "<div class=\"kit-status-label\"\n [ngClass]=\"cssClasses()\">\n <kit-truncate-text [tooltipText]=\"tooltip()\">\n <ng-content></ng-content>\n </kit-truncate-text>\n</div>\n", styles: [".kit-status-label{display:inline-flex;align-items:center;justify-content:center;padding:0 8px;font-weight:500;border-width:1px;border-style:solid;border-radius:4px;line-height:1;box-sizing:border-box}.kit-status-label.small{min-height:20px;font-size:12px}.kit-status-label.large{min-height:28px;font-size:16px}.kit-status-label.white{color:var(--ui-kit-color-grey-14);border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-white)}.kit-status-label.purple{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-status-label.teal{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-status-label.grey{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-16)}.kit-status-label.orange{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-3)}.kit-status-label.green{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background-color:var(--ui-kit-color-green-4)}.kit-status-label.blue{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-status-label.pink{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-status-label.red{color:var(--ui-kit-color-red-4);border-color:var(--ui-kit-color-red-4);background:var(--ui-kit-color-red-3)}.kit-status-label.no-truncate{height:auto}.kit-status-label.no-truncate ::ng-deep .truncate-text{display:-webkit-box;-webkit-box-orient:vertical;white-space:normal}\n"] }]
|
|
6944
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], truncateText: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncateText", required: false }] }] } });
|
|
6942
6945
|
|
|
6943
6946
|
class KitSelectableCardComponent {
|
|
6944
6947
|
constructor() {
|
|
@@ -6960,7 +6963,7 @@ class KitSelectableCardComponent {
|
|
|
6960
6963
|
this.selectedId.set(null);
|
|
6961
6964
|
}
|
|
6962
6965
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitSelectableCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6963
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitSelectableCardComponent, isStandalone: true, selector: "kit-selectable-card", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedId: "selectedIdChange", cardClick: "cardClick" }, ngImport: i0, template: "<div class=\"kit-selectable-card-group\">\n @for (item of items(); track item.id) {\n <div class=\"kit-selectable-card\"\n [class.selected]=\"isSelected(item.id)\"\n (click)=\"handleCardClick(item)\">\n <div class=\"kit-selectable-card-header\">\n <kit-radio-button [value]=\"item.id\"\n [label]=\"item.title\"\n [checked]=\"isSelected(item.id)\">\n </kit-radio-button>\n @if (item.statusLabel) {\n <kit-status-label class=\"kit-selectable-card-status-label\"\n [color]=\"item.statusLabelColor ?? kitStatusLabelColor.WHITE\">\n {{ item.statusLabel }}\n </kit-status-label>\n }\n </div>\n @if (item.captions?.length) {\n <div class=\"kit-selectable-card-captions\">\n @for (caption of item.captions!; track caption.key) {\n <div class=\"kit-selectable-card-caption\">\n <span class=\"kit-selectable-card-caption-key\">{{ caption.key }}</span>\n <span class=\"kit-selectable-card-caption-value\">\n <kit-truncate-text>{{ caption.value }}</kit-truncate-text>\n </span>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".kit-selectable-card-group{display:flex;gap:15px}.kit-selectable-card-group .kit-selectable-card{cursor:pointer;padding:20px;min-width:300px;background-color:var(--ui-kit-color-white);color:var(--ui-kit-color-grey-10);border:1px solid var(--ui-kit-color-grey-11);border-radius:10px}.kit-selectable-card-group .kit-selectable-card.selected{border-color:var(--ui-kit-color-main);background-color:color-mix(in srgb,var(--ui-kit-color-main) 20%,transparent)}.kit-selectable-card-group .kit-selectable-card:hover:not(.selected){border-color:var(--ui-kit-color-hover);opacity:.8}.kit-selectable-card-group .kit-selectable-card-header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}.kit-selectable-card-group .kit-selectable-card-status-label{overflow:hidden;min-width:0}.kit-selectable-card-group .kit-selectable-card .kit-selectable-card-captions{display:flex;flex-direction:column;gap:5px;margin-top:10px}.kit-selectable-card-group .kit-selectable-card .kit-selectable-card-captions .kit-selectable-card-caption{display:flex;justify-content:space-between;font-size:14px}.kit-selectable-card-group .kit-selectable-card .kit-selectable-card-captions .kit-selectable-card-caption-key{color:var(--ui-kit-color-main)}.kit-selectable-card-group .kit-selectable-card .kit-selectable-card-captions .kit-selectable-card-caption-value{text-align:right;max-width:200px}.kit-selectable-card-group .kit-selectable-card ::ng-deep .kit-selectable-card-status-label .kit-status-label{width:100%;box-sizing:border-box}.kit-selectable-card-group .kit-selectable-card ::ng-deep .kit-radio-button{pointer-events:none}.kit-selectable-card-group .kit-selectable-card ::ng-deep .kit-radio-button-item{height:auto}.kit-selectable-card-group .kit-selectable-card ::ng-deep .kit-radio-button-item .k-label{font-size:16px;font-weight:500;cursor:pointer;line-height:22px}\n"], dependencies: [{ 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: KitStatusLabelComponent, selector: "kit-status-label", inputs: ["color", "size", "tooltip"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6966
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitSelectableCardComponent, isStandalone: true, selector: "kit-selectable-card", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedId: "selectedIdChange", cardClick: "cardClick" }, ngImport: i0, template: "<div class=\"kit-selectable-card-group\">\n @for (item of items(); track item.id) {\n <div class=\"kit-selectable-card\"\n [class.selected]=\"isSelected(item.id)\"\n (click)=\"handleCardClick(item)\">\n <div class=\"kit-selectable-card-header\">\n <kit-radio-button [value]=\"item.id\"\n [label]=\"item.title\"\n [checked]=\"isSelected(item.id)\">\n </kit-radio-button>\n @if (item.statusLabel) {\n <kit-status-label class=\"kit-selectable-card-status-label\"\n [color]=\"item.statusLabelColor ?? kitStatusLabelColor.WHITE\">\n {{ item.statusLabel }}\n </kit-status-label>\n }\n </div>\n @if (item.captions?.length) {\n <div class=\"kit-selectable-card-captions\">\n @for (caption of item.captions!; track caption.key) {\n <div class=\"kit-selectable-card-caption\">\n <span class=\"kit-selectable-card-caption-key\">{{ caption.key }}</span>\n <span class=\"kit-selectable-card-caption-value\">\n <kit-truncate-text>{{ caption.value }}</kit-truncate-text>\n </span>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".kit-selectable-card-group{display:flex;gap:15px}.kit-selectable-card-group .kit-selectable-card{cursor:pointer;padding:20px;min-width:300px;background-color:var(--ui-kit-color-white);color:var(--ui-kit-color-grey-10);border:1px solid var(--ui-kit-color-grey-11);border-radius:10px}.kit-selectable-card-group .kit-selectable-card.selected{border-color:var(--ui-kit-color-main);background-color:color-mix(in srgb,var(--ui-kit-color-main) 20%,transparent)}.kit-selectable-card-group .kit-selectable-card:hover:not(.selected){border-color:var(--ui-kit-color-hover);opacity:.8}.kit-selectable-card-group .kit-selectable-card-header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}.kit-selectable-card-group .kit-selectable-card-status-label{overflow:hidden;min-width:0}.kit-selectable-card-group .kit-selectable-card .kit-selectable-card-captions{display:flex;flex-direction:column;gap:5px;margin-top:10px}.kit-selectable-card-group .kit-selectable-card .kit-selectable-card-captions .kit-selectable-card-caption{display:flex;justify-content:space-between;font-size:14px}.kit-selectable-card-group .kit-selectable-card .kit-selectable-card-captions .kit-selectable-card-caption-key{color:var(--ui-kit-color-main)}.kit-selectable-card-group .kit-selectable-card .kit-selectable-card-captions .kit-selectable-card-caption-value{text-align:right;max-width:200px}.kit-selectable-card-group .kit-selectable-card ::ng-deep .kit-selectable-card-status-label .kit-status-label{width:100%;box-sizing:border-box}.kit-selectable-card-group .kit-selectable-card ::ng-deep .kit-radio-button{pointer-events:none}.kit-selectable-card-group .kit-selectable-card ::ng-deep .kit-radio-button-item{height:auto}.kit-selectable-card-group .kit-selectable-card ::ng-deep .kit-radio-button-item .k-label{font-size:16px;font-weight:500;cursor:pointer;line-height:22px}\n"], dependencies: [{ 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: KitStatusLabelComponent, selector: "kit-status-label", inputs: ["color", "size", "tooltip", "truncateText"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6964
6967
|
}
|
|
6965
6968
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitSelectableCardComponent, decorators: [{
|
|
6966
6969
|
type: Component,
|
|
@@ -8552,7 +8555,7 @@ class KitTimelineCompactComponent {
|
|
|
8552
8555
|
this.collapsedItems.set(new Set(items.filter(item => !!item.subItems?.length)));
|
|
8553
8556
|
}
|
|
8554
8557
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitTimelineCompactComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8555
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitTimelineCompactComponent, isStandalone: true, selector: "kit-timeline-compact", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, collapseAllSubItems: { classPropertyName: "collapseAllSubItems", publicName: "collapseAllSubItems", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-timeline-compact\">\n @for (item of items(); track item) {\n <div class=\"step\">\n <div class=\"step-inner\">\n <div class=\"step-icon-wrapper\"\n [ngClass]=\"item.itemTheme\">\n <div class=\"step-icon\"\n [ngClass]=\"item.iconType ?? kitSvgIconType.FILL\">\n <kit-svg-icon [icon]=\"item.icon\" />\n </div>\n </div>\n\n <ng-container *ngTemplateOutlet=\"description; context: { item: item }\"></ng-container>\n </div>\n\n @if (item.subItems?.length) {\n <div class=\"sub-items-wrapper\"\n [class.collapsed]=\"isCollapsed(item)\">\n <div class=\"sub-items\">\n @for (subItem of item.subItems; track subItem) {\n <div class=\"sub-item\">\n <div class=\"step-icon-wrapper\"\n [ngClass]=\"subItem.itemTheme\">\n <div class=\"step-icon\"\n [ngClass]=\"subItem.iconType ?? kitSvgIconType.FILL\">\n <kit-svg-icon [icon]=\"subItem.icon\" />\n </div>\n </div>\n\n <ng-container *ngTemplateOutlet=\"description; context: { item: subItem }\"></ng-container>\n </div>\n }\n </div>\n </div>\n }\n <div class=\"step-line\"\n [ngClass]=\"item.lineTheme ?? kitTimelineCompactLineTheme.GREY\">\n </div>\n </div>\n }\n</div>\n\n<ng-template #description\n let-item=\"item\">\n <div class=\"step-content\">\n <div class=\"step-description\">\n <div class=\"description-title\">\n <div class=\"step-title\">{{ item.title }}</div>\n @if (item.subItems?.length) {\n <kit-button class=\"step-toggle-btn\"\n [icon]=\"kitSvgIcon.CHEVRON_DOWN\"\n [type]=\"kitButtonType.LINK\"\n [kind]=\"kitButtonKind.SMALL\"\n [class.collapsed]=\"isCollapsed(item)\"\n (click)=\"toggleSubItems(item)\" />\n }\n @if (item.label) {\n <kit-status-label class=\"step-content-label\"\n [tooltip]=\"item.labelTooltip\"\n [color]=\"item.labelColor\">\n {{ item.label }}\n </kit-status-label>\n }\n </div>\n\n @if (item.status) {\n <div class=\"status-wrapper\">\n <kit-status-label [color]=\"item.statusColor ?? kitStatusLabelColor.BLUE\">\n {{ item.status }}\n </kit-status-label>\n </div>\n }\n\n <div class=\"description-text\">\n @if (item.date || item.dateAdditionalText) {\n <div class=\"description-text-date\">{{ item.date }}</div>\n\n @if (item.dateAdditionalText) {\n <div class=\"description-text-additional\">{{ item.dateAdditionalText }}</div>\n }\n\n @if (item.description) {\n <span class=\"description-text-separator\">|</span>\n }\n }\n\n @if (item.description) {\n @if (item.descriptionIcon) {\n <div class=\"description-icon\"\n [ngClass]=\"item.descriptionIconType ?? kitSvgIconType.FILL\">\n <kit-svg-icon [icon]=\"item.descriptionIcon\" />\n </div>\n }\n <div class=\"description-text-body\">{{ item.description }}</div>\n }\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".kit-timeline-compact{display:flex;flex-direction:column;gap:20px}.kit-timeline-compact .step{position:relative}.kit-timeline-compact .step:last-child .step-line{display:none}.kit-timeline-compact .step-line{position:absolute;top:32px;left:15px;width:2px;height:100%;background-color:var(--ui-kit-color-grey-21)}.kit-timeline-compact .step-line.black{background-color:var(--ui-kit-color-grey-21)}.kit-timeline-compact .step-line.grey{background-color:var(--ui-kit-color-grey-19)}.kit-timeline-compact .step-inner{position:relative;z-index:2;display:flex;gap:12px}.kit-timeline-compact .step-description{display:flex;flex-direction:column;gap:4px}.kit-timeline-compact .description-text{display:flex;align-items:center;color:var(--ui-kit-color-grey-20);font-size:12px;font-weight:400}.kit-timeline-compact .description-text-date{white-space:nowrap}.kit-timeline-compact .description-text-additional{margin-left:5px;color:var(--ui-kit-color-red-1)}.kit-timeline-compact .description-text-separator{margin:0 5px}.kit-timeline-compact .description-title{display:flex;align-items:center}.kit-timeline-compact .description-title .step-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-kit-color-grey-22);font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;text-transform:capitalize}.kit-timeline-compact .step-content{display:flex;align-items:flex-start;gap:12px}.kit-timeline-compact .step-content-label{margin-left:10px}.kit-timeline-compact .step-icon-wrapper{width:32px;height:32px;border-radius:50%;flex-shrink:0}.kit-timeline-compact .step-icon-wrapper.green{background:var(--ui-kit-color-green-1)}.kit-timeline-compact .step-icon-wrapper.green .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.green .step-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-compact .step-icon-wrapper.green .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-compact .step-icon-wrapper.blue{background:var(--ui-kit-color-blue-2)}.kit-timeline-compact .step-icon-wrapper.blue .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.blue .step-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-compact .step-icon-wrapper.blue .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-compact .step-icon-wrapper.grey{background:var(--ui-kit-color-grey-19)}.kit-timeline-compact .step-icon-wrapper.grey .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.grey .step-icon.fill{fill:var(--ui-kit-color-grey-20);stroke:none}.kit-timeline-compact .step-icon-wrapper.grey .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-20)}.kit-timeline-compact .step-icon-wrapper.success{background:var(--ui-kit-color-green-1)}.kit-timeline-compact .step-icon-wrapper.success .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.success .step-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-compact .step-icon-wrapper.success .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-compact .step-icon-wrapper.warning{background:var(--ui-kit-color-orange)}.kit-timeline-compact .step-icon-wrapper.warning .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.warning .step-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-compact .step-icon-wrapper.warning .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-compact .step-icon-wrapper.danger{background:var(--ui-kit-color-red-1)}.kit-timeline-compact .step-icon-wrapper.danger .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.danger .step-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-compact .step-icon-wrapper.danger .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-compact .step-toggle-btn{transition:transform .3s ease}.kit-timeline-compact .step-toggle-btn.collapsed{transform:rotate(-180deg)}.kit-timeline-compact .description-icon{width:16px;height:16px;margin-right:5px}.kit-timeline-compact .description-icon.fill{fill:var(--ui-kit-color-grey-23);stroke:none}.kit-timeline-compact .description-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-23)}.kit-timeline-compact .sub-items-wrapper{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s ease}.kit-timeline-compact .sub-items-wrapper.collapsed{grid-template-rows:0fr}.kit-timeline-compact .sub-items{position:relative;padding-left:60px;overflow:hidden}.kit-timeline-compact .sub-item{position:relative;display:flex;gap:12px;padding:15px 0 0}.kit-timeline-compact .sub-item:before{content:\"\";position:absolute;top:0;left:-15px;height:100%;width:1px;background-color:var(--ui-kit-color-grey-19)}.kit-timeline-compact .sub-item:after{content:\"\";position:absolute;top:25px;left:-15px;width:15px;height:1px;background-color:var(--ui-kit-color-grey-19)}.kit-timeline-compact .sub-item:first-child:before{top:5px;height:calc(100% - 5px)}.kit-timeline-compact .sub-item:last-child:before{height:25px}.kit-timeline-compact .sub-item .step-icon-wrapper{width:16px;height:16px;margin-top:2px;flex-shrink:0}.kit-timeline-compact .sub-item .step-icon-wrapper .step-icon{width:10px}\n"], dependencies: [{ kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitStatusLabelComponent, selector: "kit-status-label", inputs: ["color", "size", "tooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8558
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitTimelineCompactComponent, isStandalone: true, selector: "kit-timeline-compact", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, collapseAllSubItems: { classPropertyName: "collapseAllSubItems", publicName: "collapseAllSubItems", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-timeline-compact\">\n @for (item of items(); track item) {\n <div class=\"step\">\n <div class=\"step-inner\">\n <div class=\"step-icon-wrapper\"\n [ngClass]=\"item.itemTheme\">\n <div class=\"step-icon\"\n [ngClass]=\"item.iconType ?? kitSvgIconType.FILL\">\n <kit-svg-icon [icon]=\"item.icon\" />\n </div>\n </div>\n\n <ng-container *ngTemplateOutlet=\"description; context: { item: item }\"></ng-container>\n </div>\n\n @if (item.subItems?.length) {\n <div class=\"sub-items-wrapper\"\n [class.collapsed]=\"isCollapsed(item)\">\n <div class=\"sub-items\">\n @for (subItem of item.subItems; track subItem) {\n <div class=\"sub-item\">\n <div class=\"step-icon-wrapper\"\n [ngClass]=\"subItem.itemTheme\">\n <div class=\"step-icon\"\n [ngClass]=\"subItem.iconType ?? kitSvgIconType.FILL\">\n <kit-svg-icon [icon]=\"subItem.icon\" />\n </div>\n </div>\n\n <ng-container *ngTemplateOutlet=\"description; context: { item: subItem }\"></ng-container>\n </div>\n }\n </div>\n </div>\n }\n <div class=\"step-line\"\n [ngClass]=\"item.lineTheme ?? kitTimelineCompactLineTheme.GREY\">\n </div>\n </div>\n }\n</div>\n\n<ng-template #description\n let-item=\"item\">\n <div class=\"step-content\">\n <div class=\"step-description\">\n <div class=\"description-title\">\n <div class=\"step-title\">{{ item.title }}</div>\n @if (item.subItems?.length) {\n <kit-button class=\"step-toggle-btn\"\n [icon]=\"kitSvgIcon.CHEVRON_DOWN\"\n [type]=\"kitButtonType.LINK\"\n [kind]=\"kitButtonKind.SMALL\"\n [class.collapsed]=\"isCollapsed(item)\"\n (click)=\"toggleSubItems(item)\" />\n }\n @if (item.label) {\n <kit-status-label class=\"step-content-label\"\n [tooltip]=\"item.labelTooltip\"\n [color]=\"item.labelColor\">\n {{ item.label }}\n </kit-status-label>\n }\n </div>\n\n @if (item.status) {\n <div class=\"status-wrapper\">\n <kit-status-label [color]=\"item.statusColor ?? kitStatusLabelColor.BLUE\">\n {{ item.status }}\n </kit-status-label>\n </div>\n }\n\n <div class=\"description-text\">\n @if (item.date || item.dateAdditionalText) {\n <div class=\"description-text-date\">{{ item.date }}</div>\n\n @if (item.dateAdditionalText) {\n <div class=\"description-text-additional\">{{ item.dateAdditionalText }}</div>\n }\n\n @if (item.description) {\n <span class=\"description-text-separator\">|</span>\n }\n }\n\n @if (item.description) {\n @if (item.descriptionIcon) {\n <div class=\"description-icon\"\n [ngClass]=\"item.descriptionIconType ?? kitSvgIconType.FILL\">\n <kit-svg-icon [icon]=\"item.descriptionIcon\" />\n </div>\n }\n <div class=\"description-text-body\">{{ item.description }}</div>\n }\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".kit-timeline-compact{display:flex;flex-direction:column;gap:20px}.kit-timeline-compact .step{position:relative}.kit-timeline-compact .step:last-child .step-line{display:none}.kit-timeline-compact .step-line{position:absolute;top:32px;left:15px;width:2px;height:100%;background-color:var(--ui-kit-color-grey-21)}.kit-timeline-compact .step-line.black{background-color:var(--ui-kit-color-grey-21)}.kit-timeline-compact .step-line.grey{background-color:var(--ui-kit-color-grey-19)}.kit-timeline-compact .step-inner{position:relative;z-index:2;display:flex;gap:12px}.kit-timeline-compact .step-description{display:flex;flex-direction:column;gap:4px}.kit-timeline-compact .description-text{display:flex;align-items:center;color:var(--ui-kit-color-grey-20);font-size:12px;font-weight:400}.kit-timeline-compact .description-text-date{white-space:nowrap}.kit-timeline-compact .description-text-additional{margin-left:5px;color:var(--ui-kit-color-red-1)}.kit-timeline-compact .description-text-separator{margin:0 5px}.kit-timeline-compact .description-title{display:flex;align-items:center}.kit-timeline-compact .description-title .step-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-kit-color-grey-22);font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;text-transform:capitalize}.kit-timeline-compact .step-content{display:flex;align-items:flex-start;gap:12px}.kit-timeline-compact .step-content-label{margin-left:10px}.kit-timeline-compact .step-icon-wrapper{width:32px;height:32px;border-radius:50%;flex-shrink:0}.kit-timeline-compact .step-icon-wrapper.green{background:var(--ui-kit-color-green-1)}.kit-timeline-compact .step-icon-wrapper.green .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.green .step-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-compact .step-icon-wrapper.green .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-compact .step-icon-wrapper.blue{background:var(--ui-kit-color-blue-2)}.kit-timeline-compact .step-icon-wrapper.blue .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.blue .step-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-compact .step-icon-wrapper.blue .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-compact .step-icon-wrapper.grey{background:var(--ui-kit-color-grey-19)}.kit-timeline-compact .step-icon-wrapper.grey .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.grey .step-icon.fill{fill:var(--ui-kit-color-grey-20);stroke:none}.kit-timeline-compact .step-icon-wrapper.grey .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-20)}.kit-timeline-compact .step-icon-wrapper.success{background:var(--ui-kit-color-green-1)}.kit-timeline-compact .step-icon-wrapper.success .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.success .step-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-compact .step-icon-wrapper.success .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-compact .step-icon-wrapper.warning{background:var(--ui-kit-color-orange)}.kit-timeline-compact .step-icon-wrapper.warning .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.warning .step-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-compact .step-icon-wrapper.warning .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-compact .step-icon-wrapper.danger{background:var(--ui-kit-color-red-1)}.kit-timeline-compact .step-icon-wrapper.danger .step-icon{width:16px;height:100%;margin:auto}.kit-timeline-compact .step-icon-wrapper.danger .step-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-compact .step-icon-wrapper.danger .step-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-compact .step-toggle-btn{transition:transform .3s ease}.kit-timeline-compact .step-toggle-btn.collapsed{transform:rotate(-180deg)}.kit-timeline-compact .description-icon{width:16px;height:16px;margin-right:5px}.kit-timeline-compact .description-icon.fill{fill:var(--ui-kit-color-grey-23);stroke:none}.kit-timeline-compact .description-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-23)}.kit-timeline-compact .sub-items-wrapper{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s ease}.kit-timeline-compact .sub-items-wrapper.collapsed{grid-template-rows:0fr}.kit-timeline-compact .sub-items{position:relative;padding-left:60px;overflow:hidden}.kit-timeline-compact .sub-item{position:relative;display:flex;gap:12px;padding:15px 0 0}.kit-timeline-compact .sub-item:before{content:\"\";position:absolute;top:0;left:-15px;height:100%;width:1px;background-color:var(--ui-kit-color-grey-19)}.kit-timeline-compact .sub-item:after{content:\"\";position:absolute;top:25px;left:-15px;width:15px;height:1px;background-color:var(--ui-kit-color-grey-19)}.kit-timeline-compact .sub-item:first-child:before{top:5px;height:calc(100% - 5px)}.kit-timeline-compact .sub-item:last-child:before{height:25px}.kit-timeline-compact .sub-item .step-icon-wrapper{width:16px;height:16px;margin-top:2px;flex-shrink:0}.kit-timeline-compact .sub-item .step-icon-wrapper .step-icon{width:10px}\n"], dependencies: [{ kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitStatusLabelComponent, selector: "kit-status-label", inputs: ["color", "size", "tooltip", "truncateText"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8556
8559
|
}
|
|
8557
8560
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitTimelineCompactComponent, decorators: [{
|
|
8558
8561
|
type: Component,
|
|
@@ -8806,7 +8809,7 @@ class KitFileCardComponent {
|
|
|
8806
8809
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFileCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8807
8810
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitFileCardComponent, isStandalone: true, selector: "kit-file-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fileType: { classPropertyName: "fileType", publicName: "fileType", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, fileSize: { classPropertyName: "fileSize", publicName: "fileSize", isSignal: true, isRequired: false, transformFunction: null }, showViewFileButton: { classPropertyName: "showViewFileButton", publicName: "showViewFileButton", isSignal: true, isRequired: false, transformFunction: null }, useUTCDateValues: { classPropertyName: "useUTCDateValues", publicName: "useUTCDateValues", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, subTitleColor: { classPropertyName: "subTitleColor", publicName: "subTitleColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewButtonClicked: "viewButtonClicked", downloadButtonClicked: "downloadButtonClicked" }, providers: [
|
|
8808
8811
|
DatePipe,
|
|
8809
|
-
], queries: [{ propertyName: "customMessages", first: true, predicate: KitFileCardMessagesComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-file-card\"\n [ngClass]=\"type() ? [type(), size()] : [size()]\">\n <div class=\"kit-file-card-header\">\n <div class=\"card-title\">{{ title() }}</div>\n <div class=\"card-subtitle\">\n <div class=\"card-type\">\n <kit-truncate-text>{{ label() }}</kit-truncate-text>\n </div>\n @if (subTitle()) {\n <div class=\"card-subtitle-label\">\n <kit-status-label [color]=\"subTitleColor()\">\n {{ subTitle() }}\n </kit-status-label>\n </div>\n }\n </div>\n </div>\n\n <kit-svg-icon class=\"kit-file-card-icon\"\n [icon]=\"getFileIconByExtension(fileType())\" />\n\n <div class=\"kit-file-card-info\">\n <div class=\"info-item\">\n @if (size() === kitFileCardSize.LARGE) {\n <div class=\"info-item-label\">{{ customMessages()?.createDate ?? \"kit.fileCard.createdDate\" | translate }}</div>\n }\n <div class=\"info-item-value\">{{ getFormattedDate() }}</div>\n </div>\n @if (name()) {\n <div class=\"info-item\">\n @if (size() === kitFileCardSize.LARGE) {\n <div class=\"info-item-label\">{{ customMessages()?.createdBy ?? \"kit.fileCard.createdBy\" | translate }}</div>\n }\n <div class=\"info-item-value\">{{ name() }}</div>\n </div>\n }\n @if (formattedFileSize()) {\n <div class=\"info-item\">\n @if (size() === kitFileCardSize.LARGE) {\n <div class=\"info-item-label\">{{ customMessages()?.fileSize() ?? \"kit.fileCard.fileSize\" | translate }}</div>\n }\n <div class=\"info-item-value\">{{ formattedFileSize() }}</div>\n </div>\n }\n </div>\n\n <div class=\"kit-file-card-action\">\n @if (showViewFileButton() && hasViewFileButton(fileType())) {\n <kit-button class=\"action-button action-button-view\"\n kitTooltip\n kitTooltipFilter=\".action-button\"\n [kitTooltipVisible]=\"size() === kitFileCardSize.SMALL\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"customMessages()?.viewButtonLabel ?? 'kit.fileCard.view' | translate\"\n [label]=\"getActionButtonLabel(customMessages()?.viewButtonLabel, 'kit.fileCard.view')\"\n [icon]=\"kitSvgIcon.EYE\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.LARGE\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"viewButtonClicked.emit()\" />\n }\n <kit-button class=\"action-button\"\n kitTooltip\n kitTooltipFilter=\".action-button\"\n [kitTooltipVisible]=\"size() === kitFileCardSize.SMALL\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"customMessages()?.downloadButtonLabel ?? 'kit.fileCard.download' | translate\"\n [label]=\"getActionButtonLabel(customMessages()?.downloadButtonLabel, 'kit.fileCard.download')\"\n [icon]=\"kitSvgIcon.DOWNLOAD\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.LARGE\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"downloadButtonClicked.emit()\" />\n </div>\n</div>\n<ng-content></ng-content>\n", styles: [".kit-file-card{display:grid;color:var(--ui-kit-color-grey-10);border-radius:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-file-card .kit-file-card-header{display:flex;gap:10px;grid-area:header}.kit-file-card .card-title{font-weight:400}.kit-file-card .card-subtitle{display:flex;justify-content:space-between;min-width:0}.kit-file-card .card-subtitle:has(.card-subtitle-label){gap:10px}.kit-file-card .card-subtitle-label{flex:0 1 auto;min-width:0}.kit-file-card .card-type{flex:0 999 auto;min-width:60px;display:inline-flex;align-items:center;justify-content:center;padding:0 8px;height:20px;font-size:12px;font-weight:500;color:var(--ui-kit-color-main);border:1px solid var(--ui-kit-color-main);border-radius:4px}.kit-file-card .kit-file-card-icon{display:flex;grid-area:icon}.kit-file-card .kit-file-card-info{grid-area:info;display:flex}.kit-file-card .kit-file-card-action{display:flex;align-items:center;justify-content:flex-end;grid-area:action}.kit-file-card .action-button ::ng-deep .k-button{width:100%}.kit-file-card.blue .card-type{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background-color:var(--ui-kit-color-blue-1)}.kit-file-card.purple .card-type{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background-color:var(--ui-kit-color-purple-1)}.kit-file-card.teal .card-type{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background-color:var(--ui-kit-color-teal-1)}.kit-file-card.orange .card-type{color:var(--ui-kit-color-orange-2);border-color:var(--ui-kit-color-orange-2);background-color:var(--ui-kit-color-orange-3)}.kit-file-card.green .card-type{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background-color:var(--ui-kit-color-green-4)}.kit-file-card.grey .card-type{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-10);background-color:var(--ui-kit-color-grey-16)}.kit-file-card.red .card-type{color:var(--ui-kit-color-red-1);border-color:var(--ui-kit-color-red-1);background-color:var(--ui-kit-color-red-3)}.kit-file-card.pink .card-type{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background-color:var(--ui-kit-color-pink-1)}.kit-file-card.large{grid-template-columns:78px 1fr;grid-template-areas:\"header header\" \"icon info\" \"action action\";gap:17px 24px;padding:25px}.kit-file-card.large .kit-file-card-header{flex-direction:column;padding-bottom:10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-file-card.large .card-title{font-size:16px}.kit-file-card.large .kit-file-card-icon{width:78px;height:100px}.kit-file-card.large .kit-file-card-info{flex-direction:column;gap:12px}.kit-file-card.large .kit-file-card-info .info-item{line-height:22px}.kit-file-card.large .kit-file-card-info .info-item-label{color:var(--ui-kit-color-grey-14);font-size:13px}.kit-file-card.large .kit-file-card-info .info-item-value{font-size:16px}.kit-file-card.large .kit-file-card-action{gap:15px;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-file-card.large .kit-file-card-action .action-button{flex:1}.kit-file-card.small{grid-template-columns:40px 1fr 110px;grid-template-areas:\"icon header action\" \"icon info action\";gap:10px 12px;padding:15px}.kit-file-card.small .kit-file-card-header{align-items:center}.kit-file-card.small .card-title{font-size:14px}.kit-file-card.small .kit-file-card-icon{width:40px;height:52px}.kit-file-card.small .kit-file-card-info .info-item{margin-right:10px;padding-right:10px;color:var(--ui-kit-color-grey-14);font-size:14px;border-right:1px solid var(--ui-kit-color-grey-12);line-height:20px}.kit-file-card.small .kit-file-card-info .info-item:last-child{margin:0;padding:0;border:none}.kit-file-card.small .action-button-view{margin-right:15px;padding-right:15px;border-right:1px solid var(--ui-kit-color-grey-11)}.kit-file-card ::ng-deep .card-subtitle-label .kit-status-label{width:100%}\n"], dependencies: [{ kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "component", type: KitStatusLabelComponent, selector: "kit-status-label", inputs: ["color", "size", "tooltip"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8812
|
+
], queries: [{ propertyName: "customMessages", first: true, predicate: KitFileCardMessagesComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-file-card\"\n [ngClass]=\"type() ? [type(), size()] : [size()]\">\n <div class=\"kit-file-card-header\">\n <div class=\"card-title\">{{ title() }}</div>\n <div class=\"card-subtitle\">\n <div class=\"card-type\">\n <kit-truncate-text>{{ label() }}</kit-truncate-text>\n </div>\n @if (subTitle()) {\n <div class=\"card-subtitle-label\">\n <kit-status-label [color]=\"subTitleColor()\">\n {{ subTitle() }}\n </kit-status-label>\n </div>\n }\n </div>\n </div>\n\n <kit-svg-icon class=\"kit-file-card-icon\"\n [icon]=\"getFileIconByExtension(fileType())\" />\n\n <div class=\"kit-file-card-info\">\n <div class=\"info-item\">\n @if (size() === kitFileCardSize.LARGE) {\n <div class=\"info-item-label\">{{ customMessages()?.createDate ?? \"kit.fileCard.createdDate\" | translate }}</div>\n }\n <div class=\"info-item-value\">{{ getFormattedDate() }}</div>\n </div>\n @if (name()) {\n <div class=\"info-item\">\n @if (size() === kitFileCardSize.LARGE) {\n <div class=\"info-item-label\">{{ customMessages()?.createdBy ?? \"kit.fileCard.createdBy\" | translate }}</div>\n }\n <div class=\"info-item-value\">{{ name() }}</div>\n </div>\n }\n @if (formattedFileSize()) {\n <div class=\"info-item\">\n @if (size() === kitFileCardSize.LARGE) {\n <div class=\"info-item-label\">{{ customMessages()?.fileSize() ?? \"kit.fileCard.fileSize\" | translate }}</div>\n }\n <div class=\"info-item-value\">{{ formattedFileSize() }}</div>\n </div>\n }\n </div>\n\n <div class=\"kit-file-card-action\">\n @if (showViewFileButton() && hasViewFileButton(fileType())) {\n <kit-button class=\"action-button action-button-view\"\n kitTooltip\n kitTooltipFilter=\".action-button\"\n [kitTooltipVisible]=\"size() === kitFileCardSize.SMALL\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"customMessages()?.viewButtonLabel ?? 'kit.fileCard.view' | translate\"\n [label]=\"getActionButtonLabel(customMessages()?.viewButtonLabel, 'kit.fileCard.view')\"\n [icon]=\"kitSvgIcon.EYE\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.LARGE\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"viewButtonClicked.emit()\" />\n }\n <kit-button class=\"action-button\"\n kitTooltip\n kitTooltipFilter=\".action-button\"\n [kitTooltipVisible]=\"size() === kitFileCardSize.SMALL\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"customMessages()?.downloadButtonLabel ?? 'kit.fileCard.download' | translate\"\n [label]=\"getActionButtonLabel(customMessages()?.downloadButtonLabel, 'kit.fileCard.download')\"\n [icon]=\"kitSvgIcon.DOWNLOAD\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.LARGE\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"downloadButtonClicked.emit()\" />\n </div>\n</div>\n<ng-content></ng-content>\n", styles: [".kit-file-card{display:grid;color:var(--ui-kit-color-grey-10);border-radius:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-file-card .kit-file-card-header{display:flex;gap:10px;grid-area:header}.kit-file-card .card-title{font-weight:400}.kit-file-card .card-subtitle{display:flex;justify-content:space-between;min-width:0}.kit-file-card .card-subtitle:has(.card-subtitle-label){gap:10px}.kit-file-card .card-subtitle-label{flex:0 1 auto;min-width:0}.kit-file-card .card-type{flex:0 999 auto;min-width:60px;display:inline-flex;align-items:center;justify-content:center;padding:0 8px;height:20px;font-size:12px;font-weight:500;color:var(--ui-kit-color-main);border:1px solid var(--ui-kit-color-main);border-radius:4px}.kit-file-card .kit-file-card-icon{display:flex;grid-area:icon}.kit-file-card .kit-file-card-info{grid-area:info;display:flex}.kit-file-card .kit-file-card-action{display:flex;align-items:center;justify-content:flex-end;grid-area:action}.kit-file-card .action-button ::ng-deep .k-button{width:100%}.kit-file-card.blue .card-type{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background-color:var(--ui-kit-color-blue-1)}.kit-file-card.purple .card-type{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background-color:var(--ui-kit-color-purple-1)}.kit-file-card.teal .card-type{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background-color:var(--ui-kit-color-teal-1)}.kit-file-card.orange .card-type{color:var(--ui-kit-color-orange-2);border-color:var(--ui-kit-color-orange-2);background-color:var(--ui-kit-color-orange-3)}.kit-file-card.green .card-type{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background-color:var(--ui-kit-color-green-4)}.kit-file-card.grey .card-type{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-10);background-color:var(--ui-kit-color-grey-16)}.kit-file-card.red .card-type{color:var(--ui-kit-color-red-1);border-color:var(--ui-kit-color-red-1);background-color:var(--ui-kit-color-red-3)}.kit-file-card.pink .card-type{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background-color:var(--ui-kit-color-pink-1)}.kit-file-card.large{grid-template-columns:78px 1fr;grid-template-areas:\"header header\" \"icon info\" \"action action\";gap:17px 24px;padding:25px}.kit-file-card.large .kit-file-card-header{flex-direction:column;padding-bottom:10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-file-card.large .card-title{font-size:16px}.kit-file-card.large .kit-file-card-icon{width:78px;height:100px}.kit-file-card.large .kit-file-card-info{flex-direction:column;gap:12px}.kit-file-card.large .kit-file-card-info .info-item{line-height:22px}.kit-file-card.large .kit-file-card-info .info-item-label{color:var(--ui-kit-color-grey-14);font-size:13px}.kit-file-card.large .kit-file-card-info .info-item-value{font-size:16px}.kit-file-card.large .kit-file-card-action{gap:15px;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-file-card.large .kit-file-card-action .action-button{flex:1}.kit-file-card.small{grid-template-columns:40px 1fr 110px;grid-template-areas:\"icon header action\" \"icon info action\";gap:10px 12px;padding:15px}.kit-file-card.small .kit-file-card-header{align-items:center}.kit-file-card.small .card-title{font-size:14px}.kit-file-card.small .kit-file-card-icon{width:40px;height:52px}.kit-file-card.small .kit-file-card-info .info-item{margin-right:10px;padding-right:10px;color:var(--ui-kit-color-grey-14);font-size:14px;border-right:1px solid var(--ui-kit-color-grey-12);line-height:20px}.kit-file-card.small .kit-file-card-info .info-item:last-child{margin:0;padding:0;border:none}.kit-file-card.small .action-button-view{margin-right:15px;padding-right:15px;border-right:1px solid var(--ui-kit-color-grey-11)}.kit-file-card ::ng-deep .card-subtitle-label .kit-status-label{width:100%}\n"], dependencies: [{ kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "component", type: KitStatusLabelComponent, selector: "kit-status-label", inputs: ["color", "size", "tooltip", "truncateText"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8810
8813
|
}
|
|
8811
8814
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFileCardComponent, decorators: [{
|
|
8812
8815
|
type: Component,
|
|
@@ -9204,14 +9207,33 @@ class KitGlobalSearchComponent {
|
|
|
9204
9207
|
this.searchResults = signal([], /* @ts-ignore */
|
|
9205
9208
|
...(ngDevMode ? [{ debugName: "searchResults" }] : /* istanbul ignore next */ []));
|
|
9206
9209
|
this.searchValue = '';
|
|
9207
|
-
this.
|
|
9208
|
-
...(ngDevMode ? [{ debugName: "
|
|
9209
|
-
this.userPermissions
|
|
9210
|
+
this.showPrompts = signal(true, /* @ts-ignore */
|
|
9211
|
+
...(ngDevMode ? [{ debugName: "showPrompts" }] : /* istanbul ignore next */ []));
|
|
9212
|
+
this.userPermissions = this.store.selectSignal(KIT_USER_PERMISSIONS_STATE_TOKEN);
|
|
9210
9213
|
this.selectedFilters$ = new BehaviorSubject([]);
|
|
9211
9214
|
this.isLoading = signal(false, /* @ts-ignore */
|
|
9212
9215
|
...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
|
|
9216
|
+
this.searchResultsContainerWidth = signal(0, /* @ts-ignore */
|
|
9217
|
+
...(ngDevMode ? [{ debugName: "searchResultsContainerWidth" }] : /* istanbul ignore next */ []));
|
|
9213
9218
|
this.expandedFilters = new Set();
|
|
9214
9219
|
this.isClearing = false;
|
|
9220
|
+
this.mainContentColumnOrder = [
|
|
9221
|
+
'title',
|
|
9222
|
+
'status',
|
|
9223
|
+
'subtitle',
|
|
9224
|
+
'routePath',
|
|
9225
|
+
'firstDate',
|
|
9226
|
+
'secondDate',
|
|
9227
|
+
];
|
|
9228
|
+
this.columnTemplates = {
|
|
9229
|
+
title: 'minmax(170px, max-content)',
|
|
9230
|
+
status: 'minmax(115px, max-content)',
|
|
9231
|
+
subtitle: 'minmax(70px, 1fr)',
|
|
9232
|
+
routePath: 'minmax(99px, 2fr)',
|
|
9233
|
+
firstDate: 'minmax(50px, 1fr)',
|
|
9234
|
+
secondDate: 'minmax(50px, 1fr)',
|
|
9235
|
+
additionalContent: 'minmax(90px, max-content)',
|
|
9236
|
+
};
|
|
9215
9237
|
}
|
|
9216
9238
|
documentClick(event) {
|
|
9217
9239
|
if (!this.popup()?.isPopupOpen) {
|
|
@@ -9222,6 +9244,12 @@ class KitGlobalSearchComponent {
|
|
|
9222
9244
|
this.clearSearch();
|
|
9223
9245
|
}
|
|
9224
9246
|
}
|
|
9247
|
+
onWindowResize() {
|
|
9248
|
+
if (!this.popup()?.isPopupOpen) {
|
|
9249
|
+
return;
|
|
9250
|
+
}
|
|
9251
|
+
this.updateSearchResultsContainerWidth();
|
|
9252
|
+
}
|
|
9225
9253
|
ngOnInit() {
|
|
9226
9254
|
combineLatest([
|
|
9227
9255
|
this.textbox().valueChange.pipe(debounceTime(500), distinctUntilChanged(), map((text) => text.trim())),
|
|
@@ -9229,10 +9257,11 @@ class KitGlobalSearchComponent {
|
|
|
9229
9257
|
]).pipe(filter(([text, _,]) => text.length > 2 && !this.isClearing)).subscribe(([text, filters,]) => {
|
|
9230
9258
|
this.searchValue = text;
|
|
9231
9259
|
this.isLoading.set(true);
|
|
9232
|
-
this.
|
|
9260
|
+
this.showPrompts.set(false);
|
|
9233
9261
|
this.searchFn()(text, filters).subscribe(searchResult => {
|
|
9234
9262
|
this.searchResults.set(searchResult.filter(Boolean));
|
|
9235
9263
|
this.isLoading.set(false);
|
|
9264
|
+
this.updateSearchResultsContainerWidth();
|
|
9236
9265
|
});
|
|
9237
9266
|
});
|
|
9238
9267
|
}
|
|
@@ -9251,7 +9280,7 @@ class KitGlobalSearchComponent {
|
|
|
9251
9280
|
this.textbox().valueChange.emit('');
|
|
9252
9281
|
this.textbox().clearValue();
|
|
9253
9282
|
this.searchResults.set([]);
|
|
9254
|
-
this.
|
|
9283
|
+
this.showPrompts.set(true);
|
|
9255
9284
|
this.selectedFilters$.next([]);
|
|
9256
9285
|
this.popup()?.close();
|
|
9257
9286
|
requestAnimationFrame(() => {
|
|
@@ -9268,6 +9297,7 @@ class KitGlobalSearchComponent {
|
|
|
9268
9297
|
if (popupContent) {
|
|
9269
9298
|
popupContent.style.maxHeight = `calc(100vh - ${popupHTMLElement?.style.top} - 40px)`;
|
|
9270
9299
|
}
|
|
9300
|
+
this.updateSearchResultsContainerWidth();
|
|
9271
9301
|
}
|
|
9272
9302
|
}
|
|
9273
9303
|
navigate(routeConfig) {
|
|
@@ -9341,9 +9371,62 @@ class KitGlobalSearchComponent {
|
|
|
9341
9371
|
hasPermissionToShowPrompt(userPermissions, promptPermissions) {
|
|
9342
9372
|
return kitHasPermission(promptPermissions, userPermissions);
|
|
9343
9373
|
}
|
|
9374
|
+
getVisiblePrompts(userPermissions) {
|
|
9375
|
+
return this.prompts().filter(prompt => this.hasPermissionToShowPrompt(userPermissions, prompt.permissions));
|
|
9376
|
+
}
|
|
9377
|
+
isColumnVisible(category, key) {
|
|
9378
|
+
const config = this.getCategoryColumnConfig(category, key);
|
|
9379
|
+
const hideBelowContainerWidthPx = config?.hideBelowContainerWidthPx;
|
|
9380
|
+
if (!hideBelowContainerWidthPx) {
|
|
9381
|
+
return true;
|
|
9382
|
+
}
|
|
9383
|
+
const width = this.searchResultsContainerWidth();
|
|
9384
|
+
if (!width) {
|
|
9385
|
+
return true;
|
|
9386
|
+
}
|
|
9387
|
+
return width >= hideBelowContainerWidthPx;
|
|
9388
|
+
}
|
|
9389
|
+
getMainContentGridTemplate(category, lineItem) {
|
|
9390
|
+
if (!category.layoutConfig) {
|
|
9391
|
+
return null;
|
|
9392
|
+
}
|
|
9393
|
+
const visibleColumns = this.mainContentColumnOrder.filter(key => this.isMainContentColumnVisible(category, lineItem, key));
|
|
9394
|
+
const gridTemplateColumns = visibleColumns.map(key => this.columnTemplates[key]).filter(Boolean);
|
|
9395
|
+
return gridTemplateColumns.length ? gridTemplateColumns.join(' ') : this.columnTemplates.title;
|
|
9396
|
+
}
|
|
9344
9397
|
findFilter(filterField) {
|
|
9345
9398
|
return this.selectedFilters.find(selectedFilter => selectedFilter.field === filterField) || null;
|
|
9346
9399
|
}
|
|
9400
|
+
getCategoryColumnConfig(category, key) {
|
|
9401
|
+
return category.layoutConfig?.columns.find(column => column.key === key) || null;
|
|
9402
|
+
}
|
|
9403
|
+
isMainContentColumnVisible(category, lineItem, key) {
|
|
9404
|
+
if (!this.mainContentColumnOrder.includes(key)) {
|
|
9405
|
+
return false;
|
|
9406
|
+
}
|
|
9407
|
+
if (key === 'routePath') {
|
|
9408
|
+
return !!lineItem.routePath && !!(lineItem.routePath.from || lineItem.routePath.to);
|
|
9409
|
+
}
|
|
9410
|
+
if (!this.isColumnVisible(category, key)) {
|
|
9411
|
+
return false;
|
|
9412
|
+
}
|
|
9413
|
+
if (key === 'status') {
|
|
9414
|
+
return !!lineItem.status;
|
|
9415
|
+
}
|
|
9416
|
+
if (key === 'firstDate') {
|
|
9417
|
+
return !!lineItem.dates?.firstDate?.value;
|
|
9418
|
+
}
|
|
9419
|
+
if (key === 'secondDate') {
|
|
9420
|
+
return !!lineItem.dates?.secondDate?.value;
|
|
9421
|
+
}
|
|
9422
|
+
return true;
|
|
9423
|
+
}
|
|
9424
|
+
updateSearchResultsContainerWidth() {
|
|
9425
|
+
const popupHTMLElement = this.popup()?.popupHTMLElement;
|
|
9426
|
+
const searchResultsContainer = popupHTMLElement?.querySelector('.search-results');
|
|
9427
|
+
const width = searchResultsContainer?.getBoundingClientRect().width || 0;
|
|
9428
|
+
this.searchResultsContainerWidth.set(width);
|
|
9429
|
+
}
|
|
9347
9430
|
isIsoLikeDateString(value) {
|
|
9348
9431
|
if (value.length < 10 || value[4] !== '-' || value[7] !== '-') {
|
|
9349
9432
|
return false;
|
|
@@ -9351,9 +9434,9 @@ class KitGlobalSearchComponent {
|
|
|
9351
9434
|
return !Number.isNaN(Date.parse(value));
|
|
9352
9435
|
}
|
|
9353
9436
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitGlobalSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9354
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitGlobalSearchComponent, isStandalone: true, selector: "kit-global-search", inputs: { searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: true, transformFunction: null }, displayedLineItemsNumber: { classPropertyName: "displayedLineItemsNumber", publicName: "displayedLineItemsNumber", isSignal: true, isRequired: false, transformFunction: null }, prompts: { classPropertyName: "prompts", publicName: "prompts", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "documentClick($event)" } }, providers: [
|
|
9437
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitGlobalSearchComponent, isStandalone: true, selector: "kit-global-search", inputs: { searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: true, transformFunction: null }, displayedLineItemsNumber: { classPropertyName: "displayedLineItemsNumber", publicName: "displayedLineItemsNumber", isSignal: true, isRequired: false, transformFunction: null }, prompts: { classPropertyName: "prompts", publicName: "prompts", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "documentClick($event)", "window:resize": "onWindowResize()" } }, providers: [
|
|
9355
9438
|
DatePipe,
|
|
9356
|
-
], viewQueries: [{ propertyName: "textbox", first: true, predicate: TextBoxComponent, descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: TextBoxComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div #container\n class=\"global-search\"\n [class.expanded]=\"isPopupOpen\">\n <kendo-textbox class=\"textbox\"\n [placeholder]=\"'kit.globalSearch.placeholder' | translate\"\n [(ngModel)]=\"searchValue\"\n (click)=\"openPopup()\">\n <ng-template kendoTextBoxPrefixTemplate>\n <kit-svg-icon [icon]=\"kitSvgIcon.SEARCH\" />\n </ng-template>\n <ng-template kendoTextBoxSuffixTemplate>\n <kit-svg-icon [icon]=\"kitSvgIcon.CIRCLE_CROSS_THIN\"\n (click)=\"clearSearch()\" />\n </ng-template>\n </kendo-textbox>\n\n <kit-popup #popup\n [popupClass]=\"popupClass\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [closeOnOutsideClick]=\"false\" />\n\n <ng-template #content>\n @if (userPermissions$ | async; as userPermissions) {\n <div class=\"popup-content\">\n @if (showPropmts()) {\n <div class=\"prompts\">\n @for (prompt of prompts(); track prompt) {\n @if (hasPermissionToShowPrompt(userPermissions, prompt.permissions)) {\n <kit-pill [theme]=\"kitPillTheme.MAIN\"\n [selectable]=\"true\"\n (clicked)=\"onSelectPrompt(prompt)\">\n {{ prompt.label }}\n </kit-pill>\n }\n }\n </div>\n } @else {\n @if (isLoading()) {\n <div class=\"search-results\">\n <kendo-loader class=\"loader\" />\n </div>\n } @else if (searchResults().length) {\n <div class=\"search-results\">\n @for (category of searchResults(); track category?.name) {\n @if (category) {\n <div class=\"category\">\n <div class=\"header\"\n [class.empty]=\"!category.total\">\n <div class=\"header-main\">\n <kit-svg-icon class=\"header-main-icon\"\n [icon]=\"kitSvgIcon.CHECK_STICKER\" />\n <span class=\"header-main-title\">{{ category.name.toUpperCase() }} ({{ category.total }})</span>\n </div>\n\n @if (category.total > this.displayedLineItemsNumber()) {\n <kit-button [label]=\"'kit.globalSearch.showResults' | translate\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n (clicked)=\"navigate(category.routeConfig)\" />\n }\n </div>\n\n @for (lineItem of category.items.slice(0, this.displayedLineItemsNumber()); track lineItem) {\n <div class=\"line-item\"\n [class.has-link]=\"lineItem.routeConfig\"\n (click)=\"navigate(lineItem.routeConfig)\">\n <div class=\"main-content\">\n <div class=\"title\">\n <span [innerHTML]=\"lineItem.title | highlight:searchValue\"></span>\n </div>\n @if (lineItem.status) {\n <div>\n <kit-pill class=\"status\"\n [theme]=\"kitPillTheme.MAIN\">\n {{ lineItem.status }}\n </kit-pill>\n </div>\n }\n <div class=\"subtitle\"\n kitHideBelowWidthClass=\"hide\"\n [kitHideBelowWidth]=\"61\">\n <kit-truncate-text>\n <span [innerHTML]=\"lineItem.subtitle || '' | highlight:searchValue\"></span>\n </kit-truncate-text>\n </div>\n\n @if (lineItem.routePath; as routePath) {\n @if (routePath.from || routePath.to) {\n <kit-route-path class=\"route\"\n kitHideBelowWidthClass=\"hide\"\n [kitHideBelowWidth]=\"132\"\n [containerMode]=\"routePath.containerMode ?? ''\"\n [destinationPort]=\"routePath.to ?? ''\"\n [originPort]=\"routePath.from ?? ''\"\n [type]=\"routePath.type ?? ''\" />\n }\n }\n @if (lineItem.dates; as dates) {\n @if (dates.firstDate.value) {\n <div class=\"dates\">\n <div class=\"date-wrapper first-date\">\n <p class=\"date-label\">\n <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\" />\n <span>{{ dates.firstDate.label }}</span>\n </p>\n <span class=\"date\">{{ dates.firstDate.value | date: dateFormat : 'UTC' }}</span>\n </div>\n </div>\n }\n @if (dates.secondDate.value) {\n <div class=\"dates\">\n <div class=\"date-wrapper second-date\">\n <p class=\"date-label\">\n <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\" />\n <span>{{ dates.secondDate.label }}</span>\n </p>\n <span class=\"date\">{{ dates.secondDate.value | date: dateFormat : 'UTC' }}</span>\n </div>\n </div>\n }\n }\n </div>\n\n <div class=\"additional-content\">\n @for (item of lineItem.additionalContent; track item.key) {\n <div>\n <span class=\"label\">{{ item.translateKey | translate }} </span>\n <span class=\"value\"\n [innerHTML]=\"formatValue(item.value) | highlight:searchValue\"></span>\n </div>\n }\n </div>\n </div>\n }\n </div>\n }\n }\n </div>\n } @else {\n <kit-empty-section class=\"empty-section\"\n [text]=\"'kit.globalSearch.noData' | translate\" />\n }\n\n @if (filters().length) {\n <div class=\"filters\">\n @for (filter of filters(); track $index) {\n <div>\n <p class=\"label\">{{ filter.label }}</p>\n @for (value of filter.values.slice(0, isFilterExpanded($index) ? filter.values.length : 3); track $index) {\n <kit-pill @heightExpandCollapseAnimation\n class=\"filter-value\"\n [theme]=\"kitPillTheme.MAIN\"\n [selectable]=\"true\"\n [selected]=\"isFilterSelected(value)\"\n (clicked)=\"onSelectFilter(value, filter.appliedTo)\">\n {{ value.title | translate }}\n </kit-pill>\n }\n @if (filter.values.length > 3) {\n <kit-button class=\"toggle-btn\"\n [label]=\"`kit.globalSearch.${isFilterExpanded($index) ? 'showLess' : 'showMore'}` | translate\"\n [icon]=\"isFilterExpanded($index) ? kitSvgIcon.CHEVRON_UP : kitSvgIcon.CHEVRON_DOWN\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [kind]=\"kitButtonKind.SMALL\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"toggleFilterExpanded($index)\" />\n }\n </div>\n }\n </div>\n }\n }\n </div>\n }\n </ng-template>\n</div>\n", styles: [":host{flex:1}:host .global-search{max-width:360px}:host .global-search.expanded{max-width:100%}:host .global-search .textbox{border-color:var(--ui-kit-color-grey-11);box-shadow:none;border-radius:8px}:host .global-search .textbox.k-focus{border-color:var(--ui-kit-color-main)}:host ::ng-deep .k-animation-container{width:calc(100% - 145px)}:host ::ng-deep .kit-global-search-popup{overflow:auto;margin-top:10px;padding:0}:host ::ng-deep .kit-global-search-popup .popup-content{display:flex;justify-content:space-between}:host ::ng-deep .global-search .k-textbox.k-input .k-input-inner{padding:0 8px;height:40px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .search-icon{width:37px;height:37px;fill:none;stroke:var(--ui-kit-color-grey-10);padding-left:12px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .circle-cross-thin-icon{width:30px;height:30px;fill:none;stroke:var(--ui-kit-color-grey-12);padding-right:12px;cursor:pointer}:host ::ng-deep .search-results{padding:24px;flex:1}:host ::ng-deep .search-results .loader{display:flex;justify-content:center;height:100%;align-items:center;color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category:not(:last-child){margin-bottom:20px}:host ::ng-deep .search-results .category .header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 20px}:host ::ng-deep .search-results .category .header-main{display:flex;align-items:center}:host ::ng-deep .search-results .category .header-main-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);margin-right:10px}:host ::ng-deep .search-results .category .header-main-title{color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category .header.empty{margin:0}:host ::ng-deep .search-results .category .header.empty .header-main-icon{fill:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .header.empty .header-main-title{color:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .line-item{min-width:575px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--ui-kit-color-grey-11)}:host ::ng-deep .search-results .category .line-item.has-link{cursor:pointer}:host ::ng-deep .search-results .category .line-item.has-link:hover{opacity:.7}:host ::ng-deep .search-results .category .line-item .highlighted{color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category .line-item .main-content{display:grid;grid-template-columns:minmax(170px,max-content) minmax(115px,max-content) repeat(auto-fit,minmax(60px,1fr));gap:20px;align-items:center;grid-auto-flow:column}:host ::ng-deep .search-results .category .line-item .main-content .title{font-size:16px;line-height:22px;font-weight:500}:host ::ng-deep .search-results .category .line-item .main-content .subtitle{width:100%}:host ::ng-deep .search-results .category .line-item .main-content .subtitle.hide{display:none}:host ::ng-deep .search-results .category .line-item .main-content .title,:host ::ng-deep .search-results .category .line-item .main-content .subtitle{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .main-content .icon.calendar-icon{width:18px;height:18px;fill:var(--ui-kit-color-grey-12);margin-right:3px}:host ::ng-deep .search-results .category .line-item .main-content .route{container:route/inline-size;width:100%}:host ::ng-deep .search-results .category .line-item .main-content .route.hide{display:none;container:none}:host ::ng-deep .search-results .category .line-item .main-content .route .route-path{justify-content:left}:host ::ng-deep .search-results .category .line-item .main-content .status{white-space:nowrap;display:block;margin:auto}:host ::ng-deep .search-results .category .line-item .main-content .kit-pill-content{margin:auto}:host ::ng-deep .search-results .category .line-item .main-content .dates{display:flex;align-items:center;font-size:12px;line-height:14px;container:dates/inline-size;width:100%}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-wrapper{display:flex;justify-content:left;align-items:center;flex-wrap:wrap;text-align:center}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-wrapper .date{text-wrap:nowrap}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-label{display:flex;align-items:center;justify-content:center;margin-right:5px;text-wrap:nowrap}:host ::ng-deep .search-results .category .line-item .main-content .dates.first-date{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .main-content .dates.second-date{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .main-content:has(.route:not(.hide)){grid-template-columns:minmax(170px,max-content) minmax(115px,max-content) minmax(70px,1fr) minmax(99px,2fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content:not(:has(.status)){grid-template-columns:minmax(170px,max-content) minmax(70px,1fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content:not(:has(.status)):has(.route:not(.hide)){grid-template-columns:minmax(170px,max-content) minmax(70px,1fr) minmax(99px,2fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content>.dates:last-child{justify-self:end;justify-content:end;text-align:right}:host ::ng-deep .search-results .category .line-item .main-content>.dates:last-child .date-wrapper{justify-content:end}:host ::ng-deep .search-results .category .line-item .additional-content{text-align:right}:host ::ng-deep .search-results .category .line-item .additional-content .label{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .additional-content .value{color:var(--ui-kit-color-grey-10)}@container route (max-width: 190px){:host ::ng-deep .search-results .category .route-origin-port,:host ::ng-deep .search-results .category .icon.arrow{display:none}:host ::ng-deep .search-results .category .line-item .main-content .route .route-path{grid-template-columns:minmax(0,auto) min-content;justify-content:stretch}}@container route (max-width: 150px){:host ::ng-deep .search-results .category .route-mode{display:none}}@container dates (max-width: 120px){:host ::ng-deep .search-results .category .date-wrapper{flex-direction:column}:host ::ng-deep .search-results .category .date-label{margin-right:0}}:host ::ng-deep .filters{background-color:var(--ui-kit-color-grey-13);padding:24px;min-width:175px}:host ::ng-deep .filters .label{font-size:12px;line-height:14px;color:var(--ui-kit-color-grey-10);margin-bottom:10px;text-transform:uppercase}:host ::ng-deep .filters .filter-value{margin-bottom:10px;display:block}:host ::ng-deep .filters .filter-value .kit-pill{line-height:16px;text-align:left;display:inline-block;padding:7px 16px;font-size:13px}:host ::ng-deep .filters .toggle-btn{margin-bottom:40px;display:block}:host ::ng-deep .filters .toggle-btn .k-button{min-width:125px;padding:6px 16px;min-height:32px}:host ::ng-deep .prompts{display:flex;gap:10px;padding:24px}:host ::ng-deep .empty-section{container:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i1$4.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i1$4.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: ["showSeparator"] }, { kind: "directive", type: i1$4.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: i1$b.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { 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: "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: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: KitRoutePathComponent, selector: "kit-route-path", inputs: ["originPort", "destinationPort", "type", "containerMode"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "component", type: KitEmptySectionComponent, selector: "kit-empty-section", inputs: ["text", "size"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "directive", type: KitHideBelowWidthDirective, selector: "[kitHideBelowWidth]", inputs: ["kitHideBelowWidth", "kitHideBelowWidthClass"] }, { kind: "pipe", type: i1$7.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$7.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }], animations: [
|
|
9439
|
+
], viewQueries: [{ propertyName: "textbox", first: true, predicate: TextBoxComponent, descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: TextBoxComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div #container\n class=\"global-search\"\n [class.expanded]=\"isPopupOpen\">\n <kendo-textbox class=\"textbox\"\n [placeholder]=\"'kit.globalSearch.placeholder' | translate\"\n [(ngModel)]=\"searchValue\"\n (click)=\"openPopup()\">\n <ng-template kendoTextBoxPrefixTemplate>\n <kit-svg-icon [icon]=\"kitSvgIcon.SEARCH\" />\n </ng-template>\n <ng-template kendoTextBoxSuffixTemplate>\n <kit-svg-icon [icon]=\"kitSvgIcon.CIRCLE_CROSS_THIN\"\n (click)=\"clearSearch()\" />\n </ng-template>\n </kendo-textbox>\n\n <kit-popup #popup\n [popupClass]=\"popupClass\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [closeOnOutsideClick]=\"false\" />\n\n <ng-template #content>\n @if (userPermissions(); as userPermissions) {\n <div class=\"popup-content\">\n @if (showPrompts()) {\n @if (getVisiblePrompts(userPermissions); as visiblePrompts) {\n @if (visiblePrompts.length) {\n <div class=\"prompts\">\n @for (prompt of visiblePrompts; track prompt) {\n <kit-pill [theme]=\"kitPillTheme.MAIN\"\n [selectable]=\"true\"\n (clicked)=\"onSelectPrompt(prompt)\">\n {{ prompt.label }}\n </kit-pill>\n }\n </div>\n }\n }\n } @else {\n @if (isLoading()) {\n <div class=\"search-results\">\n <kendo-loader class=\"loader\" />\n </div>\n } @else if (searchResults().length) {\n <div class=\"search-results\">\n @for (category of searchResults(); track category?.name) {\n @if (category) {\n <div class=\"category\">\n <div class=\"header\"\n [class.empty]=\"!category.total\">\n <div class=\"header-main\">\n <kit-svg-icon class=\"header-main-icon\"\n [icon]=\"kitSvgIcon.CHECK_STICKER\" />\n <span class=\"header-main-title\">{{ category.name.toUpperCase() }} ({{ category.total }})</span>\n </div>\n\n @if (category.total > this.displayedLineItemsNumber()) {\n <kit-button [label]=\"'kit.globalSearch.showResults' | translate\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n (clicked)=\"navigate(category.routeConfig)\" />\n }\n </div>\n\n @for (lineItem of category.items.slice(0, this.displayedLineItemsNumber()); track lineItem) {\n <div class=\"line-item\"\n [class.has-link]=\"lineItem.routeConfig\"\n (click)=\"navigate(lineItem.routeConfig)\">\n <div class=\"main-content\"\n [style.grid-template-columns]=\"getMainContentGridTemplate(category, lineItem)\">\n @if (isColumnVisible(category, 'title')) {\n <div class=\"title\">\n <span [innerHTML]=\"lineItem.title | highlight:searchValue\"></span>\n </div>\n }\n @if (lineItem.status && isColumnVisible(category, 'status')) {\n <div>\n <kit-pill class=\"status\"\n [theme]=\"kitPillTheme.MAIN\">\n {{ lineItem.status }}\n </kit-pill>\n </div>\n }\n @if (isColumnVisible(category, 'subtitle')) {\n <div class=\"subtitle\">\n <kit-truncate-text>\n <span [innerHTML]=\"lineItem.subtitle || '' | highlight:searchValue\"></span>\n </kit-truncate-text>\n </div>\n }\n\n @if (lineItem.routePath; as routePath) {\n @if (routePath.from || routePath.to) {\n <kit-route-path class=\"route\"\n kitHideBelowWidthClass=\"hide\"\n [kitHideBelowWidth]=\"132\"\n [containerMode]=\"routePath.containerMode ?? ''\"\n [destinationPort]=\"routePath.to ?? ''\"\n [originPort]=\"routePath.from ?? ''\"\n [type]=\"routePath.type ?? ''\" />\n }\n }\n @if (lineItem.dates; as dates) {\n @if (isColumnVisible(category, 'firstDate') && dates.firstDate.value) {\n <div class=\"dates\">\n <div class=\"date-wrapper first-date\">\n <p class=\"date-label\">\n <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\" />\n <span>{{ dates.firstDate.label }}</span>\n </p>\n <span class=\"date\">{{ dates.firstDate.value | date: dateFormat : 'UTC' }}</span>\n </div>\n </div>\n }\n @if (isColumnVisible(category, 'secondDate') && dates.secondDate.value) {\n <div class=\"dates\">\n <div class=\"date-wrapper second-date\">\n <p class=\"date-label\">\n <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\" />\n <span>{{ dates.secondDate.label }}</span>\n </p>\n <span class=\"date\">{{ dates.secondDate.value | date: dateFormat : 'UTC' }}</span>\n </div>\n </div>\n }\n }\n </div>\n\n @if (isColumnVisible(category, 'additionalContent')) {\n <div class=\"additional-content\">\n @for (item of lineItem.additionalContent; track item.key) {\n <div>\n <span class=\"label\">{{ item.translateKey | translate }} </span>\n <span class=\"value\"\n [innerHTML]=\"formatValue(item.value) | highlight:searchValue\"></span>\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n }\n </div>\n } @else {\n <kit-empty-section class=\"empty-section\"\n [text]=\"'kit.globalSearch.noData' | translate\" />\n }\n\n @if (filters().length) {\n <div class=\"filters\">\n @for (filter of filters(); track $index) {\n <div>\n <p class=\"label\">{{ filter.label }}</p>\n @for (value of filter.values.slice(0, isFilterExpanded($index) ? filter.values.length : 3); track $index) {\n <kit-pill @heightExpandCollapseAnimation\n class=\"filter-value\"\n [theme]=\"kitPillTheme.MAIN\"\n [selectable]=\"true\"\n [selected]=\"isFilterSelected(value)\"\n (clicked)=\"onSelectFilter(value, filter.appliedTo)\">\n {{ value.title | translate }}\n </kit-pill>\n }\n @if (filter.values.length > 3) {\n <kit-button class=\"toggle-btn\"\n [label]=\"`kit.globalSearch.${isFilterExpanded($index) ? 'showLess' : 'showMore'}` | translate\"\n [icon]=\"isFilterExpanded($index) ? kitSvgIcon.CHEVRON_UP : kitSvgIcon.CHEVRON_DOWN\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [kind]=\"kitButtonKind.SMALL\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"toggleFilterExpanded($index)\" />\n }\n </div>\n }\n </div>\n }\n }\n </div>\n }\n </ng-template>\n</div>\n", styles: [":host{flex:1}:host .global-search{max-width:360px}:host .global-search.expanded{max-width:100%}:host .global-search .textbox{border-color:var(--ui-kit-color-grey-11);box-shadow:none;border-radius:8px}:host .global-search .textbox.k-focus{border-color:var(--ui-kit-color-main)}:host ::ng-deep .k-animation-container{width:calc(100% - 145px)}:host ::ng-deep .kit-global-search-popup{overflow:auto;margin-top:10px;padding:0}:host ::ng-deep .kit-global-search-popup .popup-content{display:flex;justify-content:space-between}:host ::ng-deep .global-search .k-textbox.k-input .k-input-inner{padding:0 8px;height:40px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .search-icon{width:37px;height:37px;fill:none;stroke:var(--ui-kit-color-grey-10);padding-left:12px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .circle-cross-thin-icon{width:30px;height:30px;fill:none;stroke:var(--ui-kit-color-grey-12);padding-right:12px;cursor:pointer}:host ::ng-deep .search-results{padding:24px;flex:1}:host ::ng-deep .search-results .loader{display:flex;justify-content:center;height:100%;align-items:center;color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category:not(:last-child){margin-bottom:20px}:host ::ng-deep .search-results .category .header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 20px}:host ::ng-deep .search-results .category .header-main{display:flex;align-items:center}:host ::ng-deep .search-results .category .header-main-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);margin-right:10px}:host ::ng-deep .search-results .category .header-main-title{color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category .header.empty{margin:0}:host ::ng-deep .search-results .category .header.empty .header-main-icon{fill:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .header.empty .header-main-title{color:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .line-item{min-width:575px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--ui-kit-color-grey-11)}:host ::ng-deep .search-results .category .line-item.has-link{cursor:pointer}:host ::ng-deep .search-results .category .line-item.has-link:hover{opacity:.7}:host ::ng-deep .search-results .category .line-item .highlighted{color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category .line-item .main-content{display:grid;grid-template-columns:minmax(170px,max-content) minmax(115px,max-content) repeat(auto-fit,minmax(60px,1fr));gap:20px;align-items:center;grid-auto-flow:column}:host ::ng-deep .search-results .category .line-item .main-content .title{font-size:16px;line-height:22px;font-weight:500}:host ::ng-deep .search-results .category .line-item .main-content .subtitle{width:100%}:host ::ng-deep .search-results .category .line-item .main-content .subtitle.hide{display:none}:host ::ng-deep .search-results .category .line-item .main-content .title,:host ::ng-deep .search-results .category .line-item .main-content .subtitle{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .main-content .icon.calendar-icon{width:18px;height:18px;fill:var(--ui-kit-color-grey-12);margin-right:3px}:host ::ng-deep .search-results .category .line-item .main-content .route{container:route/inline-size;width:100%}:host ::ng-deep .search-results .category .line-item .main-content .route.hide{display:none;container:none}:host ::ng-deep .search-results .category .line-item .main-content .route .route-path{justify-content:left}:host ::ng-deep .search-results .category .line-item .main-content .status{white-space:nowrap;display:block;margin:auto}:host ::ng-deep .search-results .category .line-item .main-content .kit-pill-content{margin:auto}:host ::ng-deep .search-results .category .line-item .main-content .dates{display:flex;align-items:center;font-size:12px;line-height:14px;container:dates/inline-size;width:100%}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-wrapper{display:flex;justify-content:left;align-items:center;flex-wrap:wrap;text-align:center}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-wrapper .date{text-wrap:nowrap}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-label{display:flex;align-items:center;justify-content:center;margin-right:5px;text-wrap:nowrap}:host ::ng-deep .search-results .category .line-item .main-content .dates.first-date{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .main-content .dates.second-date{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .main-content:has(.route:not(.hide)){grid-template-columns:minmax(170px,max-content) minmax(115px,max-content) minmax(70px,1fr) minmax(99px,2fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content:not(:has(.status)){grid-template-columns:minmax(170px,max-content) minmax(70px,1fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content:not(:has(.status)):has(.route:not(.hide)){grid-template-columns:minmax(170px,max-content) minmax(70px,1fr) minmax(99px,2fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content>.dates:last-child{justify-self:end;justify-content:end;text-align:right}:host ::ng-deep .search-results .category .line-item .main-content>.dates:last-child .date-wrapper{justify-content:end}:host ::ng-deep .search-results .category .line-item .additional-content{text-align:right}:host ::ng-deep .search-results .category .line-item .additional-content .label{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .additional-content .value{color:var(--ui-kit-color-grey-10)}@container route (max-width: 190px){:host ::ng-deep .search-results .category .route-origin-port,:host ::ng-deep .search-results .category .icon.arrow{display:none}:host ::ng-deep .search-results .category .line-item .main-content .route .route-path{grid-template-columns:minmax(0,auto) min-content;justify-content:stretch}}@container route (max-width: 150px){:host ::ng-deep .search-results .category .route-mode{display:none}}@container dates (max-width: 120px){:host ::ng-deep .search-results .category .date-wrapper{flex-direction:column}:host ::ng-deep .search-results .category .date-label{margin-right:0}}:host ::ng-deep .filters{background-color:var(--ui-kit-color-grey-13);padding:24px;min-width:175px}:host ::ng-deep .filters .label{font-size:12px;line-height:14px;color:var(--ui-kit-color-grey-10);margin-bottom:10px;text-transform:uppercase}:host ::ng-deep .filters .filter-value{margin-bottom:10px;display:block}:host ::ng-deep .filters .filter-value .kit-pill{line-height:16px;text-align:left;display:inline-block;padding:7px 16px;font-size:13px}:host ::ng-deep .filters .toggle-btn{margin-bottom:40px;display:block}:host ::ng-deep .filters .toggle-btn .k-button{min-width:125px;padding:6px 16px;min-height:32px}:host ::ng-deep .prompts{display:flex;gap:10px;padding:24px}:host ::ng-deep .empty-section{container:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i1$4.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i1$4.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: ["showSeparator"] }, { kind: "directive", type: i1$4.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: i1$b.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { 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: "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: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: KitRoutePathComponent, selector: "kit-route-path", inputs: ["originPort", "destinationPort", "type", "containerMode"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "component", type: KitEmptySectionComponent, selector: "kit-empty-section", inputs: ["text", "size"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "directive", type: KitHideBelowWidthDirective, selector: "[kitHideBelowWidth]", inputs: ["kitHideBelowWidth", "kitHideBelowWidthClass"] }, { kind: "pipe", type: i1$7.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }], animations: [
|
|
9357
9440
|
expandCollapseAnimation('height'),
|
|
9358
9441
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9359
9442
|
}
|
|
@@ -9380,13 +9463,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
9380
9463
|
expandCollapseAnimation('height'),
|
|
9381
9464
|
], providers: [
|
|
9382
9465
|
DatePipe,
|
|
9383
|
-
], template: "<div #container\n class=\"global-search\"\n [class.expanded]=\"isPopupOpen\">\n <kendo-textbox class=\"textbox\"\n [placeholder]=\"'kit.globalSearch.placeholder' | translate\"\n [(ngModel)]=\"searchValue\"\n (click)=\"openPopup()\">\n <ng-template kendoTextBoxPrefixTemplate>\n <kit-svg-icon [icon]=\"kitSvgIcon.SEARCH\" />\n </ng-template>\n <ng-template kendoTextBoxSuffixTemplate>\n <kit-svg-icon [icon]=\"kitSvgIcon.CIRCLE_CROSS_THIN\"\n (click)=\"clearSearch()\" />\n </ng-template>\n </kendo-textbox>\n\n <kit-popup #popup\n [popupClass]=\"popupClass\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [closeOnOutsideClick]=\"false\" />\n\n <ng-template #content>\n @if (userPermissions$ | async; as userPermissions) {\n <div class=\"popup-content\">\n @if (showPropmts()) {\n <div class=\"prompts\">\n @for (prompt of prompts(); track prompt) {\n @if (hasPermissionToShowPrompt(userPermissions, prompt.permissions)) {\n <kit-pill [theme]=\"kitPillTheme.MAIN\"\n [selectable]=\"true\"\n (clicked)=\"onSelectPrompt(prompt)\">\n {{ prompt.label }}\n </kit-pill>\n }\n }\n </div>\n } @else {\n @if (isLoading()) {\n <div class=\"search-results\">\n <kendo-loader class=\"loader\" />\n </div>\n } @else if (searchResults().length) {\n <div class=\"search-results\">\n @for (category of searchResults(); track category?.name) {\n @if (category) {\n <div class=\"category\">\n <div class=\"header\"\n [class.empty]=\"!category.total\">\n <div class=\"header-main\">\n <kit-svg-icon class=\"header-main-icon\"\n [icon]=\"kitSvgIcon.CHECK_STICKER\" />\n <span class=\"header-main-title\">{{ category.name.toUpperCase() }} ({{ category.total }})</span>\n </div>\n\n @if (category.total > this.displayedLineItemsNumber()) {\n <kit-button [label]=\"'kit.globalSearch.showResults' | translate\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n (clicked)=\"navigate(category.routeConfig)\" />\n }\n </div>\n\n @for (lineItem of category.items.slice(0, this.displayedLineItemsNumber()); track lineItem) {\n <div class=\"line-item\"\n [class.has-link]=\"lineItem.routeConfig\"\n (click)=\"navigate(lineItem.routeConfig)\">\n <div class=\"main-content\">\n <div class=\"title\">\n <span [innerHTML]=\"lineItem.title | highlight:searchValue\"></span>\n </div>\n @if (lineItem.status) {\n <div>\n <kit-pill class=\"status\"\n [theme]=\"kitPillTheme.MAIN\">\n {{ lineItem.status }}\n </kit-pill>\n </div>\n }\n <div class=\"subtitle\"\n kitHideBelowWidthClass=\"hide\"\n [kitHideBelowWidth]=\"61\">\n <kit-truncate-text>\n <span [innerHTML]=\"lineItem.subtitle || '' | highlight:searchValue\"></span>\n </kit-truncate-text>\n </div>\n\n @if (lineItem.routePath; as routePath) {\n @if (routePath.from || routePath.to) {\n <kit-route-path class=\"route\"\n kitHideBelowWidthClass=\"hide\"\n [kitHideBelowWidth]=\"132\"\n [containerMode]=\"routePath.containerMode ?? ''\"\n [destinationPort]=\"routePath.to ?? ''\"\n [originPort]=\"routePath.from ?? ''\"\n [type]=\"routePath.type ?? ''\" />\n }\n }\n @if (lineItem.dates; as dates) {\n @if (dates.firstDate.value) {\n <div class=\"dates\">\n <div class=\"date-wrapper first-date\">\n <p class=\"date-label\">\n <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\" />\n <span>{{ dates.firstDate.label }}</span>\n </p>\n <span class=\"date\">{{ dates.firstDate.value | date: dateFormat : 'UTC' }}</span>\n </div>\n </div>\n }\n @if (dates.secondDate.value) {\n <div class=\"dates\">\n <div class=\"date-wrapper second-date\">\n <p class=\"date-label\">\n <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\" />\n <span>{{ dates.secondDate.label }}</span>\n </p>\n <span class=\"date\">{{ dates.secondDate.value | date: dateFormat : 'UTC' }}</span>\n </div>\n </div>\n }\n }\n </div>\n\n <div class=\"additional-content\">\n @for (item of lineItem.additionalContent; track item.key) {\n <div>\n <span class=\"label\">{{ item.translateKey | translate }} </span>\n <span class=\"value\"\n [innerHTML]=\"formatValue(item.value) | highlight:searchValue\"></span>\n </div>\n }\n </div>\n </div>\n }\n </div>\n }\n }\n </div>\n } @else {\n <kit-empty-section class=\"empty-section\"\n [text]=\"'kit.globalSearch.noData' | translate\" />\n }\n\n @if (filters().length) {\n <div class=\"filters\">\n @for (filter of filters(); track $index) {\n <div>\n <p class=\"label\">{{ filter.label }}</p>\n @for (value of filter.values.slice(0, isFilterExpanded($index) ? filter.values.length : 3); track $index) {\n <kit-pill @heightExpandCollapseAnimation\n class=\"filter-value\"\n [theme]=\"kitPillTheme.MAIN\"\n [selectable]=\"true\"\n [selected]=\"isFilterSelected(value)\"\n (clicked)=\"onSelectFilter(value, filter.appliedTo)\">\n {{ value.title | translate }}\n </kit-pill>\n }\n @if (filter.values.length > 3) {\n <kit-button class=\"toggle-btn\"\n [label]=\"`kit.globalSearch.${isFilterExpanded($index) ? 'showLess' : 'showMore'}` | translate\"\n [icon]=\"isFilterExpanded($index) ? kitSvgIcon.CHEVRON_UP : kitSvgIcon.CHEVRON_DOWN\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [kind]=\"kitButtonKind.SMALL\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"toggleFilterExpanded($index)\" />\n }\n </div>\n }\n </div>\n }\n }\n </div>\n }\n </ng-template>\n</div>\n", styles: [":host{flex:1}:host .global-search{max-width:360px}:host .global-search.expanded{max-width:100%}:host .global-search .textbox{border-color:var(--ui-kit-color-grey-11);box-shadow:none;border-radius:8px}:host .global-search .textbox.k-focus{border-color:var(--ui-kit-color-main)}:host ::ng-deep .k-animation-container{width:calc(100% - 145px)}:host ::ng-deep .kit-global-search-popup{overflow:auto;margin-top:10px;padding:0}:host ::ng-deep .kit-global-search-popup .popup-content{display:flex;justify-content:space-between}:host ::ng-deep .global-search .k-textbox.k-input .k-input-inner{padding:0 8px;height:40px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .search-icon{width:37px;height:37px;fill:none;stroke:var(--ui-kit-color-grey-10);padding-left:12px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .circle-cross-thin-icon{width:30px;height:30px;fill:none;stroke:var(--ui-kit-color-grey-12);padding-right:12px;cursor:pointer}:host ::ng-deep .search-results{padding:24px;flex:1}:host ::ng-deep .search-results .loader{display:flex;justify-content:center;height:100%;align-items:center;color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category:not(:last-child){margin-bottom:20px}:host ::ng-deep .search-results .category .header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 20px}:host ::ng-deep .search-results .category .header-main{display:flex;align-items:center}:host ::ng-deep .search-results .category .header-main-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);margin-right:10px}:host ::ng-deep .search-results .category .header-main-title{color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category .header.empty{margin:0}:host ::ng-deep .search-results .category .header.empty .header-main-icon{fill:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .header.empty .header-main-title{color:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .line-item{min-width:575px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--ui-kit-color-grey-11)}:host ::ng-deep .search-results .category .line-item.has-link{cursor:pointer}:host ::ng-deep .search-results .category .line-item.has-link:hover{opacity:.7}:host ::ng-deep .search-results .category .line-item .highlighted{color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category .line-item .main-content{display:grid;grid-template-columns:minmax(170px,max-content) minmax(115px,max-content) repeat(auto-fit,minmax(60px,1fr));gap:20px;align-items:center;grid-auto-flow:column}:host ::ng-deep .search-results .category .line-item .main-content .title{font-size:16px;line-height:22px;font-weight:500}:host ::ng-deep .search-results .category .line-item .main-content .subtitle{width:100%}:host ::ng-deep .search-results .category .line-item .main-content .subtitle.hide{display:none}:host ::ng-deep .search-results .category .line-item .main-content .title,:host ::ng-deep .search-results .category .line-item .main-content .subtitle{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .main-content .icon.calendar-icon{width:18px;height:18px;fill:var(--ui-kit-color-grey-12);margin-right:3px}:host ::ng-deep .search-results .category .line-item .main-content .route{container:route/inline-size;width:100%}:host ::ng-deep .search-results .category .line-item .main-content .route.hide{display:none;container:none}:host ::ng-deep .search-results .category .line-item .main-content .route .route-path{justify-content:left}:host ::ng-deep .search-results .category .line-item .main-content .status{white-space:nowrap;display:block;margin:auto}:host ::ng-deep .search-results .category .line-item .main-content .kit-pill-content{margin:auto}:host ::ng-deep .search-results .category .line-item .main-content .dates{display:flex;align-items:center;font-size:12px;line-height:14px;container:dates/inline-size;width:100%}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-wrapper{display:flex;justify-content:left;align-items:center;flex-wrap:wrap;text-align:center}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-wrapper .date{text-wrap:nowrap}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-label{display:flex;align-items:center;justify-content:center;margin-right:5px;text-wrap:nowrap}:host ::ng-deep .search-results .category .line-item .main-content .dates.first-date{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .main-content .dates.second-date{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .main-content:has(.route:not(.hide)){grid-template-columns:minmax(170px,max-content) minmax(115px,max-content) minmax(70px,1fr) minmax(99px,2fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content:not(:has(.status)){grid-template-columns:minmax(170px,max-content) minmax(70px,1fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content:not(:has(.status)):has(.route:not(.hide)){grid-template-columns:minmax(170px,max-content) minmax(70px,1fr) minmax(99px,2fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content>.dates:last-child{justify-self:end;justify-content:end;text-align:right}:host ::ng-deep .search-results .category .line-item .main-content>.dates:last-child .date-wrapper{justify-content:end}:host ::ng-deep .search-results .category .line-item .additional-content{text-align:right}:host ::ng-deep .search-results .category .line-item .additional-content .label{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .additional-content .value{color:var(--ui-kit-color-grey-10)}@container route (max-width: 190px){:host ::ng-deep .search-results .category .route-origin-port,:host ::ng-deep .search-results .category .icon.arrow{display:none}:host ::ng-deep .search-results .category .line-item .main-content .route .route-path{grid-template-columns:minmax(0,auto) min-content;justify-content:stretch}}@container route (max-width: 150px){:host ::ng-deep .search-results .category .route-mode{display:none}}@container dates (max-width: 120px){:host ::ng-deep .search-results .category .date-wrapper{flex-direction:column}:host ::ng-deep .search-results .category .date-label{margin-right:0}}:host ::ng-deep .filters{background-color:var(--ui-kit-color-grey-13);padding:24px;min-width:175px}:host ::ng-deep .filters .label{font-size:12px;line-height:14px;color:var(--ui-kit-color-grey-10);margin-bottom:10px;text-transform:uppercase}:host ::ng-deep .filters .filter-value{margin-bottom:10px;display:block}:host ::ng-deep .filters .filter-value .kit-pill{line-height:16px;text-align:left;display:inline-block;padding:7px 16px;font-size:13px}:host ::ng-deep .filters .toggle-btn{margin-bottom:40px;display:block}:host ::ng-deep .filters .toggle-btn .k-button{min-width:125px;padding:6px 16px;min-height:32px}:host ::ng-deep .prompts{display:flex;gap:10px;padding:24px}:host ::ng-deep .empty-section{container:none}\n"] }]
|
|
9466
|
+
], template: "<div #container\n class=\"global-search\"\n [class.expanded]=\"isPopupOpen\">\n <kendo-textbox class=\"textbox\"\n [placeholder]=\"'kit.globalSearch.placeholder' | translate\"\n [(ngModel)]=\"searchValue\"\n (click)=\"openPopup()\">\n <ng-template kendoTextBoxPrefixTemplate>\n <kit-svg-icon [icon]=\"kitSvgIcon.SEARCH\" />\n </ng-template>\n <ng-template kendoTextBoxSuffixTemplate>\n <kit-svg-icon [icon]=\"kitSvgIcon.CIRCLE_CROSS_THIN\"\n (click)=\"clearSearch()\" />\n </ng-template>\n </kendo-textbox>\n\n <kit-popup #popup\n [popupClass]=\"popupClass\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [closeOnOutsideClick]=\"false\" />\n\n <ng-template #content>\n @if (userPermissions(); as userPermissions) {\n <div class=\"popup-content\">\n @if (showPrompts()) {\n @if (getVisiblePrompts(userPermissions); as visiblePrompts) {\n @if (visiblePrompts.length) {\n <div class=\"prompts\">\n @for (prompt of visiblePrompts; track prompt) {\n <kit-pill [theme]=\"kitPillTheme.MAIN\"\n [selectable]=\"true\"\n (clicked)=\"onSelectPrompt(prompt)\">\n {{ prompt.label }}\n </kit-pill>\n }\n </div>\n }\n }\n } @else {\n @if (isLoading()) {\n <div class=\"search-results\">\n <kendo-loader class=\"loader\" />\n </div>\n } @else if (searchResults().length) {\n <div class=\"search-results\">\n @for (category of searchResults(); track category?.name) {\n @if (category) {\n <div class=\"category\">\n <div class=\"header\"\n [class.empty]=\"!category.total\">\n <div class=\"header-main\">\n <kit-svg-icon class=\"header-main-icon\"\n [icon]=\"kitSvgIcon.CHECK_STICKER\" />\n <span class=\"header-main-title\">{{ category.name.toUpperCase() }} ({{ category.total }})</span>\n </div>\n\n @if (category.total > this.displayedLineItemsNumber()) {\n <kit-button [label]=\"'kit.globalSearch.showResults' | translate\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n (clicked)=\"navigate(category.routeConfig)\" />\n }\n </div>\n\n @for (lineItem of category.items.slice(0, this.displayedLineItemsNumber()); track lineItem) {\n <div class=\"line-item\"\n [class.has-link]=\"lineItem.routeConfig\"\n (click)=\"navigate(lineItem.routeConfig)\">\n <div class=\"main-content\"\n [style.grid-template-columns]=\"getMainContentGridTemplate(category, lineItem)\">\n @if (isColumnVisible(category, 'title')) {\n <div class=\"title\">\n <span [innerHTML]=\"lineItem.title | highlight:searchValue\"></span>\n </div>\n }\n @if (lineItem.status && isColumnVisible(category, 'status')) {\n <div>\n <kit-pill class=\"status\"\n [theme]=\"kitPillTheme.MAIN\">\n {{ lineItem.status }}\n </kit-pill>\n </div>\n }\n @if (isColumnVisible(category, 'subtitle')) {\n <div class=\"subtitle\">\n <kit-truncate-text>\n <span [innerHTML]=\"lineItem.subtitle || '' | highlight:searchValue\"></span>\n </kit-truncate-text>\n </div>\n }\n\n @if (lineItem.routePath; as routePath) {\n @if (routePath.from || routePath.to) {\n <kit-route-path class=\"route\"\n kitHideBelowWidthClass=\"hide\"\n [kitHideBelowWidth]=\"132\"\n [containerMode]=\"routePath.containerMode ?? ''\"\n [destinationPort]=\"routePath.to ?? ''\"\n [originPort]=\"routePath.from ?? ''\"\n [type]=\"routePath.type ?? ''\" />\n }\n }\n @if (lineItem.dates; as dates) {\n @if (isColumnVisible(category, 'firstDate') && dates.firstDate.value) {\n <div class=\"dates\">\n <div class=\"date-wrapper first-date\">\n <p class=\"date-label\">\n <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\" />\n <span>{{ dates.firstDate.label }}</span>\n </p>\n <span class=\"date\">{{ dates.firstDate.value | date: dateFormat : 'UTC' }}</span>\n </div>\n </div>\n }\n @if (isColumnVisible(category, 'secondDate') && dates.secondDate.value) {\n <div class=\"dates\">\n <div class=\"date-wrapper second-date\">\n <p class=\"date-label\">\n <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\" />\n <span>{{ dates.secondDate.label }}</span>\n </p>\n <span class=\"date\">{{ dates.secondDate.value | date: dateFormat : 'UTC' }}</span>\n </div>\n </div>\n }\n }\n </div>\n\n @if (isColumnVisible(category, 'additionalContent')) {\n <div class=\"additional-content\">\n @for (item of lineItem.additionalContent; track item.key) {\n <div>\n <span class=\"label\">{{ item.translateKey | translate }} </span>\n <span class=\"value\"\n [innerHTML]=\"formatValue(item.value) | highlight:searchValue\"></span>\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n }\n </div>\n } @else {\n <kit-empty-section class=\"empty-section\"\n [text]=\"'kit.globalSearch.noData' | translate\" />\n }\n\n @if (filters().length) {\n <div class=\"filters\">\n @for (filter of filters(); track $index) {\n <div>\n <p class=\"label\">{{ filter.label }}</p>\n @for (value of filter.values.slice(0, isFilterExpanded($index) ? filter.values.length : 3); track $index) {\n <kit-pill @heightExpandCollapseAnimation\n class=\"filter-value\"\n [theme]=\"kitPillTheme.MAIN\"\n [selectable]=\"true\"\n [selected]=\"isFilterSelected(value)\"\n (clicked)=\"onSelectFilter(value, filter.appliedTo)\">\n {{ value.title | translate }}\n </kit-pill>\n }\n @if (filter.values.length > 3) {\n <kit-button class=\"toggle-btn\"\n [label]=\"`kit.globalSearch.${isFilterExpanded($index) ? 'showLess' : 'showMore'}` | translate\"\n [icon]=\"isFilterExpanded($index) ? kitSvgIcon.CHEVRON_UP : kitSvgIcon.CHEVRON_DOWN\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [kind]=\"kitButtonKind.SMALL\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"toggleFilterExpanded($index)\" />\n }\n </div>\n }\n </div>\n }\n }\n </div>\n }\n </ng-template>\n</div>\n", styles: [":host{flex:1}:host .global-search{max-width:360px}:host .global-search.expanded{max-width:100%}:host .global-search .textbox{border-color:var(--ui-kit-color-grey-11);box-shadow:none;border-radius:8px}:host .global-search .textbox.k-focus{border-color:var(--ui-kit-color-main)}:host ::ng-deep .k-animation-container{width:calc(100% - 145px)}:host ::ng-deep .kit-global-search-popup{overflow:auto;margin-top:10px;padding:0}:host ::ng-deep .kit-global-search-popup .popup-content{display:flex;justify-content:space-between}:host ::ng-deep .global-search .k-textbox.k-input .k-input-inner{padding:0 8px;height:40px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .search-icon{width:37px;height:37px;fill:none;stroke:var(--ui-kit-color-grey-10);padding-left:12px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .circle-cross-thin-icon{width:30px;height:30px;fill:none;stroke:var(--ui-kit-color-grey-12);padding-right:12px;cursor:pointer}:host ::ng-deep .search-results{padding:24px;flex:1}:host ::ng-deep .search-results .loader{display:flex;justify-content:center;height:100%;align-items:center;color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category:not(:last-child){margin-bottom:20px}:host ::ng-deep .search-results .category .header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 20px}:host ::ng-deep .search-results .category .header-main{display:flex;align-items:center}:host ::ng-deep .search-results .category .header-main-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);margin-right:10px}:host ::ng-deep .search-results .category .header-main-title{color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category .header.empty{margin:0}:host ::ng-deep .search-results .category .header.empty .header-main-icon{fill:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .header.empty .header-main-title{color:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .line-item{min-width:575px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--ui-kit-color-grey-11)}:host ::ng-deep .search-results .category .line-item.has-link{cursor:pointer}:host ::ng-deep .search-results .category .line-item.has-link:hover{opacity:.7}:host ::ng-deep .search-results .category .line-item .highlighted{color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category .line-item .main-content{display:grid;grid-template-columns:minmax(170px,max-content) minmax(115px,max-content) repeat(auto-fit,minmax(60px,1fr));gap:20px;align-items:center;grid-auto-flow:column}:host ::ng-deep .search-results .category .line-item .main-content .title{font-size:16px;line-height:22px;font-weight:500}:host ::ng-deep .search-results .category .line-item .main-content .subtitle{width:100%}:host ::ng-deep .search-results .category .line-item .main-content .subtitle.hide{display:none}:host ::ng-deep .search-results .category .line-item .main-content .title,:host ::ng-deep .search-results .category .line-item .main-content .subtitle{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .main-content .icon.calendar-icon{width:18px;height:18px;fill:var(--ui-kit-color-grey-12);margin-right:3px}:host ::ng-deep .search-results .category .line-item .main-content .route{container:route/inline-size;width:100%}:host ::ng-deep .search-results .category .line-item .main-content .route.hide{display:none;container:none}:host ::ng-deep .search-results .category .line-item .main-content .route .route-path{justify-content:left}:host ::ng-deep .search-results .category .line-item .main-content .status{white-space:nowrap;display:block;margin:auto}:host ::ng-deep .search-results .category .line-item .main-content .kit-pill-content{margin:auto}:host ::ng-deep .search-results .category .line-item .main-content .dates{display:flex;align-items:center;font-size:12px;line-height:14px;container:dates/inline-size;width:100%}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-wrapper{display:flex;justify-content:left;align-items:center;flex-wrap:wrap;text-align:center}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-wrapper .date{text-wrap:nowrap}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-label{display:flex;align-items:center;justify-content:center;margin-right:5px;text-wrap:nowrap}:host ::ng-deep .search-results .category .line-item .main-content .dates.first-date{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .main-content .dates.second-date{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .main-content:has(.route:not(.hide)){grid-template-columns:minmax(170px,max-content) minmax(115px,max-content) minmax(70px,1fr) minmax(99px,2fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content:not(:has(.status)){grid-template-columns:minmax(170px,max-content) minmax(70px,1fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content:not(:has(.status)):has(.route:not(.hide)){grid-template-columns:minmax(170px,max-content) minmax(70px,1fr) minmax(99px,2fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content>.dates:last-child{justify-self:end;justify-content:end;text-align:right}:host ::ng-deep .search-results .category .line-item .main-content>.dates:last-child .date-wrapper{justify-content:end}:host ::ng-deep .search-results .category .line-item .additional-content{text-align:right}:host ::ng-deep .search-results .category .line-item .additional-content .label{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .additional-content .value{color:var(--ui-kit-color-grey-10)}@container route (max-width: 190px){:host ::ng-deep .search-results .category .route-origin-port,:host ::ng-deep .search-results .category .icon.arrow{display:none}:host ::ng-deep .search-results .category .line-item .main-content .route .route-path{grid-template-columns:minmax(0,auto) min-content;justify-content:stretch}}@container route (max-width: 150px){:host ::ng-deep .search-results .category .route-mode{display:none}}@container dates (max-width: 120px){:host ::ng-deep .search-results .category .date-wrapper{flex-direction:column}:host ::ng-deep .search-results .category .date-label{margin-right:0}}:host ::ng-deep .filters{background-color:var(--ui-kit-color-grey-13);padding:24px;min-width:175px}:host ::ng-deep .filters .label{font-size:12px;line-height:14px;color:var(--ui-kit-color-grey-10);margin-bottom:10px;text-transform:uppercase}:host ::ng-deep .filters .filter-value{margin-bottom:10px;display:block}:host ::ng-deep .filters .filter-value .kit-pill{line-height:16px;text-align:left;display:inline-block;padding:7px 16px;font-size:13px}:host ::ng-deep .filters .toggle-btn{margin-bottom:40px;display:block}:host ::ng-deep .filters .toggle-btn .k-button{min-width:125px;padding:6px 16px;min-height:32px}:host ::ng-deep .prompts{display:flex;gap:10px;padding:24px}:host ::ng-deep .empty-section{container:none}\n"] }]
|
|
9384
9467
|
}], propDecorators: { searchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFn", required: true }] }], displayedLineItemsNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedLineItemsNumber", required: false }] }], prompts: [{ type: i0.Input, args: [{ isSignal: true, alias: "prompts", required: true }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], textbox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TextBoxComponent), { isSignal: true }] }], anchor: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TextBoxComponent), { ...{ read: ElementRef }, isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }], container: [{ type: i0.ViewChild, args: ['container', { ...{ read: ViewContainerRef }, isSignal: true }] }], documentClick: [{
|
|
9385
9468
|
type: HostListener,
|
|
9386
9469
|
args: ['document:click', ['$event']]
|
|
9470
|
+
}], onWindowResize: [{
|
|
9471
|
+
type: HostListener,
|
|
9472
|
+
args: ['window:resize']
|
|
9387
9473
|
}] } });
|
|
9388
9474
|
|
|
9389
|
-
const mapGlobalSearchResult = (store, requiredPermission, dataFetcher, categoryName, routeConfig, itemMapper) => {
|
|
9475
|
+
const mapGlobalSearchResult = (store, requiredPermission, dataFetcher, categoryName, routeConfig, itemMapper, layoutConfig) => {
|
|
9390
9476
|
return store.select(KIT_USER_PERMISSIONS_STATE_TOKEN).pipe(tap(permissions => !Object.keys(permissions).length && store.dispatch(new FetchUserPermissions())), filter(permissions => !!Object.keys(permissions).length), take(1), switchMap(permissions => {
|
|
9391
9477
|
if (!kitHasPermission(requiredPermission, permissions)) {
|
|
9392
9478
|
return of(null);
|
|
@@ -9395,11 +9481,13 @@ const mapGlobalSearchResult = (store, requiredPermission, dataFetcher, categoryN
|
|
|
9395
9481
|
name: categoryName,
|
|
9396
9482
|
total: data.total,
|
|
9397
9483
|
routeConfig,
|
|
9484
|
+
layoutConfig,
|
|
9398
9485
|
items: data.data.map(itemMapper),
|
|
9399
9486
|
})), catchError(() => of({
|
|
9400
9487
|
name: categoryName,
|
|
9401
9488
|
total: 0,
|
|
9402
9489
|
routeConfig,
|
|
9490
|
+
layoutConfig,
|
|
9403
9491
|
items: [],
|
|
9404
9492
|
})));
|
|
9405
9493
|
}));
|
|
@@ -12347,7 +12435,7 @@ const calculateDurationInDays = (start, end) => {
|
|
|
12347
12435
|
if (startMs === null || endMs === null || endMs < startMs) {
|
|
12348
12436
|
return null;
|
|
12349
12437
|
}
|
|
12350
|
-
return Math.
|
|
12438
|
+
return Math.floor((endMs - startMs) / dayInMs);
|
|
12351
12439
|
};
|
|
12352
12440
|
const toTimestamp = (value) => {
|
|
12353
12441
|
if (!value) {
|
|
@@ -12366,6 +12454,7 @@ class KitShipmentRoutingCardComponent {
|
|
|
12366
12454
|
this.kitSvgIcon = KitSvgIcon;
|
|
12367
12455
|
this.kitSvgIconType = KitSvgIconType;
|
|
12368
12456
|
this.kitPillTheme = KitPillTheme;
|
|
12457
|
+
this.kitTooltipPosition = KitTooltipPosition;
|
|
12369
12458
|
this.dateFormat = computed(() => this.view().dateFormat ?? KIT_DATE_FORMAT, /* @ts-ignore */
|
|
12370
12459
|
...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
|
|
12371
12460
|
this.currentLegProgressPercent = computed(() => {
|
|
@@ -12389,7 +12478,7 @@ class KitShipmentRoutingCardComponent {
|
|
|
12389
12478
|
return `${durationDays} ${this.translateService.instant(translationKey).toLowerCase()}`;
|
|
12390
12479
|
}
|
|
12391
12480
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitShipmentRoutingCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12392
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitShipmentRoutingCardComponent, isStandalone: true, selector: "kit-shipment-routing-card", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-shipment-routing-card\">\n <div class=\"card-header\">\n <div class=\"card-header-type\"\n [class.completed]=\"view().isCompleted\">\n <kit-svg-icon class=\"card-header-type-icon\"\n [icon]=\"view().transportIcon\"\n [ngClass]=\"kitSvgIconType.FILL\" />\n </div>\n <div class=\"card-header-info\">\n <div class=\"card-header-top\">\n <
|
|
12481
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitShipmentRoutingCardComponent, isStandalone: true, selector: "kit-shipment-routing-card", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-shipment-routing-card\">\n <div class=\"card-header\">\n <div class=\"card-header-type\"\n [class.completed]=\"view().isCompleted\">\n <kit-svg-icon class=\"card-header-type-icon\"\n [icon]=\"view().transportIcon\"\n [ngClass]=\"kitSvgIconType.FILL\" />\n </div>\n <div class=\"card-header-info\">\n <div class=\"card-header-top\">\n <p class=\"card-header-top-name\"\n kitTooltip\n kitTooltipFilter=\".card-header-top-name\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"'kit.shipmentRouting.tooltips.vehicleName' | translate\">\n {{ view().leg.name || '-' }}\n </p>\n @if (view().leg.legTypeLabel; as legTypeLabel) {\n <kit-status-label class=\"card-header-top-leg-type\"\n [tooltip]=\"'kit.shipmentRouting.tooltips.legType' | translate\"\n [color]=\"view().leg.legTypeColor ?? kitStatusLabelColor.GREY\"\n [truncateText]=\"false\">\n {{ legTypeLabel }}\n </kit-status-label>\n }\n </div>\n <div class=\"card-header-bottom\">\n <p class=\"card-header-bottom-number\"\n kitTooltip\n kitTooltipFilter=\".card-header-bottom-number\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"'kit.shipmentRouting.tooltips.voyageNo' | translate\">\n {{ view().leg.vehicleNumber || '-' }}\n </p>\n <div class=\"card-header-carrier\">\n <kit-svg-icon class=\"card-header-carrier-icon\"\n [icon]=\"kitSvgIcon.BUILDING\" />\n <p class=\"card-header-bottom-name\"\n kitTooltip\n kitTooltipFilter=\".card-header-bottom-name\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"'kit.shipmentRouting.tooltips.carrier' | translate\">\n {{ view().leg.carrierName || '-' }}\n </p>\n </div>\n </div>\n </div>\n </div>\n <div class=\"card-content\">\n <div class=\"ports-row\">\n <div class=\"ports-row-label\"></div>\n <p class=\"ports-row-port ports-row-port-start\">\n {{ view().leg.originPort || '-' }}\n </p>\n <div class=\"ports-row-track\">\n <div class=\"track-dot\"\n [class.completed]=\"isStartPointCompleted()\"></div>\n <div class=\"track-line\">\n <div class=\"track-line-fill\"\n [style.width.%]=\"currentLegProgressPercent()\"></div>\n </div>\n <div class=\"track-dot\"\n [class.completed]=\"isEndPointCompleted()\"></div>\n @if (view().showTransportIcon) {\n <div class=\"track-transport\"\n [style.left.%]=\"currentLegProgressPercent()\">\n <kit-svg-icon class=\"track-transport-icon\"\n [icon]=\"view().transportIcon\"\n [ngClass]=\"kitSvgIconType.FILL\" />\n </div>\n }\n </div>\n <p class=\"ports-row-port ports-row-port-end\">\n {{ view().leg.destinationPort || '-' }}\n </p>\n </div>\n <div class=\"dates-row\">\n <div class=\"item-label\">{{ view().scheduledLabel }}</div>\n <div class=\"item-date item-date-start\">\n {{ view().leg.etd ? (view().leg.etd | date: dateFormat() : 'UTC') : '-' }}\n </div>\n <div class=\"item-duration\">\n <kit-pill [theme]=\"kitPillTheme.BLUE\">\n {{ getLegDurationLabel(view().leg.etd, view().leg.eta) }}\n </kit-pill>\n </div>\n <div class=\"item-date item-date-end\">\n {{ view().leg.eta ? (view().leg.eta | date: dateFormat() : 'UTC') : '-' }}\n </div>\n </div>\n <div class=\"dates-row\">\n <div class=\"item-label\">{{ view().actualLabel }}</div>\n <div class=\"item-date item-date-start\">\n {{ view().leg.atd ? (view().leg.atd | date: dateFormat() : 'UTC') : '-' }}\n </div>\n <div class=\"item-duration\">\n <kit-pill [theme]=\"kitPillTheme.BLUE\">\n {{ getLegDurationLabel(view().leg.atd, view().leg.ata) }}\n </kit-pill>\n </div>\n <div class=\"item-date item-date-end\">\n {{ view().leg.ata ? (view().leg.ata | date: dateFormat() : 'UTC') : '-' }}\n </div>\n </div>\n </div>\n</div>\n", styles: [".kit-shipment-routing-card{padding:20px;border-radius:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-shipment-routing-card .card-header{display:flex;gap:10px}.kit-shipment-routing-card .card-header-type{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;fill:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-8)}.kit-shipment-routing-card .card-header-type.completed{fill:var(--color-white);background:var(--ui-kit-color-green-1)}.kit-shipment-routing-card .card-header-type-icon{display:block;width:24px;height:24px}.kit-shipment-routing-card .card-header-info{display:flex;flex-direction:column;flex:1;gap:5px;min-width:0}.kit-shipment-routing-card .card-header-top{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:14px;font-weight:700}.kit-shipment-routing-card .card-header-top-name{overflow:hidden}.kit-shipment-routing-card .card-header-bottom{display:flex;align-items:center;gap:20px;color:var(--ui-kit-color-grey-20);font-size:13px}.kit-shipment-routing-card .card-header-bottom-number{width:auto;overflow:hidden}.kit-shipment-routing-card .card-header-carrier{display:flex;gap:5px;min-width:50px}.kit-shipment-routing-card .card-header-carrier-icon{display:block;width:14px;height:14px;stroke:var(--ui-kit-color-grey-20);fill:none;flex-shrink:0}.kit-shipment-routing-card .card-header-carrier-name{overflow:hidden}.kit-shipment-routing-card .card-content{--row-label-column-width: 70px;--row-date-column-width: 100px;margin-top:20px;display:flex;flex-direction:column;gap:10px}.kit-shipment-routing-card .card-content .ports-row{display:grid;grid-template-columns:var(--row-label-column-width) minmax(0,max-content) auto minmax(0,max-content);align-items:center;column-gap:20px;margin-bottom:10px}.kit-shipment-routing-card .card-content .ports-row-label{min-width:0}.kit-shipment-routing-card .card-content .ports-row-port{max-width:180px;font-size:14px;line-height:20px;display:-webkit-box;-webkit-box-orient:vertical;white-space:normal}.kit-shipment-routing-card .card-content .ports-row-port-start{text-align:left}.kit-shipment-routing-card .card-content .ports-row-port-end{text-align:right}.kit-shipment-routing-card .card-content .ports-row-track{position:relative;display:flex;align-items:center;min-width:0;height:24px}.kit-shipment-routing-card .card-content .ports-row-track .track-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--ui-kit-color-grey-11)}.kit-shipment-routing-card .card-content .ports-row-track .track-dot.completed{background:var(--ui-kit-color-green-1)}.kit-shipment-routing-card .card-content .ports-row-track .track-line{position:relative;flex:1;height:2px;background:var(--ui-kit-color-grey-11);overflow:hidden}.kit-shipment-routing-card .card-content .ports-row-track .track-line .track-line-fill{height:100%;background:var(--ui-kit-color-green-1)}.kit-shipment-routing-card .card-content .ports-row-track .track-transport{position:absolute;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:30px;height:30px;fill:var(--ui-kit-color-green-1);background:var(--ui-kit-color-white)}.kit-shipment-routing-card .card-content .ports-row-track .track-transport-icon{display:block;width:25px;height:25px}.kit-shipment-routing-card .card-content .dates-row{display:grid;grid-template-columns:var(--row-label-column-width) var(--row-date-column-width) minmax(45px,1fr) var(--row-date-column-width);column-gap:10px;align-items:center;font-size:14px}.kit-shipment-routing-card .card-content .dates-row .item-label{color:var(--ui-kit-color-grey-20);font-size:12px;text-transform:uppercase}.kit-shipment-routing-card .card-content .dates-row .item-date{width:100%;white-space:nowrap;text-align:center}.kit-shipment-routing-card .card-content .dates-row .item-date-start{text-align:left}.kit-shipment-routing-card .card-content .dates-row .item-date-end{text-align:right}.kit-shipment-routing-card .card-content .dates-row .item-duration{display:flex;justify-content:center;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "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: DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12393
12482
|
}
|
|
12394
12483
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitShipmentRoutingCardComponent, decorators: [{
|
|
12395
12484
|
type: Component,
|
|
@@ -12399,8 +12488,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
12399
12488
|
KitSvgIconComponent,
|
|
12400
12489
|
KitPillComponent,
|
|
12401
12490
|
KitStatusLabelComponent,
|
|
12402
|
-
|
|
12403
|
-
|
|
12491
|
+
KitTooltipDirective,
|
|
12492
|
+
TranslatePipe,
|
|
12493
|
+
], template: "<div class=\"kit-shipment-routing-card\">\n <div class=\"card-header\">\n <div class=\"card-header-type\"\n [class.completed]=\"view().isCompleted\">\n <kit-svg-icon class=\"card-header-type-icon\"\n [icon]=\"view().transportIcon\"\n [ngClass]=\"kitSvgIconType.FILL\" />\n </div>\n <div class=\"card-header-info\">\n <div class=\"card-header-top\">\n <p class=\"card-header-top-name\"\n kitTooltip\n kitTooltipFilter=\".card-header-top-name\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"'kit.shipmentRouting.tooltips.vehicleName' | translate\">\n {{ view().leg.name || '-' }}\n </p>\n @if (view().leg.legTypeLabel; as legTypeLabel) {\n <kit-status-label class=\"card-header-top-leg-type\"\n [tooltip]=\"'kit.shipmentRouting.tooltips.legType' | translate\"\n [color]=\"view().leg.legTypeColor ?? kitStatusLabelColor.GREY\"\n [truncateText]=\"false\">\n {{ legTypeLabel }}\n </kit-status-label>\n }\n </div>\n <div class=\"card-header-bottom\">\n <p class=\"card-header-bottom-number\"\n kitTooltip\n kitTooltipFilter=\".card-header-bottom-number\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"'kit.shipmentRouting.tooltips.voyageNo' | translate\">\n {{ view().leg.vehicleNumber || '-' }}\n </p>\n <div class=\"card-header-carrier\">\n <kit-svg-icon class=\"card-header-carrier-icon\"\n [icon]=\"kitSvgIcon.BUILDING\" />\n <p class=\"card-header-bottom-name\"\n kitTooltip\n kitTooltipFilter=\".card-header-bottom-name\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"'kit.shipmentRouting.tooltips.carrier' | translate\">\n {{ view().leg.carrierName || '-' }}\n </p>\n </div>\n </div>\n </div>\n </div>\n <div class=\"card-content\">\n <div class=\"ports-row\">\n <div class=\"ports-row-label\"></div>\n <p class=\"ports-row-port ports-row-port-start\">\n {{ view().leg.originPort || '-' }}\n </p>\n <div class=\"ports-row-track\">\n <div class=\"track-dot\"\n [class.completed]=\"isStartPointCompleted()\"></div>\n <div class=\"track-line\">\n <div class=\"track-line-fill\"\n [style.width.%]=\"currentLegProgressPercent()\"></div>\n </div>\n <div class=\"track-dot\"\n [class.completed]=\"isEndPointCompleted()\"></div>\n @if (view().showTransportIcon) {\n <div class=\"track-transport\"\n [style.left.%]=\"currentLegProgressPercent()\">\n <kit-svg-icon class=\"track-transport-icon\"\n [icon]=\"view().transportIcon\"\n [ngClass]=\"kitSvgIconType.FILL\" />\n </div>\n }\n </div>\n <p class=\"ports-row-port ports-row-port-end\">\n {{ view().leg.destinationPort || '-' }}\n </p>\n </div>\n <div class=\"dates-row\">\n <div class=\"item-label\">{{ view().scheduledLabel }}</div>\n <div class=\"item-date item-date-start\">\n {{ view().leg.etd ? (view().leg.etd | date: dateFormat() : 'UTC') : '-' }}\n </div>\n <div class=\"item-duration\">\n <kit-pill [theme]=\"kitPillTheme.BLUE\">\n {{ getLegDurationLabel(view().leg.etd, view().leg.eta) }}\n </kit-pill>\n </div>\n <div class=\"item-date item-date-end\">\n {{ view().leg.eta ? (view().leg.eta | date: dateFormat() : 'UTC') : '-' }}\n </div>\n </div>\n <div class=\"dates-row\">\n <div class=\"item-label\">{{ view().actualLabel }}</div>\n <div class=\"item-date item-date-start\">\n {{ view().leg.atd ? (view().leg.atd | date: dateFormat() : 'UTC') : '-' }}\n </div>\n <div class=\"item-duration\">\n <kit-pill [theme]=\"kitPillTheme.BLUE\">\n {{ getLegDurationLabel(view().leg.atd, view().leg.ata) }}\n </kit-pill>\n </div>\n <div class=\"item-date item-date-end\">\n {{ view().leg.ata ? (view().leg.ata | date: dateFormat() : 'UTC') : '-' }}\n </div>\n </div>\n </div>\n</div>\n", styles: [".kit-shipment-routing-card{padding:20px;border-radius:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-shipment-routing-card .card-header{display:flex;gap:10px}.kit-shipment-routing-card .card-header-type{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;fill:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-8)}.kit-shipment-routing-card .card-header-type.completed{fill:var(--color-white);background:var(--ui-kit-color-green-1)}.kit-shipment-routing-card .card-header-type-icon{display:block;width:24px;height:24px}.kit-shipment-routing-card .card-header-info{display:flex;flex-direction:column;flex:1;gap:5px;min-width:0}.kit-shipment-routing-card .card-header-top{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:14px;font-weight:700}.kit-shipment-routing-card .card-header-top-name{overflow:hidden}.kit-shipment-routing-card .card-header-bottom{display:flex;align-items:center;gap:20px;color:var(--ui-kit-color-grey-20);font-size:13px}.kit-shipment-routing-card .card-header-bottom-number{width:auto;overflow:hidden}.kit-shipment-routing-card .card-header-carrier{display:flex;gap:5px;min-width:50px}.kit-shipment-routing-card .card-header-carrier-icon{display:block;width:14px;height:14px;stroke:var(--ui-kit-color-grey-20);fill:none;flex-shrink:0}.kit-shipment-routing-card .card-header-carrier-name{overflow:hidden}.kit-shipment-routing-card .card-content{--row-label-column-width: 70px;--row-date-column-width: 100px;margin-top:20px;display:flex;flex-direction:column;gap:10px}.kit-shipment-routing-card .card-content .ports-row{display:grid;grid-template-columns:var(--row-label-column-width) minmax(0,max-content) auto minmax(0,max-content);align-items:center;column-gap:20px;margin-bottom:10px}.kit-shipment-routing-card .card-content .ports-row-label{min-width:0}.kit-shipment-routing-card .card-content .ports-row-port{max-width:180px;font-size:14px;line-height:20px;display:-webkit-box;-webkit-box-orient:vertical;white-space:normal}.kit-shipment-routing-card .card-content .ports-row-port-start{text-align:left}.kit-shipment-routing-card .card-content .ports-row-port-end{text-align:right}.kit-shipment-routing-card .card-content .ports-row-track{position:relative;display:flex;align-items:center;min-width:0;height:24px}.kit-shipment-routing-card .card-content .ports-row-track .track-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--ui-kit-color-grey-11)}.kit-shipment-routing-card .card-content .ports-row-track .track-dot.completed{background:var(--ui-kit-color-green-1)}.kit-shipment-routing-card .card-content .ports-row-track .track-line{position:relative;flex:1;height:2px;background:var(--ui-kit-color-grey-11);overflow:hidden}.kit-shipment-routing-card .card-content .ports-row-track .track-line .track-line-fill{height:100%;background:var(--ui-kit-color-green-1)}.kit-shipment-routing-card .card-content .ports-row-track .track-transport{position:absolute;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:30px;height:30px;fill:var(--ui-kit-color-green-1);background:var(--ui-kit-color-white)}.kit-shipment-routing-card .card-content .ports-row-track .track-transport-icon{display:block;width:25px;height:25px}.kit-shipment-routing-card .card-content .dates-row{display:grid;grid-template-columns:var(--row-label-column-width) var(--row-date-column-width) minmax(45px,1fr) var(--row-date-column-width);column-gap:10px;align-items:center;font-size:14px}.kit-shipment-routing-card .card-content .dates-row .item-label{color:var(--ui-kit-color-grey-20);font-size:12px;text-transform:uppercase}.kit-shipment-routing-card .card-content .dates-row .item-date{width:100%;white-space:nowrap;text-align:center}.kit-shipment-routing-card .card-content .dates-row .item-date-start{text-align:left}.kit-shipment-routing-card .card-content .dates-row .item-date-end{text-align:right}.kit-shipment-routing-card .card-content .dates-row .item-duration{display:flex;justify-content:center;white-space:nowrap}\n"] }]
|
|
12404
12494
|
}], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }] } });
|
|
12405
12495
|
|
|
12406
12496
|
class KitShipmentRoutingOverviewComponent {
|
|
@@ -12426,7 +12516,7 @@ class KitShipmentRoutingOverviewComponent {
|
|
|
12426
12516
|
return completedSegments >= index;
|
|
12427
12517
|
}
|
|
12428
12518
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitShipmentRoutingOverviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12429
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitShipmentRoutingOverviewComponent, isStandalone: true, selector: "kit-shipment-routing-overview", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-shipment-routing-overview\">\n <div class=\"routing\">\n <div class=\"routing-port\">\n <div class=\"routing-port-label\">{{ view().originLabel }}</div>\n <div class=\"routing-port-name\">{{ view().originPort || '-' }}</div>\n <div class=\"routing-port-date\">{{ view().originDate ? (view().originDate | date: dateFormat() : 'UTC') : '-' }}</div>\n </div>\n <div class=\"routing-main\">\n <kit-pill [theme]=\"kitPillTheme.BLUE\">\n {{ view().transitDaysLabel }}\n </kit-pill>\n <div class=\"routing-route\">\n <div class=\"routing-track\">\n <div class=\"routing-track-progress\"\n [style.width.%]=\"progressPercent()\"></div>\n </div>\n <div class=\"routing-ports\">\n @for (port of ports(); track $index) {\n <div class=\"port-item\"\n [style.left.%]=\"getPortPositionPercent($index)\"\n [class.port-item-completed]=\"isPortCompleted($index)\">\n <div class=\"port-item-dot\"></div>\n <
|
|
12519
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitShipmentRoutingOverviewComponent, isStandalone: true, selector: "kit-shipment-routing-overview", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-shipment-routing-overview\">\n <div class=\"routing\">\n <div class=\"routing-port\">\n <div class=\"routing-port-label\">{{ view().originLabel }}</div>\n <div class=\"routing-port-name\">{{ view().originPort || '-' }}</div>\n <div class=\"routing-port-date\">{{ view().originDate ? (view().originDate | date: dateFormat() : 'UTC') : '-' }}</div>\n </div>\n <div class=\"routing-main\">\n <kit-pill [theme]=\"kitPillTheme.BLUE\">\n {{ view().transitDaysLabel }}\n </kit-pill>\n <div class=\"routing-route\">\n <div class=\"routing-track\">\n <div class=\"routing-track-progress\"\n [style.width.%]=\"progressPercent()\"></div>\n </div>\n <div class=\"routing-ports\">\n @for (port of ports(); track $index) {\n <div class=\"port-item\"\n [style.left.%]=\"getPortPositionPercent($index)\"\n [class.port-item-completed]=\"isPortCompleted($index)\">\n <div class=\"port-item-dot\"></div>\n <p class=\"port-item-name\">\n {{ port }}\n </p>\n </div>\n }\n </div>\n <div class=\"routing-transport\"\n [style.left.%]=\"progressPercent()\">\n <kit-svg-icon class=\"routing-transport-icon\"\n [icon]=\"view().transportIcon ?? null\"\n [ngClass]=\"kitSvgIconType.FILL\" />\n </div>\n </div>\n </div>\n <div class=\"routing-port\">\n <div class=\"routing-port-label\">{{ view().destinationLabel }}</div>\n <div class=\"routing-port-name\">{{ view().destinationPort || '-' }}</div>\n <div class=\"routing-port-date\">{{ view().destinationDate ? (view().destinationDate | date: dateFormat() : 'UTC') : '-' }}</div>\n </div>\n </div>\n</div>\n", styles: [".kit-shipment-routing-overview{display:block}.kit-shipment-routing-overview .routing{display:grid;grid-template-columns:120px 1fr 120px;gap:60px;align-items:center;color:var(--ui-kit-color-grey-10)}.kit-shipment-routing-overview .routing-port{display:flex;flex-direction:column;gap:5px;font-size:14px}.kit-shipment-routing-overview .routing-port:last-child{text-align:right}.kit-shipment-routing-overview .routing-port-label{margin-bottom:5px;color:var(--ui-kit-color-grey-14)}.kit-shipment-routing-overview .routing-port-name{font-size:16px;font-weight:600;line-height:1.2}.kit-shipment-routing-overview .routing-port-date{color:var(--ui-kit-color-grey-20)}.kit-shipment-routing-overview .routing-main{display:flex;flex-direction:column;align-items:center;flex:1;gap:20px}.kit-shipment-routing-overview .routing-route{position:relative;align-self:stretch}.kit-shipment-routing-overview .routing-track{position:absolute;left:0;right:0;top:6px;height:2px;border-radius:999px;background:var(--ui-kit-color-grey-11)}.kit-shipment-routing-overview .routing-track-progress{height:100%;border-radius:inherit;background:var(--ui-kit-color-green-1)}.kit-shipment-routing-overview .routing-ports{position:relative;min-height:70px}.kit-shipment-routing-overview .routing-transport{position:absolute;top:-20px;transform:translate(-50%);width:44px;height:44px;background:var(--ui-kit-color-white);display:flex;align-items:center;justify-content:center;z-index:1}.kit-shipment-routing-overview .routing-transport-icon{width:38px;height:38px;fill:var(--ui-kit-color-green-1)}.kit-shipment-routing-overview .port-item{position:absolute;top:2px;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;max-width:150px;transform:translate(-50%)}.kit-shipment-routing-overview .port-item-dot{width:9px;height:9px;border-radius:50%;background:var(--ui-kit-color-grey-11);z-index:1}.kit-shipment-routing-overview .port-item-name{font-size:14px;color:var(--ui-kit-color-grey-14);text-align:center;width:150px;line-height:1.2}.kit-shipment-routing-overview .port-item-completed .port-item-dot{background:var(--ui-kit-color-green-1)}.kit-shipment-routing-overview .port-item:first-child .port-item-name{text-align:left;transform:translate(30%)}.kit-shipment-routing-overview .port-item:last-child .port-item-name{text-align:right;transform:translate(-30%)}@container routing-layout (max-width: 960px){.kit-shipment-routing-overview .routing{grid-template-columns:1fr 1fr;gap:20px}.kit-shipment-routing-overview .routing-port:first-child{order:1}.kit-shipment-routing-overview .routing-port:last-child{order:2;text-align:right}.kit-shipment-routing-overview .routing-main{order:3;grid-column:span 2}.kit-shipment-routing-overview .port-item:first-child{align-items:flex-start;transform:none}.kit-shipment-routing-overview .port-item:first-child .port-item-name{text-align:left;transform:none}.kit-shipment-routing-overview .port-item:last-child{align-items:flex-end;transform:translate(-100%)}.kit-shipment-routing-overview .port-item:last-child .port-item-name{text-align:right;transform:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12430
12520
|
}
|
|
12431
12521
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitShipmentRoutingOverviewComponent, decorators: [{
|
|
12432
12522
|
type: Component,
|
|
@@ -12435,8 +12525,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
12435
12525
|
NgClass,
|
|
12436
12526
|
KitPillComponent,
|
|
12437
12527
|
KitSvgIconComponent,
|
|
12438
|
-
|
|
12439
|
-
], template: "<div class=\"kit-shipment-routing-overview\">\n <div class=\"routing\">\n <div class=\"routing-port\">\n <div class=\"routing-port-label\">{{ view().originLabel }}</div>\n <div class=\"routing-port-name\">{{ view().originPort || '-' }}</div>\n <div class=\"routing-port-date\">{{ view().originDate ? (view().originDate | date: dateFormat() : 'UTC') : '-' }}</div>\n </div>\n <div class=\"routing-main\">\n <kit-pill [theme]=\"kitPillTheme.BLUE\">\n {{ view().transitDaysLabel }}\n </kit-pill>\n <div class=\"routing-route\">\n <div class=\"routing-track\">\n <div class=\"routing-track-progress\"\n [style.width.%]=\"progressPercent()\"></div>\n </div>\n <div class=\"routing-ports\">\n @for (port of ports(); track $index) {\n <div class=\"port-item\"\n [style.left.%]=\"getPortPositionPercent($index)\"\n [class.port-item-completed]=\"isPortCompleted($index)\">\n <div class=\"port-item-dot\"></div>\n <kit-truncate-text class=\"port-item-name\"\n [lines]=\"2\">\n {{ port }}\n </kit-truncate-text>\n </div>\n }\n </div>\n <div class=\"routing-transport\"\n [style.left.%]=\"progressPercent()\">\n <kit-svg-icon class=\"routing-transport-icon\"\n [icon]=\"view().transportIcon ?? null\"\n [ngClass]=\"kitSvgIconType.FILL\" />\n </div>\n </div>\n </div>\n <div class=\"routing-port\">\n <div class=\"routing-port-label\">{{ view().destinationLabel }}</div>\n <div class=\"routing-port-name\">{{ view().destinationPort || '-' }}</div>\n <div class=\"routing-port-date\">{{ view().destinationDate ? (view().destinationDate | date: dateFormat() : 'UTC') : '-' }}</div>\n </div>\n </div>\n</div>\n", styles: [".kit-shipment-routing-overview{display:block}.kit-shipment-routing-overview .routing{display:grid;grid-template-columns:120px 1fr 120px;gap:60px;align-items:center;color:var(--ui-kit-color-grey-10)}.kit-shipment-routing-overview .routing-port{display:flex;flex-direction:column;gap:5px;font-size:14px}.kit-shipment-routing-overview .routing-port:last-child{text-align:right}.kit-shipment-routing-overview .routing-port-label{margin-bottom:5px;color:var(--ui-kit-color-grey-14)}.kit-shipment-routing-overview .routing-port-name{font-size:16px;font-weight:600;line-height:1.2}.kit-shipment-routing-overview .routing-port-date{color:var(--ui-kit-color-grey-20)}.kit-shipment-routing-overview .routing-main{display:flex;flex-direction:column;align-items:center;flex:1;gap:20px}.kit-shipment-routing-overview .routing-route{position:relative;align-self:stretch}.kit-shipment-routing-overview .routing-track{position:absolute;left:0;right:0;top:6px;height:2px;border-radius:999px;background:var(--ui-kit-color-grey-11)}.kit-shipment-routing-overview .routing-track-progress{height:100%;border-radius:inherit;background:var(--ui-kit-color-green-1)}.kit-shipment-routing-overview .routing-ports{position:relative;min-height:56px}.kit-shipment-routing-overview .routing-transport{position:absolute;top:-20px;transform:translate(-50%);width:44px;height:44px;background:var(--ui-kit-color-white);display:flex;align-items:center;justify-content:center;z-index:1}.kit-shipment-routing-overview .routing-transport-icon{width:38px;height:38px;fill:var(--ui-kit-color-green-1)}.kit-shipment-routing-overview .port-item{position:absolute;top:2px;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;max-width:120px;transform:translate(-50%)}.kit-shipment-routing-overview .port-item-dot{width:9px;height:9px;border-radius:50%;background:var(--ui-kit-color-grey-11);z-index:1}.kit-shipment-routing-overview .port-item-name{font-size:14px;color:var(--ui-kit-color-grey-14);text-align:center;max-width:120px;line-height:1.2}.kit-shipment-routing-overview .port-item-completed .port-item-dot{background:var(--ui-kit-color-green-1)}@container routing-layout (max-width: 960px){.kit-shipment-routing-overview .routing{grid-template-columns:1fr 1fr;gap:20px}.kit-shipment-routing-overview .routing-port:first-child{order:1}.kit-shipment-routing-overview .routing-port:last-child{order:2;text-align:right}.kit-shipment-routing-overview .routing-main{order:3;grid-column:span 2}.kit-shipment-routing-overview .port-item:first-child{align-items:flex-start;transform:none}.kit-shipment-routing-overview .port-item:first-child .port-item-name{text-align:left}.kit-shipment-routing-overview .port-item:last-child{align-items:flex-end;transform:translate(-100%)}.kit-shipment-routing-overview .port-item:last-child .port-item-name{text-align:right}}\n"] }]
|
|
12528
|
+
], template: "<div class=\"kit-shipment-routing-overview\">\n <div class=\"routing\">\n <div class=\"routing-port\">\n <div class=\"routing-port-label\">{{ view().originLabel }}</div>\n <div class=\"routing-port-name\">{{ view().originPort || '-' }}</div>\n <div class=\"routing-port-date\">{{ view().originDate ? (view().originDate | date: dateFormat() : 'UTC') : '-' }}</div>\n </div>\n <div class=\"routing-main\">\n <kit-pill [theme]=\"kitPillTheme.BLUE\">\n {{ view().transitDaysLabel }}\n </kit-pill>\n <div class=\"routing-route\">\n <div class=\"routing-track\">\n <div class=\"routing-track-progress\"\n [style.width.%]=\"progressPercent()\"></div>\n </div>\n <div class=\"routing-ports\">\n @for (port of ports(); track $index) {\n <div class=\"port-item\"\n [style.left.%]=\"getPortPositionPercent($index)\"\n [class.port-item-completed]=\"isPortCompleted($index)\">\n <div class=\"port-item-dot\"></div>\n <p class=\"port-item-name\">\n {{ port }}\n </p>\n </div>\n }\n </div>\n <div class=\"routing-transport\"\n [style.left.%]=\"progressPercent()\">\n <kit-svg-icon class=\"routing-transport-icon\"\n [icon]=\"view().transportIcon ?? null\"\n [ngClass]=\"kitSvgIconType.FILL\" />\n </div>\n </div>\n </div>\n <div class=\"routing-port\">\n <div class=\"routing-port-label\">{{ view().destinationLabel }}</div>\n <div class=\"routing-port-name\">{{ view().destinationPort || '-' }}</div>\n <div class=\"routing-port-date\">{{ view().destinationDate ? (view().destinationDate | date: dateFormat() : 'UTC') : '-' }}</div>\n </div>\n </div>\n</div>\n", styles: [".kit-shipment-routing-overview{display:block}.kit-shipment-routing-overview .routing{display:grid;grid-template-columns:120px 1fr 120px;gap:60px;align-items:center;color:var(--ui-kit-color-grey-10)}.kit-shipment-routing-overview .routing-port{display:flex;flex-direction:column;gap:5px;font-size:14px}.kit-shipment-routing-overview .routing-port:last-child{text-align:right}.kit-shipment-routing-overview .routing-port-label{margin-bottom:5px;color:var(--ui-kit-color-grey-14)}.kit-shipment-routing-overview .routing-port-name{font-size:16px;font-weight:600;line-height:1.2}.kit-shipment-routing-overview .routing-port-date{color:var(--ui-kit-color-grey-20)}.kit-shipment-routing-overview .routing-main{display:flex;flex-direction:column;align-items:center;flex:1;gap:20px}.kit-shipment-routing-overview .routing-route{position:relative;align-self:stretch}.kit-shipment-routing-overview .routing-track{position:absolute;left:0;right:0;top:6px;height:2px;border-radius:999px;background:var(--ui-kit-color-grey-11)}.kit-shipment-routing-overview .routing-track-progress{height:100%;border-radius:inherit;background:var(--ui-kit-color-green-1)}.kit-shipment-routing-overview .routing-ports{position:relative;min-height:70px}.kit-shipment-routing-overview .routing-transport{position:absolute;top:-20px;transform:translate(-50%);width:44px;height:44px;background:var(--ui-kit-color-white);display:flex;align-items:center;justify-content:center;z-index:1}.kit-shipment-routing-overview .routing-transport-icon{width:38px;height:38px;fill:var(--ui-kit-color-green-1)}.kit-shipment-routing-overview .port-item{position:absolute;top:2px;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;max-width:150px;transform:translate(-50%)}.kit-shipment-routing-overview .port-item-dot{width:9px;height:9px;border-radius:50%;background:var(--ui-kit-color-grey-11);z-index:1}.kit-shipment-routing-overview .port-item-name{font-size:14px;color:var(--ui-kit-color-grey-14);text-align:center;width:150px;line-height:1.2}.kit-shipment-routing-overview .port-item-completed .port-item-dot{background:var(--ui-kit-color-green-1)}.kit-shipment-routing-overview .port-item:first-child .port-item-name{text-align:left;transform:translate(30%)}.kit-shipment-routing-overview .port-item:last-child .port-item-name{text-align:right;transform:translate(-30%)}@container routing-layout (max-width: 960px){.kit-shipment-routing-overview .routing{grid-template-columns:1fr 1fr;gap:20px}.kit-shipment-routing-overview .routing-port:first-child{order:1}.kit-shipment-routing-overview .routing-port:last-child{order:2;text-align:right}.kit-shipment-routing-overview .routing-main{order:3;grid-column:span 2}.kit-shipment-routing-overview .port-item:first-child{align-items:flex-start;transform:none}.kit-shipment-routing-overview .port-item:first-child .port-item-name{text-align:left;transform:none}.kit-shipment-routing-overview .port-item:last-child{align-items:flex-end;transform:translate(-100%)}.kit-shipment-routing-overview .port-item:last-child .port-item-name{text-align:right;transform:none}}\n"] }]
|
|
12440
12529
|
}], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }] } });
|
|
12441
12530
|
|
|
12442
12531
|
var KitLanguage;
|
|
@@ -12764,6 +12853,12 @@ const kitTranslations = {
|
|
|
12764
12853
|
shipmentRouting: {
|
|
12765
12854
|
day: 'Day',
|
|
12766
12855
|
days: 'Days',
|
|
12856
|
+
tooltips: {
|
|
12857
|
+
vehicleName: 'Vehicle Name',
|
|
12858
|
+
carrier: 'Carrier',
|
|
12859
|
+
voyageNo: 'Voyage No',
|
|
12860
|
+
legType: 'Leg Type',
|
|
12861
|
+
},
|
|
12767
12862
|
},
|
|
12768
12863
|
},
|
|
12769
12864
|
},
|
|
@@ -13066,6 +13161,12 @@ const kitTranslations = {
|
|
|
13066
13161
|
shipmentRouting: {
|
|
13067
13162
|
day: 'Jour',
|
|
13068
13163
|
days: 'Jours',
|
|
13164
|
+
tooltips: {
|
|
13165
|
+
vehicleName: 'Nom du véhicule',
|
|
13166
|
+
carrier: 'Transporteur',
|
|
13167
|
+
voyageNo: 'N° de voyage',
|
|
13168
|
+
legType: 'Type de trajet',
|
|
13169
|
+
},
|
|
13069
13170
|
},
|
|
13070
13171
|
},
|
|
13071
13172
|
},
|
|
@@ -13368,6 +13469,12 @@ const kitTranslations = {
|
|
|
13368
13469
|
shipmentRouting: {
|
|
13369
13470
|
day: 'Tag',
|
|
13370
13471
|
days: 'Tage',
|
|
13472
|
+
tooltips: {
|
|
13473
|
+
vehicleName: 'Fahrzeugname',
|
|
13474
|
+
carrier: 'Spediteur',
|
|
13475
|
+
voyageNo: 'Reisenummer',
|
|
13476
|
+
legType: 'Streckentyp',
|
|
13477
|
+
},
|
|
13371
13478
|
},
|
|
13372
13479
|
},
|
|
13373
13480
|
},
|
|
@@ -13666,6 +13773,12 @@ const kitTranslations = {
|
|
|
13666
13773
|
shipmentRouting: {
|
|
13667
13774
|
day: 'День',
|
|
13668
13775
|
days: 'Дней',
|
|
13776
|
+
tooltips: {
|
|
13777
|
+
vehicleName: 'Название транспортного средства',
|
|
13778
|
+
carrier: 'Перевозчик',
|
|
13779
|
+
voyageNo: 'Номер рейса',
|
|
13780
|
+
legType: 'Тип участка',
|
|
13781
|
+
},
|
|
13669
13782
|
},
|
|
13670
13783
|
},
|
|
13671
13784
|
},
|
|
@@ -13964,6 +14077,12 @@ const kitTranslations = {
|
|
|
13964
14077
|
shipmentRouting: {
|
|
13965
14078
|
day: '天',
|
|
13966
14079
|
days: '天',
|
|
14080
|
+
tooltips: {
|
|
14081
|
+
vehicleName: '车辆名称',
|
|
14082
|
+
carrier: '承运人',
|
|
14083
|
+
voyageNo: '航次编号',
|
|
14084
|
+
legType: '航段类型',
|
|
14085
|
+
},
|
|
13967
14086
|
},
|
|
13968
14087
|
},
|
|
13969
14088
|
},
|