@indigina/ui-kit 1.1.183 → 1.1.184
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/indigina-ui-kit.mjs +210 -68
- package/fesm2022/indigina-ui-kit.mjs.map +1 -1
- package/lib/components/kit-global-search/kit-global-search.component.d.ts +38 -0
- package/lib/components/kit-global-search/kit-global-search.model.d.ts +27 -0
- package/lib/components/kit-global-search/kit-global-search.util.d.ts +7 -0
- package/lib/components/kit-pill/kit-pill.const.d.ts +2 -1
- package/lib/components/kit-route-path/kit-route-path.component.d.ts +12 -0
- package/lib/widgets/kit-top-bar/kit-top-bar.component.d.ts +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +3 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, ChangeDetectionStrategy, Component, input, EventEmitter, Output, ViewEncapsulation, NgModule, effect, inject, ElementRef, NgZone, Renderer2, Directive, forwardRef, viewChild, HostListener, signal, TemplateRef, ViewChild, ContentChild, Injectable, output, Host, Self, Inject, model, computed, contentChildren, ContentChildren, viewChildren,
|
|
2
|
+
import { Input, ChangeDetectionStrategy, Component, input, EventEmitter, Output, ViewEncapsulation, NgModule, effect, inject, ElementRef, NgZone, Renderer2, Directive, forwardRef, viewChild, HostListener, signal, TemplateRef, ViewChild, ContentChild, Injectable, output, Host, Self, Inject, model, computed, contentChildren, ContentChildren, viewChildren, ViewContainerRef, InjectionToken, contentChild, Optional } from '@angular/core';
|
|
3
3
|
import * as i1 from '@progress/kendo-angular-buttons';
|
|
4
4
|
import { ButtonModule, ButtonGroupModule } from '@progress/kendo-angular-buttons';
|
|
5
5
|
import * as i1$1 from '@angular/common';
|
|
@@ -12,7 +12,7 @@ import { PopupService } from '@progress/kendo-angular-popup';
|
|
|
12
12
|
import * as i1$5 from '@angular/forms';
|
|
13
13
|
import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, UntypedFormControl, Validators } from '@angular/forms';
|
|
14
14
|
import * as i1$3 from '@progress/kendo-angular-inputs';
|
|
15
|
-
import { TextBoxModule, NumericTextBoxModule, InputsModule, CheckBoxModule, SwitchModule, RadioButtonModule } from '@progress/kendo-angular-inputs';
|
|
15
|
+
import { TextBoxModule, NumericTextBoxModule, InputsModule, CheckBoxModule, SwitchModule, RadioButtonModule, TextBoxComponent, KENDO_INPUTS } from '@progress/kendo-angular-inputs';
|
|
16
16
|
import '@progress/kendo-angular-intl/locales/en-GB/all';
|
|
17
17
|
import * as i1$4 from '@progress/kendo-angular-dropdowns';
|
|
18
18
|
import { DropDownListModule, DropDownsModule, MultiSelectComponent, MultiSelectModule } from '@progress/kendo-angular-dropdowns';
|
|
@@ -23,7 +23,7 @@ import * as i1$6 from 'ngx-toastr';
|
|
|
23
23
|
import { DefaultGlobalConfig, TOAST_CONFIG, ToastrModule } from 'ngx-toastr';
|
|
24
24
|
import * as i1$7 from '@angular/router';
|
|
25
25
|
import { RouterModule, NavigationEnd, RouterLink } from '@angular/router';
|
|
26
|
-
import { BehaviorSubject, filter, Subject, startWith, pairwise, takeUntil,
|
|
26
|
+
import { BehaviorSubject, filter, Subject, startWith, pairwise, takeUntil, debounceTime, distinctUntilChanged, tap, map, take, switchMap, of, catchError } from 'rxjs';
|
|
27
27
|
import { v4 } from 'uuid';
|
|
28
28
|
import * as i1$8 from '@progress/kendo-angular-dialog';
|
|
29
29
|
import { KENDO_DIALOGS, DialogActionsComponent, DialogContentBase, DialogCloseResult, DialogRef } from '@progress/kendo-angular-dialog';
|
|
@@ -45,12 +45,12 @@ import { GridComponent, GridModule, ExcelModule, PDFModule } from '@progress/ken
|
|
|
45
45
|
import * as i4 from '@progress/kendo-angular-pager';
|
|
46
46
|
import { PagerContextService, PagerNavigationService } from '@progress/kendo-angular-pager';
|
|
47
47
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
48
|
-
import * as i2$3 from '@progress/kendo-angular-sortable';
|
|
49
|
-
import { KENDO_SORTABLE } from '@progress/kendo-angular-sortable';
|
|
50
|
-
import { toODataString } from '@progress/kendo-data-query';
|
|
51
48
|
import { __decorate } from 'tslib';
|
|
52
49
|
import * as i1$d from '@ngxs/store';
|
|
53
50
|
import { StateToken, Action, State, createSelector, Selector } from '@ngxs/store';
|
|
51
|
+
import * as i2$3 from '@progress/kendo-angular-sortable';
|
|
52
|
+
import { KENDO_SORTABLE } from '@progress/kendo-angular-sortable';
|
|
53
|
+
import { toODataString } from '@progress/kendo-data-query';
|
|
54
54
|
import { patch, append, removeItem, updateItem } from '@ngxs/store/operators';
|
|
55
55
|
import { StateReset } from 'ngxs-reset-plugin';
|
|
56
56
|
import { signalSetFn, SIGNAL } from '@angular/core/primitives/signals';
|
|
@@ -2551,6 +2551,7 @@ var KitPillTheme;
|
|
|
2551
2551
|
(function (KitPillTheme) {
|
|
2552
2552
|
KitPillTheme["DEFAULT"] = "default";
|
|
2553
2553
|
KitPillTheme["BLUE"] = "blue";
|
|
2554
|
+
KitPillTheme["MAIN"] = "main";
|
|
2554
2555
|
})(KitPillTheme || (KitPillTheme = {}));
|
|
2555
2556
|
|
|
2556
2557
|
class KitPillComponent {
|
|
@@ -2601,14 +2602,14 @@ class KitPillComponent {
|
|
|
2601
2602
|
this.clicked.emit(!this.selected);
|
|
2602
2603
|
}
|
|
2603
2604
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitPillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2604
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KitPillComponent, isStandalone: true, selector: "kit-pill", inputs: { removable: { classPropertyName: "removable", publicName: "removable", isSignal: false, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, iconType: { classPropertyName: "iconType", publicName: "iconType", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", removed: "removed" }, host: { listeners: { "click": "onComponentClick()" } }, ngImport: i0, template: "<div class=\"kit-pill\"\n [ngClass]=\"cssClasses\">\n @if (icon) {\n <kit-svg-icon class=\"kit-pill-icon\"\n [icon]=\"icon\"\n [ngClass]=\"iconType ?? kitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <div class=\"kit-pill-content\">\n <ng-content\n ></ng-content>\n </div>\n @if (removable) {\n <button class=\"kit-pill-remove\"\n (click)=\"removed.emit()\">\n <kit-svg-icon class=\"remove-icon\"\n [icon]=\"closeIcon\"\n ></kit-svg-icon>\n </button>\n }\n</div>\n", styles: [".kit-pill{display:flex;align-items:center;gap:4px;padding:5px 8px;background:var(--ui-kit-color-white);border-width:1px;border-color:var(--ui-kit-color-grey-12);color:var(--ui-kit-color-grey-10);border-radius:4px;font-weight:500;font-size:12px;text-align:center}.kit-pill.default-type{border-style:solid}.kit-pill.dashed-type{border-style:dashed}.kit-pill.blue-theme{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background-color:var(--ui-kit-color-blue-1)}.kit-pill.selectable{cursor:pointer}.kit-pill.selectable:hover,.kit-pill.selectable.selected{border-color:var(--ui-kit-color-main)}.kit-pill.selectable:hover .kit-pill-icon.fill,.kit-pill.selectable.selected .kit-pill-icon.fill{fill:var(--ui-kit-color-main)}.kit-pill.selectable:hover .kit-pill-icon.stroke,.kit-pill.selectable.selected .kit-pill-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-pill-icon{width:12px;height:12px}.kit-pill-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-pill-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-pill-content{display:flex;align-items:center;gap:4px}.kit-pill-remove{padding:0;border:none;outline:none;background:none;cursor:pointer}.kit-pill-remove .remove-icon{display:block;height:12px;width:12px;fill:var(--ui-kit-color-grey-12)}.kit-pill-remove:hover .remove-icon{fill:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2605
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KitPillComponent, isStandalone: true, selector: "kit-pill", inputs: { removable: { classPropertyName: "removable", publicName: "removable", isSignal: false, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, iconType: { classPropertyName: "iconType", publicName: "iconType", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", removed: "removed" }, host: { listeners: { "click": "onComponentClick()" } }, ngImport: i0, template: "<div class=\"kit-pill\"\n [ngClass]=\"cssClasses\">\n @if (icon) {\n <kit-svg-icon class=\"kit-pill-icon\"\n [icon]=\"icon\"\n [ngClass]=\"iconType ?? kitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <div class=\"kit-pill-content\">\n <ng-content\n ></ng-content>\n </div>\n @if (removable) {\n <button class=\"kit-pill-remove\"\n (click)=\"removed.emit()\">\n <kit-svg-icon class=\"remove-icon\"\n [icon]=\"closeIcon\"\n ></kit-svg-icon>\n </button>\n }\n</div>\n", styles: [".kit-pill{display:flex;align-items:center;gap:4px;padding:5px 8px;background:var(--ui-kit-color-white);border-width:1px;border-color:var(--ui-kit-color-grey-12);color:var(--ui-kit-color-grey-10);border-radius:4px;font-weight:500;font-size:12px;text-align:center}.kit-pill.default-type{border-style:solid}.kit-pill.dashed-type{border-style:dashed}.kit-pill.blue-theme{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background-color:var(--ui-kit-color-blue-1)}.kit-pill.selectable{cursor:pointer}.kit-pill.selectable:hover,.kit-pill.selectable.selected{border-color:var(--ui-kit-color-main)}.kit-pill.selectable:hover.main-theme,.kit-pill.selectable.selected.main-theme{color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-background)}.kit-pill.selectable:hover .kit-pill-icon.fill,.kit-pill.selectable.selected .kit-pill-icon.fill{fill:var(--ui-kit-color-main)}.kit-pill.selectable:hover .kit-pill-icon.stroke,.kit-pill.selectable.selected .kit-pill-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-pill-icon{width:12px;height:12px}.kit-pill-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-pill-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-pill-content{display:flex;align-items:center;gap:4px}.kit-pill-remove{padding:0;border:none;outline:none;background:none;cursor:pointer}.kit-pill-remove .remove-icon{display:block;height:12px;width:12px;fill:var(--ui-kit-color-grey-12)}.kit-pill-remove:hover .remove-icon{fill:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2605
2606
|
}
|
|
2606
2607
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitPillComponent, decorators: [{
|
|
2607
2608
|
type: Component,
|
|
2608
2609
|
args: [{ selector: 'kit-pill', imports: [
|
|
2609
2610
|
CommonModule,
|
|
2610
2611
|
KitSvgIconModule,
|
|
2611
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-pill\"\n [ngClass]=\"cssClasses\">\n @if (icon) {\n <kit-svg-icon class=\"kit-pill-icon\"\n [icon]=\"icon\"\n [ngClass]=\"iconType ?? kitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <div class=\"kit-pill-content\">\n <ng-content\n ></ng-content>\n </div>\n @if (removable) {\n <button class=\"kit-pill-remove\"\n (click)=\"removed.emit()\">\n <kit-svg-icon class=\"remove-icon\"\n [icon]=\"closeIcon\"\n ></kit-svg-icon>\n </button>\n }\n</div>\n", styles: [".kit-pill{display:flex;align-items:center;gap:4px;padding:5px 8px;background:var(--ui-kit-color-white);border-width:1px;border-color:var(--ui-kit-color-grey-12);color:var(--ui-kit-color-grey-10);border-radius:4px;font-weight:500;font-size:12px;text-align:center}.kit-pill.default-type{border-style:solid}.kit-pill.dashed-type{border-style:dashed}.kit-pill.blue-theme{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background-color:var(--ui-kit-color-blue-1)}.kit-pill.selectable{cursor:pointer}.kit-pill.selectable:hover,.kit-pill.selectable.selected{border-color:var(--ui-kit-color-main)}.kit-pill.selectable:hover .kit-pill-icon.fill,.kit-pill.selectable.selected .kit-pill-icon.fill{fill:var(--ui-kit-color-main)}.kit-pill.selectable:hover .kit-pill-icon.stroke,.kit-pill.selectable.selected .kit-pill-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-pill-icon{width:12px;height:12px}.kit-pill-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-pill-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-pill-content{display:flex;align-items:center;gap:4px}.kit-pill-remove{padding:0;border:none;outline:none;background:none;cursor:pointer}.kit-pill-remove .remove-icon{display:block;height:12px;width:12px;fill:var(--ui-kit-color-grey-12)}.kit-pill-remove:hover .remove-icon{fill:var(--ui-kit-color-main)}\n"] }]
|
|
2612
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-pill\"\n [ngClass]=\"cssClasses\">\n @if (icon) {\n <kit-svg-icon class=\"kit-pill-icon\"\n [icon]=\"icon\"\n [ngClass]=\"iconType ?? kitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <div class=\"kit-pill-content\">\n <ng-content\n ></ng-content>\n </div>\n @if (removable) {\n <button class=\"kit-pill-remove\"\n (click)=\"removed.emit()\">\n <kit-svg-icon class=\"remove-icon\"\n [icon]=\"closeIcon\"\n ></kit-svg-icon>\n </button>\n }\n</div>\n", styles: [".kit-pill{display:flex;align-items:center;gap:4px;padding:5px 8px;background:var(--ui-kit-color-white);border-width:1px;border-color:var(--ui-kit-color-grey-12);color:var(--ui-kit-color-grey-10);border-radius:4px;font-weight:500;font-size:12px;text-align:center}.kit-pill.default-type{border-style:solid}.kit-pill.dashed-type{border-style:dashed}.kit-pill.blue-theme{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background-color:var(--ui-kit-color-blue-1)}.kit-pill.selectable{cursor:pointer}.kit-pill.selectable:hover,.kit-pill.selectable.selected{border-color:var(--ui-kit-color-main)}.kit-pill.selectable:hover.main-theme,.kit-pill.selectable.selected.main-theme{color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-background)}.kit-pill.selectable:hover .kit-pill-icon.fill,.kit-pill.selectable.selected .kit-pill-icon.fill{fill:var(--ui-kit-color-main)}.kit-pill.selectable:hover .kit-pill-icon.stroke,.kit-pill.selectable.selected .kit-pill-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-pill-icon{width:12px;height:12px}.kit-pill-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-pill-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-pill-content{display:flex;align-items:center;gap:4px}.kit-pill-remove{padding:0;border:none;outline:none;background:none;cursor:pointer}.kit-pill-remove .remove-icon{display:block;height:12px;width:12px;fill:var(--ui-kit-color-grey-12)}.kit-pill-remove:hover .remove-icon{fill:var(--ui-kit-color-main)}\n"] }]
|
|
2612
2613
|
}], propDecorators: { removable: [{
|
|
2613
2614
|
type: Input
|
|
2614
2615
|
}], selectable: [{
|
|
@@ -5167,6 +5168,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
5167
5168
|
}]
|
|
5168
5169
|
}] });
|
|
5169
5170
|
|
|
5171
|
+
class KitRoutePathComponent {
|
|
5172
|
+
constructor() {
|
|
5173
|
+
this.originPort = input('');
|
|
5174
|
+
this.destinationPort = input('');
|
|
5175
|
+
this.type = input('');
|
|
5176
|
+
this.containerMode = input('');
|
|
5177
|
+
this.kitSvgIcon = KitSvgIcon;
|
|
5178
|
+
}
|
|
5179
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitRoutePathComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5180
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KitRoutePathComponent, isStandalone: true, selector: "kit-route-path", inputs: { originPort: { classPropertyName: "originPort", publicName: "originPort", isSignal: true, isRequired: false, transformFunction: null }, destinationPort: { classPropertyName: "destinationPort", publicName: "destinationPort", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, containerMode: { classPropertyName: "containerMode", publicName: "containerMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"route-path\">\n <kit-pill class=\"route-origin-port\">\n <kit-truncate-text>{{ originPort() || ('kit.routePath.tbc' | translate ) }}</kit-truncate-text>\n </kit-pill>\n <kit-svg-icon class=\"icon arrow\"\n [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"/>\n <kit-pill class=\"route-destination-port\">\n <kit-truncate-text>{{ destinationPort() || ('kit.routePath.tbc' | translate ) }}</kit-truncate-text>\n </kit-pill>\n @if (type()) {\n <span>{{ 'kit.routePath.by' | translate }}</span>\n <kit-pill class=\"route-mode\">\n <kit-truncate-text>{{ type() }} {{ containerMode() }}</kit-truncate-text>\n </kit-pill>\n }\n</div>\n", styles: [".route-path{height:22px;width:100%;display:grid;grid-template-columns:minmax(0,auto) 22px minmax(0,auto) 24px min-content;grid-auto-flow:column;justify-content:stretch}.route-path .icon.arrow{fill:var(--ui-kit-color-grey-10);margin:auto;width:16px;height:16px}.route-path ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14);margin:auto}.route-path ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.route-path ::ng-deep .kit-pill .kit-pill-content,.route-path ::ng-deep .kit-pill span{width:100%;font-size:12px;max-width:150px}.route-path ::ng-deep .route-origin-port .kit-pill{border:1px solid var(--ui-kit-color-orange-5);background-color:var(--ui-kit-color-orange-3);color:var(--ui-kit-color-orange-2)}.route-path ::ng-deep .route-destination-port .kit-pill{border:1px solid var(--ui-kit-color-purple-2);background-color:var(--ui-kit-color-purple-1);color:var(--ui-kit-color-purple)}.route-path ::ng-deep .route-mode .kit-pill{border:1px solid var(--ui-kit-color-teal-2);background-color:var(--ui-kit-color-teal-1);color:var(--ui-kit-color-teal)}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$a.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5181
|
+
}
|
|
5182
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitRoutePathComponent, decorators: [{
|
|
5183
|
+
type: Component,
|
|
5184
|
+
args: [{ selector: 'kit-route-path', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
5185
|
+
KitPillComponent,
|
|
5186
|
+
KitTruncateTextComponent,
|
|
5187
|
+
KitSvgIconModule,
|
|
5188
|
+
TranslateModule,
|
|
5189
|
+
], template: "<div class=\"route-path\">\n <kit-pill class=\"route-origin-port\">\n <kit-truncate-text>{{ originPort() || ('kit.routePath.tbc' | translate ) }}</kit-truncate-text>\n </kit-pill>\n <kit-svg-icon class=\"icon arrow\"\n [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"/>\n <kit-pill class=\"route-destination-port\">\n <kit-truncate-text>{{ destinationPort() || ('kit.routePath.tbc' | translate ) }}</kit-truncate-text>\n </kit-pill>\n @if (type()) {\n <span>{{ 'kit.routePath.by' | translate }}</span>\n <kit-pill class=\"route-mode\">\n <kit-truncate-text>{{ type() }} {{ containerMode() }}</kit-truncate-text>\n </kit-pill>\n }\n</div>\n", styles: [".route-path{height:22px;width:100%;display:grid;grid-template-columns:minmax(0,auto) 22px minmax(0,auto) 24px min-content;grid-auto-flow:column;justify-content:stretch}.route-path .icon.arrow{fill:var(--ui-kit-color-grey-10);margin:auto;width:16px;height:16px}.route-path ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14);margin:auto}.route-path ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.route-path ::ng-deep .kit-pill .kit-pill-content,.route-path ::ng-deep .kit-pill span{width:100%;font-size:12px;max-width:150px}.route-path ::ng-deep .route-origin-port .kit-pill{border:1px solid var(--ui-kit-color-orange-5);background-color:var(--ui-kit-color-orange-3);color:var(--ui-kit-color-orange-2)}.route-path ::ng-deep .route-destination-port .kit-pill{border:1px solid var(--ui-kit-color-purple-2);background-color:var(--ui-kit-color-purple-1);color:var(--ui-kit-color-purple)}.route-path ::ng-deep .route-mode .kit-pill{border:1px solid var(--ui-kit-color-teal-2);background-color:var(--ui-kit-color-teal-1);color:var(--ui-kit-color-teal)}\n"] }]
|
|
5190
|
+
}] });
|
|
5191
|
+
|
|
5170
5192
|
class KitShipmentCard {
|
|
5171
5193
|
constructor() {
|
|
5172
5194
|
this.data = input.required();
|
|
@@ -5205,18 +5227,18 @@ class KitShipmentCard {
|
|
|
5205
5227
|
this.timelineExpanded = true;
|
|
5206
5228
|
}
|
|
5207
5229
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitShipmentCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5208
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KitShipmentCard, isStandalone: true, selector: "kit-shipment-card", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, headLabel: { classPropertyName: "headLabel", publicName: "headLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-shipment-card\"\n [ngClass]=\"{ selected: selected() }\">\n <div class=\"kit-shipment-card-head\">\n <kit-truncate-text class=\"head-title\">{{ data().reference }}</kit-truncate-text>\n <ng-container *ngTemplateOutlet=\"headLabel()\"/>\n </div>\n <div class=\"kit-shipment-card-content\">\n <div class=\"content-row\">\n <kit-svg-icon class=\"icon info\"\n [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n <kit-truncate-text class=\"title\">{{ data().latestRequiredByDate }}</kit-truncate-text>\n </div>\n\n <div class=\"content-row\">\n <kit-svg-icon class=\"{{ 'icon ' + shipmentModeIcon.toLowerCase() }} \"\n [icon]=\"shipmentModeIcon\"/>\n <kit-truncate-text>{{ data().vesselName }}</kit-truncate-text>\n </div>\n\n <div class=\"content-row route\">\n <kit-pill class=\"route-origin-port\">\n <kit-truncate-text>{{ data().originPort }}</kit-truncate-text>\n </kit-pill>\n <kit-svg-icon class=\"icon arrow\"\n [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"/>\n <kit-pill class=\"route-destination-port\">\n <kit-truncate-text>{{ data().destinationPort }}</kit-truncate-text>\n </kit-pill>\n <span>by</span>\n <kit-pill class=\"route-mode\">\n <kit-truncate-text>{{ data().type }} {{ data().containerMode }}</kit-truncate-text>\n </kit-pill>\n </div>\n\n <div class=\"content-footer\">\n <div class=\"footer-buttons\">\n <kit-button class=\"text-ellipsis\"\n [ngClass]=\"{ active: timelineExpanded }\"\n [label]=\"data().timelineActionBtnLabel\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"showTimeline($event)\"/>\n @if (containerItems.length) {\n <kit-button class=\"text-ellipsis\"\n [ngClass]=\"{ active: containersExpanded }\"\n [label]=\"data().containerActionBtnLabel\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"showContainers($event)\"/>\n }\n </div>\n \n @if (timelineExpanded) {\n <div class=\"card-timeline-content\">\n @for (timelineItem of timelineItems; track $index) {\n <div class=\"timeline-row\">\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <kit-truncate-text>\n <span class=\"title\">{{ timelineItem.label }}: </span>\n {{ timelineItem.value }}\n </kit-truncate-text>\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n @if (containersExpanded) {\n <div class=\"card-container-content\">\n @for (containerItem of containerItems; track $index) {\n <kit-truncate-text>\n <p class=\"container-item\">\n <span class=\"title\">{{ containerItem.value }} </span>\n {{ containerItem.label }}\n </p>\n </kit-truncate-text>\n }\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".kit-shipment-card{display:flex;flex-direction:column;padding:25px;color:var(--ui-kit-color-grey-10);font-weight:400;border:2px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box;background-color:var(--ui-kit-color-white);width:360px;font-size:14px;min-height:337px;line-height:20px}.kit-shipment-card.selected{border:2px solid var(--ui-kit-color-main)}.kit-shipment-card .text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-shipment-card-head{border-bottom:1px solid var(--ui-kit-color-grey-11);padding-bottom:12px;display:flex;justify-content:space-between;gap:15px}.kit-shipment-card-head .head-title{font-size:16px;line-height:22px;width:50%}.kit-shipment-card-content{padding-top:15px;display:flex;flex-direction:column;gap:12px;justify-content:space-between;min-height:233px}.kit-shipment-card-content .content-row{display:flex;align-items:center}.kit-shipment-card-content .content-row .icon{width:24px;height:24px;margin-right:10px}.kit-shipment-card-content .content-row .icon.info{fill:var(--ui-kit-color-grey-12)}.kit-shipment-card-content .content-row .icon.ship{fill:none;stroke:var(--ui-kit-color-teal);width:26px}.kit-shipment-card-content .content-row .icon.air{fill:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.logistics{fill:none;stroke:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.arrow{fill:var(--ui-kit-color-grey-10);margin:auto;width:16px;height:16px}.kit-shipment-card-content .content-row .title{font-size:18px;font-weight:500;line-height:24px}.kit-shipment-card-content .content-row.route{height:22px;width:100%;display:grid;grid-template-columns:minmax(0,auto) 22px minmax(0,auto) 24px min-content;grid-auto-flow:column;justify-content:stretch}.kit-shipment-card-content .content-row.route ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14);margin:auto}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill .kit-pill-content,.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill span{width:100%;font-size:12px;max-width:150px}.kit-shipment-card-content .content-row.route ::ng-deep .route-origin-port .kit-pill{border:1px solid var(--ui-kit-color-orange-5);background-color:var(--ui-kit-color-orange-3);color:var(--ui-kit-color-orange-2)}.kit-shipment-card-content .content-row.route ::ng-deep .route-destination-port .kit-pill{border:1px solid var(--ui-kit-color-purple-2);background-color:var(--ui-kit-color-purple-1);color:var(--ui-kit-color-purple)}.kit-shipment-card-content .content-row.route ::ng-deep .route-mode .kit-pill{border:1px solid var(--ui-kit-color-teal-2);background-color:var(--ui-kit-color-teal-1);color:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-footer{background-color:var(--ui-kit-color-grey-13);border-radius:8px;padding:10px;min-height:105px}.kit-shipment-card-content .content-footer .footer-buttons{display:flex;justify-content:space-between;margin-bottom:12px}.kit-shipment-card-content .content-footer ::ng-deep .k-button{color:var(--ui-kit-color-grey-14);padding:0;height:auto;font-size:14px}.kit-shipment-card-content .content-footer ::ng-deep .k-button:hover{color:var(--ui-kit-color-main)}.kit-shipment-card-content .content-footer ::ng-deep .active .k-button{color:var(--ui-kit-color-main);text-decoration:underline}.kit-shipment-card .card-timeline-content .timeline-row{padding-bottom:5px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content{padding-left:30px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content:before{transform:translate(calc(-50% - 20px))}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:after{top:10px}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child{padding-bottom:0}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:after{bottom:10px;display:none}.kit-shipment-card .card-timeline-content .timeline-item{display:flex;position:relative}.kit-shipment-card .card-timeline-content .timeline-item:after,.kit-shipment-card .card-timeline-content .timeline-item:before{content:\"\";position:absolute;width:1px;background:var(--ui-kit-color-grey-12);height:calc(100% + 10px);transform:translate(10px)}.kit-shipment-card .card-timeline-content .timeline-content{position:relative;font-weight:500;color:var(--ui-kit-color-grey-19);width:90%}.kit-shipment-card .card-timeline-content .timeline-content .title{font-weight:400;color:var(--ui-kit-color-grey-10);font-size:13px}.kit-shipment-card .card-timeline-content .timeline-content:before{content:\"\";position:absolute;top:5px;width:10px;height:10px;border-radius:50%;background:var(--ui-kit-color-grey-12);box-sizing:border-box}.kit-shipment-card .card-container-content{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.kit-shipment-card .card-container-content .container-item{padding:0;margin:0;color:var(--ui-kit-color-grey-14);width:95%}.kit-shipment-card .card-container-content .container-item .title{font-weight:500;color:var(--ui-kit-color-grey-10);max-width:45%}.kit-shipment-card .card-container-content>*:nth-child(2n){text-align:right}@media screen and (max-width: 1512px){.kit-shipment-card{width:320px;min-height:320px}.kit-shipment-card-content{min-height:200px}.kit-shipment-card .content-footer{background-color:inherit;padding:0}}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5230
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KitShipmentCard, isStandalone: true, selector: "kit-shipment-card", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, headLabel: { classPropertyName: "headLabel", publicName: "headLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-shipment-card\"\n [ngClass]=\"{ selected: selected() }\">\n <div class=\"kit-shipment-card-head\">\n <kit-truncate-text class=\"head-title\">{{ data().reference }}</kit-truncate-text>\n <ng-container *ngTemplateOutlet=\"headLabel()\"/>\n </div>\n <div class=\"kit-shipment-card-content\">\n <div class=\"content-row\">\n <kit-svg-icon class=\"icon info\"\n [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n <kit-truncate-text class=\"title\">{{ data().latestRequiredByDate }}</kit-truncate-text>\n </div>\n\n <div class=\"content-row\">\n <kit-svg-icon class=\"{{ 'icon ' + shipmentModeIcon.toLowerCase() }} \"\n [icon]=\"shipmentModeIcon\"/>\n <kit-truncate-text>{{ data().vesselName }}</kit-truncate-text>\n </div>\n\n <div class=\"content-row route\">\n <kit-route-path [containerMode]=\"data().containerMode\"\n [destinationPort]=\"data().destinationPort\"\n [originPort]=\"data().originPort\"\n [type]=\"data().type\"/>\n </div>\n\n <div class=\"content-footer\">\n <div class=\"footer-buttons\">\n <kit-button class=\"text-ellipsis\"\n [ngClass]=\"{ active: timelineExpanded }\"\n [label]=\"data().timelineActionBtnLabel\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"showTimeline($event)\"/>\n @if (containerItems.length) {\n <kit-button class=\"text-ellipsis\"\n [ngClass]=\"{ active: containersExpanded }\"\n [label]=\"data().containerActionBtnLabel\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"showContainers($event)\"/>\n }\n </div>\n \n @if (timelineExpanded) {\n <div class=\"card-timeline-content\">\n @for (timelineItem of timelineItems; track $index) {\n <div class=\"timeline-row\">\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <kit-truncate-text>\n <span class=\"title\">{{ timelineItem.label }}: </span>\n {{ timelineItem.value }}\n </kit-truncate-text>\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n @if (containersExpanded) {\n <div class=\"card-container-content\">\n @for (containerItem of containerItems; track $index) {\n <kit-truncate-text>\n <p class=\"container-item\">\n <span class=\"title\">{{ containerItem.value }} </span>\n {{ containerItem.label }}\n </p>\n </kit-truncate-text>\n }\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".kit-shipment-card{display:flex;flex-direction:column;padding:25px;color:var(--ui-kit-color-grey-10);font-weight:400;border:2px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box;background-color:var(--ui-kit-color-white);width:360px;font-size:14px;min-height:337px;line-height:20px}.kit-shipment-card.selected{border:2px solid var(--ui-kit-color-main)}.kit-shipment-card .text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-shipment-card-head{border-bottom:1px solid var(--ui-kit-color-grey-11);padding-bottom:12px;display:flex;justify-content:space-between;gap:15px}.kit-shipment-card-head .head-title{font-size:16px;line-height:22px;width:50%}.kit-shipment-card-content{padding-top:15px;display:flex;flex-direction:column;gap:12px;justify-content:space-between;min-height:233px}.kit-shipment-card-content .content-row{display:flex;align-items:center}.kit-shipment-card-content .content-row .icon{width:24px;height:24px;margin-right:10px}.kit-shipment-card-content .content-row .icon.info{fill:var(--ui-kit-color-grey-12)}.kit-shipment-card-content .content-row .icon.ship{fill:none;stroke:var(--ui-kit-color-teal);width:26px}.kit-shipment-card-content .content-row .icon.air{fill:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.logistics{fill:none;stroke:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .title{font-size:18px;font-weight:500;line-height:24px}.kit-shipment-card-content .content-footer{background-color:var(--ui-kit-color-grey-13);border-radius:8px;padding:10px;min-height:105px}.kit-shipment-card-content .content-footer .footer-buttons{display:flex;justify-content:space-between;margin-bottom:12px}.kit-shipment-card-content .content-footer ::ng-deep .k-button{color:var(--ui-kit-color-grey-14);padding:0;height:auto;font-size:14px}.kit-shipment-card-content .content-footer ::ng-deep .k-button:hover{color:var(--ui-kit-color-main)}.kit-shipment-card-content .content-footer ::ng-deep .active .k-button{color:var(--ui-kit-color-main);text-decoration:underline}.kit-shipment-card .card-timeline-content .timeline-row{padding-bottom:5px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content{padding-left:30px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content:before{transform:translate(calc(-50% - 20px))}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:after{top:10px}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child{padding-bottom:0}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:after{bottom:10px;display:none}.kit-shipment-card .card-timeline-content .timeline-item{display:flex;position:relative}.kit-shipment-card .card-timeline-content .timeline-item:after,.kit-shipment-card .card-timeline-content .timeline-item:before{content:\"\";position:absolute;width:1px;background:var(--ui-kit-color-grey-12);height:calc(100% + 10px);transform:translate(10px)}.kit-shipment-card .card-timeline-content .timeline-content{position:relative;font-weight:500;color:var(--ui-kit-color-grey-19);width:90%}.kit-shipment-card .card-timeline-content .timeline-content .title{font-weight:400;color:var(--ui-kit-color-grey-10);font-size:13px}.kit-shipment-card .card-timeline-content .timeline-content:before{content:\"\";position:absolute;top:5px;width:10px;height:10px;border-radius:50%;background:var(--ui-kit-color-grey-12);box-sizing:border-box}.kit-shipment-card .card-container-content{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.kit-shipment-card .card-container-content .container-item{padding:0;margin:0;color:var(--ui-kit-color-grey-14);width:95%}.kit-shipment-card .card-container-content .container-item .title{font-weight:500;color:var(--ui-kit-color-grey-10);max-width:45%}.kit-shipment-card .card-container-content>*:nth-child(2n){text-align:right}@media screen and (max-width: 1512px){.kit-shipment-card{width:320px;min-height:320px}.kit-shipment-card-content{min-height:200px}.kit-shipment-card .content-footer{background-color:inherit;padding:0}}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }, { kind: "component", type: KitRoutePathComponent, selector: "kit-route-path", inputs: ["originPort", "destinationPort", "type", "containerMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5209
5231
|
}
|
|
5210
5232
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitShipmentCard, decorators: [{
|
|
5211
5233
|
type: Component,
|
|
5212
5234
|
args: [{ selector: 'kit-shipment-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
5213
5235
|
KitButtonModule,
|
|
5214
5236
|
KitSvgIconModule,
|
|
5215
|
-
KitPillComponent,
|
|
5216
5237
|
NgClass,
|
|
5217
5238
|
NgTemplateOutlet,
|
|
5218
5239
|
KitTruncateTextComponent,
|
|
5219
|
-
|
|
5240
|
+
KitRoutePathComponent,
|
|
5241
|
+
], template: "<div class=\"kit-shipment-card\"\n [ngClass]=\"{ selected: selected() }\">\n <div class=\"kit-shipment-card-head\">\n <kit-truncate-text class=\"head-title\">{{ data().reference }}</kit-truncate-text>\n <ng-container *ngTemplateOutlet=\"headLabel()\"/>\n </div>\n <div class=\"kit-shipment-card-content\">\n <div class=\"content-row\">\n <kit-svg-icon class=\"icon info\"\n [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n <kit-truncate-text class=\"title\">{{ data().latestRequiredByDate }}</kit-truncate-text>\n </div>\n\n <div class=\"content-row\">\n <kit-svg-icon class=\"{{ 'icon ' + shipmentModeIcon.toLowerCase() }} \"\n [icon]=\"shipmentModeIcon\"/>\n <kit-truncate-text>{{ data().vesselName }}</kit-truncate-text>\n </div>\n\n <div class=\"content-row route\">\n <kit-route-path [containerMode]=\"data().containerMode\"\n [destinationPort]=\"data().destinationPort\"\n [originPort]=\"data().originPort\"\n [type]=\"data().type\"/>\n </div>\n\n <div class=\"content-footer\">\n <div class=\"footer-buttons\">\n <kit-button class=\"text-ellipsis\"\n [ngClass]=\"{ active: timelineExpanded }\"\n [label]=\"data().timelineActionBtnLabel\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"showTimeline($event)\"/>\n @if (containerItems.length) {\n <kit-button class=\"text-ellipsis\"\n [ngClass]=\"{ active: containersExpanded }\"\n [label]=\"data().containerActionBtnLabel\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"showContainers($event)\"/>\n }\n </div>\n \n @if (timelineExpanded) {\n <div class=\"card-timeline-content\">\n @for (timelineItem of timelineItems; track $index) {\n <div class=\"timeline-row\">\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <kit-truncate-text>\n <span class=\"title\">{{ timelineItem.label }}: </span>\n {{ timelineItem.value }}\n </kit-truncate-text>\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n @if (containersExpanded) {\n <div class=\"card-container-content\">\n @for (containerItem of containerItems; track $index) {\n <kit-truncate-text>\n <p class=\"container-item\">\n <span class=\"title\">{{ containerItem.value }} </span>\n {{ containerItem.label }}\n </p>\n </kit-truncate-text>\n }\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".kit-shipment-card{display:flex;flex-direction:column;padding:25px;color:var(--ui-kit-color-grey-10);font-weight:400;border:2px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box;background-color:var(--ui-kit-color-white);width:360px;font-size:14px;min-height:337px;line-height:20px}.kit-shipment-card.selected{border:2px solid var(--ui-kit-color-main)}.kit-shipment-card .text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-shipment-card-head{border-bottom:1px solid var(--ui-kit-color-grey-11);padding-bottom:12px;display:flex;justify-content:space-between;gap:15px}.kit-shipment-card-head .head-title{font-size:16px;line-height:22px;width:50%}.kit-shipment-card-content{padding-top:15px;display:flex;flex-direction:column;gap:12px;justify-content:space-between;min-height:233px}.kit-shipment-card-content .content-row{display:flex;align-items:center}.kit-shipment-card-content .content-row .icon{width:24px;height:24px;margin-right:10px}.kit-shipment-card-content .content-row .icon.info{fill:var(--ui-kit-color-grey-12)}.kit-shipment-card-content .content-row .icon.ship{fill:none;stroke:var(--ui-kit-color-teal);width:26px}.kit-shipment-card-content .content-row .icon.air{fill:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.logistics{fill:none;stroke:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .title{font-size:18px;font-weight:500;line-height:24px}.kit-shipment-card-content .content-footer{background-color:var(--ui-kit-color-grey-13);border-radius:8px;padding:10px;min-height:105px}.kit-shipment-card-content .content-footer .footer-buttons{display:flex;justify-content:space-between;margin-bottom:12px}.kit-shipment-card-content .content-footer ::ng-deep .k-button{color:var(--ui-kit-color-grey-14);padding:0;height:auto;font-size:14px}.kit-shipment-card-content .content-footer ::ng-deep .k-button:hover{color:var(--ui-kit-color-main)}.kit-shipment-card-content .content-footer ::ng-deep .active .k-button{color:var(--ui-kit-color-main);text-decoration:underline}.kit-shipment-card .card-timeline-content .timeline-row{padding-bottom:5px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content{padding-left:30px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content:before{transform:translate(calc(-50% - 20px))}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:after{top:10px}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child{padding-bottom:0}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:after{bottom:10px;display:none}.kit-shipment-card .card-timeline-content .timeline-item{display:flex;position:relative}.kit-shipment-card .card-timeline-content .timeline-item:after,.kit-shipment-card .card-timeline-content .timeline-item:before{content:\"\";position:absolute;width:1px;background:var(--ui-kit-color-grey-12);height:calc(100% + 10px);transform:translate(10px)}.kit-shipment-card .card-timeline-content .timeline-content{position:relative;font-weight:500;color:var(--ui-kit-color-grey-19);width:90%}.kit-shipment-card .card-timeline-content .timeline-content .title{font-weight:400;color:var(--ui-kit-color-grey-10);font-size:13px}.kit-shipment-card .card-timeline-content .timeline-content:before{content:\"\";position:absolute;top:5px;width:10px;height:10px;border-radius:50%;background:var(--ui-kit-color-grey-12);box-sizing:border-box}.kit-shipment-card .card-container-content{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.kit-shipment-card .card-container-content .container-item{padding:0;margin:0;color:var(--ui-kit-color-grey-14);width:95%}.kit-shipment-card .card-container-content .container-item .title{font-weight:500;color:var(--ui-kit-color-grey-10);max-width:45%}.kit-shipment-card .card-container-content>*:nth-child(2n){text-align:right}@media screen and (max-width: 1512px){.kit-shipment-card{width:320px;min-height:320px}.kit-shipment-card-content{min-height:200px}.kit-shipment-card .content-footer{background-color:inherit;padding:0}}\n"] }]
|
|
5220
5242
|
}] });
|
|
5221
5243
|
|
|
5222
5244
|
class KitBreadcrumbsComponent {
|
|
@@ -6477,6 +6499,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
6477
6499
|
}]
|
|
6478
6500
|
}] });
|
|
6479
6501
|
|
|
6502
|
+
const KIT_DATE_FORMAT = 'dd MMM yyyy';
|
|
6503
|
+
const KIT_DATETIME_FORMAT_LONG = 'dd MMM yyyy HH:mm:ss';
|
|
6504
|
+
|
|
6480
6505
|
class KitEmptySectionComponent {
|
|
6481
6506
|
constructor() {
|
|
6482
6507
|
this.text = '';
|
|
@@ -6494,6 +6519,168 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
6494
6519
|
type: Input
|
|
6495
6520
|
}] } });
|
|
6496
6521
|
|
|
6522
|
+
class KitGlobalSearchComponent {
|
|
6523
|
+
documentClick(event) {
|
|
6524
|
+
if (!this.popup()?.isPopupOpen) {
|
|
6525
|
+
return;
|
|
6526
|
+
}
|
|
6527
|
+
if (!this.textbox().hostElement.nativeElement.contains(event.target)
|
|
6528
|
+
&& !this.popup()?.popupHTMLElement?.contains(event.target)) {
|
|
6529
|
+
this.clearSearch();
|
|
6530
|
+
}
|
|
6531
|
+
}
|
|
6532
|
+
constructor(router) {
|
|
6533
|
+
this.router = router;
|
|
6534
|
+
this.searchFn = input.required();
|
|
6535
|
+
this.displayedLineItemsNumber = input(3);
|
|
6536
|
+
this.textbox = viewChild.required(TextBoxComponent);
|
|
6537
|
+
this.anchor = viewChild.required(TextBoxComponent, { read: ElementRef });
|
|
6538
|
+
this.popup = viewChild('popup', { read: KitPopupComponent });
|
|
6539
|
+
this.container = viewChild.required('container', { read: ViewContainerRef });
|
|
6540
|
+
this.kitSvgIcon = KitSvgIcon;
|
|
6541
|
+
this.kitTextboxSize = KitTextboxSize;
|
|
6542
|
+
this.kitSvgIconType = KitSvgIconType;
|
|
6543
|
+
this.kitPillTheme = KitPillTheme;
|
|
6544
|
+
this.kitButtonType = KitButtonType;
|
|
6545
|
+
this.kitButtonKind = KitButtonKind;
|
|
6546
|
+
this.dateFormat = KIT_DATE_FORMAT;
|
|
6547
|
+
this.popupClass = 'kit-global-search-popup';
|
|
6548
|
+
this.searchResults = signal([]);
|
|
6549
|
+
this.value = '';
|
|
6550
|
+
}
|
|
6551
|
+
ngOnInit() {
|
|
6552
|
+
this.textbox().valueChange.pipe(debounceTime(500), distinctUntilChanged(), filter((val) => val.length > 2)).subscribe(searchText => {
|
|
6553
|
+
this.searchFn()(searchText).subscribe(searchRusult => {
|
|
6554
|
+
this.openPopup();
|
|
6555
|
+
this.searchResults.set(searchRusult.filter(Boolean));
|
|
6556
|
+
});
|
|
6557
|
+
});
|
|
6558
|
+
}
|
|
6559
|
+
clearSearch() {
|
|
6560
|
+
this.value = '';
|
|
6561
|
+
this.textbox().valueChange.emit('');
|
|
6562
|
+
this.textbox().clearValue();
|
|
6563
|
+
this.searchResults.set([]);
|
|
6564
|
+
this.popup()?.close();
|
|
6565
|
+
}
|
|
6566
|
+
openPopup() {
|
|
6567
|
+
if (!this.popup()?.isPopupOpen) {
|
|
6568
|
+
this.popup()?.toggle({
|
|
6569
|
+
appendTo: this.container(),
|
|
6570
|
+
});
|
|
6571
|
+
const popupHTMLElement = this.popup()?.popupHTMLElement;
|
|
6572
|
+
const popupContent = popupHTMLElement?.querySelector(`.${this.popupClass}`);
|
|
6573
|
+
if (popupContent) {
|
|
6574
|
+
popupContent.style.maxHeight = `calc(100vh - ${popupHTMLElement?.style.top} - 40px)`;
|
|
6575
|
+
}
|
|
6576
|
+
}
|
|
6577
|
+
}
|
|
6578
|
+
navigate(link) {
|
|
6579
|
+
if (!link) {
|
|
6580
|
+
return;
|
|
6581
|
+
}
|
|
6582
|
+
this.router.navigate(link);
|
|
6583
|
+
this.clearSearch();
|
|
6584
|
+
}
|
|
6585
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitGlobalSearchComponent, deps: [{ token: i1$7.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6586
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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 } }, host: { listeners: { "document:click": "documentClick($event)" } }, 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 <kendo-textbox #textbox\n class=\"textbox\"\n [placeholder]=\"'kit.globalSearch.placeholder' | translate\"\n [size]=\"'none'\"\n [(ngModel)]=\"value\">\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 <div class=\"popup-content\">\n <div class=\"search-results\">\n @if (searchResults().length) {\n @for (category of searchResults(); track category?.name) {\n @if (category) {\n <div class=\"category\">\n <p class=\"header\"\n [class.empty]=\"!category.total\">\n <kit-svg-icon [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n <span class=\"title\">{{ category.name.toUpperCase() }} ({{ category.total }})</span>\n </p>\n\n @for (lineItem of category.items.slice(0, this.displayedLineItemsNumber()); track lineItem) {\n <div class=\"line-item\"\n [class.has-link]=\"lineItem.link\"\n (click)=\"navigate(lineItem.link)\">\n <div class=\"title\">\n <kit-truncate-text>{{ lineItem.title }}</kit-truncate-text>\n </div>\n <div class=\"subtitle\">\n <kit-truncate-text>{{ lineItem.subtitle }}</kit-truncate-text>\n </div>\n @if (lineItem.routePath?.from || lineItem.routePath?.to) {\n <kit-route-path class=\"route\"\n [containerMode]=\"lineItem.routePath?.containerMode\"\n [destinationPort]=\"lineItem.routePath?.to\"\n [originPort]=\"lineItem.routePath?.from\"\n [type]=\"lineItem.routePath?.type\"/>\n }\n @if (lineItem.dates?.firstDate.value) {\n <div class=\"dates first-date\">\n <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\"/>\n <kit-truncate-text>{{ lineItem.dates?.firstDate.label }} \n <span class=\"date\">{{ lineItem.dates?.firstDate.value | date: dateFormat : 'UTC' }}</span>\n </kit-truncate-text>\n </div>\n }\n @if (lineItem.dates?.secondDate.value) {\n <div class=\"dates second-date\">\n <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\"/>\n <kit-truncate-text>{{ lineItem.dates?.secondDate.label }} \n <span class=\"date\">{{ lineItem.dates?.secondDate.value | date: dateFormat : 'UTC' }}</span>\n </kit-truncate-text>\n </div>\n }\n </div>\n }\n \n @if (category.total > this.displayedLineItemsNumber()) {\n <kit-button [label]=\"'kit.globalSearch.showMore' | translate\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n (clicked)=\"navigate(category.categoryLink)\"/>\n }\n </div>\n }\n }\n } @else {\n <kit-empty-section class=\"empty-section\"\n [text]=\"'kit.globalSearch.noData' | translate\"/>\n }\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [":host{position:relative}:host .global-search{max-width:360px}:host .global-search:has(.textbox.k-focus){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:has(.textbox.k-focus) .kit-global-search-popup{display:inherit}:host ::ng-deep .k-animation-container{width:100%}:host ::ng-deep .kit-global-search-popup{overflow-y:auto}:host ::ng-deep .global-search .k-textbox.k-input .k-input-inner{padding:11px 8px}: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 .category:not(:last-child){margin-bottom:20px}:host ::ng-deep .search-results .category .header{display:flex;align-items:center;margin:0 0 20px}:host ::ng-deep .search-results .category .header .icon.check-sticker-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);margin-right:10px}:host ::ng-deep .search-results .category .header .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 .icon.check-sticker-icon{fill:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .header.empty .title{color:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .line-item{display:grid;grid-template-columns:minmax(50px,190px) minmax(50px,190px) minmax(200px,300px) minmax(65px,130px) minmax(65px,130px);justify-content:space-between;gap:20px;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 .title{font-size:16px;line-height:22px;font-weight:500}:host ::ng-deep .search-results .category .line-item .title,:host ::ng-deep .search-results .category .line-item .subtitle{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .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 .dates{display:flex;align-items:center;font-size:12px;line-height:14px}:host ::ng-deep .search-results .category .line-item .dates .date{font-size:14px;line-height:20px;font-weight:500}:host ::ng-deep .search-results .category .line-item .dates.first-date{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .dates.second-date{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .empty-section{container:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i1$3.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$3.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: ["showSeparator"] }, { kind: "directive", type: i1$3.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.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: "ngmodule", type: KitButtonModule }, { 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" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$a.TranslatePipe, name: "translate" }, { kind: "component", type: KitEmptySectionComponent, selector: "kit-empty-section", inputs: ["text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6587
|
+
}
|
|
6588
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitGlobalSearchComponent, decorators: [{
|
|
6589
|
+
type: Component,
|
|
6590
|
+
args: [{ selector: 'kit-global-search', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
6591
|
+
CommonModule,
|
|
6592
|
+
KitTextboxModule,
|
|
6593
|
+
KitSvgIconModule,
|
|
6594
|
+
KENDO_INPUTS,
|
|
6595
|
+
KitPopupComponent,
|
|
6596
|
+
FormsModule,
|
|
6597
|
+
ReactiveFormsModule,
|
|
6598
|
+
KitRoutePathComponent,
|
|
6599
|
+
KitButtonModule,
|
|
6600
|
+
KitTruncateTextComponent,
|
|
6601
|
+
DatePipe,
|
|
6602
|
+
TranslateModule,
|
|
6603
|
+
KitEmptySectionComponent,
|
|
6604
|
+
], template: "<div #container\n class=\"global-search\">\n <kendo-textbox #textbox\n class=\"textbox\"\n [placeholder]=\"'kit.globalSearch.placeholder' | translate\"\n [size]=\"'none'\"\n [(ngModel)]=\"value\">\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 <div class=\"popup-content\">\n <div class=\"search-results\">\n @if (searchResults().length) {\n @for (category of searchResults(); track category?.name) {\n @if (category) {\n <div class=\"category\">\n <p class=\"header\"\n [class.empty]=\"!category.total\">\n <kit-svg-icon [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n <span class=\"title\">{{ category.name.toUpperCase() }} ({{ category.total }})</span>\n </p>\n\n @for (lineItem of category.items.slice(0, this.displayedLineItemsNumber()); track lineItem) {\n <div class=\"line-item\"\n [class.has-link]=\"lineItem.link\"\n (click)=\"navigate(lineItem.link)\">\n <div class=\"title\">\n <kit-truncate-text>{{ lineItem.title }}</kit-truncate-text>\n </div>\n <div class=\"subtitle\">\n <kit-truncate-text>{{ lineItem.subtitle }}</kit-truncate-text>\n </div>\n @if (lineItem.routePath?.from || lineItem.routePath?.to) {\n <kit-route-path class=\"route\"\n [containerMode]=\"lineItem.routePath?.containerMode\"\n [destinationPort]=\"lineItem.routePath?.to\"\n [originPort]=\"lineItem.routePath?.from\"\n [type]=\"lineItem.routePath?.type\"/>\n }\n @if (lineItem.dates?.firstDate.value) {\n <div class=\"dates first-date\">\n <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\"/>\n <kit-truncate-text>{{ lineItem.dates?.firstDate.label }} \n <span class=\"date\">{{ lineItem.dates?.firstDate.value | date: dateFormat : 'UTC' }}</span>\n </kit-truncate-text>\n </div>\n }\n @if (lineItem.dates?.secondDate.value) {\n <div class=\"dates second-date\">\n <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\"/>\n <kit-truncate-text>{{ lineItem.dates?.secondDate.label }} \n <span class=\"date\">{{ lineItem.dates?.secondDate.value | date: dateFormat : 'UTC' }}</span>\n </kit-truncate-text>\n </div>\n }\n </div>\n }\n \n @if (category.total > this.displayedLineItemsNumber()) {\n <kit-button [label]=\"'kit.globalSearch.showMore' | translate\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n (clicked)=\"navigate(category.categoryLink)\"/>\n }\n </div>\n }\n }\n } @else {\n <kit-empty-section class=\"empty-section\"\n [text]=\"'kit.globalSearch.noData' | translate\"/>\n }\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [":host{position:relative}:host .global-search{max-width:360px}:host .global-search:has(.textbox.k-focus){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:has(.textbox.k-focus) .kit-global-search-popup{display:inherit}:host ::ng-deep .k-animation-container{width:100%}:host ::ng-deep .kit-global-search-popup{overflow-y:auto}:host ::ng-deep .global-search .k-textbox.k-input .k-input-inner{padding:11px 8px}: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 .category:not(:last-child){margin-bottom:20px}:host ::ng-deep .search-results .category .header{display:flex;align-items:center;margin:0 0 20px}:host ::ng-deep .search-results .category .header .icon.check-sticker-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);margin-right:10px}:host ::ng-deep .search-results .category .header .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 .icon.check-sticker-icon{fill:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .header.empty .title{color:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .line-item{display:grid;grid-template-columns:minmax(50px,190px) minmax(50px,190px) minmax(200px,300px) minmax(65px,130px) minmax(65px,130px);justify-content:space-between;gap:20px;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 .title{font-size:16px;line-height:22px;font-weight:500}:host ::ng-deep .search-results .category .line-item .title,:host ::ng-deep .search-results .category .line-item .subtitle{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .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 .dates{display:flex;align-items:center;font-size:12px;line-height:14px}:host ::ng-deep .search-results .category .line-item .dates .date{font-size:14px;line-height:20px;font-weight:500}:host ::ng-deep .search-results .category .line-item .dates.first-date{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .dates.second-date{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .empty-section{container:none}\n"] }]
|
|
6605
|
+
}], ctorParameters: () => [{ type: i1$7.Router }], propDecorators: { documentClick: [{
|
|
6606
|
+
type: HostListener,
|
|
6607
|
+
args: ['document:click', ['$event']]
|
|
6608
|
+
}] } });
|
|
6609
|
+
|
|
6610
|
+
class FetchUserPermissions {
|
|
6611
|
+
static { this.type = '[User] FetchPermissions'; }
|
|
6612
|
+
}
|
|
6613
|
+
|
|
6614
|
+
const KIT_BASE_PATH = new InjectionToken('kitBasePath');
|
|
6615
|
+
|
|
6616
|
+
class KitPermissionsApiService {
|
|
6617
|
+
constructor(httpClient, basePath) {
|
|
6618
|
+
this.httpClient = httpClient;
|
|
6619
|
+
this.basePath = basePath;
|
|
6620
|
+
}
|
|
6621
|
+
getUserPermissions() {
|
|
6622
|
+
const url = `${this.basePath}/user/permissions`;
|
|
6623
|
+
return this.httpClient.get(url);
|
|
6624
|
+
}
|
|
6625
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitPermissionsApiService, deps: [{ token: i1$c.HttpClient }, { token: KIT_BASE_PATH }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
6626
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitPermissionsApiService, providedIn: 'root' }); }
|
|
6627
|
+
}
|
|
6628
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitPermissionsApiService, decorators: [{
|
|
6629
|
+
type: Injectable,
|
|
6630
|
+
args: [{
|
|
6631
|
+
providedIn: 'root',
|
|
6632
|
+
}]
|
|
6633
|
+
}], ctorParameters: () => [{ type: i1$c.HttpClient }, { type: undefined, decorators: [{
|
|
6634
|
+
type: Inject,
|
|
6635
|
+
args: [KIT_BASE_PATH]
|
|
6636
|
+
}] }] });
|
|
6637
|
+
|
|
6638
|
+
const KIT_USER_PERMISSIONS_STATE_TOKEN = new StateToken('userPermissions');
|
|
6639
|
+
let KitUserPermissionsState = class KitUserPermissionsState {
|
|
6640
|
+
constructor(kitPermissionsApiService) {
|
|
6641
|
+
this.kitPermissionsApiService = kitPermissionsApiService;
|
|
6642
|
+
}
|
|
6643
|
+
fetchUserPermissions(ctx) {
|
|
6644
|
+
return this.kitPermissionsApiService.getUserPermissions().pipe(tap(userPermissions => ctx.setState(userPermissions)));
|
|
6645
|
+
}
|
|
6646
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitUserPermissionsState, deps: [{ token: KitPermissionsApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
6647
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitUserPermissionsState }); }
|
|
6648
|
+
};
|
|
6649
|
+
__decorate([
|
|
6650
|
+
Action(FetchUserPermissions)
|
|
6651
|
+
], KitUserPermissionsState.prototype, "fetchUserPermissions", null);
|
|
6652
|
+
KitUserPermissionsState = __decorate([
|
|
6653
|
+
State({
|
|
6654
|
+
name: KIT_USER_PERMISSIONS_STATE_TOKEN,
|
|
6655
|
+
})
|
|
6656
|
+
], KitUserPermissionsState);
|
|
6657
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitUserPermissionsState, decorators: [{
|
|
6658
|
+
type: Injectable
|
|
6659
|
+
}], ctorParameters: () => [{ type: KitPermissionsApiService }], propDecorators: { fetchUserPermissions: [] } });
|
|
6660
|
+
|
|
6661
|
+
const mapGlobalSearchResult = (store, requiredPermission, dataFetcher, categoryName, categoryLink, itemMapper) => {
|
|
6662
|
+
return store.select(KIT_USER_PERMISSIONS_STATE_TOKEN).pipe(map(state => state.permissions), tap(permissions => {
|
|
6663
|
+
if (!permissions) {
|
|
6664
|
+
store.dispatch(new FetchUserPermissions());
|
|
6665
|
+
}
|
|
6666
|
+
}), filter(Boolean), take(1), switchMap(permissions => {
|
|
6667
|
+
if (!permissions.includes(requiredPermission)) {
|
|
6668
|
+
return of(null);
|
|
6669
|
+
}
|
|
6670
|
+
return dataFetcher().pipe(map(data => ({
|
|
6671
|
+
name: categoryName,
|
|
6672
|
+
total: data.total,
|
|
6673
|
+
categoryLink,
|
|
6674
|
+
items: data.data.map(itemMapper),
|
|
6675
|
+
})), catchError(() => of({
|
|
6676
|
+
name: categoryName,
|
|
6677
|
+
total: 0,
|
|
6678
|
+
categoryLink,
|
|
6679
|
+
items: [],
|
|
6680
|
+
})));
|
|
6681
|
+
}));
|
|
6682
|
+
};
|
|
6683
|
+
|
|
6497
6684
|
// eslint-disable-next-line
|
|
6498
6685
|
class KitSortableComponent {
|
|
6499
6686
|
constructor() {
|
|
@@ -6554,8 +6741,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
6554
6741
|
args: [{ selector: 'kit-page-layout', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"page-layout\"\n [class.sidebar-expanded]=\"!isMenuCollapsed() && hasMenuSelected()\"\n [class.has-sidebar]=\"hasSidebar\"\n [class.has-top-bar]=\"hasTopBar\">\n <div class=\"sidebar\" #sidebarContainer>\n <ng-content select=\"[sidebar]\" />\n </div>\n\n <div class=\"main\">\n <div class=\"top-bar\" #topBarContainer>\n <ng-content select=\"[topBar]\" />\n </div>\n\n <div class=\"content\">\n <ng-content select=\"[content]\" />\n </div>\n </div>\n</div>\n", styles: [".page-layout{display:flex;min-height:100%}.page-layout.has-sidebar .sidebar{position:fixed;top:0;left:0;height:100%;min-width:var(--ui-kit-sidebar-collapsed-width);background:var(--ui-kit-color-navy);overflow-x:hidden;z-index:11}.page-layout.has-sidebar .main{margin-left:var(--ui-kit-sidebar-collapsed-width)}.page-layout.has-sidebar.sidebar-expanded .main{margin-left:var(--ui-kit-sidebar-expanded-width)}.page-layout .main{display:flex;flex-direction:column;flex:1;padding:0 var(--ui-kit-layout-gap);width:0;transition:.2s ease-in-out}.page-layout.has-top-bar .top-bar{position:sticky;top:0;left:0;width:100%;height:var(--ui-kit-header-height);background:var(--ui-kit-color-grey-13);z-index:10}.page-layout .content{padding:25px 0;flex:1}.page-layout .content:has(.kit-breadcrumbs){padding-top:10px}.page-layout .content:has(.iframe-wrapper){padding:0}\n"] }]
|
|
6555
6742
|
}], ctorParameters: () => [{ type: KitNavigationMenuService }] });
|
|
6556
6743
|
|
|
6557
|
-
const KIT_BASE_PATH = new InjectionToken('kitBasePath');
|
|
6558
|
-
|
|
6559
6744
|
const kitTranslations = {
|
|
6560
6745
|
en: {
|
|
6561
6746
|
kit: {
|
|
@@ -6614,6 +6799,11 @@ const kitTranslations = {
|
|
|
6614
6799
|
searchButtonLabel: 'Search',
|
|
6615
6800
|
closeButtonLabel: 'Close',
|
|
6616
6801
|
},
|
|
6802
|
+
globalSearch: {
|
|
6803
|
+
placeholder: 'Global Search',
|
|
6804
|
+
showMore: 'Show More',
|
|
6805
|
+
noData: 'No data found',
|
|
6806
|
+
},
|
|
6617
6807
|
columns: {
|
|
6618
6808
|
title: 'Columns',
|
|
6619
6809
|
cancel: 'Cancel',
|
|
@@ -6625,6 +6815,10 @@ const kitTranslations = {
|
|
|
6625
6815
|
grid: {
|
|
6626
6816
|
pagerItemsText: 'items',
|
|
6627
6817
|
},
|
|
6818
|
+
routePath: {
|
|
6819
|
+
tbc: 'TBC',
|
|
6820
|
+
by: 'by',
|
|
6821
|
+
},
|
|
6628
6822
|
},
|
|
6629
6823
|
},
|
|
6630
6824
|
};
|
|
@@ -8365,9 +8559,6 @@ const gridExportOptions = [
|
|
|
8365
8559
|
|
|
8366
8560
|
const KIT_GRID_CELL_DATE_FORMAT_CONFIG = new InjectionToken('KIT_GRID_CELL_DATE_FORMAT_CONFIG');
|
|
8367
8561
|
|
|
8368
|
-
const KIT_DATE_FORMAT = 'dd MMM yyyy';
|
|
8369
|
-
const KIT_DATETIME_FORMAT_LONG = 'dd MMM yyyy HH:mm:ss';
|
|
8370
|
-
|
|
8371
8562
|
class KitGridCellService {
|
|
8372
8563
|
constructor(translateService, decimalPipe, datePipe, dateFormatConfig) {
|
|
8373
8564
|
this.translateService = translateService;
|
|
@@ -8900,55 +9091,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
8900
9091
|
type: Injectable
|
|
8901
9092
|
}], ctorParameters: () => [{ type: KitUserApiService }], propDecorators: { fetchUserApplications: [] } });
|
|
8902
9093
|
|
|
8903
|
-
class FetchUserPermissions {
|
|
8904
|
-
static { this.type = '[User] FetchPermissions'; }
|
|
8905
|
-
}
|
|
8906
|
-
|
|
8907
|
-
class KitPermissionsApiService {
|
|
8908
|
-
constructor(httpClient, basePath) {
|
|
8909
|
-
this.httpClient = httpClient;
|
|
8910
|
-
this.basePath = basePath;
|
|
8911
|
-
}
|
|
8912
|
-
getUserPermissions() {
|
|
8913
|
-
const url = `${this.basePath}/user/permissions`;
|
|
8914
|
-
return this.httpClient.get(url);
|
|
8915
|
-
}
|
|
8916
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitPermissionsApiService, deps: [{ token: i1$c.HttpClient }, { token: KIT_BASE_PATH }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
8917
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitPermissionsApiService, providedIn: 'root' }); }
|
|
8918
|
-
}
|
|
8919
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitPermissionsApiService, decorators: [{
|
|
8920
|
-
type: Injectable,
|
|
8921
|
-
args: [{
|
|
8922
|
-
providedIn: 'root',
|
|
8923
|
-
}]
|
|
8924
|
-
}], ctorParameters: () => [{ type: i1$c.HttpClient }, { type: undefined, decorators: [{
|
|
8925
|
-
type: Inject,
|
|
8926
|
-
args: [KIT_BASE_PATH]
|
|
8927
|
-
}] }] });
|
|
8928
|
-
|
|
8929
|
-
const KIT_USER_PERMISSIONS_STATE_TOKEN = new StateToken('userPermissions');
|
|
8930
|
-
let KitUserPermissionsState = class KitUserPermissionsState {
|
|
8931
|
-
constructor(kitPermissionsApiService) {
|
|
8932
|
-
this.kitPermissionsApiService = kitPermissionsApiService;
|
|
8933
|
-
}
|
|
8934
|
-
fetchUserPermissions(ctx) {
|
|
8935
|
-
return this.kitPermissionsApiService.getUserPermissions().pipe(tap(userPermissions => ctx.setState(userPermissions)));
|
|
8936
|
-
}
|
|
8937
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitUserPermissionsState, deps: [{ token: KitPermissionsApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
8938
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitUserPermissionsState }); }
|
|
8939
|
-
};
|
|
8940
|
-
__decorate([
|
|
8941
|
-
Action(FetchUserPermissions)
|
|
8942
|
-
], KitUserPermissionsState.prototype, "fetchUserPermissions", null);
|
|
8943
|
-
KitUserPermissionsState = __decorate([
|
|
8944
|
-
State({
|
|
8945
|
-
name: KIT_USER_PERMISSIONS_STATE_TOKEN,
|
|
8946
|
-
})
|
|
8947
|
-
], KitUserPermissionsState);
|
|
8948
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitUserPermissionsState, decorators: [{
|
|
8949
|
-
type: Injectable
|
|
8950
|
-
}], ctorParameters: () => [{ type: KitPermissionsApiService }], propDecorators: { fetchUserPermissions: [] } });
|
|
8951
|
-
|
|
8952
9094
|
class KitMenuBuilderService {
|
|
8953
9095
|
constructor(translateService) {
|
|
8954
9096
|
this.translateService = translateService;
|
|
@@ -9087,14 +9229,14 @@ class KitTopBarComponent {
|
|
|
9087
9229
|
this.kitNavigationMenuService.setCollapsedState(!collapsed);
|
|
9088
9230
|
}
|
|
9089
9231
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitTopBarComponent, deps: [{ token: KitNavigationMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9090
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: KitTopBarComponent, isStandalone: true, selector: "kit-top-bar", inputs: { userMenuItems: { classPropertyName: "userMenuItems", publicName: "userMenuItems", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-top-bar\">\n <kit-button [type]=\"kitButtonType.GHOST\"\n [icon]=\"kitSvgIcon.MENU\"\n (clicked)=\"toggleSidebar(collapsed())\"\n ></kit-button>\n\n <div class=\"kit-top-bar-content\">\n <ng-content></ng-content>\n </div>\n\n <kit-top-bar-user [menuItems]=\"userMenuItems()\"\n ></kit-top-bar-user>\n</div>\n", styles: [".kit-top-bar{display:flex;align-items:center;gap:40px;height:100%;border-bottom:1px solid var(--color-grey-6);box-sizing:border-box}.kit-top-bar-content{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitTopBarUserComponent, selector: "kit-top-bar-user", inputs: ["menuItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9232
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: KitTopBarComponent, isStandalone: true, selector: "kit-top-bar", inputs: { userMenuItems: { classPropertyName: "userMenuItems", publicName: "userMenuItems", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-top-bar\">\n <kit-button [type]=\"kitButtonType.GHOST\"\n [icon]=\"kitSvgIcon.MENU\"\n (clicked)=\"toggleSidebar(collapsed())\"\n ></kit-button>\n\n <div class=\"kit-top-bar-content\">\n <div class=\"kit-global-search\">\n <ng-content select=\"[globalSearch]\"></ng-content>\n </div>\n <ng-content select=\"[topBarActions]\"></ng-content>\n </div>\n\n <kit-top-bar-user [menuItems]=\"userMenuItems()\"\n ></kit-top-bar-user>\n</div>\n", styles: [".kit-top-bar{display:flex;align-items:center;gap:40px;height:100%;border-bottom:1px solid var(--color-grey-6);box-sizing:border-box}.kit-top-bar-content{display:flex;align-items:center;justify-content:space-between;flex:1}.kit-top-bar-content .kit-global-search{flex:1;margin-right:18px}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitTopBarUserComponent, selector: "kit-top-bar-user", inputs: ["menuItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9091
9233
|
}
|
|
9092
9234
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitTopBarComponent, decorators: [{
|
|
9093
9235
|
type: Component,
|
|
9094
9236
|
args: [{ selector: 'kit-top-bar', imports: [
|
|
9095
9237
|
KitButtonModule,
|
|
9096
9238
|
KitTopBarUserComponent,
|
|
9097
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-top-bar\">\n <kit-button [type]=\"kitButtonType.GHOST\"\n [icon]=\"kitSvgIcon.MENU\"\n (clicked)=\"toggleSidebar(collapsed())\"\n ></kit-button>\n\n <div class=\"kit-top-bar-content\">\n <ng-content></ng-content>\n </div>\n\n <kit-top-bar-user [menuItems]=\"userMenuItems()\"\n ></kit-top-bar-user>\n</div>\n", styles: [".kit-top-bar{display:flex;align-items:center;gap:40px;height:100%;border-bottom:1px solid var(--color-grey-6);box-sizing:border-box}.kit-top-bar-content{flex:1}\n"] }]
|
|
9239
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-top-bar\">\n <kit-button [type]=\"kitButtonType.GHOST\"\n [icon]=\"kitSvgIcon.MENU\"\n (clicked)=\"toggleSidebar(collapsed())\"\n ></kit-button>\n\n <div class=\"kit-top-bar-content\">\n <div class=\"kit-global-search\">\n <ng-content select=\"[globalSearch]\"></ng-content>\n </div>\n <ng-content select=\"[topBarActions]\"></ng-content>\n </div>\n\n <kit-top-bar-user [menuItems]=\"userMenuItems()\"\n ></kit-top-bar-user>\n</div>\n", styles: [".kit-top-bar{display:flex;align-items:center;gap:40px;height:100%;border-bottom:1px solid var(--color-grey-6);box-sizing:border-box}.kit-top-bar-content{display:flex;align-items:center;justify-content:space-between;flex:1}.kit-top-bar-content .kit-global-search{flex:1;margin-right:18px}\n"] }]
|
|
9098
9240
|
}], ctorParameters: () => [{ type: KitNavigationMenuService }] });
|
|
9099
9241
|
|
|
9100
9242
|
class KitSchedulerToolbarComponent {
|
|
@@ -9225,5 +9367,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
9225
9367
|
* Generated bundle index. Do not edit.
|
|
9226
9368
|
*/
|
|
9227
9369
|
|
|
9228
|
-
export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, FetchUserPermissions, KIT_BASE_PATH, KIT_DATETIME_FORMAT_LONG, KIT_DATE_FORMAT, KIT_GRID_CELL_DATE_FORMAT_CONFIG, KIT_GRID_STATE_TOKEN, KIT_USER_PERMISSIONS_STATE_TOKEN, KIT_USER_STATE_TOKEN, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitBreadcrumbsService, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonState, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCollapsedListComponent, KitCollapsedListDropdownAlign, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDataFieldComponent, KitDataFieldState, KitDatepickerComponent, KitDatepickerModule, KitDatepickerSize, KitDaterangeComponent, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDropdownComponent, KitDropdownItemTemplateDirective, KitDropdownModule, KitDropdownSize, KitEmptySectionComponent, KitEntityGridComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntityTitleComponent, KitEntityTitleModule, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardModule, KitFileUploadComponent, KitFileUploadModule, KitFilterCheckboxComponent, KitFilterLogic, KitFilterOperator, KitFilterType, KitGridCellComponent, KitGridCellService, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridColumnManagerComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridExportComponent, KitGridFiltersComponent, KitGridModule, KitGridSearchComponent, KitGridSortSettingsMode, KitGridState, KitGridUrlStateService, KitGridViewType, KitGridViewsComponent, KitGridViewsState, KitInputLabelComponent, KitInputLabelModule, KitInputMessageComponent, KitInputMessageModule, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsModule, KitNavigationTabsType, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitNumericTextboxSize, KitNumericTextboxState, KitPageLayoutComponent, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillTheme, KitPillType, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitRadioButtonType, KitSchedulerComponent, KitSchedulerMonthEventTemplateDirective, KitSchedulerWeekEventTemplateDirective, KitScrollNavigationComponent, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSearchBarModule, KitShipmentCard, KitSidebarComponent, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgIconType, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTabComponent, KitTabContentDirective, KitTabsComponent, KitTabsModule, KitTabsSize, KitTabsType, KitTextLabelComponent, KitTextLabelModule, KitTextLabelState, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTextboxSize, KitTextboxState, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTileLayoutModule, KitTimelineCardComponent, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTimepickerModule, KitTitleTemplateDirective, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipPosition, KitTopBarComponent, KitTranslateService, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, KitUserApplicationsState, KitUserPermissionsState, KitUserState, RemoveGridFilter, SetGridColumns, SetGridFilters, SetGridSearch, SetGridSkip, SetGridSort, SetGridTake, UpdateGridFilter, buildRandomUUID, kitBuildFilterBooleanOptions, kitBuildFilterListOptions, kitBuildFilters, kitBuildGridColumn, kitBuildGridDataResults, kitBuildOdataFilter, kitBuildSortString, kitDataStateToODataString, kitEncodeViewNameToUrl };
|
|
9370
|
+
export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, FetchUserPermissions, KIT_BASE_PATH, KIT_DATETIME_FORMAT_LONG, KIT_DATE_FORMAT, KIT_GRID_CELL_DATE_FORMAT_CONFIG, KIT_GRID_STATE_TOKEN, KIT_USER_PERMISSIONS_STATE_TOKEN, KIT_USER_STATE_TOKEN, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitBreadcrumbsService, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonState, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCollapsedListComponent, KitCollapsedListDropdownAlign, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDataFieldComponent, KitDataFieldState, KitDatepickerComponent, KitDatepickerModule, KitDatepickerSize, KitDaterangeComponent, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDropdownComponent, KitDropdownItemTemplateDirective, KitDropdownModule, KitDropdownSize, KitEmptySectionComponent, KitEntityGridComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntityTitleComponent, KitEntityTitleModule, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardModule, KitFileUploadComponent, KitFileUploadModule, KitFilterCheckboxComponent, KitFilterLogic, KitFilterOperator, KitFilterType, KitGlobalSearchComponent, KitGridCellComponent, KitGridCellService, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridColumnManagerComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridExportComponent, KitGridFiltersComponent, KitGridModule, KitGridSearchComponent, KitGridSortSettingsMode, KitGridState, KitGridUrlStateService, KitGridViewType, KitGridViewsComponent, KitGridViewsState, KitInputLabelComponent, KitInputLabelModule, KitInputMessageComponent, KitInputMessageModule, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsModule, KitNavigationTabsType, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitNumericTextboxSize, KitNumericTextboxState, KitPageLayoutComponent, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillTheme, KitPillType, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitRadioButtonType, KitSchedulerComponent, KitSchedulerMonthEventTemplateDirective, KitSchedulerWeekEventTemplateDirective, KitScrollNavigationComponent, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSearchBarModule, KitShipmentCard, KitSidebarComponent, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgIconType, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTabComponent, KitTabContentDirective, KitTabsComponent, KitTabsModule, KitTabsSize, KitTabsType, KitTextLabelComponent, KitTextLabelModule, KitTextLabelState, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTextboxSize, KitTextboxState, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTileLayoutModule, KitTimelineCardComponent, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTimepickerModule, KitTitleTemplateDirective, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipPosition, KitTopBarComponent, KitTranslateService, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, KitUserApplicationsState, KitUserPermissionsState, KitUserState, RemoveGridFilter, SetGridColumns, SetGridFilters, SetGridSearch, SetGridSkip, SetGridSort, SetGridTake, UpdateGridFilter, buildRandomUUID, kitBuildFilterBooleanOptions, kitBuildFilterListOptions, kitBuildFilters, kitBuildGridColumn, kitBuildGridDataResults, kitBuildOdataFilter, kitBuildSortString, kitDataStateToODataString, kitEncodeViewNameToUrl, mapGlobalSearchResult };
|
|
9229
9371
|
//# sourceMappingURL=indigina-ui-kit.mjs.map
|