@indigina/ui-kit 1.0.146 → 1.0.148
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/esm2020/lib/components/kit-button/kit-button.component.mjs +9 -3
- package/esm2020/lib/components/kit-cta-panel-action/kit-cta-panel-action.component.mjs +1 -1
- package/esm2020/lib/components/kit-navigation-tabs/kit-navigation-tabs.component.mjs +3 -3
- package/fesm2015/indigina-ui-kit.mjs +11 -5
- package/fesm2015/indigina-ui-kit.mjs.map +1 -1
- package/fesm2020/indigina-ui-kit.mjs +11 -5
- package/fesm2020/indigina-ui-kit.mjs.map +1 -1
- package/lib/components/kit-button/kit-button.component.d.ts +5 -1
- package/package.json +1 -1
|
@@ -26,6 +26,10 @@ export class KitButtonComponent {
|
|
|
26
26
|
* A place where the icon will be displayed. By default is "right"
|
|
27
27
|
*/
|
|
28
28
|
this.iconPosition = KitButtonIconPosition.RIGHT;
|
|
29
|
+
/**
|
|
30
|
+
* A CSS class which will be applied to the HTML button component
|
|
31
|
+
*/
|
|
32
|
+
this.buttonClass = 'kit-button-target';
|
|
29
33
|
/**
|
|
30
34
|
* An action which is emitted as soon as user clicked the button
|
|
31
35
|
*/
|
|
@@ -33,10 +37,10 @@ export class KitButtonComponent {
|
|
|
33
37
|
}
|
|
34
38
|
}
|
|
35
39
|
KitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: KitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
36
|
-
KitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: KitButtonComponent, selector: "kit-button", inputs: { disabled: "disabled", label: "label", type: "type", icon: "icon", kind: "kind", iconPosition: "iconPosition" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [ngClass]=\"[type, kind, iconPosition]\"\n (click)=\"clicked.emit()\">\n {{ label }}\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-main-20: #ddecfd;--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-green: #00b0ad;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0}.kit-button .icon-right{flex-direction:row}.kit-button .icon-right .button-icon{margin-left:8px}.kit-button .icon-left{flex-direction:row-reverse}.kit-button .icon-left .button-icon{margin-right:8px}.kit-button .k-button{height:44px;padding:0 12px;color:var(--ui-kit-color-white);font-weight:500;font-size:14px;gap:0;border-radius:6px;border:1px solid transparent}.kit-button .k-button .button-icon{width:16px;height:16px;stroke:var(--ui-kit-color-white);fill:none}.kit-button .k-button.small{height:28px;line-height:1;font-size:12px}.kit-button .k-button.filled{background:var(--ui-kit-color-main)}.kit-button .k-button.filled.k-state-focused{border-color:#3678c3}.kit-button .k-button.outlined{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-button .k-button.outlined .button-icon{stroke:var(--ui-kit-color-main)}.kit-button .k-button:disabled{color:#a9a8a8;background:#ebebe4}.kit-button .k-button:disabled .button-icon{stroke:#a9a8a8}.kit-button .k-button.k-state-focused{box-shadow:0 0 2px 4px #c7dff9}.kit-button .filled:hover{background:#002a3a}.kit-button .outlined:hover{background:var(--ui-kit-color-white-20)}.kit-button .outlined:disabled{border-color:#a9a8a8}.kit-button .icon-right.k-button.small .button-icon{margin-left:4px}.kit-button .icon-left.k-button.small .button-icon{margin-right:4px}\n"], dependencies: [{ kind: "directive", type: i1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "role", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
40
|
+
KitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: KitButtonComponent, selector: "kit-button", inputs: { disabled: "disabled", label: "label", type: "type", icon: "icon", kind: "kind", iconPosition: "iconPosition", buttonClass: "buttonClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n (click)=\"clicked.emit()\">\n {{ label }}\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-main-20: #ddecfd;--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-green: #00b0ad;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0}.kit-button .icon-right{flex-direction:row}.kit-button .icon-right .button-icon{margin-left:8px}.kit-button .icon-left{flex-direction:row-reverse}.kit-button .icon-left .button-icon{margin-right:8px}.kit-button .k-button{height:44px;padding:0 12px;color:var(--ui-kit-color-white);font-weight:500;font-size:14px;gap:0;border-radius:6px;border:1px solid transparent}.kit-button .k-button .button-icon{width:16px;height:16px;stroke:var(--ui-kit-color-white);fill:none}.kit-button .k-button.small{height:28px;line-height:1;font-size:12px}.kit-button .k-button.filled{background:var(--ui-kit-color-main)}.kit-button .k-button.filled.k-state-focused{border-color:#3678c3}.kit-button .k-button.outlined{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-button .k-button.outlined .button-icon{stroke:var(--ui-kit-color-main)}.kit-button .k-button:disabled{color:#a9a8a8;background:#ebebe4}.kit-button .k-button:disabled .button-icon{stroke:#a9a8a8}.kit-button .k-button.k-state-focused{box-shadow:0 0 2px 4px #c7dff9}.kit-button .filled:hover{background:#002a3a}.kit-button .outlined:hover{background:var(--ui-kit-color-white-20)}.kit-button .outlined:disabled{border-color:#a9a8a8}.kit-button .icon-right.k-button.small .button-icon{margin-left:4px}.kit-button .icon-left.k-button.small .button-icon{margin-right:4px}\n"], dependencies: [{ kind: "directive", type: i1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "role", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
37
41
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: KitButtonComponent, decorators: [{
|
|
38
42
|
type: Component,
|
|
39
|
-
args: [{ selector: 'kit-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [ngClass]=\"[type, kind, iconPosition]\"\n (click)=\"clicked.emit()\">\n {{ label }}\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-main-20: #ddecfd;--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-green: #00b0ad;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0}.kit-button .icon-right{flex-direction:row}.kit-button .icon-right .button-icon{margin-left:8px}.kit-button .icon-left{flex-direction:row-reverse}.kit-button .icon-left .button-icon{margin-right:8px}.kit-button .k-button{height:44px;padding:0 12px;color:var(--ui-kit-color-white);font-weight:500;font-size:14px;gap:0;border-radius:6px;border:1px solid transparent}.kit-button .k-button .button-icon{width:16px;height:16px;stroke:var(--ui-kit-color-white);fill:none}.kit-button .k-button.small{height:28px;line-height:1;font-size:12px}.kit-button .k-button.filled{background:var(--ui-kit-color-main)}.kit-button .k-button.filled.k-state-focused{border-color:#3678c3}.kit-button .k-button.outlined{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-button .k-button.outlined .button-icon{stroke:var(--ui-kit-color-main)}.kit-button .k-button:disabled{color:#a9a8a8;background:#ebebe4}.kit-button .k-button:disabled .button-icon{stroke:#a9a8a8}.kit-button .k-button.k-state-focused{box-shadow:0 0 2px 4px #c7dff9}.kit-button .filled:hover{background:#002a3a}.kit-button .outlined:hover{background:var(--ui-kit-color-white-20)}.kit-button .outlined:disabled{border-color:#a9a8a8}.kit-button .icon-right.k-button.small .button-icon{margin-left:4px}.kit-button .icon-left.k-button.small .button-icon{margin-right:4px}\n"] }]
|
|
43
|
+
args: [{ selector: 'kit-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n (click)=\"clicked.emit()\">\n {{ label }}\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-main-20: #ddecfd;--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-green: #00b0ad;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0}.kit-button .icon-right{flex-direction:row}.kit-button .icon-right .button-icon{margin-left:8px}.kit-button .icon-left{flex-direction:row-reverse}.kit-button .icon-left .button-icon{margin-right:8px}.kit-button .k-button{height:44px;padding:0 12px;color:var(--ui-kit-color-white);font-weight:500;font-size:14px;gap:0;border-radius:6px;border:1px solid transparent}.kit-button .k-button .button-icon{width:16px;height:16px;stroke:var(--ui-kit-color-white);fill:none}.kit-button .k-button.small{height:28px;line-height:1;font-size:12px}.kit-button .k-button.filled{background:var(--ui-kit-color-main)}.kit-button .k-button.filled.k-state-focused{border-color:#3678c3}.kit-button .k-button.outlined{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-button .k-button.outlined .button-icon{stroke:var(--ui-kit-color-main)}.kit-button .k-button:disabled{color:#a9a8a8;background:#ebebe4}.kit-button .k-button:disabled .button-icon{stroke:#a9a8a8}.kit-button .k-button.k-state-focused{box-shadow:0 0 2px 4px #c7dff9}.kit-button .filled:hover{background:#002a3a}.kit-button .outlined:hover{background:var(--ui-kit-color-white-20)}.kit-button .outlined:disabled{border-color:#a9a8a8}.kit-button .icon-right.k-button.small .button-icon{margin-left:4px}.kit-button .icon-left.k-button.small .button-icon{margin-right:4px}\n"] }]
|
|
40
44
|
}], propDecorators: { disabled: [{
|
|
41
45
|
type: Input
|
|
42
46
|
}], label: [{
|
|
@@ -49,7 +53,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
|
|
|
49
53
|
type: Input
|
|
50
54
|
}], iconPosition: [{
|
|
51
55
|
type: Input
|
|
56
|
+
}], buttonClass: [{
|
|
57
|
+
type: Input
|
|
52
58
|
}], clicked: [{
|
|
53
59
|
type: Output
|
|
54
60
|
}] } });
|
|
55
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
61
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2l0LWJ1dHRvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1idXR0b24va2l0LWJ1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1idXR0b24va2l0LWJ1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2hHLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxhQUFhLEVBQUUsYUFBYSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7Ozs7O0FBUXpGLE1BQU0sT0FBTyxrQkFBa0I7SUFOL0I7UUFPRTs7V0FFRztRQUNNLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFFbkM7O1dBRUc7UUFDTSxVQUFLLEdBQVcsRUFBRSxDQUFDO1FBRTVCOztXQUVHO1FBQ00sU0FBSSxHQUFrQixhQUFhLENBQUMsTUFBTSxDQUFDO1FBT3BEOztXQUVHO1FBQ00sU0FBSSxHQUFrQixhQUFhLENBQUMsS0FBSyxDQUFDO1FBRW5EOztXQUVHO1FBQ00saUJBQVksR0FBMEIscUJBQXFCLENBQUMsS0FBSyxDQUFDO1FBRTNFOztXQUVHO1FBQ00sZ0JBQVcsR0FBVyxtQkFBbUIsQ0FBQztRQUVuRDs7V0FFRztRQUNPLFlBQU8sR0FBdUIsSUFBSSxZQUFZLEVBQVEsQ0FBQztLQUNsRTs7Z0hBeENZLGtCQUFrQjtvR0FBbEIsa0JBQWtCLHlPQ1YvQiwwV0FZQTs0RkRGYSxrQkFBa0I7a0JBTjlCLFNBQVM7K0JBQ0UsWUFBWSxtQkFHTCx1QkFBdUIsQ0FBQyxNQUFNOzhCQU10QyxRQUFRO3NCQUFoQixLQUFLO2dCQUtHLEtBQUs7c0JBQWIsS0FBSztnQkFLRyxJQUFJO3NCQUFaLEtBQUs7Z0JBS0csSUFBSTtzQkFBWixLQUFLO2dCQUtHLElBQUk7c0JBQVosS0FBSztnQkFLRyxZQUFZO3NCQUFwQixLQUFLO2dCQUtHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBS0ksT0FBTztzQkFBaEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEtpdFN2Z0ljb24gfSBmcm9tICcuLi9raXQtc3ZnLWljb24va2l0LXN2Zy1pY29uLmNvbnN0JztcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgS2l0QnV0dG9uSWNvblBvc2l0aW9uLCBLaXRCdXR0b25LaW5kLCBLaXRCdXR0b25UeXBlIH0gZnJvbSAnLi9raXQtYnV0dG9uLmNvbnN0JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAna2l0LWJ1dHRvbicsXG4gIHN0eWxlVXJsczogWycuL2tpdC1idXR0b24uY29tcG9uZW50LnNjc3MnXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2tpdC1idXR0b24uY29tcG9uZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgS2l0QnV0dG9uQ29tcG9uZW50IHtcbiAgLyoqXG4gICAqIFN0YXRlcyB3aGV0aGVyIHRoZSBidXR0b24gd2lsbCBiZSBkaXNhYmxlZCBvciBub3QgZnJvbSBhcHBlYXJhbmNlIHBvaW50IG9mIHZpZXdcbiAgICovXG4gIEBJbnB1dCgpIGRpc2FibGVkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIERlZmluZXMgYSB2YWx1ZSB0aGF0IGlzIGdvaW5nIHRvIGJlIGFwcGxpZWQgYXMgYSBidXR0b24gbGFiZWxcbiAgICovXG4gIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmcgPSAnJztcblxuICAvKipcbiAgICogVGhpcyB2YWx1ZSBkZWZpbmVzIGJ1dHRvbiB0eXBlXG4gICAqL1xuICBASW5wdXQoKSB0eXBlOiBLaXRCdXR0b25UeXBlID0gS2l0QnV0dG9uVHlwZS5GSUxMRUQ7XG5cbiAgLyoqXG4gICAqIEFuIGljb24gd2hpY2ggd2lsbCBiZSB1c2VkIGluIGEgYnV0dG9uIHdpdGggaWNvblxuICAgKi9cbiAgQElucHV0KCkgaWNvbj86IEtpdFN2Z0ljb247XG5cbiAgLyoqXG4gICAqIERlZmluZXMgYSBraW5kIG9mIGJ1dHRvbiAocmVndWxhciwgbWluaSwgZXRjLilcbiAgICovXG4gIEBJbnB1dCgpIGtpbmQ6IEtpdEJ1dHRvbktpbmQgPSBLaXRCdXR0b25LaW5kLkxBUkdFO1xuXG4gIC8qKlxuICAgKiBBIHBsYWNlIHdoZXJlIHRoZSBpY29uIHdpbGwgYmUgZGlzcGxheWVkLiBCeSBkZWZhdWx0IGlzIFwicmlnaHRcIlxuICAgKi9cbiAgQElucHV0KCkgaWNvblBvc2l0aW9uOiBLaXRCdXR0b25JY29uUG9zaXRpb24gPSBLaXRCdXR0b25JY29uUG9zaXRpb24uUklHSFQ7XG5cbiAgLyoqXG4gICAqIEEgQ1NTIGNsYXNzIHdoaWNoIHdpbGwgYmUgYXBwbGllZCB0byB0aGUgSFRNTCBidXR0b24gY29tcG9uZW50XG4gICAqL1xuICBASW5wdXQoKSBidXR0b25DbGFzczogc3RyaW5nID0gJ2tpdC1idXR0b24tdGFyZ2V0JztcblxuICAvKipcbiAgICogQW4gYWN0aW9uIHdoaWNoIGlzIGVtaXR0ZWQgYXMgc29vbiBhcyB1c2VyIGNsaWNrZWQgdGhlIGJ1dHRvblxuICAgKi9cbiAgQE91dHB1dCgpIGNsaWNrZWQ6IEV2ZW50RW1pdHRlcjx2b2lkPiA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcbn1cbiIsIjxkaXYgY2xhc3M9XCJraXQtYnV0dG9uXCI+XG4gIDxidXR0b24ga2VuZG9CdXR0b25cbiAgICAgICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgICAgICAgIFtuZ0NsYXNzXT1cIlt0eXBlLCBraW5kLCBpY29uUG9zaXRpb24sIGJ1dHRvbkNsYXNzXVwiXG4gICAgICAgICAgKGNsaWNrKT1cImNsaWNrZWQuZW1pdCgpXCI+XG4gICAge3sgbGFiZWwgfX1cbiAgICA8a2l0LXN2Zy1pY29uICpuZ0lmPVwiaWNvblwiXG4gICAgICAgICAgICAgICAgICBjbGFzcz1cImJ1dHRvbi1pY29uXCJcbiAgICAgICAgICAgICAgICAgIFtpY29uXT1cImljb25cIlxuICAgID48L2tpdC1zdmctaWNvbj5cbiAgPC9idXR0b24+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -16,7 +16,7 @@ export class KitCtaPanelActionComponent {
|
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
KitCtaPanelActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: KitCtaPanelActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
19
|
-
KitCtaPanelActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: KitCtaPanelActionComponent, selector: "kit-cta-panel-action", inputs: { disabled: "disabled", confirmText: "confirmText", quitText: "quitText" }, outputs: { quitClicked: "quitClicked", confirmClicked: "confirmClicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-action\">\n <kit-button class=\"action-button\"\n [label]=\"quitText\"\n [kind]=\"KitButtonKind.SMALL\"\n [type]=\"KitButtonType.OUTLINED\"\n (clicked)=\"quitClicked.emit()\"\n ></kit-button>\n <kit-button class=\"action-button\"\n [label]=\"confirmText\"\n [kind]=\"KitButtonKind.SMALL\"\n [disabled]=\"disabled\"\n (clicked)=\"confirmClicked.emit()\"\n ></kit-button>\n</div>\n", styles: [".kit-cta-panel-action{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.kit-cta-panel-action .action-button ::ng-deep .k-button{width:100%}\n"], dependencies: [{ kind: "component", type: i1.KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "kind", "iconPosition"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
19
|
+
KitCtaPanelActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: KitCtaPanelActionComponent, selector: "kit-cta-panel-action", inputs: { disabled: "disabled", confirmText: "confirmText", quitText: "quitText" }, outputs: { quitClicked: "quitClicked", confirmClicked: "confirmClicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-action\">\n <kit-button class=\"action-button\"\n [label]=\"quitText\"\n [kind]=\"KitButtonKind.SMALL\"\n [type]=\"KitButtonType.OUTLINED\"\n (clicked)=\"quitClicked.emit()\"\n ></kit-button>\n <kit-button class=\"action-button\"\n [label]=\"confirmText\"\n [kind]=\"KitButtonKind.SMALL\"\n [disabled]=\"disabled\"\n (clicked)=\"confirmClicked.emit()\"\n ></kit-button>\n</div>\n", styles: [".kit-cta-panel-action{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.kit-cta-panel-action .action-button ::ng-deep .k-button{width:100%}\n"], dependencies: [{ kind: "component", type: i1.KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "kind", "iconPosition", "buttonClass"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
20
20
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: KitCtaPanelActionComponent, decorators: [{
|
|
21
21
|
type: Component,
|
|
22
22
|
args: [{ selector: 'kit-cta-panel-action', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-cta-panel-action\">\n <kit-button class=\"action-button\"\n [label]=\"quitText\"\n [kind]=\"KitButtonKind.SMALL\"\n [type]=\"KitButtonType.OUTLINED\"\n (clicked)=\"quitClicked.emit()\"\n ></kit-button>\n <kit-button class=\"action-button\"\n [label]=\"confirmText\"\n [kind]=\"KitButtonKind.SMALL\"\n [disabled]=\"disabled\"\n (clicked)=\"confirmClicked.emit()\"\n ></kit-button>\n</div>\n", styles: [".kit-cta-panel-action{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.kit-cta-panel-action .action-button ::ng-deep .k-button{width:100%}\n"] }]
|
|
@@ -26,11 +26,11 @@ export class KitNavigationTabsComponent {
|
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
KitNavigationTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: KitNavigationTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
29
|
-
KitNavigationTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: KitNavigationTabsComponent, selector: "kit-navigation-tabs", inputs: { items: "items" }, ngImport: i0, template: "<div class=\"kit-navigation-tabs\">\n <div class=\"tabs-nav\">\n <a *ngFor=\"let item of items\"\n class=\"tab-item\"\n routerLinkActive=\"tab-item-active\"\n [routerLink]=\"getRouterLink(item)\">\n <kit-svg-icon *ngIf=\"item.icon\"\n class=\"tab-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"getItemIconCssClass(item)\"\n ></kit-svg-icon>\n <span class=\"tab-item-title\"
|
|
29
|
+
KitNavigationTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: KitNavigationTabsComponent, selector: "kit-navigation-tabs", inputs: { items: "items" }, ngImport: i0, template: "<div class=\"kit-navigation-tabs\">\n <div class=\"tabs-nav\">\n <a *ngFor=\"let item of items\"\n class=\"tab-item\"\n routerLinkActive=\"tab-item-active\"\n [routerLink]=\"getRouterLink(item)\">\n <kit-svg-icon *ngIf=\"item.icon\"\n class=\"tab-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"getItemIconCssClass(item)\"\n ></kit-svg-icon>\n \n <span class=\"tab-item-title\"\n [innerHTML]=\"item.title\"\n ></span>\n </a>\n </div>\n</div>\n", styles: [".kit-navigation-tabs .tabs-nav{display:flex;padding:12px 8px;gap:40px;box-shadow:0 4px 4px #505d6833;background:var(--ui-kit-color-white)}.kit-navigation-tabs .tab-item{display:flex;align-items:center;color:var(--ui-kit-color-grey-2);text-decoration:none}.kit-navigation-tabs .tab-item-icon{display:block;margin-right:4px;width:24px;height:24px}.kit-navigation-tabs .tab-item-icon.fill{fill:var(--ui-kit-color-grey-2);stroke:none}.kit-navigation-tabs .tab-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-2)}.kit-navigation-tabs .tab-item-title{font-weight:500;font-size:14px}.kit-navigation-tabs .tab-item-active{color:var(--ui-kit-color-grey-0)}.kit-navigation-tabs .tab-item-active .tab-item-icon.fill{fill:var(--ui-kit-color-grey-0)}.kit-navigation-tabs .tab-item-active .tab-item-icon.stroke{stroke:var(--ui-kit-color-grey-0)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
30
30
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: KitNavigationTabsComponent, decorators: [{
|
|
31
31
|
type: Component,
|
|
32
|
-
args: [{ selector: 'kit-navigation-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-navigation-tabs\">\n <div class=\"tabs-nav\">\n <a *ngFor=\"let item of items\"\n class=\"tab-item\"\n routerLinkActive=\"tab-item-active\"\n [routerLink]=\"getRouterLink(item)\">\n <kit-svg-icon *ngIf=\"item.icon\"\n class=\"tab-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"getItemIconCssClass(item)\"\n ></kit-svg-icon>\n <span class=\"tab-item-title\"
|
|
32
|
+
args: [{ selector: 'kit-navigation-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-navigation-tabs\">\n <div class=\"tabs-nav\">\n <a *ngFor=\"let item of items\"\n class=\"tab-item\"\n routerLinkActive=\"tab-item-active\"\n [routerLink]=\"getRouterLink(item)\">\n <kit-svg-icon *ngIf=\"item.icon\"\n class=\"tab-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"getItemIconCssClass(item)\"\n ></kit-svg-icon>\n \n <span class=\"tab-item-title\"\n [innerHTML]=\"item.title\"\n ></span>\n </a>\n </div>\n</div>\n", styles: [".kit-navigation-tabs .tabs-nav{display:flex;padding:12px 8px;gap:40px;box-shadow:0 4px 4px #505d6833;background:var(--ui-kit-color-white)}.kit-navigation-tabs .tab-item{display:flex;align-items:center;color:var(--ui-kit-color-grey-2);text-decoration:none}.kit-navigation-tabs .tab-item-icon{display:block;margin-right:4px;width:24px;height:24px}.kit-navigation-tabs .tab-item-icon.fill{fill:var(--ui-kit-color-grey-2);stroke:none}.kit-navigation-tabs .tab-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-2)}.kit-navigation-tabs .tab-item-title{font-weight:500;font-size:14px}.kit-navigation-tabs .tab-item-active{color:var(--ui-kit-color-grey-0)}.kit-navigation-tabs .tab-item-active .tab-item-icon.fill{fill:var(--ui-kit-color-grey-0)}.kit-navigation-tabs .tab-item-active .tab-item-icon.stroke{stroke:var(--ui-kit-color-grey-0)}\n"] }]
|
|
33
33
|
}], propDecorators: { items: [{
|
|
34
34
|
type: Input
|
|
35
35
|
}] } });
|
|
36
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
36
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2l0LW5hdmlnYXRpb24tdGFicy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1uYXZpZ2F0aW9uLXRhYnMva2l0LW5hdmlnYXRpb24tdGFicy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1uYXZpZ2F0aW9uLXRhYnMva2l0LW5hdmlnYXRpb24tdGFicy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBYSxNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFhckYsTUFBTSxDQUFOLElBQVksNkJBR1g7QUFIRCxXQUFZLDZCQUE2QjtJQUN2Qyw4Q0FBYSxDQUFBO0lBQ2Isa0RBQWlCLENBQUE7QUFDbkIsQ0FBQyxFQUhXLDZCQUE2QixLQUE3Qiw2QkFBNkIsUUFHeEM7QUFRRCxNQUFNLE9BQU8sMEJBQTBCO0lBTnZDO1FBT0U7O1dBRUc7UUFDTSxVQUFLLEdBQTRCLEVBQUUsQ0FBQztLQWE5QztJQVhDLGFBQWEsQ0FBQyxJQUEyQjtRQUN2QyxJQUFJLElBQUksQ0FBQyxRQUFRLElBQUksSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsRUFBRTtZQUN4QyxPQUFPLElBQUksQ0FBQztTQUNiO1FBRUQsT0FBTyxJQUFJLENBQUMsSUFBSSxDQUFDO0lBQ25CLENBQUM7SUFFRCxtQkFBbUIsQ0FBQyxJQUEyQjtRQUM3QyxPQUFPLElBQUksQ0FBQyxRQUFRLElBQUksNkJBQTZCLENBQUMsTUFBTSxDQUFDO0lBQy9ELENBQUM7O3dIQWhCVSwwQkFBMEI7NEdBQTFCLDBCQUEwQix1RkN4QnZDLHFqQkFrQkE7NEZETWEsMEJBQTBCO2tCQU50QyxTQUFTOytCQUNFLHFCQUFxQixtQkFHZCx1QkFBdUIsQ0FBQyxNQUFNOzhCQU10QyxLQUFLO3NCQUFiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBJbnB1dCwgUHJlZGljYXRlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBLaXRTdmdJY29uIH0gZnJvbSAnLi4va2l0LXN2Zy1pY29uL2tpdC1zdmctaWNvbi5jb25zdCc7XG5cbmV4cG9ydCB0eXBlIEtpdE5hdmlnYXRpb25UYWJzSXRlbUxpbmsgPSBzdHJpbmcgfCBudW1iZXI7XG5cbmV4cG9ydCBpbnRlcmZhY2UgS2l0TmF2aWdhdGlvblRhYnNJdGVtIHtcbiAgdGl0bGU6IHN0cmluZztcbiAgbGluazogc3RyaW5nIHwgS2l0TmF2aWdhdGlvblRhYnNJdGVtTGlua1tdO1xuICBpY29uPzogS2l0U3ZnSWNvbjtcbiAgaWNvblR5cGU/OiBLaXROYXZpZ2F0aW9uVGFic0l0ZW1JY29uVHlwZTtcbiAgZGlzYWJsZWQ/OiBQcmVkaWNhdGU8S2l0TmF2aWdhdGlvblRhYnNJdGVtPjtcbn1cblxuZXhwb3J0IGVudW0gS2l0TmF2aWdhdGlvblRhYnNJdGVtSWNvblR5cGUge1xuICBGSUxMID0gJ2ZpbGwnLFxuICBTVFJPS0UgPSAnc3Ryb2tlJyxcbn1cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAna2l0LW5hdmlnYXRpb24tdGFicycsXG4gIHRlbXBsYXRlVXJsOiAnLi9raXQtbmF2aWdhdGlvbi10YWJzLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4va2l0LW5hdmlnYXRpb24tdGFicy5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgS2l0TmF2aWdhdGlvblRhYnNDb21wb25lbnQge1xuICAvKipcbiAgICogSXRlbXMgd2hpY2ggYXJlIGdvaW5nIHRvIGJlIHJlbmRlcmVkIGFzIHRhYnMgbmF2aWdhdGlvbiBpdGVtc1xuICAgKi9cbiAgQElucHV0KCkgaXRlbXM6IEtpdE5hdmlnYXRpb25UYWJzSXRlbVtdID0gW107XG5cbiAgZ2V0Um91dGVyTGluayhpdGVtOiBLaXROYXZpZ2F0aW9uVGFic0l0ZW0pOiBzdHJpbmcgfCBLaXROYXZpZ2F0aW9uVGFic0l0ZW1MaW5rW10gfCBudWxsIHtcbiAgICBpZiAoaXRlbS5kaXNhYmxlZCAmJiBpdGVtLmRpc2FibGVkKGl0ZW0pKSB7XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICB9XG5cbiAgICByZXR1cm4gaXRlbS5saW5rO1xuICB9XG5cbiAgZ2V0SXRlbUljb25Dc3NDbGFzcyhpdGVtOiBLaXROYXZpZ2F0aW9uVGFic0l0ZW0pOiBLaXROYXZpZ2F0aW9uVGFic0l0ZW1JY29uVHlwZSB7XG4gICAgcmV0dXJuIGl0ZW0uaWNvblR5cGUgfHwgS2l0TmF2aWdhdGlvblRhYnNJdGVtSWNvblR5cGUuU1RST0tFO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwia2l0LW5hdmlnYXRpb24tdGFic1wiPlxuICA8ZGl2IGNsYXNzPVwidGFicy1uYXZcIj5cbiAgICA8YSAqbmdGb3I9XCJsZXQgaXRlbSBvZiBpdGVtc1wiXG4gICAgICAgY2xhc3M9XCJ0YWItaXRlbVwiXG4gICAgICAgcm91dGVyTGlua0FjdGl2ZT1cInRhYi1pdGVtLWFjdGl2ZVwiXG4gICAgICAgW3JvdXRlckxpbmtdPVwiZ2V0Um91dGVyTGluayhpdGVtKVwiPlxuICAgICAgPGtpdC1zdmctaWNvbiAqbmdJZj1cIml0ZW0uaWNvblwiXG4gICAgICAgICAgICAgICAgICAgIGNsYXNzPVwidGFiLWl0ZW0taWNvblwiXG4gICAgICAgICAgICAgICAgICAgIFtpY29uXT1cIml0ZW0uaWNvblwiXG4gICAgICAgICAgICAgICAgICAgIFtuZ0NsYXNzXT1cImdldEl0ZW1JY29uQ3NzQ2xhc3MoaXRlbSlcIlxuICAgICAgPjwva2l0LXN2Zy1pY29uPlxuICAgICAgXG4gICAgICA8c3BhbiBjbGFzcz1cInRhYi1pdGVtLXRpdGxlXCJcbiAgICAgICAgICAgIFtpbm5lckhUTUxdPVwiaXRlbS50aXRsZVwiXG4gICAgICA+PC9zcGFuPlxuICAgIDwvYT5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -87,6 +87,10 @@ class KitButtonComponent {
|
|
|
87
87
|
* A place where the icon will be displayed. By default is "right"
|
|
88
88
|
*/
|
|
89
89
|
this.iconPosition = KitButtonIconPosition.RIGHT;
|
|
90
|
+
/**
|
|
91
|
+
* A CSS class which will be applied to the HTML button component
|
|
92
|
+
*/
|
|
93
|
+
this.buttonClass = 'kit-button-target';
|
|
90
94
|
/**
|
|
91
95
|
* An action which is emitted as soon as user clicked the button
|
|
92
96
|
*/
|
|
@@ -94,10 +98,10 @@ class KitButtonComponent {
|
|
|
94
98
|
}
|
|
95
99
|
}
|
|
96
100
|
KitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: KitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
97
|
-
KitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: KitButtonComponent, selector: "kit-button", inputs: { disabled: "disabled", label: "label", type: "type", icon: "icon", kind: "kind", iconPosition: "iconPosition" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [ngClass]=\"[type, kind, iconPosition]\"\n (click)=\"clicked.emit()\">\n {{ label }}\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-main-20: #ddecfd;--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-green: #00b0ad;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0}.kit-button .icon-right{flex-direction:row}.kit-button .icon-right .button-icon{margin-left:8px}.kit-button .icon-left{flex-direction:row-reverse}.kit-button .icon-left .button-icon{margin-right:8px}.kit-button .k-button{height:44px;padding:0 12px;color:var(--ui-kit-color-white);font-weight:500;font-size:14px;gap:0;border-radius:6px;border:1px solid transparent}.kit-button .k-button .button-icon{width:16px;height:16px;stroke:var(--ui-kit-color-white);fill:none}.kit-button .k-button.small{height:28px;line-height:1;font-size:12px}.kit-button .k-button.filled{background:var(--ui-kit-color-main)}.kit-button .k-button.filled.k-state-focused{border-color:#3678c3}.kit-button .k-button.outlined{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-button .k-button.outlined .button-icon{stroke:var(--ui-kit-color-main)}.kit-button .k-button:disabled{color:#a9a8a8;background:#ebebe4}.kit-button .k-button:disabled .button-icon{stroke:#a9a8a8}.kit-button .k-button.k-state-focused{box-shadow:0 0 2px 4px #c7dff9}.kit-button .filled:hover{background:#002a3a}.kit-button .outlined:hover{background:var(--ui-kit-color-white-20)}.kit-button .outlined:disabled{border-color:#a9a8a8}.kit-button .icon-right.k-button.small .button-icon{margin-left:4px}.kit-button .icon-left.k-button.small .button-icon{margin-right:4px}\n"], dependencies: [{ kind: "directive", type: i1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "role", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
101
|
+
KitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: KitButtonComponent, selector: "kit-button", inputs: { disabled: "disabled", label: "label", type: "type", icon: "icon", kind: "kind", iconPosition: "iconPosition", buttonClass: "buttonClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n (click)=\"clicked.emit()\">\n {{ label }}\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-main-20: #ddecfd;--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-green: #00b0ad;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0}.kit-button .icon-right{flex-direction:row}.kit-button .icon-right .button-icon{margin-left:8px}.kit-button .icon-left{flex-direction:row-reverse}.kit-button .icon-left .button-icon{margin-right:8px}.kit-button .k-button{height:44px;padding:0 12px;color:var(--ui-kit-color-white);font-weight:500;font-size:14px;gap:0;border-radius:6px;border:1px solid transparent}.kit-button .k-button .button-icon{width:16px;height:16px;stroke:var(--ui-kit-color-white);fill:none}.kit-button .k-button.small{height:28px;line-height:1;font-size:12px}.kit-button .k-button.filled{background:var(--ui-kit-color-main)}.kit-button .k-button.filled.k-state-focused{border-color:#3678c3}.kit-button .k-button.outlined{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-button .k-button.outlined .button-icon{stroke:var(--ui-kit-color-main)}.kit-button .k-button:disabled{color:#a9a8a8;background:#ebebe4}.kit-button .k-button:disabled .button-icon{stroke:#a9a8a8}.kit-button .k-button.k-state-focused{box-shadow:0 0 2px 4px #c7dff9}.kit-button .filled:hover{background:#002a3a}.kit-button .outlined:hover{background:var(--ui-kit-color-white-20)}.kit-button .outlined:disabled{border-color:#a9a8a8}.kit-button .icon-right.k-button.small .button-icon{margin-left:4px}.kit-button .icon-left.k-button.small .button-icon{margin-right:4px}\n"], dependencies: [{ kind: "directive", type: i1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "role", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
98
102
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: KitButtonComponent, decorators: [{
|
|
99
103
|
type: Component,
|
|
100
|
-
args: [{ selector: 'kit-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [ngClass]=\"[type, kind, iconPosition]\"\n (click)=\"clicked.emit()\">\n {{ label }}\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-main-20: #ddecfd;--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-green: #00b0ad;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0}.kit-button .icon-right{flex-direction:row}.kit-button .icon-right .button-icon{margin-left:8px}.kit-button .icon-left{flex-direction:row-reverse}.kit-button .icon-left .button-icon{margin-right:8px}.kit-button .k-button{height:44px;padding:0 12px;color:var(--ui-kit-color-white);font-weight:500;font-size:14px;gap:0;border-radius:6px;border:1px solid transparent}.kit-button .k-button .button-icon{width:16px;height:16px;stroke:var(--ui-kit-color-white);fill:none}.kit-button .k-button.small{height:28px;line-height:1;font-size:12px}.kit-button .k-button.filled{background:var(--ui-kit-color-main)}.kit-button .k-button.filled.k-state-focused{border-color:#3678c3}.kit-button .k-button.outlined{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-button .k-button.outlined .button-icon{stroke:var(--ui-kit-color-main)}.kit-button .k-button:disabled{color:#a9a8a8;background:#ebebe4}.kit-button .k-button:disabled .button-icon{stroke:#a9a8a8}.kit-button .k-button.k-state-focused{box-shadow:0 0 2px 4px #c7dff9}.kit-button .filled:hover{background:#002a3a}.kit-button .outlined:hover{background:var(--ui-kit-color-white-20)}.kit-button .outlined:disabled{border-color:#a9a8a8}.kit-button .icon-right.k-button.small .button-icon{margin-left:4px}.kit-button .icon-left.k-button.small .button-icon{margin-right:4px}\n"] }]
|
|
104
|
+
args: [{ selector: 'kit-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n (click)=\"clicked.emit()\">\n {{ label }}\n <kit-svg-icon *ngIf=\"icon\"\n class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-main-20: #ddecfd;--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-green: #00b0ad;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0}.kit-button .icon-right{flex-direction:row}.kit-button .icon-right .button-icon{margin-left:8px}.kit-button .icon-left{flex-direction:row-reverse}.kit-button .icon-left .button-icon{margin-right:8px}.kit-button .k-button{height:44px;padding:0 12px;color:var(--ui-kit-color-white);font-weight:500;font-size:14px;gap:0;border-radius:6px;border:1px solid transparent}.kit-button .k-button .button-icon{width:16px;height:16px;stroke:var(--ui-kit-color-white);fill:none}.kit-button .k-button.small{height:28px;line-height:1;font-size:12px}.kit-button .k-button.filled{background:var(--ui-kit-color-main)}.kit-button .k-button.filled.k-state-focused{border-color:#3678c3}.kit-button .k-button.outlined{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-button .k-button.outlined .button-icon{stroke:var(--ui-kit-color-main)}.kit-button .k-button:disabled{color:#a9a8a8;background:#ebebe4}.kit-button .k-button:disabled .button-icon{stroke:#a9a8a8}.kit-button .k-button.k-state-focused{box-shadow:0 0 2px 4px #c7dff9}.kit-button .filled:hover{background:#002a3a}.kit-button .outlined:hover{background:var(--ui-kit-color-white-20)}.kit-button .outlined:disabled{border-color:#a9a8a8}.kit-button .icon-right.k-button.small .button-icon{margin-left:4px}.kit-button .icon-left.k-button.small .button-icon{margin-right:4px}\n"] }]
|
|
101
105
|
}], propDecorators: { disabled: [{
|
|
102
106
|
type: Input
|
|
103
107
|
}], label: [{
|
|
@@ -110,6 +114,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
|
|
|
110
114
|
type: Input
|
|
111
115
|
}], iconPosition: [{
|
|
112
116
|
type: Input
|
|
117
|
+
}], buttonClass: [{
|
|
118
|
+
type: Input
|
|
113
119
|
}], clicked: [{
|
|
114
120
|
type: Output
|
|
115
121
|
}] } });
|
|
@@ -2509,7 +2515,7 @@ class KitCtaPanelActionComponent {
|
|
|
2509
2515
|
}
|
|
2510
2516
|
}
|
|
2511
2517
|
KitCtaPanelActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: KitCtaPanelActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2512
|
-
KitCtaPanelActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: KitCtaPanelActionComponent, selector: "kit-cta-panel-action", inputs: { disabled: "disabled", confirmText: "confirmText", quitText: "quitText" }, outputs: { quitClicked: "quitClicked", confirmClicked: "confirmClicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-action\">\n <kit-button class=\"action-button\"\n [label]=\"quitText\"\n [kind]=\"KitButtonKind.SMALL\"\n [type]=\"KitButtonType.OUTLINED\"\n (clicked)=\"quitClicked.emit()\"\n ></kit-button>\n <kit-button class=\"action-button\"\n [label]=\"confirmText\"\n [kind]=\"KitButtonKind.SMALL\"\n [disabled]=\"disabled\"\n (clicked)=\"confirmClicked.emit()\"\n ></kit-button>\n</div>\n", styles: [".kit-cta-panel-action{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.kit-cta-panel-action .action-button ::ng-deep .k-button{width:100%}\n"], dependencies: [{ kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "kind", "iconPosition"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2518
|
+
KitCtaPanelActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: KitCtaPanelActionComponent, selector: "kit-cta-panel-action", inputs: { disabled: "disabled", confirmText: "confirmText", quitText: "quitText" }, outputs: { quitClicked: "quitClicked", confirmClicked: "confirmClicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-action\">\n <kit-button class=\"action-button\"\n [label]=\"quitText\"\n [kind]=\"KitButtonKind.SMALL\"\n [type]=\"KitButtonType.OUTLINED\"\n (clicked)=\"quitClicked.emit()\"\n ></kit-button>\n <kit-button class=\"action-button\"\n [label]=\"confirmText\"\n [kind]=\"KitButtonKind.SMALL\"\n [disabled]=\"disabled\"\n (clicked)=\"confirmClicked.emit()\"\n ></kit-button>\n</div>\n", styles: [".kit-cta-panel-action{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.kit-cta-panel-action .action-button ::ng-deep .k-button{width:100%}\n"], dependencies: [{ kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "kind", "iconPosition", "buttonClass"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2513
2519
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: KitCtaPanelActionComponent, decorators: [{
|
|
2514
2520
|
type: Component,
|
|
2515
2521
|
args: [{ selector: 'kit-cta-panel-action', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-cta-panel-action\">\n <kit-button class=\"action-button\"\n [label]=\"quitText\"\n [kind]=\"KitButtonKind.SMALL\"\n [type]=\"KitButtonType.OUTLINED\"\n (clicked)=\"quitClicked.emit()\"\n ></kit-button>\n <kit-button class=\"action-button\"\n [label]=\"confirmText\"\n [kind]=\"KitButtonKind.SMALL\"\n [disabled]=\"disabled\"\n (clicked)=\"confirmClicked.emit()\"\n ></kit-button>\n</div>\n", styles: [".kit-cta-panel-action{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.kit-cta-panel-action .action-button ::ng-deep .k-button{width:100%}\n"] }]
|
|
@@ -2896,10 +2902,10 @@ class KitNavigationTabsComponent {
|
|
|
2896
2902
|
}
|
|
2897
2903
|
}
|
|
2898
2904
|
KitNavigationTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: KitNavigationTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2899
|
-
KitNavigationTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: KitNavigationTabsComponent, selector: "kit-navigation-tabs", inputs: { items: "items" }, ngImport: i0, template: "<div class=\"kit-navigation-tabs\">\n <div class=\"tabs-nav\">\n <a *ngFor=\"let item of items\"\n class=\"tab-item\"\n routerLinkActive=\"tab-item-active\"\n [routerLink]=\"getRouterLink(item)\">\n <kit-svg-icon *ngIf=\"item.icon\"\n class=\"tab-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"getItemIconCssClass(item)\"\n ></kit-svg-icon>\n <span class=\"tab-item-title\"
|
|
2905
|
+
KitNavigationTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: KitNavigationTabsComponent, selector: "kit-navigation-tabs", inputs: { items: "items" }, ngImport: i0, template: "<div class=\"kit-navigation-tabs\">\n <div class=\"tabs-nav\">\n <a *ngFor=\"let item of items\"\n class=\"tab-item\"\n routerLinkActive=\"tab-item-active\"\n [routerLink]=\"getRouterLink(item)\">\n <kit-svg-icon *ngIf=\"item.icon\"\n class=\"tab-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"getItemIconCssClass(item)\"\n ></kit-svg-icon>\n \n <span class=\"tab-item-title\"\n [innerHTML]=\"item.title\"\n ></span>\n </a>\n </div>\n</div>\n", styles: [".kit-navigation-tabs .tabs-nav{display:flex;padding:12px 8px;gap:40px;box-shadow:0 4px 4px #505d6833;background:var(--ui-kit-color-white)}.kit-navigation-tabs .tab-item{display:flex;align-items:center;color:var(--ui-kit-color-grey-2);text-decoration:none}.kit-navigation-tabs .tab-item-icon{display:block;margin-right:4px;width:24px;height:24px}.kit-navigation-tabs .tab-item-icon.fill{fill:var(--ui-kit-color-grey-2);stroke:none}.kit-navigation-tabs .tab-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-2)}.kit-navigation-tabs .tab-item-title{font-weight:500;font-size:14px}.kit-navigation-tabs .tab-item-active{color:var(--ui-kit-color-grey-0)}.kit-navigation-tabs .tab-item-active .tab-item-icon.fill{fill:var(--ui-kit-color-grey-0)}.kit-navigation-tabs .tab-item-active .tab-item-icon.stroke{stroke:var(--ui-kit-color-grey-0)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: i1$4.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2900
2906
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: KitNavigationTabsComponent, decorators: [{
|
|
2901
2907
|
type: Component,
|
|
2902
|
-
args: [{ selector: 'kit-navigation-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-navigation-tabs\">\n <div class=\"tabs-nav\">\n <a *ngFor=\"let item of items\"\n class=\"tab-item\"\n routerLinkActive=\"tab-item-active\"\n [routerLink]=\"getRouterLink(item)\">\n <kit-svg-icon *ngIf=\"item.icon\"\n class=\"tab-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"getItemIconCssClass(item)\"\n ></kit-svg-icon>\n <span class=\"tab-item-title\"
|
|
2908
|
+
args: [{ selector: 'kit-navigation-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-navigation-tabs\">\n <div class=\"tabs-nav\">\n <a *ngFor=\"let item of items\"\n class=\"tab-item\"\n routerLinkActive=\"tab-item-active\"\n [routerLink]=\"getRouterLink(item)\">\n <kit-svg-icon *ngIf=\"item.icon\"\n class=\"tab-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"getItemIconCssClass(item)\"\n ></kit-svg-icon>\n \n <span class=\"tab-item-title\"\n [innerHTML]=\"item.title\"\n ></span>\n </a>\n </div>\n</div>\n", styles: [".kit-navigation-tabs .tabs-nav{display:flex;padding:12px 8px;gap:40px;box-shadow:0 4px 4px #505d6833;background:var(--ui-kit-color-white)}.kit-navigation-tabs .tab-item{display:flex;align-items:center;color:var(--ui-kit-color-grey-2);text-decoration:none}.kit-navigation-tabs .tab-item-icon{display:block;margin-right:4px;width:24px;height:24px}.kit-navigation-tabs .tab-item-icon.fill{fill:var(--ui-kit-color-grey-2);stroke:none}.kit-navigation-tabs .tab-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-2)}.kit-navigation-tabs .tab-item-title{font-weight:500;font-size:14px}.kit-navigation-tabs .tab-item-active{color:var(--ui-kit-color-grey-0)}.kit-navigation-tabs .tab-item-active .tab-item-icon.fill{fill:var(--ui-kit-color-grey-0)}.kit-navigation-tabs .tab-item-active .tab-item-icon.stroke{stroke:var(--ui-kit-color-grey-0)}\n"] }]
|
|
2903
2909
|
}], propDecorators: { items: [{
|
|
2904
2910
|
type: Input
|
|
2905
2911
|
}] } });
|