@indigina/ui-kit 1.1.94 → 1.1.96
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/esm2022/lib/components/kit-cta-panel-confirmation/kit-cta-panel-confirmation.component.mjs +1 -1
- package/esm2022/lib/components/kit-dropdown/kit-dropdown.component.mjs +10 -7
- package/esm2022/lib/components/kit-dropdown/kit-dropdown.const.mjs +8 -0
- package/esm2022/lib/components/kit-grid/kit-grid.component.mjs +9 -9
- package/esm2022/lib/components/kit-grid/kit-grid.const.mjs +1 -6
- package/esm2022/lib/components/kit-grid/kit-grid.model.mjs +1 -1
- package/esm2022/lib/components/kit-popup/kit-popup.component.mjs +1 -1
- package/esm2022/lib/components/kit-switch/kit-switch.component.mjs +2 -2
- package/esm2022/lib/components/kit-text-label/kit-text-label.component.mjs +2 -2
- package/esm2022/lib/components/kit-textbox/kit-textbox.component.mjs +2 -2
- package/esm2022/lib/components/kit-timeline/kit-timeline-card/kit-timeline-card.component.mjs +3 -3
- package/esm2022/lib/utils/kit-data-query/kit-data-query.const.mjs +28 -0
- package/esm2022/lib/utils/kit-data-query/kit-data-query.model.mjs +2 -0
- package/esm2022/lib/utils/kit-data-query/kit-data-query.util.mjs +3 -0
- package/esm2022/public-api.mjs +6 -2
- package/fesm2022/indigina-ui-kit.mjs +67 -31
- package/fesm2022/indigina-ui-kit.mjs.map +1 -1
- package/lib/components/kit-dropdown/kit-dropdown.component.d.ts +7 -2
- package/lib/components/kit-dropdown/kit-dropdown.const.d.ts +6 -0
- package/lib/components/kit-grid/kit-grid.component.d.ts +11 -10
- package/lib/components/kit-grid/kit-grid.const.d.ts +0 -4
- package/lib/components/kit-grid/kit-grid.model.d.ts +2 -13
- package/lib/components/kit-popup/kit-popup.component.d.ts +1 -1
- package/lib/utils/kit-data-query/kit-data-query.const.d.ts +24 -0
- package/lib/utils/kit-data-query/kit-data-query.model.d.ts +14 -0
- package/lib/utils/kit-data-query/kit-data-query.util.d.ts +2 -0
- package/package.json +1 -1
- package/public-api.d.ts +6 -2
- package/styles/theming.scss +1 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ChangeDetectionStrategy, Input, EventEmitter, ViewEncapsulation, Output, NgModule, Directive, forwardRef, signal, TemplateRef, ContentChild, ViewChild, HostListener, Host, Self, Injectable, Inject, ElementRef, ContentChildren, contentChildren, contentChild } from '@angular/core';
|
|
2
|
+
import { Component, ChangeDetectionStrategy, Input, EventEmitter, ViewEncapsulation, Output, NgModule, Directive, forwardRef, input, signal, TemplateRef, ContentChild, ViewChild, HostListener, Host, Self, Injectable, Inject, ElementRef, ContentChildren, contentChildren, contentChild } 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';
|
|
@@ -41,6 +41,7 @@ import * as i2$3 from '@progress/kendo-angular-grid';
|
|
|
41
41
|
import { GridModule } from '@progress/kendo-angular-grid';
|
|
42
42
|
import * as i2$4 from '@progress/kendo-angular-sortable';
|
|
43
43
|
import { KENDO_SORTABLE } from '@progress/kendo-angular-sortable';
|
|
44
|
+
import { toODataString } from '@progress/kendo-data-query';
|
|
44
45
|
|
|
45
46
|
var KitSvgIcon;
|
|
46
47
|
(function (KitSvgIcon) {
|
|
@@ -545,11 +546,11 @@ class KitSwitchComponent {
|
|
|
545
546
|
return this.mode === KitSwitchMode.SINGLE;
|
|
546
547
|
}
|
|
547
548
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
548
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitSwitchComponent, selector: "kit-switch", inputs: { items: "items", mode: "mode", label: "label", disabled: "disabled", selection: "selection", messageIcon: "messageIcon", messageText: "messageText", state: "state" }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"kit-switch {{ state }}\">\n <ng-container *ngIf=\"items.length\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n <kendo-buttongroup look=\"outline\" class=\"button-group\"\n [selection]=\"mode\"\n [class.disabled]=\"disabled\">\n <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n [selected]=\"isItemSelected(item)\"\n [togglable]=\"true\"\n [disabled]=\"item.disabled && item.disabled(item)\"\n (selectedChange)=\"onItemSelect($event, item)\">\n <ng-container *ngIf=\"item.title; else icon\">\n {{ item.title }}\n </ng-container>\n\n <ng-template #icon>\n <kit-svg-icon class=\"icon-wrapper\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n </ng-template>\n </button>\n </kendo-buttongroup>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n </ng-container>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-grey-15: #f0f0f0;--ui-kit-color-grey-16: #ececf8;--ui-kit-color-grey-17: #878787;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-green-4: #e0f2ed;--ui-kit-color-green-5: #e5ffe5;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-red-3: #f9e9ea;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-teal-1: #d8edf3;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-orange-2: #ff7a00;--ui-kit-color-orange-3: #fbecde;--ui-kit-color-orange-4: #fff6e4;--ui-kit-color-pink: #cd1159;--ui-kit-color-pink-1: #fae7ee;--ui-kit-color-purple: #7673ce;--ui-kit-color-purple-1: #e7e7f6;--ui-kit-color-blue: #1677ff;--ui-kit-color-blue-1: #e4eeff}.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-switch .label{display:block;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{fill:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{fill:var(--ui-kit-color-cobalt);stroke:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{fill:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i1.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
549
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitSwitchComponent, selector: "kit-switch", inputs: { items: "items", mode: "mode", label: "label", disabled: "disabled", selection: "selection", messageIcon: "messageIcon", messageText: "messageText", state: "state" }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"kit-switch {{ state }}\">\n <ng-container *ngIf=\"items.length\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n <kendo-buttongroup look=\"outline\" class=\"button-group\"\n [selection]=\"mode\"\n [class.disabled]=\"disabled\">\n <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n [selected]=\"isItemSelected(item)\"\n [togglable]=\"true\"\n [disabled]=\"item.disabled && item.disabled(item)\"\n (selectedChange)=\"onItemSelect($event, item)\">\n <ng-container *ngIf=\"item.title; else icon\">\n {{ item.title }}\n </ng-container>\n\n <ng-template #icon>\n <kit-svg-icon class=\"icon-wrapper\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n </ng-template>\n </button>\n </kendo-buttongroup>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n </ng-container>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-grey-15: #f0f0f0;--ui-kit-color-grey-16: #ececf8;--ui-kit-color-grey-17: #878787;--ui-kit-color-grey-18: #727684;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-green-4: #e0f2ed;--ui-kit-color-green-5: #e5ffe5;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-red-3: #f9e9ea;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-teal-1: #d8edf3;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-orange-2: #ff7a00;--ui-kit-color-orange-3: #fbecde;--ui-kit-color-orange-4: #fff6e4;--ui-kit-color-pink: #cd1159;--ui-kit-color-pink-1: #fae7ee;--ui-kit-color-purple: #7673ce;--ui-kit-color-purple-1: #e7e7f6;--ui-kit-color-blue: #1677ff;--ui-kit-color-blue-1: #e4eeff}.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-switch .label{display:block;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{fill:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{fill:var(--ui-kit-color-cobalt);stroke:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{fill:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i1.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
549
550
|
}
|
|
550
551
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitSwitchComponent, decorators: [{
|
|
551
552
|
type: Component,
|
|
552
|
-
args: [{ selector: 'kit-switch', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-switch {{ state }}\">\n <ng-container *ngIf=\"items.length\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n <kendo-buttongroup look=\"outline\" class=\"button-group\"\n [selection]=\"mode\"\n [class.disabled]=\"disabled\">\n <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n [selected]=\"isItemSelected(item)\"\n [togglable]=\"true\"\n [disabled]=\"item.disabled && item.disabled(item)\"\n (selectedChange)=\"onItemSelect($event, item)\">\n <ng-container *ngIf=\"item.title; else icon\">\n {{ item.title }}\n </ng-container>\n\n <ng-template #icon>\n <kit-svg-icon class=\"icon-wrapper\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n </ng-template>\n </button>\n </kendo-buttongroup>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n </ng-container>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-grey-15: #f0f0f0;--ui-kit-color-grey-16: #ececf8;--ui-kit-color-grey-17: #878787;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-green-4: #e0f2ed;--ui-kit-color-green-5: #e5ffe5;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-red-3: #f9e9ea;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-teal-1: #d8edf3;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-orange-2: #ff7a00;--ui-kit-color-orange-3: #fbecde;--ui-kit-color-orange-4: #fff6e4;--ui-kit-color-pink: #cd1159;--ui-kit-color-pink-1: #fae7ee;--ui-kit-color-purple: #7673ce;--ui-kit-color-purple-1: #e7e7f6;--ui-kit-color-blue: #1677ff;--ui-kit-color-blue-1: #e4eeff}.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-switch .label{display:block;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{fill:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{fill:var(--ui-kit-color-cobalt);stroke:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{fill:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"] }]
|
|
553
|
+
args: [{ selector: 'kit-switch', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-switch {{ state }}\">\n <ng-container *ngIf=\"items.length\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n <kendo-buttongroup look=\"outline\" class=\"button-group\"\n [selection]=\"mode\"\n [class.disabled]=\"disabled\">\n <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n [selected]=\"isItemSelected(item)\"\n [togglable]=\"true\"\n [disabled]=\"item.disabled && item.disabled(item)\"\n (selectedChange)=\"onItemSelect($event, item)\">\n <ng-container *ngIf=\"item.title; else icon\">\n {{ item.title }}\n </ng-container>\n\n <ng-template #icon>\n <kit-svg-icon class=\"icon-wrapper\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n </ng-template>\n </button>\n </kendo-buttongroup>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n </ng-container>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-grey-15: #f0f0f0;--ui-kit-color-grey-16: #ececf8;--ui-kit-color-grey-17: #878787;--ui-kit-color-grey-18: #727684;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-green-4: #e0f2ed;--ui-kit-color-green-5: #e5ffe5;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-red-3: #f9e9ea;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-teal-1: #d8edf3;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-orange-2: #ff7a00;--ui-kit-color-orange-3: #fbecde;--ui-kit-color-orange-4: #fff6e4;--ui-kit-color-pink: #cd1159;--ui-kit-color-pink-1: #fae7ee;--ui-kit-color-purple: #7673ce;--ui-kit-color-purple-1: #e7e7f6;--ui-kit-color-blue: #1677ff;--ui-kit-color-blue-1: #e4eeff}.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-switch .label{display:block;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{fill:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{fill:var(--ui-kit-color-cobalt);stroke:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{fill:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"] }]
|
|
553
554
|
}], propDecorators: { items: [{
|
|
554
555
|
type: Input
|
|
555
556
|
}], mode: [{
|
|
@@ -764,7 +765,7 @@ class KitTextboxComponent {
|
|
|
764
765
|
provide: NG_VALUE_ACCESSOR,
|
|
765
766
|
useExisting: forwardRef(() => KitTextboxComponent),
|
|
766
767
|
multi: true,
|
|
767
|
-
}], ngImport: i0, template: "<div class=\"kit-textbox\"\n [ngClass]=\"[state, size]\"\n [class.disabled]=\"disabled\">\n @if (label) {\n <kit-input-label class=\"label\"\n [for]=\"$any(textbox)\"\n [text]=\"label\"\n ></kit-input-label>\n }\n <div class=\"kit-textbox-input\">\n @if (icon) {\n <kit-svg-icon class=\"kit-textbox-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n }\n <kendo-textbox #textbox\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [value]=\"defaultValue\"\n [maxlength]=\"maxlength\"\n (blur)=\"onInputBlur()\"\n (valueChange)=\"onInputChange($event)\"\n ></kendo-textbox>\n <kit-svg-icon class=\"kit-textbox-state-icon\"\n [icon]=\"textboxStateIcon[state]\"\n ></kit-svg-icon>\n </div>\n\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-textbox.regular .kit-textbox-input{padding:0 12px}.kit-textbox.regular .k-input{height:38px}.kit-textbox.small .kit-textbox-input{padding:0 8px}.kit-textbox.small .k-input{height:30px}.kit-textbox .label{display:block;margin-bottom:4px}.kit-textbox-input{display:flex;align-items:center;border:1px solid var(--ui-kit-color-grey-11);
|
|
768
|
+
}], ngImport: i0, template: "<div class=\"kit-textbox\"\n [ngClass]=\"[state, size]\"\n [class.disabled]=\"disabled\">\n @if (label) {\n <kit-input-label class=\"label\"\n [for]=\"$any(textbox)\"\n [text]=\"label\"\n ></kit-input-label>\n }\n <div class=\"kit-textbox-input\">\n @if (icon) {\n <kit-svg-icon class=\"kit-textbox-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n }\n <kendo-textbox #textbox\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [value]=\"defaultValue\"\n [maxlength]=\"maxlength\"\n (blur)=\"onInputBlur()\"\n (valueChange)=\"onInputChange($event)\"\n ></kendo-textbox>\n <kit-svg-icon class=\"kit-textbox-state-icon\"\n [icon]=\"textboxStateIcon[state]\"\n ></kit-svg-icon>\n </div>\n\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-textbox.regular .kit-textbox-input{padding:0 12px;border-radius:8px}.kit-textbox.regular .k-input{height:38px}.kit-textbox.small .kit-textbox-input{padding:0 8px;border-radius:4px}.kit-textbox.small .k-input{height:30px}.kit-textbox .label{display:block;margin-bottom:4px}.kit-textbox-input{display:flex;align-items:center;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-textbox-icon{flex-shrink:0;display:block;margin-right:8px;width:16px;height:16px;fill:var(--ui-kit-color-grey-10)}.kit-textbox-state-icon{flex-shrink:0;display:block;margin-left:12px;width:14px;height:14px}.kit-textbox .k-input{padding:0;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;opacity:1;box-shadow:none;border:none}.kit-textbox .k-input-inner{padding:0;width:100%;line-height:1}.kit-textbox .k-input-inner::placeholder{color:var(--ui-kit-color-grey-14)}.kit-textbox .k-input-prefix,.kit-textbox .k-input-suffix{height:0}.kit-textbox.default .kit-textbox-state-icon{fill:var(--ui-kit-color-grey-12)}.kit-textbox.default:hover .kit-textbox-input{border-color:var(--ui-kit-color-hover)}.kit-textbox.default:focus-within .kit-textbox-input{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-textbox.warning .kit-textbox-input{border-color:var(--ui-kit-color-orange)}.kit-textbox.warning .kit-textbox-state-icon,.kit-textbox.warning .kit-textbox-icon{fill:var(--ui-kit-color-orange)}.kit-textbox.warning:focus-within .kit-textbox-input{box-shadow:0 0 0 2px var(--ui-kit-color-orange-1)}.kit-textbox.error .kit-textbox-input{border-color:var(--ui-kit-color-red-1)}.kit-textbox.error .kit-textbox-state-icon,.kit-textbox.error .kit-textbox-icon{fill:var(--ui-kit-color-red-1)}.kit-textbox.error:focus-within .kit-textbox-input{box-shadow:0 0 0 2px var(--ui-kit-color-red-2)}.kit-textbox.success .kit-textbox-state-icon{fill:var(--ui-kit-color-green-1)}.kit-textbox.success:hover .kit-textbox-input{border-color:var(--ui-kit-color-green-1)}.kit-textbox.success:focus-within .kit-textbox-input{border-color:var(--ui-kit-color-green-1);box-shadow:0 0 0 2px var(--ui-kit-color-green-2)}.kit-textbox.disabled .k-input{color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-13)}.kit-textbox.disabled .kit-textbox-input{border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-textbox.disabled .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-textbox.disabled .kit-textbox-icon{fill:var(--ui-kit-color-grey-12)}.kit-textbox.disabled:hover .kit-textbox-input{border-color:var(--ui-kit-color-grey-11)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
768
769
|
}
|
|
769
770
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitTextboxComponent, decorators: [{
|
|
770
771
|
type: Component,
|
|
@@ -772,7 +773,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
772
773
|
provide: NG_VALUE_ACCESSOR,
|
|
773
774
|
useExisting: forwardRef(() => KitTextboxComponent),
|
|
774
775
|
multi: true,
|
|
775
|
-
}], template: "<div class=\"kit-textbox\"\n [ngClass]=\"[state, size]\"\n [class.disabled]=\"disabled\">\n @if (label) {\n <kit-input-label class=\"label\"\n [for]=\"$any(textbox)\"\n [text]=\"label\"\n ></kit-input-label>\n }\n <div class=\"kit-textbox-input\">\n @if (icon) {\n <kit-svg-icon class=\"kit-textbox-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n }\n <kendo-textbox #textbox\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [value]=\"defaultValue\"\n [maxlength]=\"maxlength\"\n (blur)=\"onInputBlur()\"\n (valueChange)=\"onInputChange($event)\"\n ></kendo-textbox>\n <kit-svg-icon class=\"kit-textbox-state-icon\"\n [icon]=\"textboxStateIcon[state]\"\n ></kit-svg-icon>\n </div>\n\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-textbox.regular .kit-textbox-input{padding:0 12px}.kit-textbox.regular .k-input{height:38px}.kit-textbox.small .kit-textbox-input{padding:0 8px}.kit-textbox.small .k-input{height:30px}.kit-textbox .label{display:block;margin-bottom:4px}.kit-textbox-input{display:flex;align-items:center;border:1px solid var(--ui-kit-color-grey-11);
|
|
776
|
+
}], template: "<div class=\"kit-textbox\"\n [ngClass]=\"[state, size]\"\n [class.disabled]=\"disabled\">\n @if (label) {\n <kit-input-label class=\"label\"\n [for]=\"$any(textbox)\"\n [text]=\"label\"\n ></kit-input-label>\n }\n <div class=\"kit-textbox-input\">\n @if (icon) {\n <kit-svg-icon class=\"kit-textbox-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n }\n <kendo-textbox #textbox\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [value]=\"defaultValue\"\n [maxlength]=\"maxlength\"\n (blur)=\"onInputBlur()\"\n (valueChange)=\"onInputChange($event)\"\n ></kendo-textbox>\n <kit-svg-icon class=\"kit-textbox-state-icon\"\n [icon]=\"textboxStateIcon[state]\"\n ></kit-svg-icon>\n </div>\n\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-textbox.regular .kit-textbox-input{padding:0 12px;border-radius:8px}.kit-textbox.regular .k-input{height:38px}.kit-textbox.small .kit-textbox-input{padding:0 8px;border-radius:4px}.kit-textbox.small .k-input{height:30px}.kit-textbox .label{display:block;margin-bottom:4px}.kit-textbox-input{display:flex;align-items:center;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-textbox-icon{flex-shrink:0;display:block;margin-right:8px;width:16px;height:16px;fill:var(--ui-kit-color-grey-10)}.kit-textbox-state-icon{flex-shrink:0;display:block;margin-left:12px;width:14px;height:14px}.kit-textbox .k-input{padding:0;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;opacity:1;box-shadow:none;border:none}.kit-textbox .k-input-inner{padding:0;width:100%;line-height:1}.kit-textbox .k-input-inner::placeholder{color:var(--ui-kit-color-grey-14)}.kit-textbox .k-input-prefix,.kit-textbox .k-input-suffix{height:0}.kit-textbox.default .kit-textbox-state-icon{fill:var(--ui-kit-color-grey-12)}.kit-textbox.default:hover .kit-textbox-input{border-color:var(--ui-kit-color-hover)}.kit-textbox.default:focus-within .kit-textbox-input{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-textbox.warning .kit-textbox-input{border-color:var(--ui-kit-color-orange)}.kit-textbox.warning .kit-textbox-state-icon,.kit-textbox.warning .kit-textbox-icon{fill:var(--ui-kit-color-orange)}.kit-textbox.warning:focus-within .kit-textbox-input{box-shadow:0 0 0 2px var(--ui-kit-color-orange-1)}.kit-textbox.error .kit-textbox-input{border-color:var(--ui-kit-color-red-1)}.kit-textbox.error .kit-textbox-state-icon,.kit-textbox.error .kit-textbox-icon{fill:var(--ui-kit-color-red-1)}.kit-textbox.error:focus-within .kit-textbox-input{box-shadow:0 0 0 2px var(--ui-kit-color-red-2)}.kit-textbox.success .kit-textbox-state-icon{fill:var(--ui-kit-color-green-1)}.kit-textbox.success:hover .kit-textbox-input{border-color:var(--ui-kit-color-green-1)}.kit-textbox.success:focus-within .kit-textbox-input{border-color:var(--ui-kit-color-green-1);box-shadow:0 0 0 2px var(--ui-kit-color-green-2)}.kit-textbox.disabled .k-input{color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-13)}.kit-textbox.disabled .kit-textbox-input{border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-textbox.disabled .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-textbox.disabled .kit-textbox-icon{fill:var(--ui-kit-color-grey-12)}.kit-textbox.disabled:hover .kit-textbox-input{border-color:var(--ui-kit-color-grey-11)}\n"] }]
|
|
776
777
|
}], propDecorators: { placeholder: [{
|
|
777
778
|
type: Input
|
|
778
779
|
}], label: [{
|
|
@@ -981,6 +982,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
981
982
|
|
|
982
983
|
const DROPDOWN_POPUP_CLASS = 'kit-dropdown-popup';
|
|
983
984
|
const DROPDOWN_POPUP_DEFAULT_ITEM_CLASS = 'kit-dropdown-popup-default-item';
|
|
985
|
+
var KitDropdownSize;
|
|
986
|
+
(function (KitDropdownSize) {
|
|
987
|
+
KitDropdownSize["DEFAULT"] = "default";
|
|
988
|
+
KitDropdownSize["SMALL"] = "small";
|
|
989
|
+
})(KitDropdownSize || (KitDropdownSize = {}));
|
|
990
|
+
|
|
984
991
|
function buildPopupClass(hideDefaultItem) {
|
|
985
992
|
if (hideDefaultItem) {
|
|
986
993
|
return DROPDOWN_POPUP_CLASS;
|
|
@@ -1013,6 +1020,10 @@ class KitDropdownComponent {
|
|
|
1013
1020
|
* Defines the icon which going to be the icon for the dropdown toggle button
|
|
1014
1021
|
*/
|
|
1015
1022
|
this.toggleIcon = KitSvgIcon.CHEVRON_DOWN;
|
|
1023
|
+
/**
|
|
1024
|
+
* Defines the size of the dropdown
|
|
1025
|
+
*/
|
|
1026
|
+
this.size = input(KitDropdownSize.DEFAULT);
|
|
1016
1027
|
/**
|
|
1017
1028
|
* occurs once an item in the dropdown is selected
|
|
1018
1029
|
*/
|
|
@@ -1080,11 +1091,11 @@ class KitDropdownComponent {
|
|
|
1080
1091
|
};
|
|
1081
1092
|
}
|
|
1082
1093
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1083
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitDropdownComponent, selector: "kit-dropdown", inputs: { items: "items", selectedItem: "selectedItem", label: "label", disabled: "disabled", messageIcon: "messageIcon", messageText: "messageText", invalid: "invalid", defaultItem: "defaultItem", listHeight: "listHeight", hideDefaultItem: "hideDefaultItem", toggleIcon: "toggleIcon" }, outputs: { selected: "selected" }, providers: [{
|
|
1094
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitDropdownComponent, selector: "kit-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, selectedItem: { classPropertyName: "selectedItem", publicName: "selectedItem", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: false, isRequired: false, transformFunction: null }, messageText: { classPropertyName: "messageText", publicName: "messageText", isSignal: false, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: false, isRequired: false, transformFunction: null }, defaultItem: { classPropertyName: "defaultItem", publicName: "defaultItem", isSignal: false, isRequired: false, transformFunction: null }, listHeight: { classPropertyName: "listHeight", publicName: "listHeight", isSignal: false, isRequired: false, transformFunction: null }, hideDefaultItem: { classPropertyName: "hideDefaultItem", publicName: "hideDefaultItem", isSignal: false, isRequired: false, transformFunction: null }, toggleIcon: { classPropertyName: "toggleIcon", publicName: "toggleIcon", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, providers: [{
|
|
1084
1095
|
provide: NG_VALUE_ACCESSOR,
|
|
1085
1096
|
useExisting: forwardRef(() => KitDropdownComponent),
|
|
1086
1097
|
multi: true,
|
|
1087
|
-
}], queries: [{ propertyName: "kitDropdownValueTemplate", first: true, predicate: ["kitDropdownValueTemplate"], descendants: true, read: TemplateRef }, { propertyName: "kitDropdownItemTemplate", first: true, predicate: ["kitDropdownItemTemplate"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"kit-dropdown\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(dropdown)\"\n ></kit-input-label>\n }\n <kendo-dropdownlist #dropdown\n valueField=\"value\"\n textField=\"text\"\n class=\"dropdown\"\n [ngClass]=\"getCssClasses()\"\n [data]=\"items\"\n [valuePrimitive]=\"true\"\n [disabled]=\"disabled\"\n [popupSettings]=\"buildPopupSettings()\"\n [itemDisabled]=\"onItemDisabled()\"\n [defaultItem]=\"defaultItem\"\n [listHeight]=\"listHeight\"\n [(ngModel)]=\"selectedItem\"\n (open)=\"onOpen()\"\n (close)=\"onClose()\"\n (selectionChange)=\"onItemSelect($event)\">\n <ng-template kendoDropDownListValueTemplate\n let-dataItem>\n @if (kitDropdownValueTemplate) {\n <div class=\"value-text\">\n <ng-container *ngTemplateOutlet=\"kitDropdownValueTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </div>\n } @else {\n <span class=\"value-text\">{{ dataItem?.text }}</span>\n }\n <kit-svg-icon class=\"value-icon\"\n [icon]=\"toggleIcon\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoDropDownListItemTemplate\n let-dataItem>\n @if (kitDropdownItemTemplate) {\n <ng-container *ngTemplateOutlet=\"kitDropdownItemTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n } @else {\n <span class=\"option-text\">{{ dataItem?.text }}</span>\n <kit-svg-icon class=\"option-icon\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </ng-template>\n </kendo-dropdownlist>\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-dropdown .label{display:block;margin-bottom:4px}.kit-dropdown .k-input-value-text{display:flex;align-items:center;height:100%;font-size:14px;font-weight:400;color:var(--ui-kit-color-grey-12)}.kit-dropdown .k-input-button{display:none}.kit-dropdown .
|
|
1098
|
+
}], queries: [{ propertyName: "kitDropdownValueTemplate", first: true, predicate: ["kitDropdownValueTemplate"], descendants: true, read: TemplateRef }, { propertyName: "kitDropdownItemTemplate", first: true, predicate: ["kitDropdownItemTemplate"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"kit-dropdown {{ size() }}\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(dropdown)\"\n ></kit-input-label>\n }\n <kendo-dropdownlist #dropdown\n valueField=\"value\"\n textField=\"text\"\n class=\"dropdown\"\n [ngClass]=\"getCssClasses()\"\n [data]=\"items\"\n [valuePrimitive]=\"true\"\n [disabled]=\"disabled\"\n [popupSettings]=\"buildPopupSettings()\"\n [itemDisabled]=\"onItemDisabled()\"\n [defaultItem]=\"defaultItem\"\n [listHeight]=\"listHeight\"\n [(ngModel)]=\"selectedItem\"\n (open)=\"onOpen()\"\n (close)=\"onClose()\"\n (selectionChange)=\"onItemSelect($event)\">\n <ng-template kendoDropDownListValueTemplate\n let-dataItem>\n @if (kitDropdownValueTemplate) {\n <div class=\"value-text\">\n <ng-container *ngTemplateOutlet=\"kitDropdownValueTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </div>\n } @else {\n <span class=\"value-text\">{{ dataItem?.text }}</span>\n }\n <kit-svg-icon class=\"value-icon\"\n [icon]=\"toggleIcon\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoDropDownListItemTemplate\n let-dataItem>\n @if (kitDropdownItemTemplate) {\n <ng-container *ngTemplateOutlet=\"kitDropdownItemTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n } @else {\n <span class=\"option-text\">{{ dataItem?.text }}</span>\n <kit-svg-icon class=\"option-icon\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </ng-template>\n </kendo-dropdownlist>\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-dropdown.default .dropdown{height:40px;border-radius:8px}.kit-dropdown.default .k-input-inner{padding:0 12px}.kit-dropdown.small .dropdown{height:32px;border-radius:4px}.kit-dropdown.small .k-input-inner{padding:0 8px}.kit-dropdown .label{display:block;margin-bottom:4px}.kit-dropdown .k-input-value-text{display:flex;align-items:center;height:100%;font-size:14px;font-weight:400;color:var(--ui-kit-color-grey-12)}.kit-dropdown .k-input-button{display:none}.kit-dropdown .dropdown{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-dropdown .dropdown:hover{border-color:var(--ui-kit-color-hover)}.kit-dropdown .dropdown.k-focus{box-shadow:none}.kit-dropdown .dropdown.has-value .k-input-value-text{color:var(--ui-kit-color-grey-10)}.kit-dropdown .dropdown.expanded .value-icon{transform:rotate(180deg)}.kit-dropdown .dropdown .value{display:flex;align-items:center}.kit-dropdown .dropdown .value-text{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-dropdown .dropdown .value-icon{display:block;margin-left:auto;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-dropdown:focus-within .dropdown{border:1px solid var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-dropdown.disabled .dropdown{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown.disabled .k-input-value-text,.kit-dropdown.disabled .has-value .k-input-value-text{color:var(--ui-kit-color-grey-12)}.kit-dropdown.disabled .value-icon{stroke:var(--ui-kit-color-grey-12)}.kit-dropdown.invalid .dropdown{border-color:var(--ui-kit-color-red-1)}.kit-dropdown.invalid .value-icon{stroke:var(--ui-kit-color-red-1)}.kit-dropdown-popup.k-popup{margin-top:10px;padding:4px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-dropdown-popup.k-popup.kit-dropdown-popup-default-item .k-list-optionlabel{display:flex}.kit-dropdown-popup.k-popup .k-list-optionlabel{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel,.kit-dropdown-popup.k-popup .k-list-item{padding:6px 12px;background-color:var(--ui-kit-color-white);font-size:14px;font-weight:400;box-shadow:none;border-radius:4px;color:var(--ui-kit-color-grey-10)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-list-optionlabel:before,.kit-dropdown-popup.k-popup .k-list-item.k-list-optionlabel:before{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel:hover,.kit-dropdown-popup.k-popup .k-list-optionlabel.k-focus:hover,.kit-dropdown-popup.k-popup .k-list-item:hover,.kit-dropdown-popup.k-popup .k-list-item.k-focus:hover{color:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel .option-icon,.kit-dropdown-popup.k-popup .k-list-item .option-icon{flex-shrink:0;display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected,.kit-dropdown-popup.k-popup .k-list-item.k-selected{display:flex;align-items:center;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-text,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-text{flex:1}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-icon,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-icon{display:block}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-disabled,.kit-dropdown-popup.k-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}\n"], dependencies: [{ kind: "component", type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: i1$4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i1$4.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { 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: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1088
1099
|
}
|
|
1089
1100
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitDropdownComponent, decorators: [{
|
|
1090
1101
|
type: Component,
|
|
@@ -1092,7 +1103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
1092
1103
|
provide: NG_VALUE_ACCESSOR,
|
|
1093
1104
|
useExisting: forwardRef(() => KitDropdownComponent),
|
|
1094
1105
|
multi: true,
|
|
1095
|
-
}], template: "<div class=\"kit-dropdown\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(dropdown)\"\n ></kit-input-label>\n }\n <kendo-dropdownlist #dropdown\n valueField=\"value\"\n textField=\"text\"\n class=\"dropdown\"\n [ngClass]=\"getCssClasses()\"\n [data]=\"items\"\n [valuePrimitive]=\"true\"\n [disabled]=\"disabled\"\n [popupSettings]=\"buildPopupSettings()\"\n [itemDisabled]=\"onItemDisabled()\"\n [defaultItem]=\"defaultItem\"\n [listHeight]=\"listHeight\"\n [(ngModel)]=\"selectedItem\"\n (open)=\"onOpen()\"\n (close)=\"onClose()\"\n (selectionChange)=\"onItemSelect($event)\">\n <ng-template kendoDropDownListValueTemplate\n let-dataItem>\n @if (kitDropdownValueTemplate) {\n <div class=\"value-text\">\n <ng-container *ngTemplateOutlet=\"kitDropdownValueTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </div>\n } @else {\n <span class=\"value-text\">{{ dataItem?.text }}</span>\n }\n <kit-svg-icon class=\"value-icon\"\n [icon]=\"toggleIcon\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoDropDownListItemTemplate\n let-dataItem>\n @if (kitDropdownItemTemplate) {\n <ng-container *ngTemplateOutlet=\"kitDropdownItemTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n } @else {\n <span class=\"option-text\">{{ dataItem?.text }}</span>\n <kit-svg-icon class=\"option-icon\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </ng-template>\n </kendo-dropdownlist>\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-dropdown .label{display:block;margin-bottom:4px}.kit-dropdown .k-input-value-text{display:flex;align-items:center;height:100%;font-size:14px;font-weight:400;color:var(--ui-kit-color-grey-12)}.kit-dropdown .k-input-button{display:none}.kit-dropdown .
|
|
1106
|
+
}], template: "<div class=\"kit-dropdown {{ size() }}\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(dropdown)\"\n ></kit-input-label>\n }\n <kendo-dropdownlist #dropdown\n valueField=\"value\"\n textField=\"text\"\n class=\"dropdown\"\n [ngClass]=\"getCssClasses()\"\n [data]=\"items\"\n [valuePrimitive]=\"true\"\n [disabled]=\"disabled\"\n [popupSettings]=\"buildPopupSettings()\"\n [itemDisabled]=\"onItemDisabled()\"\n [defaultItem]=\"defaultItem\"\n [listHeight]=\"listHeight\"\n [(ngModel)]=\"selectedItem\"\n (open)=\"onOpen()\"\n (close)=\"onClose()\"\n (selectionChange)=\"onItemSelect($event)\">\n <ng-template kendoDropDownListValueTemplate\n let-dataItem>\n @if (kitDropdownValueTemplate) {\n <div class=\"value-text\">\n <ng-container *ngTemplateOutlet=\"kitDropdownValueTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </div>\n } @else {\n <span class=\"value-text\">{{ dataItem?.text }}</span>\n }\n <kit-svg-icon class=\"value-icon\"\n [icon]=\"toggleIcon\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoDropDownListItemTemplate\n let-dataItem>\n @if (kitDropdownItemTemplate) {\n <ng-container *ngTemplateOutlet=\"kitDropdownItemTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n } @else {\n <span class=\"option-text\">{{ dataItem?.text }}</span>\n <kit-svg-icon class=\"option-icon\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </ng-template>\n </kendo-dropdownlist>\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-dropdown.default .dropdown{height:40px;border-radius:8px}.kit-dropdown.default .k-input-inner{padding:0 12px}.kit-dropdown.small .dropdown{height:32px;border-radius:4px}.kit-dropdown.small .k-input-inner{padding:0 8px}.kit-dropdown .label{display:block;margin-bottom:4px}.kit-dropdown .k-input-value-text{display:flex;align-items:center;height:100%;font-size:14px;font-weight:400;color:var(--ui-kit-color-grey-12)}.kit-dropdown .k-input-button{display:none}.kit-dropdown .dropdown{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-dropdown .dropdown:hover{border-color:var(--ui-kit-color-hover)}.kit-dropdown .dropdown.k-focus{box-shadow:none}.kit-dropdown .dropdown.has-value .k-input-value-text{color:var(--ui-kit-color-grey-10)}.kit-dropdown .dropdown.expanded .value-icon{transform:rotate(180deg)}.kit-dropdown .dropdown .value{display:flex;align-items:center}.kit-dropdown .dropdown .value-text{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-dropdown .dropdown .value-icon{display:block;margin-left:auto;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-dropdown:focus-within .dropdown{border:1px solid var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-dropdown.disabled .dropdown{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown.disabled .k-input-value-text,.kit-dropdown.disabled .has-value .k-input-value-text{color:var(--ui-kit-color-grey-12)}.kit-dropdown.disabled .value-icon{stroke:var(--ui-kit-color-grey-12)}.kit-dropdown.invalid .dropdown{border-color:var(--ui-kit-color-red-1)}.kit-dropdown.invalid .value-icon{stroke:var(--ui-kit-color-red-1)}.kit-dropdown-popup.k-popup{margin-top:10px;padding:4px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-dropdown-popup.k-popup.kit-dropdown-popup-default-item .k-list-optionlabel{display:flex}.kit-dropdown-popup.k-popup .k-list-optionlabel{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel,.kit-dropdown-popup.k-popup .k-list-item{padding:6px 12px;background-color:var(--ui-kit-color-white);font-size:14px;font-weight:400;box-shadow:none;border-radius:4px;color:var(--ui-kit-color-grey-10)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-list-optionlabel:before,.kit-dropdown-popup.k-popup .k-list-item.k-list-optionlabel:before{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel:hover,.kit-dropdown-popup.k-popup .k-list-optionlabel.k-focus:hover,.kit-dropdown-popup.k-popup .k-list-item:hover,.kit-dropdown-popup.k-popup .k-list-item.k-focus:hover{color:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel .option-icon,.kit-dropdown-popup.k-popup .k-list-item .option-icon{flex-shrink:0;display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected,.kit-dropdown-popup.k-popup .k-list-item.k-selected{display:flex;align-items:center;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-text,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-text{flex:1}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-icon,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-icon{display:block}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-disabled,.kit-dropdown-popup.k-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}\n"] }]
|
|
1096
1107
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { items: [{
|
|
1097
1108
|
type: Input
|
|
1098
1109
|
}], selectedItem: [{
|
|
@@ -1400,11 +1411,11 @@ class KitTextLabelComponent {
|
|
|
1400
1411
|
this.state = KitTextLabelState.REGULAR;
|
|
1401
1412
|
}
|
|
1402
1413
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitTextLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1403
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitTextLabelComponent, selector: "kit-text-label", inputs: { label: "label", value: "value", htmlMode: "htmlMode", noValueMessage: "noValueMessage", messageText: "messageText", state: "state" }, ngImport: i0, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n @if (value) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n @if (!value) {\n <kit-input-label class=\"label\"\n [text]=\"noValueMessage || label\"\n ></kit-input-label>\n }\n\n <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n <ng-template #htmlModeTemplate>\n <div class=\"value\" [innerHTML]=\"value\"></div>\n </ng-template>\n <kit-input-message *ngIf=\"messageText && value\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-grey-15: #f0f0f0;--ui-kit-color-grey-16: #ececf8;--ui-kit-color-grey-17: #878787;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-green-4: #e0f2ed;--ui-kit-color-green-5: #e5ffe5;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-red-3: #f9e9ea;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-teal-1: #d8edf3;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-orange-2: #ff7a00;--ui-kit-color-orange-3: #fbecde;--ui-kit-color-orange-4: #fff6e4;--ui-kit-color-pink: #cd1159;--ui-kit-color-pink-1: #fae7ee;--ui-kit-color-purple: #7673ce;--ui-kit-color-purple-1: #e7e7f6;--ui-kit-color-blue: #1677ff;--ui-kit-color-blue-1: #e4eeff}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .label{display:block;margin-bottom:4px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1414
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitTextLabelComponent, selector: "kit-text-label", inputs: { label: "label", value: "value", htmlMode: "htmlMode", noValueMessage: "noValueMessage", messageText: "messageText", state: "state" }, ngImport: i0, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n @if (value) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n @if (!value) {\n <kit-input-label class=\"label\"\n [text]=\"noValueMessage || label\"\n ></kit-input-label>\n }\n\n <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n <ng-template #htmlModeTemplate>\n <div class=\"value\" [innerHTML]=\"value\"></div>\n </ng-template>\n <kit-input-message *ngIf=\"messageText && value\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-grey-15: #f0f0f0;--ui-kit-color-grey-16: #ececf8;--ui-kit-color-grey-17: #878787;--ui-kit-color-grey-18: #727684;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-green-4: #e0f2ed;--ui-kit-color-green-5: #e5ffe5;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-red-3: #f9e9ea;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-teal-1: #d8edf3;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-orange-2: #ff7a00;--ui-kit-color-orange-3: #fbecde;--ui-kit-color-orange-4: #fff6e4;--ui-kit-color-pink: #cd1159;--ui-kit-color-pink-1: #fae7ee;--ui-kit-color-purple: #7673ce;--ui-kit-color-purple-1: #e7e7f6;--ui-kit-color-blue: #1677ff;--ui-kit-color-blue-1: #e4eeff}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .label{display:block;margin-bottom:4px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1404
1415
|
}
|
|
1405
1416
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitTextLabelComponent, decorators: [{
|
|
1406
1417
|
type: Component,
|
|
1407
|
-
args: [{ selector: 'kit-text-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n @if (value) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n @if (!value) {\n <kit-input-label class=\"label\"\n [text]=\"noValueMessage || label\"\n ></kit-input-label>\n }\n\n <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n <ng-template #htmlModeTemplate>\n <div class=\"value\" [innerHTML]=\"value\"></div>\n </ng-template>\n <kit-input-message *ngIf=\"messageText && value\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-grey-15: #f0f0f0;--ui-kit-color-grey-16: #ececf8;--ui-kit-color-grey-17: #878787;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-green-4: #e0f2ed;--ui-kit-color-green-5: #e5ffe5;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-red-3: #f9e9ea;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-teal-1: #d8edf3;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-orange-2: #ff7a00;--ui-kit-color-orange-3: #fbecde;--ui-kit-color-orange-4: #fff6e4;--ui-kit-color-pink: #cd1159;--ui-kit-color-pink-1: #fae7ee;--ui-kit-color-purple: #7673ce;--ui-kit-color-purple-1: #e7e7f6;--ui-kit-color-blue: #1677ff;--ui-kit-color-blue-1: #e4eeff}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .label{display:block;margin-bottom:4px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"] }]
|
|
1418
|
+
args: [{ selector: 'kit-text-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n @if (value) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n @if (!value) {\n <kit-input-label class=\"label\"\n [text]=\"noValueMessage || label\"\n ></kit-input-label>\n }\n\n <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n <ng-template #htmlModeTemplate>\n <div class=\"value\" [innerHTML]=\"value\"></div>\n </ng-template>\n <kit-input-message *ngIf=\"messageText && value\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-grey-15: #f0f0f0;--ui-kit-color-grey-16: #ececf8;--ui-kit-color-grey-17: #878787;--ui-kit-color-grey-18: #727684;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-green-4: #e0f2ed;--ui-kit-color-green-5: #e5ffe5;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-red-3: #f9e9ea;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-teal-1: #d8edf3;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-orange-2: #ff7a00;--ui-kit-color-orange-3: #fbecde;--ui-kit-color-orange-4: #fff6e4;--ui-kit-color-pink: #cd1159;--ui-kit-color-pink-1: #fae7ee;--ui-kit-color-purple: #7673ce;--ui-kit-color-purple-1: #e7e7f6;--ui-kit-color-blue: #1677ff;--ui-kit-color-blue-1: #e4eeff}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .label{display:block;margin-bottom:4px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"] }]
|
|
1408
1419
|
}], propDecorators: { label: [{
|
|
1409
1420
|
type: Input
|
|
1410
1421
|
}], value: [{
|
|
@@ -2948,7 +2959,7 @@ class KitCtaPanelConfirmationComponent {
|
|
|
2948
2959
|
this.confirmClicked.emit(this.form.value);
|
|
2949
2960
|
}
|
|
2950
2961
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitCtaPanelConfirmationComponent, deps: [{ token: i1$5.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2951
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: KitCtaPanelConfirmationComponent, selector: "kit-cta-panel-confirmation", inputs: { data: "data", confirmButtonDisabled: "confirmButtonDisabled", dropdownListHeight: "dropdownListHeight", quitText: "quitText", confirmText: "confirmText" }, outputs: { quitClicked: "quitClicked", confirmClicked: "confirmClicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-confirmation\">\n <div class=\"confirmation-head\">\n <kit-svg-icon *ngIf=\"data?.icon\" class=\"head-icon\"\n [icon]=\"data?.icon\"\n ></kit-svg-icon>\n <div class=\"head-text\">\n <div class=\"head-title\">{{ data?.title }}</div>\n <div *ngIf=\"data?.description\" class=\"head-description\">\n {{ data?.description }}\n </div>\n </div>\n </div>\n <div class=\"confirmation-main\">\n <form [formGroup]=\"form\" class=\"confirmation-main-form\">\n <kit-dropdown *ngIf=\"data?.dropdownItems\"\n formControlName=\"reason\"\n [defaultItem]=\"data?.defaultDropdownItem\"\n [label]=\"data?.dropdownLabel\"\n [items]=\"data?.dropdownItems\"\n [listHeight]=\"dropdownListHeight\"\n ></kit-dropdown>\n\n <kit-checkbox *ngIf=\"data?.checkboxLabel\"\n formControlName=\"checkbox\"\n [label]=\"data?.checkboxLabel\"\n ></kit-checkbox>\n </form>\n </div>\n <kit-cta-panel-action [disabled]=\"data?.dropdownItems && form.invalid\"\n [quitText]=\"quitText\"\n [confirmText]=\"confirmText\"\n (quitClicked)=\"quitClicked.emit()\"\n (confirmClicked)=\"onConfirmButtonClick()\"\n ></kit-cta-panel-action>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-cta-panel-confirmation{padding:15px 20px;border:2px solid #00b0ad;background:#f8f9fe;line-height:1.26}.kit-cta-panel-confirmation .confirmation-head{display:flex;margin-bottom:24px}.kit-cta-panel-confirmation .head-icon{width:24px;height:24px;margin-right:20px;flex-shrink:0;stroke:#00b0ad;fill:none}.kit-cta-panel-confirmation .head-icon .reset-icon{stroke:none;fill:#00b0ad}.kit-cta-panel-confirmation .head-title{color:#002a3a;font-weight:700}.kit-cta-panel-confirmation .head-description{margin-top:24px;color:#000}.kit-cta-panel-confirmation .confirmation-main{margin-bottom:24px}.kit-cta-panel-confirmation .confirmation-main-form{display:flex;flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon"], outputs: ["selected"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: KitCtaPanelActionComponent, selector: "kit-cta-panel-action", inputs: ["disabled", "confirmText", "quitText"], outputs: ["quitClicked", "confirmClicked"] }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText"], outputs: ["changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2962
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: KitCtaPanelConfirmationComponent, selector: "kit-cta-panel-confirmation", inputs: { data: "data", confirmButtonDisabled: "confirmButtonDisabled", dropdownListHeight: "dropdownListHeight", quitText: "quitText", confirmText: "confirmText" }, outputs: { quitClicked: "quitClicked", confirmClicked: "confirmClicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-confirmation\">\n <div class=\"confirmation-head\">\n <kit-svg-icon *ngIf=\"data?.icon\" class=\"head-icon\"\n [icon]=\"data?.icon\"\n ></kit-svg-icon>\n <div class=\"head-text\">\n <div class=\"head-title\">{{ data?.title }}</div>\n <div *ngIf=\"data?.description\" class=\"head-description\">\n {{ data?.description }}\n </div>\n </div>\n </div>\n <div class=\"confirmation-main\">\n <form [formGroup]=\"form\" class=\"confirmation-main-form\">\n <kit-dropdown *ngIf=\"data?.dropdownItems\"\n formControlName=\"reason\"\n [defaultItem]=\"data?.defaultDropdownItem\"\n [label]=\"data?.dropdownLabel\"\n [items]=\"data?.dropdownItems\"\n [listHeight]=\"dropdownListHeight\"\n ></kit-dropdown>\n\n <kit-checkbox *ngIf=\"data?.checkboxLabel\"\n formControlName=\"checkbox\"\n [label]=\"data?.checkboxLabel\"\n ></kit-checkbox>\n </form>\n </div>\n <kit-cta-panel-action [disabled]=\"data?.dropdownItems && form.invalid\"\n [quitText]=\"quitText\"\n [confirmText]=\"confirmText\"\n (quitClicked)=\"quitClicked.emit()\"\n (confirmClicked)=\"onConfirmButtonClick()\"\n ></kit-cta-panel-action>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-cta-panel-confirmation{padding:15px 20px;border:2px solid #00b0ad;background:#f8f9fe;line-height:1.26}.kit-cta-panel-confirmation .confirmation-head{display:flex;margin-bottom:24px}.kit-cta-panel-confirmation .head-icon{width:24px;height:24px;margin-right:20px;flex-shrink:0;stroke:#00b0ad;fill:none}.kit-cta-panel-confirmation .head-icon .reset-icon{stroke:none;fill:#00b0ad}.kit-cta-panel-confirmation .head-title{color:#002a3a;font-weight:700}.kit-cta-panel-confirmation .head-description{margin-top:24px;color:#000}.kit-cta-panel-confirmation .confirmation-main{margin-bottom:24px}.kit-cta-panel-confirmation .confirmation-main-form{display:flex;flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "size"], outputs: ["selected"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: KitCtaPanelActionComponent, selector: "kit-cta-panel-action", inputs: ["disabled", "confirmText", "quitText"], outputs: ["quitClicked", "confirmClicked"] }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText"], outputs: ["changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2952
2963
|
}
|
|
2953
2964
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitCtaPanelConfirmationComponent, decorators: [{
|
|
2954
2965
|
type: Component,
|
|
@@ -4933,17 +4944,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
4933
4944
|
args: [KitGridCellTemplateDirective, { read: TemplateRef }]
|
|
4934
4945
|
}] } });
|
|
4935
4946
|
|
|
4936
|
-
var KitGridSortDirection;
|
|
4937
|
-
(function (KitGridSortDirection) {
|
|
4938
|
-
KitGridSortDirection["ASC"] = "asc";
|
|
4939
|
-
KitGridSortDirection["DESC"] = "desc";
|
|
4940
|
-
})(KitGridSortDirection || (KitGridSortDirection = {}));
|
|
4941
|
-
var KitGridSortSettingsMode;
|
|
4942
|
-
(function (KitGridSortSettingsMode) {
|
|
4943
|
-
KitGridSortSettingsMode["SINGLE"] = "single";
|
|
4944
|
-
KitGridSortSettingsMode["MULTIPLE"] = "multiple";
|
|
4945
|
-
})(KitGridSortSettingsMode || (KitGridSortSettingsMode = {}));
|
|
4946
|
-
|
|
4947
4947
|
class KitGridDetailTemplateDirective {
|
|
4948
4948
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitGridDetailTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4949
4949
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: KitGridDetailTemplateDirective, isStandalone: true, selector: "[kitGridDetailTemplate]", ngImport: i0 }); }
|
|
@@ -4956,6 +4956,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
4956
4956
|
}]
|
|
4957
4957
|
}] });
|
|
4958
4958
|
|
|
4959
|
+
var KitSortDirection;
|
|
4960
|
+
(function (KitSortDirection) {
|
|
4961
|
+
KitSortDirection["ASC"] = "asc";
|
|
4962
|
+
KitSortDirection["DESC"] = "desc";
|
|
4963
|
+
})(KitSortDirection || (KitSortDirection = {}));
|
|
4964
|
+
var KitFilterLogic;
|
|
4965
|
+
(function (KitFilterLogic) {
|
|
4966
|
+
KitFilterLogic["AND"] = "and";
|
|
4967
|
+
KitFilterLogic["OR"] = "or";
|
|
4968
|
+
})(KitFilterLogic || (KitFilterLogic = {}));
|
|
4969
|
+
var KitFilterOperator;
|
|
4970
|
+
(function (KitFilterOperator) {
|
|
4971
|
+
KitFilterOperator["EQ"] = "eq";
|
|
4972
|
+
KitFilterOperator["NEQ"] = "neq";
|
|
4973
|
+
KitFilterOperator["IS_NULL"] = "isnull";
|
|
4974
|
+
KitFilterOperator["IS_NOT_NULL"] = "isnotnull";
|
|
4975
|
+
KitFilterOperator["LT"] = "lt";
|
|
4976
|
+
KitFilterOperator["LTE"] = "lte";
|
|
4977
|
+
KitFilterOperator["GT"] = "gt";
|
|
4978
|
+
KitFilterOperator["GTE"] = "gte";
|
|
4979
|
+
KitFilterOperator["STARTS_WITH"] = "startswith";
|
|
4980
|
+
KitFilterOperator["ENDS_WITH"] = "endswith";
|
|
4981
|
+
KitFilterOperator["CONTAINS"] = "contains";
|
|
4982
|
+
KitFilterOperator["DOES_NOT_CONTAIN"] = "doesnotcontain";
|
|
4983
|
+
KitFilterOperator["IS_EMPTY"] = "isempty";
|
|
4984
|
+
KitFilterOperator["IS_NOT_EMPTY"] = "isnotempty";
|
|
4985
|
+
})(KitFilterOperator || (KitFilterOperator = {}));
|
|
4986
|
+
|
|
4959
4987
|
class KitGridComponent {
|
|
4960
4988
|
constructor() {
|
|
4961
4989
|
/**
|
|
@@ -4983,8 +5011,8 @@ class KitGridComponent {
|
|
|
4983
5011
|
*/
|
|
4984
5012
|
this.detailTemplateShowIf = () => false;
|
|
4985
5013
|
/**
|
|
4986
|
-
|
|
4987
|
-
|
|
5014
|
+
* Function to determine if the caret of detail template should be disabled
|
|
5015
|
+
*/
|
|
4988
5016
|
this.detailTemplateExpandDisableIf = () => false;
|
|
4989
5017
|
/**
|
|
4990
5018
|
* Flag to show or hide the footer row
|
|
@@ -5020,8 +5048,8 @@ class KitGridComponent {
|
|
|
5020
5048
|
this.cellClicked = new EventEmitter();
|
|
5021
5049
|
this.kitGridDetailTemplate = null;
|
|
5022
5050
|
this.columns = contentChildren(KitGridColumnComponent);
|
|
5023
|
-
this.
|
|
5024
|
-
this.
|
|
5051
|
+
this.kitSvgIcon = KitSvgIcon;
|
|
5052
|
+
this.kitSortDirection = KitSortDirection;
|
|
5025
5053
|
this.expandedRows = [];
|
|
5026
5054
|
this.getCssRowClass = (context) => {
|
|
5027
5055
|
const expanded = this.expandedRows.includes(context.dataItem);
|
|
@@ -5074,11 +5102,11 @@ class KitGridComponent {
|
|
|
5074
5102
|
this.expandedRows = [];
|
|
5075
5103
|
}
|
|
5076
5104
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5077
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitGridComponent, selector: "kit-grid", inputs: { data: "data", gridDataBinding: "gridDataBinding", sortable: "sortable", sort: "sort", pageable: "pageable", pageSize: "pageSize", skip: "skip", loading: "loading", detailTemplateShowIf: "detailTemplateShowIf", detailTemplateExpandDisableIf: "detailTemplateExpandDisableIf", showFooter: "showFooter", footerTitle: "footerTitle", footerData: "footerData" }, outputs: { pageChanged: "pageChanged", sortChanged: "sortChanged", dataStateChanged: "dataStateChanged", detailExpanded: "detailExpanded", detailCollapsed: "detailCollapsed", cellClicked: "cellClicked" }, queries: [{ propertyName: "columns", predicate: KitGridColumnComponent, isSignal: true }, { propertyName: "kitGridDetailTemplate", first: true, predicate: KitGridDetailTemplateDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (data) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [data]=\"data\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (sortChange)=\"onSortChange($event)\"\n (pageChange)=\"onPageChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n </kendo-grid>\n}\n\n@if (gridDataBinding) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [kendoGridBinding]=\"gridDataBinding\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (pageChange)=\"onPageChange($event)\"\n (sortChange)=\"onSortChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n </kendo-grid>\n}\n\n<ng-template #columnHeaderTemplate let-column>\n <div class=\"grid-title\"\n [class.sortable]=\"isColumnSortable(column)\">\n @if (column.titleIcon) {\n <kit-svg-icon class=\"grid-title-icon\"\n [icon]=\"column.titleIcon\"\n [ngClass]=\"column.titleIconType\"\n ></kit-svg-icon>\n }\n\n <div class=\"grid-title-text\">\n {{ column.title }}\n </div>\n\n @if (sortable && column.sortable) {\n @switch (getSortingDirection(column.field)) {\n @case (KitGridSortDirection.ASC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"KitSvgIcon.SORT_ASCENDING\"\n ></kit-svg-icon>\n }\n @case (KitGridSortDirection.DESC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"KitSvgIcon.SORT_DESCENDING\"\n ></kit-svg-icon>\n }\n }\n }\n </div>\n</ng-template>\n\n<ng-template #footerTemplate let-column>\n @if (columns()) {\n @if (footerTitle && column === columns()[0]) {\n {{ footerTitle }}\n }\n @else {\n {{ footerData?.[column.field] || '' }}\n }\n }\n</ng-template>\n", styles: [".kit-grid{border:none;background:none}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-footer{padding:0!important}.kit-grid ::ng-deep .k-grid-content{overflow-y:auto}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar{height:4px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-15)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-cell-inner .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th .k-sort-order{margin-left:2px;color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px;background:var(--ui-kit-color-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-pager{margin:20px 0;justify-content:flex-start}.kit-grid ::ng-deep .k-detail-row .k-grid-norecords{text-align:left}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:before{content:\"\\e005\";color:var(--ui-kit-color-grey-12);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:0;border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-nav{width:32px;height:32px;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-nav:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-nav:after{opacity:0}.kit-grid ::ng-deep .k-pager-nav.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-nav.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager .k-pager-first,.kit-grid ::ng-deep .k-pager .k-pager-last{display:none}.kit-grid ::ng-deep .k-pager .k-button-icon{font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-left:before{content:\"\\e016\"}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-right:before{content:\"\\e014\"}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.6}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i2$3.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "directive", type: i2$3.ExpandDetailsDirective, selector: "[kendoGridExpandDetailsBy]", inputs: ["kendoGridExpandDetailsBy", "expandDetailBy", "expandedDetailKeys", "initiallyExpanded"], outputs: ["expandedDetailKeysChange"], exportAs: ["kendoGridExpandDetailsBy"] }, { kind: "component", type: i2$3.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i2$3.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { kind: "directive", type: i2$3.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "directive", type: i2$3.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i2$3.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5105
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitGridComponent, selector: "kit-grid", inputs: { data: "data", gridDataBinding: "gridDataBinding", sortable: "sortable", sort: "sort", pageable: "pageable", pageSize: "pageSize", skip: "skip", loading: "loading", detailTemplateShowIf: "detailTemplateShowIf", detailTemplateExpandDisableIf: "detailTemplateExpandDisableIf", showFooter: "showFooter", footerTitle: "footerTitle", footerData: "footerData" }, outputs: { pageChanged: "pageChanged", sortChanged: "sortChanged", dataStateChanged: "dataStateChanged", detailExpanded: "detailExpanded", detailCollapsed: "detailCollapsed", cellClicked: "cellClicked" }, queries: [{ propertyName: "columns", predicate: KitGridColumnComponent, isSignal: true }, { propertyName: "kitGridDetailTemplate", first: true, predicate: KitGridDetailTemplateDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (data) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [data]=\"data\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (sortChange)=\"onSortChange($event)\"\n (pageChange)=\"onPageChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n </kendo-grid>\n}\n\n@if (gridDataBinding) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [kendoGridBinding]=\"gridDataBinding\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (pageChange)=\"onPageChange($event)\"\n (sortChange)=\"onSortChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n </kendo-grid>\n}\n\n<ng-template #columnHeaderTemplate let-column>\n <div class=\"grid-title\"\n [class.sortable]=\"isColumnSortable(column)\">\n @if (column.titleIcon) {\n <kit-svg-icon class=\"grid-title-icon\"\n [icon]=\"column.titleIcon\"\n [ngClass]=\"column.titleIconType\"\n ></kit-svg-icon>\n }\n\n <div class=\"grid-title-text\">\n {{ column.title }}\n </div>\n\n @if (sortable && column.sortable) {\n @switch (getSortingDirection(column.field)) {\n @case (kitSortDirection.ASC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_ASCENDING\"\n ></kit-svg-icon>\n }\n @case (kitSortDirection.DESC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_DESCENDING\"\n ></kit-svg-icon>\n }\n }\n }\n </div>\n</ng-template>\n\n<ng-template #footerTemplate let-column>\n @if (columns()) {\n @if (footerTitle && column === columns()[0]) {\n {{ footerTitle }}\n }\n @else {\n {{ footerData?.[column.field] || '' }}\n }\n }\n</ng-template>\n", styles: [".kit-grid{border:none;background:none}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-footer{padding:0!important}.kit-grid ::ng-deep .k-grid-content{overflow-y:auto}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar{height:8px;width:8px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-12);border-radius:4px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-18)}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-15)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-cell-inner .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th .k-sort-order{margin-left:2px;color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px;background:var(--ui-kit-color-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-pager{margin:20px 0;justify-content:flex-start}.kit-grid ::ng-deep .k-detail-row .k-grid-norecords{text-align:left}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:before{content:\"\\e005\";color:var(--ui-kit-color-grey-12);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:0;border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-nav{width:32px;height:32px;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-nav:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-nav:after{opacity:0}.kit-grid ::ng-deep .k-pager-nav.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-nav.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager .k-pager-first,.kit-grid ::ng-deep .k-pager .k-pager-last{display:none}.kit-grid ::ng-deep .k-pager .k-button-icon{font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-left:before{content:\"\\e016\"}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-right:before{content:\"\\e014\"}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.6}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i2$3.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "directive", type: i2$3.ExpandDetailsDirective, selector: "[kendoGridExpandDetailsBy]", inputs: ["kendoGridExpandDetailsBy", "expandDetailBy", "expandedDetailKeys", "initiallyExpanded"], outputs: ["expandedDetailKeysChange"], exportAs: ["kendoGridExpandDetailsBy"] }, { kind: "component", type: i2$3.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i2$3.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { kind: "directive", type: i2$3.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "directive", type: i2$3.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i2$3.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5078
5106
|
}
|
|
5079
5107
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitGridComponent, decorators: [{
|
|
5080
5108
|
type: Component,
|
|
5081
|
-
args: [{ selector: 'kit-grid', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (data) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [data]=\"data\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (sortChange)=\"onSortChange($event)\"\n (pageChange)=\"onPageChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n </kendo-grid>\n}\n\n@if (gridDataBinding) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [kendoGridBinding]=\"gridDataBinding\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (pageChange)=\"onPageChange($event)\"\n (sortChange)=\"onSortChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n </kendo-grid>\n}\n\n<ng-template #columnHeaderTemplate let-column>\n <div class=\"grid-title\"\n [class.sortable]=\"isColumnSortable(column)\">\n @if (column.titleIcon) {\n <kit-svg-icon class=\"grid-title-icon\"\n [icon]=\"column.titleIcon\"\n [ngClass]=\"column.titleIconType\"\n ></kit-svg-icon>\n }\n\n <div class=\"grid-title-text\">\n {{ column.title }}\n </div>\n\n @if (sortable && column.sortable) {\n @switch (getSortingDirection(column.field)) {\n @case (KitGridSortDirection.ASC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"KitSvgIcon.SORT_ASCENDING\"\n ></kit-svg-icon>\n }\n @case (KitGridSortDirection.DESC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"KitSvgIcon.SORT_DESCENDING\"\n ></kit-svg-icon>\n }\n }\n }\n </div>\n</ng-template>\n\n<ng-template #footerTemplate let-column>\n @if (columns()) {\n @if (footerTitle && column === columns()[0]) {\n {{ footerTitle }}\n }\n @else {\n {{ footerData?.[column.field] || '' }}\n }\n }\n</ng-template>\n", styles: [".kit-grid{border:none;background:none}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-footer{padding:0!important}.kit-grid ::ng-deep .k-grid-content{overflow-y:auto}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar{height:4px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-15)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-cell-inner .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th .k-sort-order{margin-left:2px;color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px;background:var(--ui-kit-color-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-pager{margin:20px 0;justify-content:flex-start}.kit-grid ::ng-deep .k-detail-row .k-grid-norecords{text-align:left}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:before{content:\"\\e005\";color:var(--ui-kit-color-grey-12);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:0;border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-nav{width:32px;height:32px;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-nav:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-nav:after{opacity:0}.kit-grid ::ng-deep .k-pager-nav.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-nav.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager .k-pager-first,.kit-grid ::ng-deep .k-pager .k-pager-last{display:none}.kit-grid ::ng-deep .k-pager .k-button-icon{font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-left:before{content:\"\\e016\"}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-right:before{content:\"\\e014\"}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.6}\n"] }]
|
|
5109
|
+
args: [{ selector: 'kit-grid', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (data) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [data]=\"data\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (sortChange)=\"onSortChange($event)\"\n (pageChange)=\"onPageChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n </kendo-grid>\n}\n\n@if (gridDataBinding) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [kendoGridBinding]=\"gridDataBinding\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (pageChange)=\"onPageChange($event)\"\n (sortChange)=\"onSortChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n </kendo-grid>\n}\n\n<ng-template #columnHeaderTemplate let-column>\n <div class=\"grid-title\"\n [class.sortable]=\"isColumnSortable(column)\">\n @if (column.titleIcon) {\n <kit-svg-icon class=\"grid-title-icon\"\n [icon]=\"column.titleIcon\"\n [ngClass]=\"column.titleIconType\"\n ></kit-svg-icon>\n }\n\n <div class=\"grid-title-text\">\n {{ column.title }}\n </div>\n\n @if (sortable && column.sortable) {\n @switch (getSortingDirection(column.field)) {\n @case (kitSortDirection.ASC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_ASCENDING\"\n ></kit-svg-icon>\n }\n @case (kitSortDirection.DESC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_DESCENDING\"\n ></kit-svg-icon>\n }\n }\n }\n </div>\n</ng-template>\n\n<ng-template #footerTemplate let-column>\n @if (columns()) {\n @if (footerTitle && column === columns()[0]) {\n {{ footerTitle }}\n }\n @else {\n {{ footerData?.[column.field] || '' }}\n }\n }\n</ng-template>\n", styles: [".kit-grid{border:none;background:none}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-footer{padding:0!important}.kit-grid ::ng-deep .k-grid-content{overflow-y:auto}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar{height:8px;width:8px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-12);border-radius:4px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-18)}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-15)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-cell-inner .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th .k-sort-order{margin-left:2px;color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px;background:var(--ui-kit-color-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-pager{margin:20px 0;justify-content:flex-start}.kit-grid ::ng-deep .k-detail-row .k-grid-norecords{text-align:left}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:before{content:\"\\e005\";color:var(--ui-kit-color-grey-12);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:0;border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-nav{width:32px;height:32px;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-nav:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-nav:after{opacity:0}.kit-grid ::ng-deep .k-pager-nav.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-nav.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager .k-pager-first,.kit-grid ::ng-deep .k-pager .k-pager-last{display:none}.kit-grid ::ng-deep .k-pager .k-button-icon{font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-left:before{content:\"\\e016\"}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-right:before{content:\"\\e014\"}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.6}\n"] }]
|
|
5082
5110
|
}], propDecorators: { data: [{
|
|
5083
5111
|
type: Input
|
|
5084
5112
|
}], gridDataBinding: [{
|
|
@@ -5160,6 +5188,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
5160
5188
|
}]
|
|
5161
5189
|
}] });
|
|
5162
5190
|
|
|
5191
|
+
var KitGridSortSettingsMode;
|
|
5192
|
+
(function (KitGridSortSettingsMode) {
|
|
5193
|
+
KitGridSortSettingsMode["SINGLE"] = "single";
|
|
5194
|
+
KitGridSortSettingsMode["MULTIPLE"] = "multiple";
|
|
5195
|
+
})(KitGridSortSettingsMode || (KitGridSortSettingsMode = {}));
|
|
5196
|
+
|
|
5163
5197
|
class KitTileLayoutItemComponent {
|
|
5164
5198
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitTileLayoutItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5165
5199
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: KitTileLayoutItemComponent, selector: "kit-tilelayout-item", viewQueries: [{ propertyName: "template", first: true, predicate: ["itemTemplate"], descendants: true, static: true }], ngImport: i0, template: '<ng-template #itemTemplate><ng-content></ng-content></ng-template>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
@@ -5422,7 +5456,7 @@ class KitTimelineCardComponent {
|
|
|
5422
5456
|
this.kitTooltipPosition = KitTooltipPosition;
|
|
5423
5457
|
}
|
|
5424
5458
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitTimelineCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5425
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitTimelineCardComponent, isStandalone: true, selector: "kit-timeline-card", inputs: { item: "item" }, ngImport: i0, template: "@if (item) {\n <div class=\"kit-timeline-card {{ item.theme }}-theme\">\n <div class=\"card-header\">\n @if (item.icon) {\n <div class=\"card-icon-wrapper\">\n <kit-svg-icon class=\"card-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item.iconType ?? kitSvgIconType.FILL\"\n ></kit-svg-icon>\n </div>\n }\n <div class=\"card-info\">\n <div class=\"card-info-top\">\n <div class=\"card-title\">{{ item.title }}</div>\n @if (item?.textBadge) {\n <div class=\"card-badge text-badge\">{{ item.textBadge }}</div>\n }\n @if (item?.countBadge) {\n <div class=\"card-badge count-badge\">{{ item.countBadge }}</div>\n }\n </div>\n <div class=\"card-info-bottom\">{{ item.subTitle }}</div>\n </div>\n </div>\n @if (item?.transportationType) {\n <div class=\"card-main\">\n <div class=\"card-route\"\n [ngClass]=\"item.transportationType\">\n <div kitTooltip\n kitTooltipFilter=\".card-route-item\"\n class=\"card-route-item card-route-original\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"item?.originalPort\">\n {{ item?.originalPort }}\n </div>\n <kit-svg-icon class=\"card-route-icon\"\n [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n <div kitTooltip\n kitTooltipFilter=\".card-route-item\"\n class=\"card-route-item card-route-destination\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"item?.destinationPort\">\n {{ item?.destinationPort }}\n </div>\n <div class=\"card-route-label\">by</div>\n <div kitTooltip\n kitTooltipFilter=\".card-route-item\"\n class=\"card-route-item card-route-type\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"item?.transitMode\">\n {{ item?.transitMode }}\n </div>\n </div>\n </div>\n }\n <div class=\"card-footer\">\n @for (date of item.date; track date) {\n <div class=\"card-date\">\n <div class=\"card-date-top\">\n <kit-svg-icon class=\"card-date-icon\"\n [icon]=\"kitSvgIcon.CALENDAR\"\n ></kit-svg-icon>\n <div class=\"card-date-label\">{{ date.label }}</div>\n </div>\n <div class=\"card-date-value\">{{ date.value }}</div>\n </div>\n }\n </div>\n </div>\n}\n", styles: [".kit-timeline-card{display:flex;flex-direction:column;gap:15px;padding:25px;width:323px;color:var(--ui-kit-color-grey-10);border-radius:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);box-sizing:border-box}.kit-timeline-card.success-theme,.kit-timeline-card.warning-theme,.kit-timeline-card.danger-theme{border-width:2px}.kit-timeline-card.success-theme{border-color:var(--ui-kit-color-green-1)}.kit-timeline-card.warning-theme{border-color:var(--ui-kit-color-orange)}.kit-timeline-card.danger-theme{border-color:var(--ui-kit-color-red-1)}.kit-timeline-card .card-header{display:flex;align-items:center;gap:12px}.kit-timeline-card .card-icon{display:block;width:18px;height:18px}.kit-timeline-card .card-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-card .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-card .card-icon-wrapper{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%}.kit-timeline-card .card-info{flex:1}.kit-timeline-card .card-info-top{display:flex;align-items:center}.kit-timeline-card .card-info-bottom{font-size:14px;font-weight:400;line-height:20px}.kit-timeline-card .card-title{flex:1;font-size:16px;font-weight:600;line-height:22px}.kit-timeline-card .card-badge{display:flex;align-items:center;justify-content:center;padding:0 8px;font-size:12px;font-weight:500}.kit-timeline-card .text-badge{height:20px;border:1px solid;border-radius:4px}.kit-timeline-card .count-badge{height:24px;color:var(--ui-kit-color-white);border-radius:16px}.kit-timeline-card .card-route{display:flex;align-items:center;padding-bottom:7px}.kit-timeline-card .card-route-item{padding:0 8px;height:20px;font-size:12px;font-weight:500;line-height:20px;border-radius:4px;border:1px solid;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kit-timeline-card .card-route-icon{display:block;margin:0 3px;width:16px;height:16px;stroke:var(--ui-kit-color-grey-14);fill:none}.kit-timeline-card .card-route-original,.kit-timeline-card .card-route-destination{color:var(--ui-kit-color-grey-14);border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-white)}.kit-timeline-card .card-route-label{margin:0 7px;color:var(--ui-kit-color-grey-14);font-size:13px;font-weight:400}.kit-timeline-card .card-route-type{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-16)}.kit-timeline-card .card-footer{display:grid;grid-template-columns:1fr auto;gap:12px;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-timeline-card .card-date{display:flex;flex-direction:column;gap:3px;font-size:14px;font-weight:500;line-height:20px}.kit-timeline-card .card-date-top{display:flex;align-items:center;gap:3px}.kit-timeline-card .card-date-label{color:var(--ui-kit-color-grey-14);font-size:12px;font-weight:500}.kit-timeline-card .card-date-icon{display:block;width:18px;height:18px;stroke:none;fill:var(--ui-kit-color-grey-12)}.kit-timeline-card .card-date-value{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:600;line-height:20px}.kit-timeline-card.purple-theme .card-icon.fill{fill:var(--ui-kit-color-purple);stroke:none}.kit-timeline-card.purple-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-purple)}.kit-timeline-card.purple-theme .card-icon-wrapper{background:var(--ui-kit-color-purple-1)}.kit-timeline-card.purple-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-purple)}.kit-timeline-card.purple-theme .text-badge{color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-timeline-card.purple-theme .count-badge{background:var(--ui-kit-color-purple)}.kit-timeline-card.purple-theme .card-route.departure .card-route-original,.kit-timeline-card.purple-theme .card-route.arrival .card-route-destination,.kit-timeline-card.purple-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-timeline-card.green-theme .card-icon.fill{fill:var(--ui-kit-color-green-3);stroke:none}.kit-timeline-card.green-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-green-3)}.kit-timeline-card.green-theme .card-icon-wrapper{background:var(--ui-kit-color-green-4)}.kit-timeline-card.green-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-green-3)}.kit-timeline-card.green-theme .text-badge{color:var(--ui-kit-color-green-3);background:var(--ui-kit-color-green-4)}.kit-timeline-card.green-theme .count-badge{background:var(--ui-kit-color-green-3)}.kit-timeline-card.green-theme .card-route.departure .card-route-original,.kit-timeline-card.green-theme .card-route.arrival .card-route-destination,.kit-timeline-card.green-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-green-3);border-color:var(--ui-kit-color-green-3);background:var(--ui-kit-color-green-4)}.kit-timeline-card.blue-theme .card-icon.fill{fill:var(--ui-kit-color-blue);stroke:none}.kit-timeline-card.blue-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-blue)}.kit-timeline-card.blue-theme .card-icon-wrapper{background:var(--ui-kit-color-blue-1)}.kit-timeline-card.blue-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-blue)}.kit-timeline-card.blue-theme .text-badge{color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-timeline-card.blue-theme .count-badge{background:var(--ui-kit-color-blue)}.kit-timeline-card.blue-theme .card-route.departure .card-route-original,.kit-timeline-card.blue-theme .card-route.arrival .card-route-destination,.kit-timeline-card.blue-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-timeline-card.grey-theme .card-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-timeline-card.grey-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-10)}.kit-timeline-card.grey-theme .card-icon-wrapper{background:var(--ui-kit-color-grey-16)}.kit-timeline-card.grey-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-grey-10)}.kit-timeline-card.grey-theme .text-badge{color:var(--ui-kit-color-grey-10);background:var(--ui-kit-color-grey-16)}.kit-timeline-card.grey-theme .count-badge{background:var(--ui-kit-color-grey-10)}.kit-timeline-card.grey-theme .card-route.departure .card-route-original,.kit-timeline-card.grey-theme .card-route.arrival .card-route-destination,.kit-timeline-card.grey-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-10);background:var(--ui-kit-color-grey-16)}.kit-timeline-card.teal-theme .card-icon.fill{fill:var(--ui-kit-color-teal);stroke:none}.kit-timeline-card.teal-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-teal)}.kit-timeline-card.teal-theme .card-icon-wrapper{background:var(--ui-kit-color-teal-1)}.kit-timeline-card.teal-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-teal)}.kit-timeline-card.teal-theme .text-badge{color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-timeline-card.teal-theme .count-badge{background:var(--ui-kit-color-teal)}.kit-timeline-card.teal-theme .card-route.departure .card-route-original,.kit-timeline-card.teal-theme .card-route.arrival .card-route-destination,.kit-timeline-card.teal-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-timeline-card.pink-theme .card-icon.fill{fill:var(--ui-kit-color-pink);stroke:none}.kit-timeline-card.pink-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-pink)}.kit-timeline-card.pink-theme .card-icon-wrapper{background:var(--ui-kit-color-pink-1)}.kit-timeline-card.pink-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-pink)}.kit-timeline-card.pink-theme .text-badge{color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-timeline-card.pink-theme .count-badge{background:var(--ui-kit-color-pink)}.kit-timeline-card.pink-theme .card-route.departure .card-route-original,.kit-timeline-card.pink-theme .card-route.arrival .card-route-destination,.kit-timeline-card.pink-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-timeline-card.success-theme .card-icon.fill{fill:var(--ui-kit-color-green-1);stroke:none}.kit-timeline-card.success-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-green-1)}.kit-timeline-card.success-theme .card-icon-wrapper{background:var(--ui-kit-color-green-5)}.kit-timeline-card.success-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-green-1)}.kit-timeline-card.success-theme .text-badge{color:var(--ui-kit-color-green-1);background:var(--ui-kit-color-green-5)}.kit-timeline-card.success-theme .count-badge{background:var(--ui-kit-color-green-1)}.kit-timeline-card.success-theme .card-route.departure .card-route-original,.kit-timeline-card.success-theme .card-route.arrival .card-route-destination,.kit-timeline-card.success-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background:var(--ui-kit-color-green-5)}.kit-timeline-card.warning-theme .card-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}.kit-timeline-card.warning-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-orange)}.kit-timeline-card.warning-theme .card-icon-wrapper{background:var(--ui-kit-color-orange-4)}.kit-timeline-card.warning-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-orange)}.kit-timeline-card.warning-theme .text-badge{color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-4)}.kit-timeline-card.warning-theme .count-badge{background:var(--ui-kit-color-orange)}.kit-timeline-card.warning-theme .card-route.departure .card-route-original,.kit-timeline-card.warning-theme .card-route.arrival .card-route-destination,.kit-timeline-card.warning-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-4)}.kit-timeline-card.danger-theme .card-icon.fill{fill:var(--ui-kit-color-red-1);stroke:none}.kit-timeline-card.danger-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-red-1)}.kit-timeline-card.danger-theme .card-icon-wrapper{background:var(--ui-kit-color-red-3)}.kit-timeline-card.danger-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-red-1)}.kit-timeline-card.danger-theme .text-badge{color:var(--ui-kit-color-red-1);background:var(--ui-kit-color-red-3)}.kit-timeline-card.danger-theme .count-badge{background:var(--ui-kit-color-red-1)}.kit-timeline-card.danger-theme .card-route.departure .card-route-original,.kit-timeline-card.danger-theme .card-route.arrival .card-route-destination,.kit-timeline-card.danger-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-red-1);border-color:var(--ui-kit-color-red-1);background:var(--ui-kit-color-red-3)}\n"], dependencies: [{ 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: "ngmodule", type: KitTooltipModule }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5459
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitTimelineCardComponent, isStandalone: true, selector: "kit-timeline-card", inputs: { item: "item" }, ngImport: i0, template: "@if (item) {\n <div class=\"kit-timeline-card {{ item.theme }}-theme\">\n <div class=\"card-header\">\n @if (item.icon) {\n <div class=\"card-icon-wrapper\">\n <kit-svg-icon class=\"card-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item.iconType ?? kitSvgIconType.FILL\"\n ></kit-svg-icon>\n </div>\n }\n <div class=\"card-info\">\n <div class=\"card-info-top\">\n <div class=\"card-title\">{{ item.title }}</div>\n @if (item?.textBadge) {\n <div class=\"card-badge text-badge\">{{ item.textBadge }}</div>\n }\n @if (item?.countBadge) {\n <div class=\"card-badge count-badge\">{{ item.countBadge }}</div>\n }\n </div>\n <div class=\"card-info-bottom\">{{ item.subTitle }}</div>\n </div>\n </div>\n @if (item?.transportationType) {\n <div class=\"card-main\">\n <div class=\"card-route\"\n [ngClass]=\"item.transportationType\">\n <div kitTooltip\n kitTooltipFilter=\".card-route-item\"\n class=\"card-route-item card-route-original\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"item?.originalPort\">\n {{ item?.originalPort }}\n </div>\n <kit-svg-icon class=\"card-route-icon\"\n [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n <div kitTooltip\n kitTooltipFilter=\".card-route-item\"\n class=\"card-route-item card-route-destination\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"item?.destinationPort\">\n {{ item?.destinationPort }}\n </div>\n <div class=\"card-route-label\">by</div>\n <div kitTooltip\n kitTooltipFilter=\".card-route-item\"\n class=\"card-route-item card-route-type\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"item?.transitMode\">\n {{ item?.transitMode }}\n </div>\n </div>\n </div>\n }\n <div class=\"card-footer\">\n @for (date of item.date; track $index) {\n <div class=\"card-date\">\n <div class=\"card-date-top\">\n <kit-svg-icon class=\"card-date-icon\"\n [icon]=\"kitSvgIcon.CALENDAR\"\n ></kit-svg-icon>\n <div class=\"card-date-label\">{{ date.label }}</div>\n </div>\n <div class=\"card-date-value\">{{ date.value }}</div>\n </div>\n }\n </div>\n </div>\n}\n", styles: [".kit-timeline-card{display:flex;flex-direction:column;gap:15px;padding:25px;width:323px;color:var(--ui-kit-color-grey-10);border-radius:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);box-sizing:border-box}.kit-timeline-card.success-theme,.kit-timeline-card.warning-theme,.kit-timeline-card.danger-theme{border-width:2px}.kit-timeline-card.success-theme{border-color:var(--ui-kit-color-green-1)}.kit-timeline-card.warning-theme{border-color:var(--ui-kit-color-orange)}.kit-timeline-card.danger-theme{border-color:var(--ui-kit-color-red-1)}.kit-timeline-card .card-header{display:flex;align-items:center;gap:12px}.kit-timeline-card .card-icon{display:block;width:18px;height:18px}.kit-timeline-card .card-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-card .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-card .card-icon-wrapper{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%}.kit-timeline-card .card-info{flex:1}.kit-timeline-card .card-info-top{display:flex;align-items:center}.kit-timeline-card .card-info-bottom{font-size:14px;font-weight:400;line-height:20px}.kit-timeline-card .card-title{flex:1;font-size:16px;font-weight:600;line-height:22px}.kit-timeline-card .card-badge{display:flex;align-items:center;justify-content:center;padding:0 8px;font-size:12px;font-weight:500}.kit-timeline-card .text-badge{height:20px;border:1px solid;border-radius:4px}.kit-timeline-card .count-badge{height:24px;color:var(--ui-kit-color-white);border-radius:16px}.kit-timeline-card .card-route{display:flex;align-items:center;padding-bottom:7px}.kit-timeline-card .card-route-item{padding:0 8px;height:20px;font-size:12px;font-weight:500;line-height:20px;border-radius:4px;border:1px solid;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kit-timeline-card .card-route-icon{display:block;margin:0 3px;width:16px;height:16px;stroke:var(--ui-kit-color-grey-14);fill:none}.kit-timeline-card .card-route-original,.kit-timeline-card .card-route-destination{color:var(--ui-kit-color-grey-14);border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-white)}.kit-timeline-card .card-route-label{margin:0 7px;color:var(--ui-kit-color-grey-14);font-size:13px;font-weight:400}.kit-timeline-card .card-route-type{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-16)}.kit-timeline-card .card-footer{display:grid;grid-template-columns:1fr auto;gap:12px;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-timeline-card .card-date{display:flex;flex-direction:column;gap:3px;font-size:14px;font-weight:500;line-height:20px}.kit-timeline-card .card-date-top{display:flex;align-items:center;gap:3px}.kit-timeline-card .card-date-label{color:var(--ui-kit-color-grey-14);font-size:12px;font-weight:500}.kit-timeline-card .card-date-icon{display:block;width:18px;height:18px;stroke:none;fill:var(--ui-kit-color-grey-12)}.kit-timeline-card .card-date-value{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:600;line-height:20px}.kit-timeline-card.purple-theme .card-icon.fill{fill:var(--ui-kit-color-purple);stroke:none}.kit-timeline-card.purple-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-purple)}.kit-timeline-card.purple-theme .card-icon-wrapper{background:var(--ui-kit-color-purple-1)}.kit-timeline-card.purple-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-purple)}.kit-timeline-card.purple-theme .text-badge{color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-timeline-card.purple-theme .count-badge{background:var(--ui-kit-color-purple)}.kit-timeline-card.purple-theme .card-route.departure .card-route-original,.kit-timeline-card.purple-theme .card-route.arrival .card-route-destination,.kit-timeline-card.purple-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-timeline-card.green-theme .card-icon.fill{fill:var(--ui-kit-color-green-3);stroke:none}.kit-timeline-card.green-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-green-3)}.kit-timeline-card.green-theme .card-icon-wrapper{background:var(--ui-kit-color-green-4)}.kit-timeline-card.green-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-green-3)}.kit-timeline-card.green-theme .text-badge{color:var(--ui-kit-color-green-3);background:var(--ui-kit-color-green-4)}.kit-timeline-card.green-theme .count-badge{background:var(--ui-kit-color-green-3)}.kit-timeline-card.green-theme .card-route.departure .card-route-original,.kit-timeline-card.green-theme .card-route.arrival .card-route-destination,.kit-timeline-card.green-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-green-3);border-color:var(--ui-kit-color-green-3);background:var(--ui-kit-color-green-4)}.kit-timeline-card.blue-theme .card-icon.fill{fill:var(--ui-kit-color-blue);stroke:none}.kit-timeline-card.blue-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-blue)}.kit-timeline-card.blue-theme .card-icon-wrapper{background:var(--ui-kit-color-blue-1)}.kit-timeline-card.blue-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-blue)}.kit-timeline-card.blue-theme .text-badge{color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-timeline-card.blue-theme .count-badge{background:var(--ui-kit-color-blue)}.kit-timeline-card.blue-theme .card-route.departure .card-route-original,.kit-timeline-card.blue-theme .card-route.arrival .card-route-destination,.kit-timeline-card.blue-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-timeline-card.grey-theme .card-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-timeline-card.grey-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-10)}.kit-timeline-card.grey-theme .card-icon-wrapper{background:var(--ui-kit-color-grey-16)}.kit-timeline-card.grey-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-grey-10)}.kit-timeline-card.grey-theme .text-badge{color:var(--ui-kit-color-grey-10);background:var(--ui-kit-color-grey-16)}.kit-timeline-card.grey-theme .count-badge{background:var(--ui-kit-color-grey-10)}.kit-timeline-card.grey-theme .card-route.departure .card-route-original,.kit-timeline-card.grey-theme .card-route.arrival .card-route-destination,.kit-timeline-card.grey-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-10);background:var(--ui-kit-color-grey-16)}.kit-timeline-card.teal-theme .card-icon.fill{fill:var(--ui-kit-color-teal);stroke:none}.kit-timeline-card.teal-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-teal)}.kit-timeline-card.teal-theme .card-icon-wrapper{background:var(--ui-kit-color-teal-1)}.kit-timeline-card.teal-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-teal)}.kit-timeline-card.teal-theme .text-badge{color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-timeline-card.teal-theme .count-badge{background:var(--ui-kit-color-teal)}.kit-timeline-card.teal-theme .card-route.departure .card-route-original,.kit-timeline-card.teal-theme .card-route.arrival .card-route-destination,.kit-timeline-card.teal-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-timeline-card.pink-theme .card-icon.fill{fill:var(--ui-kit-color-pink);stroke:none}.kit-timeline-card.pink-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-pink)}.kit-timeline-card.pink-theme .card-icon-wrapper{background:var(--ui-kit-color-pink-1)}.kit-timeline-card.pink-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-pink)}.kit-timeline-card.pink-theme .text-badge{color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-timeline-card.pink-theme .count-badge{background:var(--ui-kit-color-pink)}.kit-timeline-card.pink-theme .card-route.departure .card-route-original,.kit-timeline-card.pink-theme .card-route.arrival .card-route-destination,.kit-timeline-card.pink-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-timeline-card.success-theme .card-icon.fill{fill:var(--ui-kit-color-green-1);stroke:none}.kit-timeline-card.success-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-green-1)}.kit-timeline-card.success-theme .card-icon-wrapper{background:var(--ui-kit-color-green-5)}.kit-timeline-card.success-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-green-1)}.kit-timeline-card.success-theme .text-badge{color:var(--ui-kit-color-green-1);background:var(--ui-kit-color-green-5)}.kit-timeline-card.success-theme .count-badge{background:var(--ui-kit-color-green-1)}.kit-timeline-card.success-theme .card-route.departure .card-route-original,.kit-timeline-card.success-theme .card-route.arrival .card-route-destination,.kit-timeline-card.success-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background:var(--ui-kit-color-green-5)}.kit-timeline-card.warning-theme .card-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}.kit-timeline-card.warning-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-orange)}.kit-timeline-card.warning-theme .card-icon-wrapper{background:var(--ui-kit-color-orange-4)}.kit-timeline-card.warning-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-orange)}.kit-timeline-card.warning-theme .text-badge{color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-4)}.kit-timeline-card.warning-theme .count-badge{background:var(--ui-kit-color-orange)}.kit-timeline-card.warning-theme .card-route.departure .card-route-original,.kit-timeline-card.warning-theme .card-route.arrival .card-route-destination,.kit-timeline-card.warning-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-4)}.kit-timeline-card.danger-theme .card-icon.fill{fill:var(--ui-kit-color-red-1);stroke:none}.kit-timeline-card.danger-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-red-1)}.kit-timeline-card.danger-theme .card-icon-wrapper{background:var(--ui-kit-color-red-3)}.kit-timeline-card.danger-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-red-1)}.kit-timeline-card.danger-theme .text-badge{color:var(--ui-kit-color-red-1);background:var(--ui-kit-color-red-3)}.kit-timeline-card.danger-theme .count-badge{background:var(--ui-kit-color-red-1)}.kit-timeline-card.danger-theme .card-route.departure .card-route-original,.kit-timeline-card.danger-theme .card-route.arrival .card-route-destination,.kit-timeline-card.danger-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-red-1);border-color:var(--ui-kit-color-red-1);background:var(--ui-kit-color-red-3)}\n"], dependencies: [{ 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: "ngmodule", type: KitTooltipModule }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5426
5460
|
}
|
|
5427
5461
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitTimelineCardComponent, decorators: [{
|
|
5428
5462
|
type: Component,
|
|
@@ -5430,7 +5464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
5430
5464
|
KitSvgIconModule,
|
|
5431
5465
|
NgClass,
|
|
5432
5466
|
KitTooltipModule,
|
|
5433
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (item) {\n <div class=\"kit-timeline-card {{ item.theme }}-theme\">\n <div class=\"card-header\">\n @if (item.icon) {\n <div class=\"card-icon-wrapper\">\n <kit-svg-icon class=\"card-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item.iconType ?? kitSvgIconType.FILL\"\n ></kit-svg-icon>\n </div>\n }\n <div class=\"card-info\">\n <div class=\"card-info-top\">\n <div class=\"card-title\">{{ item.title }}</div>\n @if (item?.textBadge) {\n <div class=\"card-badge text-badge\">{{ item.textBadge }}</div>\n }\n @if (item?.countBadge) {\n <div class=\"card-badge count-badge\">{{ item.countBadge }}</div>\n }\n </div>\n <div class=\"card-info-bottom\">{{ item.subTitle }}</div>\n </div>\n </div>\n @if (item?.transportationType) {\n <div class=\"card-main\">\n <div class=\"card-route\"\n [ngClass]=\"item.transportationType\">\n <div kitTooltip\n kitTooltipFilter=\".card-route-item\"\n class=\"card-route-item card-route-original\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"item?.originalPort\">\n {{ item?.originalPort }}\n </div>\n <kit-svg-icon class=\"card-route-icon\"\n [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n <div kitTooltip\n kitTooltipFilter=\".card-route-item\"\n class=\"card-route-item card-route-destination\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"item?.destinationPort\">\n {{ item?.destinationPort }}\n </div>\n <div class=\"card-route-label\">by</div>\n <div kitTooltip\n kitTooltipFilter=\".card-route-item\"\n class=\"card-route-item card-route-type\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"item?.transitMode\">\n {{ item?.transitMode }}\n </div>\n </div>\n </div>\n }\n <div class=\"card-footer\">\n @for (date of item.date; track date) {\n <div class=\"card-date\">\n <div class=\"card-date-top\">\n <kit-svg-icon class=\"card-date-icon\"\n [icon]=\"kitSvgIcon.CALENDAR\"\n ></kit-svg-icon>\n <div class=\"card-date-label\">{{ date.label }}</div>\n </div>\n <div class=\"card-date-value\">{{ date.value }}</div>\n </div>\n }\n </div>\n </div>\n}\n", styles: [".kit-timeline-card{display:flex;flex-direction:column;gap:15px;padding:25px;width:323px;color:var(--ui-kit-color-grey-10);border-radius:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);box-sizing:border-box}.kit-timeline-card.success-theme,.kit-timeline-card.warning-theme,.kit-timeline-card.danger-theme{border-width:2px}.kit-timeline-card.success-theme{border-color:var(--ui-kit-color-green-1)}.kit-timeline-card.warning-theme{border-color:var(--ui-kit-color-orange)}.kit-timeline-card.danger-theme{border-color:var(--ui-kit-color-red-1)}.kit-timeline-card .card-header{display:flex;align-items:center;gap:12px}.kit-timeline-card .card-icon{display:block;width:18px;height:18px}.kit-timeline-card .card-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-card .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-card .card-icon-wrapper{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%}.kit-timeline-card .card-info{flex:1}.kit-timeline-card .card-info-top{display:flex;align-items:center}.kit-timeline-card .card-info-bottom{font-size:14px;font-weight:400;line-height:20px}.kit-timeline-card .card-title{flex:1;font-size:16px;font-weight:600;line-height:22px}.kit-timeline-card .card-badge{display:flex;align-items:center;justify-content:center;padding:0 8px;font-size:12px;font-weight:500}.kit-timeline-card .text-badge{height:20px;border:1px solid;border-radius:4px}.kit-timeline-card .count-badge{height:24px;color:var(--ui-kit-color-white);border-radius:16px}.kit-timeline-card .card-route{display:flex;align-items:center;padding-bottom:7px}.kit-timeline-card .card-route-item{padding:0 8px;height:20px;font-size:12px;font-weight:500;line-height:20px;border-radius:4px;border:1px solid;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kit-timeline-card .card-route-icon{display:block;margin:0 3px;width:16px;height:16px;stroke:var(--ui-kit-color-grey-14);fill:none}.kit-timeline-card .card-route-original,.kit-timeline-card .card-route-destination{color:var(--ui-kit-color-grey-14);border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-white)}.kit-timeline-card .card-route-label{margin:0 7px;color:var(--ui-kit-color-grey-14);font-size:13px;font-weight:400}.kit-timeline-card .card-route-type{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-16)}.kit-timeline-card .card-footer{display:grid;grid-template-columns:1fr auto;gap:12px;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-timeline-card .card-date{display:flex;flex-direction:column;gap:3px;font-size:14px;font-weight:500;line-height:20px}.kit-timeline-card .card-date-top{display:flex;align-items:center;gap:3px}.kit-timeline-card .card-date-label{color:var(--ui-kit-color-grey-14);font-size:12px;font-weight:500}.kit-timeline-card .card-date-icon{display:block;width:18px;height:18px;stroke:none;fill:var(--ui-kit-color-grey-12)}.kit-timeline-card .card-date-value{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:600;line-height:20px}.kit-timeline-card.purple-theme .card-icon.fill{fill:var(--ui-kit-color-purple);stroke:none}.kit-timeline-card.purple-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-purple)}.kit-timeline-card.purple-theme .card-icon-wrapper{background:var(--ui-kit-color-purple-1)}.kit-timeline-card.purple-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-purple)}.kit-timeline-card.purple-theme .text-badge{color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-timeline-card.purple-theme .count-badge{background:var(--ui-kit-color-purple)}.kit-timeline-card.purple-theme .card-route.departure .card-route-original,.kit-timeline-card.purple-theme .card-route.arrival .card-route-destination,.kit-timeline-card.purple-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-timeline-card.green-theme .card-icon.fill{fill:var(--ui-kit-color-green-3);stroke:none}.kit-timeline-card.green-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-green-3)}.kit-timeline-card.green-theme .card-icon-wrapper{background:var(--ui-kit-color-green-4)}.kit-timeline-card.green-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-green-3)}.kit-timeline-card.green-theme .text-badge{color:var(--ui-kit-color-green-3);background:var(--ui-kit-color-green-4)}.kit-timeline-card.green-theme .count-badge{background:var(--ui-kit-color-green-3)}.kit-timeline-card.green-theme .card-route.departure .card-route-original,.kit-timeline-card.green-theme .card-route.arrival .card-route-destination,.kit-timeline-card.green-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-green-3);border-color:var(--ui-kit-color-green-3);background:var(--ui-kit-color-green-4)}.kit-timeline-card.blue-theme .card-icon.fill{fill:var(--ui-kit-color-blue);stroke:none}.kit-timeline-card.blue-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-blue)}.kit-timeline-card.blue-theme .card-icon-wrapper{background:var(--ui-kit-color-blue-1)}.kit-timeline-card.blue-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-blue)}.kit-timeline-card.blue-theme .text-badge{color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-timeline-card.blue-theme .count-badge{background:var(--ui-kit-color-blue)}.kit-timeline-card.blue-theme .card-route.departure .card-route-original,.kit-timeline-card.blue-theme .card-route.arrival .card-route-destination,.kit-timeline-card.blue-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-timeline-card.grey-theme .card-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-timeline-card.grey-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-10)}.kit-timeline-card.grey-theme .card-icon-wrapper{background:var(--ui-kit-color-grey-16)}.kit-timeline-card.grey-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-grey-10)}.kit-timeline-card.grey-theme .text-badge{color:var(--ui-kit-color-grey-10);background:var(--ui-kit-color-grey-16)}.kit-timeline-card.grey-theme .count-badge{background:var(--ui-kit-color-grey-10)}.kit-timeline-card.grey-theme .card-route.departure .card-route-original,.kit-timeline-card.grey-theme .card-route.arrival .card-route-destination,.kit-timeline-card.grey-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-10);background:var(--ui-kit-color-grey-16)}.kit-timeline-card.teal-theme .card-icon.fill{fill:var(--ui-kit-color-teal);stroke:none}.kit-timeline-card.teal-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-teal)}.kit-timeline-card.teal-theme .card-icon-wrapper{background:var(--ui-kit-color-teal-1)}.kit-timeline-card.teal-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-teal)}.kit-timeline-card.teal-theme .text-badge{color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-timeline-card.teal-theme .count-badge{background:var(--ui-kit-color-teal)}.kit-timeline-card.teal-theme .card-route.departure .card-route-original,.kit-timeline-card.teal-theme .card-route.arrival .card-route-destination,.kit-timeline-card.teal-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-timeline-card.pink-theme .card-icon.fill{fill:var(--ui-kit-color-pink);stroke:none}.kit-timeline-card.pink-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-pink)}.kit-timeline-card.pink-theme .card-icon-wrapper{background:var(--ui-kit-color-pink-1)}.kit-timeline-card.pink-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-pink)}.kit-timeline-card.pink-theme .text-badge{color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-timeline-card.pink-theme .count-badge{background:var(--ui-kit-color-pink)}.kit-timeline-card.pink-theme .card-route.departure .card-route-original,.kit-timeline-card.pink-theme .card-route.arrival .card-route-destination,.kit-timeline-card.pink-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-timeline-card.success-theme .card-icon.fill{fill:var(--ui-kit-color-green-1);stroke:none}.kit-timeline-card.success-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-green-1)}.kit-timeline-card.success-theme .card-icon-wrapper{background:var(--ui-kit-color-green-5)}.kit-timeline-card.success-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-green-1)}.kit-timeline-card.success-theme .text-badge{color:var(--ui-kit-color-green-1);background:var(--ui-kit-color-green-5)}.kit-timeline-card.success-theme .count-badge{background:var(--ui-kit-color-green-1)}.kit-timeline-card.success-theme .card-route.departure .card-route-original,.kit-timeline-card.success-theme .card-route.arrival .card-route-destination,.kit-timeline-card.success-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background:var(--ui-kit-color-green-5)}.kit-timeline-card.warning-theme .card-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}.kit-timeline-card.warning-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-orange)}.kit-timeline-card.warning-theme .card-icon-wrapper{background:var(--ui-kit-color-orange-4)}.kit-timeline-card.warning-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-orange)}.kit-timeline-card.warning-theme .text-badge{color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-4)}.kit-timeline-card.warning-theme .count-badge{background:var(--ui-kit-color-orange)}.kit-timeline-card.warning-theme .card-route.departure .card-route-original,.kit-timeline-card.warning-theme .card-route.arrival .card-route-destination,.kit-timeline-card.warning-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-4)}.kit-timeline-card.danger-theme .card-icon.fill{fill:var(--ui-kit-color-red-1);stroke:none}.kit-timeline-card.danger-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-red-1)}.kit-timeline-card.danger-theme .card-icon-wrapper{background:var(--ui-kit-color-red-3)}.kit-timeline-card.danger-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-red-1)}.kit-timeline-card.danger-theme .text-badge{color:var(--ui-kit-color-red-1);background:var(--ui-kit-color-red-3)}.kit-timeline-card.danger-theme .count-badge{background:var(--ui-kit-color-red-1)}.kit-timeline-card.danger-theme .card-route.departure .card-route-original,.kit-timeline-card.danger-theme .card-route.arrival .card-route-destination,.kit-timeline-card.danger-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-red-1);border-color:var(--ui-kit-color-red-1);background:var(--ui-kit-color-red-3)}\n"] }]
|
|
5467
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (item) {\n <div class=\"kit-timeline-card {{ item.theme }}-theme\">\n <div class=\"card-header\">\n @if (item.icon) {\n <div class=\"card-icon-wrapper\">\n <kit-svg-icon class=\"card-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item.iconType ?? kitSvgIconType.FILL\"\n ></kit-svg-icon>\n </div>\n }\n <div class=\"card-info\">\n <div class=\"card-info-top\">\n <div class=\"card-title\">{{ item.title }}</div>\n @if (item?.textBadge) {\n <div class=\"card-badge text-badge\">{{ item.textBadge }}</div>\n }\n @if (item?.countBadge) {\n <div class=\"card-badge count-badge\">{{ item.countBadge }}</div>\n }\n </div>\n <div class=\"card-info-bottom\">{{ item.subTitle }}</div>\n </div>\n </div>\n @if (item?.transportationType) {\n <div class=\"card-main\">\n <div class=\"card-route\"\n [ngClass]=\"item.transportationType\">\n <div kitTooltip\n kitTooltipFilter=\".card-route-item\"\n class=\"card-route-item card-route-original\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"item?.originalPort\">\n {{ item?.originalPort }}\n </div>\n <kit-svg-icon class=\"card-route-icon\"\n [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n <div kitTooltip\n kitTooltipFilter=\".card-route-item\"\n class=\"card-route-item card-route-destination\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"item?.destinationPort\">\n {{ item?.destinationPort }}\n </div>\n <div class=\"card-route-label\">by</div>\n <div kitTooltip\n kitTooltipFilter=\".card-route-item\"\n class=\"card-route-item card-route-type\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"item?.transitMode\">\n {{ item?.transitMode }}\n </div>\n </div>\n </div>\n }\n <div class=\"card-footer\">\n @for (date of item.date; track $index) {\n <div class=\"card-date\">\n <div class=\"card-date-top\">\n <kit-svg-icon class=\"card-date-icon\"\n [icon]=\"kitSvgIcon.CALENDAR\"\n ></kit-svg-icon>\n <div class=\"card-date-label\">{{ date.label }}</div>\n </div>\n <div class=\"card-date-value\">{{ date.value }}</div>\n </div>\n }\n </div>\n </div>\n}\n", styles: [".kit-timeline-card{display:flex;flex-direction:column;gap:15px;padding:25px;width:323px;color:var(--ui-kit-color-grey-10);border-radius:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);box-sizing:border-box}.kit-timeline-card.success-theme,.kit-timeline-card.warning-theme,.kit-timeline-card.danger-theme{border-width:2px}.kit-timeline-card.success-theme{border-color:var(--ui-kit-color-green-1)}.kit-timeline-card.warning-theme{border-color:var(--ui-kit-color-orange)}.kit-timeline-card.danger-theme{border-color:var(--ui-kit-color-red-1)}.kit-timeline-card .card-header{display:flex;align-items:center;gap:12px}.kit-timeline-card .card-icon{display:block;width:18px;height:18px}.kit-timeline-card .card-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-card .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-card .card-icon-wrapper{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%}.kit-timeline-card .card-info{flex:1}.kit-timeline-card .card-info-top{display:flex;align-items:center}.kit-timeline-card .card-info-bottom{font-size:14px;font-weight:400;line-height:20px}.kit-timeline-card .card-title{flex:1;font-size:16px;font-weight:600;line-height:22px}.kit-timeline-card .card-badge{display:flex;align-items:center;justify-content:center;padding:0 8px;font-size:12px;font-weight:500}.kit-timeline-card .text-badge{height:20px;border:1px solid;border-radius:4px}.kit-timeline-card .count-badge{height:24px;color:var(--ui-kit-color-white);border-radius:16px}.kit-timeline-card .card-route{display:flex;align-items:center;padding-bottom:7px}.kit-timeline-card .card-route-item{padding:0 8px;height:20px;font-size:12px;font-weight:500;line-height:20px;border-radius:4px;border:1px solid;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kit-timeline-card .card-route-icon{display:block;margin:0 3px;width:16px;height:16px;stroke:var(--ui-kit-color-grey-14);fill:none}.kit-timeline-card .card-route-original,.kit-timeline-card .card-route-destination{color:var(--ui-kit-color-grey-14);border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-white)}.kit-timeline-card .card-route-label{margin:0 7px;color:var(--ui-kit-color-grey-14);font-size:13px;font-weight:400}.kit-timeline-card .card-route-type{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-16)}.kit-timeline-card .card-footer{display:grid;grid-template-columns:1fr auto;gap:12px;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-timeline-card .card-date{display:flex;flex-direction:column;gap:3px;font-size:14px;font-weight:500;line-height:20px}.kit-timeline-card .card-date-top{display:flex;align-items:center;gap:3px}.kit-timeline-card .card-date-label{color:var(--ui-kit-color-grey-14);font-size:12px;font-weight:500}.kit-timeline-card .card-date-icon{display:block;width:18px;height:18px;stroke:none;fill:var(--ui-kit-color-grey-12)}.kit-timeline-card .card-date-value{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:600;line-height:20px}.kit-timeline-card.purple-theme .card-icon.fill{fill:var(--ui-kit-color-purple);stroke:none}.kit-timeline-card.purple-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-purple)}.kit-timeline-card.purple-theme .card-icon-wrapper{background:var(--ui-kit-color-purple-1)}.kit-timeline-card.purple-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-purple)}.kit-timeline-card.purple-theme .text-badge{color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-timeline-card.purple-theme .count-badge{background:var(--ui-kit-color-purple)}.kit-timeline-card.purple-theme .card-route.departure .card-route-original,.kit-timeline-card.purple-theme .card-route.arrival .card-route-destination,.kit-timeline-card.purple-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-timeline-card.green-theme .card-icon.fill{fill:var(--ui-kit-color-green-3);stroke:none}.kit-timeline-card.green-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-green-3)}.kit-timeline-card.green-theme .card-icon-wrapper{background:var(--ui-kit-color-green-4)}.kit-timeline-card.green-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-green-3)}.kit-timeline-card.green-theme .text-badge{color:var(--ui-kit-color-green-3);background:var(--ui-kit-color-green-4)}.kit-timeline-card.green-theme .count-badge{background:var(--ui-kit-color-green-3)}.kit-timeline-card.green-theme .card-route.departure .card-route-original,.kit-timeline-card.green-theme .card-route.arrival .card-route-destination,.kit-timeline-card.green-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-green-3);border-color:var(--ui-kit-color-green-3);background:var(--ui-kit-color-green-4)}.kit-timeline-card.blue-theme .card-icon.fill{fill:var(--ui-kit-color-blue);stroke:none}.kit-timeline-card.blue-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-blue)}.kit-timeline-card.blue-theme .card-icon-wrapper{background:var(--ui-kit-color-blue-1)}.kit-timeline-card.blue-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-blue)}.kit-timeline-card.blue-theme .text-badge{color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-timeline-card.blue-theme .count-badge{background:var(--ui-kit-color-blue)}.kit-timeline-card.blue-theme .card-route.departure .card-route-original,.kit-timeline-card.blue-theme .card-route.arrival .card-route-destination,.kit-timeline-card.blue-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-timeline-card.grey-theme .card-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-timeline-card.grey-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-10)}.kit-timeline-card.grey-theme .card-icon-wrapper{background:var(--ui-kit-color-grey-16)}.kit-timeline-card.grey-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-grey-10)}.kit-timeline-card.grey-theme .text-badge{color:var(--ui-kit-color-grey-10);background:var(--ui-kit-color-grey-16)}.kit-timeline-card.grey-theme .count-badge{background:var(--ui-kit-color-grey-10)}.kit-timeline-card.grey-theme .card-route.departure .card-route-original,.kit-timeline-card.grey-theme .card-route.arrival .card-route-destination,.kit-timeline-card.grey-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-10);background:var(--ui-kit-color-grey-16)}.kit-timeline-card.teal-theme .card-icon.fill{fill:var(--ui-kit-color-teal);stroke:none}.kit-timeline-card.teal-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-teal)}.kit-timeline-card.teal-theme .card-icon-wrapper{background:var(--ui-kit-color-teal-1)}.kit-timeline-card.teal-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-teal)}.kit-timeline-card.teal-theme .text-badge{color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-timeline-card.teal-theme .count-badge{background:var(--ui-kit-color-teal)}.kit-timeline-card.teal-theme .card-route.departure .card-route-original,.kit-timeline-card.teal-theme .card-route.arrival .card-route-destination,.kit-timeline-card.teal-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-timeline-card.pink-theme .card-icon.fill{fill:var(--ui-kit-color-pink);stroke:none}.kit-timeline-card.pink-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-pink)}.kit-timeline-card.pink-theme .card-icon-wrapper{background:var(--ui-kit-color-pink-1)}.kit-timeline-card.pink-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-pink)}.kit-timeline-card.pink-theme .text-badge{color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-timeline-card.pink-theme .count-badge{background:var(--ui-kit-color-pink)}.kit-timeline-card.pink-theme .card-route.departure .card-route-original,.kit-timeline-card.pink-theme .card-route.arrival .card-route-destination,.kit-timeline-card.pink-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-timeline-card.success-theme .card-icon.fill{fill:var(--ui-kit-color-green-1);stroke:none}.kit-timeline-card.success-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-green-1)}.kit-timeline-card.success-theme .card-icon-wrapper{background:var(--ui-kit-color-green-5)}.kit-timeline-card.success-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-green-1)}.kit-timeline-card.success-theme .text-badge{color:var(--ui-kit-color-green-1);background:var(--ui-kit-color-green-5)}.kit-timeline-card.success-theme .count-badge{background:var(--ui-kit-color-green-1)}.kit-timeline-card.success-theme .card-route.departure .card-route-original,.kit-timeline-card.success-theme .card-route.arrival .card-route-destination,.kit-timeline-card.success-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background:var(--ui-kit-color-green-5)}.kit-timeline-card.warning-theme .card-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}.kit-timeline-card.warning-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-orange)}.kit-timeline-card.warning-theme .card-icon-wrapper{background:var(--ui-kit-color-orange-4)}.kit-timeline-card.warning-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-orange)}.kit-timeline-card.warning-theme .text-badge{color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-4)}.kit-timeline-card.warning-theme .count-badge{background:var(--ui-kit-color-orange)}.kit-timeline-card.warning-theme .card-route.departure .card-route-original,.kit-timeline-card.warning-theme .card-route.arrival .card-route-destination,.kit-timeline-card.warning-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-4)}.kit-timeline-card.danger-theme .card-icon.fill{fill:var(--ui-kit-color-red-1);stroke:none}.kit-timeline-card.danger-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-red-1)}.kit-timeline-card.danger-theme .card-icon-wrapper{background:var(--ui-kit-color-red-3)}.kit-timeline-card.danger-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-red-1)}.kit-timeline-card.danger-theme .text-badge{color:var(--ui-kit-color-red-1);background:var(--ui-kit-color-red-3)}.kit-timeline-card.danger-theme .count-badge{background:var(--ui-kit-color-red-1)}.kit-timeline-card.danger-theme .card-route.departure .card-route-original,.kit-timeline-card.danger-theme .card-route.arrival .card-route-destination,.kit-timeline-card.danger-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-red-1);border-color:var(--ui-kit-color-red-1);background:var(--ui-kit-color-red-3)}\n"] }]
|
|
5434
5468
|
}], propDecorators: { item: [{
|
|
5435
5469
|
type: Input
|
|
5436
5470
|
}] } });
|
|
@@ -5844,11 +5878,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
5844
5878
|
type: Input
|
|
5845
5879
|
}] } });
|
|
5846
5880
|
|
|
5881
|
+
const kitDataStateToODataString = (state) => toODataString(state);
|
|
5882
|
+
|
|
5847
5883
|
// KitButton
|
|
5848
5884
|
|
|
5849
5885
|
/**
|
|
5850
5886
|
* Generated bundle index. Do not edit.
|
|
5851
5887
|
*/
|
|
5852
5888
|
|
|
5853
|
-
export { AbstractKitCtaPanelConfirmationComponent, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeModule, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDataFieldComponent, KitDatepickerComponent, KitDatepickerModule, KitDaterangeComponent, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogActionsModule, KitDialogComponent, KitDialogModule, KitDialogService, KitDropdownComponent, KitDropdownModule, KitEmptySectionComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntityTitleComponent, KitEntityTitleModule, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardModule, KitFileUploadComponent, KitFileUploadModule, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridModule,
|
|
5889
|
+
export { AbstractKitCtaPanelConfirmationComponent, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeModule, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDataFieldComponent, KitDatepickerComponent, KitDatepickerModule, KitDaterangeComponent, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogActionsModule, KitDialogComponent, KitDialogModule, KitDialogService, KitDropdownComponent, KitDropdownModule, KitDropdownSize, KitEmptySectionComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntityTitleComponent, KitEntityTitleModule, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardModule, KitFileUploadComponent, KitFileUploadModule, KitFilterLogic, KitFilterOperator, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridModule, KitGridSortSettingsMode, KitInputLabelComponent, KitInputLabelModule, KitInputMessageComponent, KitInputMessageModule, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsModule, KitNavigationTabsType, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationModule, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitNumericTextboxState, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillType, KitPopupComponent, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitScrollNavigationComponent, KitScrollNavigationModule, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSearchBarModule, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgIconType, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTabComponent, KitTabsComponent, KitTabsModule, KitTabsType, KitTextLabelComponent, KitTextLabelModule, KitTextLabelState, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTextboxSize, KitTextboxState, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTileLayoutModule, KitTimelineCardComponent, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTimepickerModule, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipModule, KitTooltipPosition, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, buildRandomUUID, kitDataStateToODataString };
|
|
5854
5890
|
//# sourceMappingURL=indigina-ui-kit.mjs.map
|