@indigina/ui-kit 1.1.91 → 1.1.92
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/assets/icons/filter.svg +3 -0
- package/esm2022/lib/components/kit-button/kit-button.component.mjs +9 -3
- package/esm2022/lib/components/kit-card/kit-card.component.mjs +2 -2
- package/esm2022/lib/components/kit-cta-panel-action/kit-cta-panel-action.component.mjs +1 -1
- package/esm2022/lib/components/kit-datepicker/kit-datepicker.component.mjs +2 -2
- package/esm2022/lib/components/kit-daterange/kit-daterange.component.mjs +2 -2
- package/esm2022/lib/components/kit-datetimepicker/kit-datetimepicker.component.mjs +2 -2
- package/esm2022/lib/components/kit-file-card/kit-file-card.component.mjs +1 -1
- package/esm2022/lib/components/kit-file-upload/kit-file-upload.component.mjs +1 -1
- package/esm2022/lib/components/kit-popup/kit-popup.component.mjs +27 -16
- package/esm2022/lib/components/kit-profile-menu/kit-profile-menu.component.mjs +16 -8
- package/esm2022/lib/components/kit-scroll-navigation/kit-scroll-navigation.component.mjs +1 -1
- package/esm2022/lib/components/kit-search-bar/kit-search-bar.component.mjs +1 -1
- package/esm2022/lib/components/kit-svg-icon/kit-svg-icon.const.mjs +2 -1
- package/esm2022/lib/components/kit-svg-sprite/kit-svg-sprite.component.mjs +3 -3
- package/esm2022/public-api.mjs +1 -4
- package/fesm2022/indigina-ui-kit.mjs +58 -128
- package/fesm2022/indigina-ui-kit.mjs.map +1 -1
- package/lib/components/kit-button/kit-button.component.d.ts +5 -1
- package/lib/components/kit-popup/kit-popup.component.d.ts +8 -7
- package/lib/components/kit-profile-menu/kit-profile-menu.component.d.ts +1 -1
- package/lib/components/kit-svg-icon/kit-svg-icon.const.d.ts +2 -1
- package/package.json +1 -1
- package/public-api.d.ts +0 -3
- package/esm2022/lib/components/kit-popup/kit-popup.directive.mjs +0 -37
- package/esm2022/lib/components/kit-popup/kit-popup.module.mjs +0 -33
- package/esm2022/lib/components/kit-profile-menu/kit-profile-menu.module.mjs +0 -39
- package/lib/components/kit-popup/kit-popup.directive.d.ts +0 -14
- package/lib/components/kit-popup/kit-popup.module.d.ts +0 -10
- package/lib/components/kit-profile-menu/kit-profile-menu.module.d.ts +0 -12
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3867 3.70885C16.3867 4.13888 15.9748 4.48789 15.4672 4.48789H1.30626C0.798673 4.48789 0.386719 4.13888 0.386719 3.70885L0.386719 2.98122C0.386719 2.55119 0.798673 2.20218 1.30626 2.20218L15.4672 2.20218C15.9748 2.20218 16.3867 2.55119 16.3867 2.98122V3.70885ZM13.6281 8.48128C13.6281 8.91131 13.2161 9.26032 12.7086 9.26032H4.06487C3.55729 9.26032 3.14533 8.91131 3.14533 8.48128V7.75365C3.14533 7.32362 3.55729 6.9746 4.06487 6.9746H12.7086C13.2161 6.9746 13.6281 7.32362 13.6281 7.75365V8.48128ZM9.94994 14.0346C10.4575 14.0346 10.8695 13.6855 10.8695 13.2555V12.5279C10.8695 12.0979 10.4575 11.7488 9.94994 11.7488H6.82351C6.31592 11.7488 5.90397 12.0979 5.90397 12.5279V13.2555C5.90397 13.6855 6.31592 14.0346 6.82351 14.0346H9.94994Z"/>
|
|
3
|
+
</svg>
|
|
@@ -31,6 +31,10 @@ export class KitButtonComponent {
|
|
|
31
31
|
* A CSS class which will be applied to the HTML button component
|
|
32
32
|
*/
|
|
33
33
|
this.buttonClass = 'kit-button-target';
|
|
34
|
+
/**
|
|
35
|
+
* Defines an active state of the button
|
|
36
|
+
*/
|
|
37
|
+
this.active = false;
|
|
34
38
|
/**
|
|
35
39
|
* An action which is emitted as soon as user clicked the button
|
|
36
40
|
*/
|
|
@@ -38,11 +42,11 @@ export class KitButtonComponent {
|
|
|
38
42
|
this.KitSvgIconType = KitSvgIconType;
|
|
39
43
|
}
|
|
40
44
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
41
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitButtonComponent, selector: "kit-button", inputs: { disabled: "disabled", label: "label", type: "type", icon: "icon", iconType: "iconType", kind: "kind", iconPosition: "iconPosition", buttonClass: "buttonClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [class.no-label]=\"!label\"\n [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n (click)=\"clicked.emit()\">\n {{ label }}\n @if (icon) {\n <kit-svg-icon class=\"kit-button-icon\"\n [icon]=\"icon\"\n [ngClass]=\"iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n </button>\n</div>\n", styles: [".kit-button .k-button-text{display:flex;align-items:center;gap:8px}.kit-button-icon{display:block}.kit-button .k-button{font-weight:400;border:1px solid transparent;transition:none}.kit-button .k-button:focus{box-shadow:none}.kit-button .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-button .primary:hover{background:var(--ui-kit-color-hover)}.kit-button .primary:active{background:var(--ui-kit-color-main)}.kit-button .primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .ghost:active{color:var(--ui-kit-color-active);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-active);stroke:none}.kit-button .ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-active);fill:none}.kit-button .ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .text{color:var(--ui-kit-color-grey-10);background:none}.kit-button .text:disabled{border:none;background:none}.kit-button .text:hover,.kit-button .text:active{background:var(--ui-kit-color-grey-13)}.kit-button .text:hover{color:var(--ui-kit-color-hover)}.kit-button .text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .text:active{color:var(--ui-kit-color-main)}.kit-button .text:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .link{color:var(--ui-kit-color-main);background:none}.kit-button .link:disabled{border:none;background:none}.kit-button .link:hover{color:var(--ui-kit-color-hover)}.kit-button .link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .link:active{color:var(--ui-kit-color-main)}.kit-button .link:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .link .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);border-style:dashed;background:var(--ui-kit-color-white)}.kit-button .dashed:disabled{border-style:dashed}.kit-button .dashed:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .dashed:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-button .dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .large{padding:0 16px;height:40px;font-size:16px;border-radius:8px}.kit-button .large .kit-button-icon{width:18px;height:18px}.kit-button .medium{padding:0 16px;height:32px;font-size:14px;border-radius:6px}.kit-button .medium .kit-button-icon{width:16px;height:16px}.kit-button .small{padding:0 8px;height:24px;font-size:14px;border-radius:4px}.kit-button .small .kit-button-icon{width:14px;height:14px}.kit-button .leading .k-button-text{flex-direction:row-reverse}.kit-button .trailing .k-button-text{flex-direction:row}.kit-button .no-label.large{padding:0 11px}.kit-button .no-label.medium{padding:0 8px}.kit-button .no-label.small{padding:0 6px}\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: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
45
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitButtonComponent, selector: "kit-button", inputs: { disabled: "disabled", label: "label", type: "type", icon: "icon", iconType: "iconType", kind: "kind", iconPosition: "iconPosition", buttonClass: "buttonClass", active: "active" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [class.no-label]=\"!label\"\n [class.active]=\"active\"\n [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n (click)=\"clicked.emit()\">\n {{ label }}\n @if (icon) {\n <kit-svg-icon class=\"kit-button-icon\"\n [icon]=\"icon\"\n [ngClass]=\"iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n </button>\n</div>\n", styles: [".kit-button .k-button-text{display:flex;align-items:center;gap:8px}.kit-button-icon{display:block}.kit-button .k-button{font-weight:400;border:1px solid transparent;transition:none}.kit-button .k-button:focus{box-shadow:none}.kit-button .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-button .primary:hover{background:var(--ui-kit-color-hover)}.kit-button .primary.active,.kit-button .primary:active{background:var(--ui-kit-color-main)}.kit-button .primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .ghost.active,.kit-button .ghost:active{color:var(--ui-kit-color-active);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost.active .kit-button-icon.fill,.kit-button .ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-active);stroke:none}.kit-button .ghost.active .kit-button-icon.stroke,.kit-button .ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-active);fill:none}.kit-button .ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .text{color:var(--ui-kit-color-grey-10);background:none}.kit-button .text:disabled{border:none;background:none}.kit-button .text:hover,.kit-button .text.active,.kit-button .text:active{background:var(--ui-kit-color-grey-13)}.kit-button .text:hover{color:var(--ui-kit-color-hover)}.kit-button .text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .text.active,.kit-button .text:active{color:var(--ui-kit-color-main)}.kit-button .text.active .kit-button-icon.fill,.kit-button .text:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .text.active .kit-button-icon.stroke,.kit-button .text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .link{color:var(--ui-kit-color-main);background:none}.kit-button .link:disabled{border:none;background:none}.kit-button .link:hover{color:var(--ui-kit-color-hover)}.kit-button .link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .link.active,.kit-button .link:active{color:var(--ui-kit-color-main)}.kit-button .link.active .kit-button-icon.fill,.kit-button .link:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link.active .kit-button-icon.stroke,.kit-button .link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .link .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);border-style:dashed;background:var(--ui-kit-color-white)}.kit-button .dashed:disabled{border-style:dashed}.kit-button .dashed:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .dashed.active,.kit-button .dashed:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-button .dashed.active .kit-button-icon.fill,.kit-button .dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed.active .kit-button-icon.stroke,.kit-button .dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .large{padding:0 16px;height:40px;font-size:16px;border-radius:8px}.kit-button .large .kit-button-icon{width:18px;height:18px}.kit-button .medium{padding:0 16px;height:32px;font-size:14px;border-radius:6px}.kit-button .medium .kit-button-icon{width:16px;height:16px}.kit-button .small{padding:0 8px;height:24px;font-size:14px;border-radius:4px}.kit-button .small .kit-button-icon{width:14px;height:14px}.kit-button .leading .k-button-text{flex-direction:row-reverse}.kit-button .trailing .k-button-text{flex-direction:row}.kit-button .no-label.large{padding:0 11px}.kit-button .no-label.medium{padding:0 8px}.kit-button .no-label.small{padding:0 6px}\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: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
42
46
|
}
|
|
43
47
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitButtonComponent, decorators: [{
|
|
44
48
|
type: Component,
|
|
45
|
-
args: [{ selector: 'kit-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [class.no-label]=\"!label\"\n [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n (click)=\"clicked.emit()\">\n {{ label }}\n @if (icon) {\n <kit-svg-icon class=\"kit-button-icon\"\n [icon]=\"icon\"\n [ngClass]=\"iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n </button>\n</div>\n", styles: [".kit-button .k-button-text{display:flex;align-items:center;gap:8px}.kit-button-icon{display:block}.kit-button .k-button{font-weight:400;border:1px solid transparent;transition:none}.kit-button .k-button:focus{box-shadow:none}.kit-button .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-button .primary:hover{background:var(--ui-kit-color-hover)}.kit-button .primary:active{background:var(--ui-kit-color-main)}.kit-button .primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .ghost:active{color:var(--ui-kit-color-active);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-active);stroke:none}.kit-button .ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-active);fill:none}.kit-button .ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .text{color:var(--ui-kit-color-grey-10);background:none}.kit-button .text:disabled{border:none;background:none}.kit-button .text:hover,.kit-button .text:active{background:var(--ui-kit-color-grey-13)}.kit-button .text:hover{color:var(--ui-kit-color-hover)}.kit-button .text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .text:active{color:var(--ui-kit-color-main)}.kit-button .text:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .link{color:var(--ui-kit-color-main);background:none}.kit-button .link:disabled{border:none;background:none}.kit-button .link:hover{color:var(--ui-kit-color-hover)}.kit-button .link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .link:active{color:var(--ui-kit-color-main)}.kit-button .link:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .link .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);border-style:dashed;background:var(--ui-kit-color-white)}.kit-button .dashed:disabled{border-style:dashed}.kit-button .dashed:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .dashed:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-button .dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .large{padding:0 16px;height:40px;font-size:16px;border-radius:8px}.kit-button .large .kit-button-icon{width:18px;height:18px}.kit-button .medium{padding:0 16px;height:32px;font-size:14px;border-radius:6px}.kit-button .medium .kit-button-icon{width:16px;height:16px}.kit-button .small{padding:0 8px;height:24px;font-size:14px;border-radius:4px}.kit-button .small .kit-button-icon{width:14px;height:14px}.kit-button .leading .k-button-text{flex-direction:row-reverse}.kit-button .trailing .k-button-text{flex-direction:row}.kit-button .no-label.large{padding:0 11px}.kit-button .no-label.medium{padding:0 8px}.kit-button .no-label.small{padding:0 6px}\n"] }]
|
|
49
|
+
args: [{ selector: 'kit-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [class.no-label]=\"!label\"\n [class.active]=\"active\"\n [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n (click)=\"clicked.emit()\">\n {{ label }}\n @if (icon) {\n <kit-svg-icon class=\"kit-button-icon\"\n [icon]=\"icon\"\n [ngClass]=\"iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n </button>\n</div>\n", styles: [".kit-button .k-button-text{display:flex;align-items:center;gap:8px}.kit-button-icon{display:block}.kit-button .k-button{font-weight:400;border:1px solid transparent;transition:none}.kit-button .k-button:focus{box-shadow:none}.kit-button .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-button .primary:hover{background:var(--ui-kit-color-hover)}.kit-button .primary.active,.kit-button .primary:active{background:var(--ui-kit-color-main)}.kit-button .primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .ghost.active,.kit-button .ghost:active{color:var(--ui-kit-color-active);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost.active .kit-button-icon.fill,.kit-button .ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-active);stroke:none}.kit-button .ghost.active .kit-button-icon.stroke,.kit-button .ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-active);fill:none}.kit-button .ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .text{color:var(--ui-kit-color-grey-10);background:none}.kit-button .text:disabled{border:none;background:none}.kit-button .text:hover,.kit-button .text.active,.kit-button .text:active{background:var(--ui-kit-color-grey-13)}.kit-button .text:hover{color:var(--ui-kit-color-hover)}.kit-button .text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .text.active,.kit-button .text:active{color:var(--ui-kit-color-main)}.kit-button .text.active .kit-button-icon.fill,.kit-button .text:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .text.active .kit-button-icon.stroke,.kit-button .text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .link{color:var(--ui-kit-color-main);background:none}.kit-button .link:disabled{border:none;background:none}.kit-button .link:hover{color:var(--ui-kit-color-hover)}.kit-button .link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .link.active,.kit-button .link:active{color:var(--ui-kit-color-main)}.kit-button .link.active .kit-button-icon.fill,.kit-button .link:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link.active .kit-button-icon.stroke,.kit-button .link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .link .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);border-style:dashed;background:var(--ui-kit-color-white)}.kit-button .dashed:disabled{border-style:dashed}.kit-button .dashed:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .dashed.active,.kit-button .dashed:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-button .dashed.active .kit-button-icon.fill,.kit-button .dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed.active .kit-button-icon.stroke,.kit-button .dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .large{padding:0 16px;height:40px;font-size:16px;border-radius:8px}.kit-button .large .kit-button-icon{width:18px;height:18px}.kit-button .medium{padding:0 16px;height:32px;font-size:14px;border-radius:6px}.kit-button .medium .kit-button-icon{width:16px;height:16px}.kit-button .small{padding:0 8px;height:24px;font-size:14px;border-radius:4px}.kit-button .small .kit-button-icon{width:14px;height:14px}.kit-button .leading .k-button-text{flex-direction:row-reverse}.kit-button .trailing .k-button-text{flex-direction:row}.kit-button .no-label.large{padding:0 11px}.kit-button .no-label.medium{padding:0 8px}.kit-button .no-label.small{padding:0 6px}\n"] }]
|
|
46
50
|
}], propDecorators: { disabled: [{
|
|
47
51
|
type: Input
|
|
48
52
|
}], label: [{
|
|
@@ -59,7 +63,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
59
63
|
type: Input
|
|
60
64
|
}], buttonClass: [{
|
|
61
65
|
type: Input
|
|
66
|
+
}], active: [{
|
|
67
|
+
type: Input
|
|
62
68
|
}], clicked: [{
|
|
63
69
|
type: Output
|
|
64
70
|
}] } });
|
|
65
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
71
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2l0LWJ1dHRvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1idXR0b24va2l0LWJ1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1idXR0b24va2l0LWJ1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWMsY0FBYyxFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFDaEYsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNuSCxPQUFPLEVBQUUscUJBQXFCLEVBQUUsYUFBYSxFQUFFLGFBQWEsRUFBRSxNQUFNLG9CQUFvQixDQUFDOzs7OztBQVN6RixNQUFNLE9BQU8sa0JBQWtCO0lBUC9CO1FBUUU7O1dBRUc7UUFDTSxhQUFRLEdBQVksS0FBSyxDQUFDO1FBRW5DOztXQUVHO1FBQ00sVUFBSyxHQUFXLEVBQUUsQ0FBQztRQUU1Qjs7V0FFRztRQUNNLFNBQUksR0FBa0IsYUFBYSxDQUFDLE9BQU8sQ0FBQztRQVlyRDs7V0FFRztRQUNNLFNBQUksR0FBa0IsYUFBYSxDQUFDLEtBQUssQ0FBQztRQUVuRDs7V0FFRztRQUNNLGlCQUFZLEdBQTBCLHFCQUFxQixDQUFDLFFBQVEsQ0FBQztRQUU5RTs7V0FFRztRQUNNLGdCQUFXLEdBQVcsbUJBQW1CLENBQUM7UUFFbkQ7O1dBRUc7UUFDTSxXQUFNLEdBQVksS0FBSyxDQUFDO1FBRWpDOztXQUVHO1FBQ08sWUFBTyxHQUF1QixJQUFJLFlBQVksRUFBUSxDQUFDO1FBRXhELG1CQUFjLEdBQTBCLGNBQWMsQ0FBQztLQUNqRTs4R0FwRFksa0JBQWtCO2tHQUFsQixrQkFBa0IsaVJDWC9CLDBmQWdCQTs7MkZETGEsa0JBQWtCO2tCQVA5QixTQUFTOytCQUNFLFlBQVksbUJBR0wsdUJBQXVCLENBQUMsTUFBTSxpQkFDaEMsaUJBQWlCLENBQUMsSUFBSTs4QkFNNUIsUUFBUTtzQkFBaEIsS0FBSztnQkFLRyxLQUFLO3NCQUFiLEtBQUs7Z0JBS0csSUFBSTtzQkFBWixLQUFLO2dCQUtHLElBQUk7c0JBQVosS0FBSztnQkFLRyxRQUFRO3NCQUFoQixLQUFLO2dCQUtHLElBQUk7c0JBQVosS0FBSztnQkFLRyxZQUFZO3NCQUFwQixLQUFLO2dCQUtHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBS0csTUFBTTtzQkFBZCxLQUFLO2dCQUtJLE9BQU87c0JBQWhCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBLaXRTdmdJY29uLCBLaXRTdmdJY29uVHlwZSB9IGZyb20gJy4uL2tpdC1zdmctaWNvbi9raXQtc3ZnLWljb24uY29uc3QnO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgS2l0QnV0dG9uSWNvblBvc2l0aW9uLCBLaXRCdXR0b25LaW5kLCBLaXRCdXR0b25UeXBlIH0gZnJvbSAnLi9raXQtYnV0dG9uLmNvbnN0JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAna2l0LWJ1dHRvbicsXG4gIHN0eWxlVXJsczogWycuL2tpdC1idXR0b24uY29tcG9uZW50LnNjc3MnXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2tpdC1idXR0b24uY29tcG9uZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgS2l0QnV0dG9uQ29tcG9uZW50IHtcbiAgLyoqXG4gICAqIFN0YXRlcyB3aGV0aGVyIHRoZSBidXR0b24gd2lsbCBiZSBkaXNhYmxlZCBvciBub3QgZnJvbSBhcHBlYXJhbmNlIHBvaW50IG9mIHZpZXdcbiAgICovXG4gIEBJbnB1dCgpIGRpc2FibGVkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIERlZmluZXMgYSB2YWx1ZSB0aGF0IGlzIGdvaW5nIHRvIGJlIGFwcGxpZWQgYXMgYSBidXR0b24gbGFiZWxcbiAgICovXG4gIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmcgPSAnJztcblxuICAvKipcbiAgICogVGhpcyB2YWx1ZSBkZWZpbmVzIGJ1dHRvbiB0eXBlXG4gICAqL1xuICBASW5wdXQoKSB0eXBlOiBLaXRCdXR0b25UeXBlID0gS2l0QnV0dG9uVHlwZS5QUklNQVJZO1xuXG4gIC8qKlxuICAgKiBBbiBpY29uIHdoaWNoIHdpbGwgYmUgdXNlZCBpbiBhIGJ1dHRvbiB3aXRoIGljb25cbiAgICovXG4gIEBJbnB1dCgpIGljb24/OiBLaXRTdmdJY29uO1xuXG4gIC8qKlxuICAgKiBEZWZpbmVzIHRoZSBpY29uIHR5cGUgb2YgdGhlIGJ1dHRvblxuICAgKi9cbiAgQElucHV0KCkgaWNvblR5cGU/OiBLaXRTdmdJY29uVHlwZTtcblxuICAvKipcbiAgICogRGVmaW5lcyBhIGtpbmQgb2YgYnV0dG9uIChyZWd1bGFyLCBtaW5pLCBldGMuKVxuICAgKi9cbiAgQElucHV0KCkga2luZDogS2l0QnV0dG9uS2luZCA9IEtpdEJ1dHRvbktpbmQuTEFSR0U7XG5cbiAgLyoqXG4gICAqIEEgcGxhY2Ugd2hlcmUgdGhlIGljb24gd2lsbCBiZSBkaXNwbGF5ZWRcbiAgICovXG4gIEBJbnB1dCgpIGljb25Qb3NpdGlvbjogS2l0QnV0dG9uSWNvblBvc2l0aW9uID0gS2l0QnV0dG9uSWNvblBvc2l0aW9uLlRSQUlMSU5HO1xuXG4gIC8qKlxuICAgKiBBIENTUyBjbGFzcyB3aGljaCB3aWxsIGJlIGFwcGxpZWQgdG8gdGhlIEhUTUwgYnV0dG9uIGNvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgYnV0dG9uQ2xhc3M6IHN0cmluZyA9ICdraXQtYnV0dG9uLXRhcmdldCc7XG5cbiAgLyoqXG4gICAqIERlZmluZXMgYW4gYWN0aXZlIHN0YXRlIG9mIHRoZSBidXR0b25cbiAgICovXG4gIEBJbnB1dCgpIGFjdGl2ZTogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBBbiBhY3Rpb24gd2hpY2ggaXMgZW1pdHRlZCBhcyBzb29uIGFzIHVzZXIgY2xpY2tlZCB0aGUgYnV0dG9uXG4gICAqL1xuICBAT3V0cHV0KCkgY2xpY2tlZDogRXZlbnRFbWl0dGVyPHZvaWQ+ID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gIHJlYWRvbmx5IEtpdFN2Z0ljb25UeXBlOiB0eXBlb2YgS2l0U3ZnSWNvblR5cGUgPSBLaXRTdmdJY29uVHlwZTtcbn1cbiIsIjxkaXYgY2xhc3M9XCJraXQtYnV0dG9uXCI+XG4gIDxidXR0b24ga2VuZG9CdXR0b25cbiAgICAgICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgICAgICAgIFtjbGFzcy5uby1sYWJlbF09XCIhbGFiZWxcIlxuICAgICAgICAgIFtjbGFzcy5hY3RpdmVdPVwiYWN0aXZlXCJcbiAgICAgICAgICBbbmdDbGFzc109XCJbdHlwZSwga2luZCwgaWNvblBvc2l0aW9uLCBidXR0b25DbGFzc11cIlxuICAgICAgICAgIChjbGljayk9XCJjbGlja2VkLmVtaXQoKVwiPlxuICAgIHt7IGxhYmVsIH19XG4gICAgQGlmIChpY29uKSB7XG4gICAgICA8a2l0LXN2Zy1pY29uIGNsYXNzPVwia2l0LWJ1dHRvbi1pY29uXCJcbiAgICAgICAgICAgICAgICAgICAgW2ljb25dPVwiaWNvblwiXG4gICAgICAgICAgICAgICAgICAgIFtuZ0NsYXNzXT1cImljb25UeXBlID8/IEtpdFN2Z0ljb25UeXBlLkZJTExcIlxuICAgICAgPjwva2l0LXN2Zy1pY29uPlxuICAgIH1cbiAgPC9idXR0b24+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -42,7 +42,7 @@ export class KitCardComponent {
|
|
|
42
42
|
this.toggleClicked.emit(this.itemsExpanded);
|
|
43
43
|
}
|
|
44
44
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
45
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitCardComponent, selector: "kit-card", inputs: { data: "data", theme: "theme", itemsExpanded: "itemsExpanded" }, outputs: { buttonClicked: "buttonClicked", toggleClicked: "toggleClicked" }, ngImport: i0, template: "@if (data) {\n <div class=\"kit-card {{ theme }}-theme\">\n <div class=\"kit-card-head\">\n <kit-svg-icon class=\"head-icon\"\n [icon]=\"data.titleIcon\"\n [ngClass]=\"data?.titleIconType\"\n ></kit-svg-icon>\n <div class=\"head-title\">{{ data.title }}</div>\n </div>\n <div class=\"kit-card-content\">\n <div class=\"card-count\">{{ data.count }}</div>\n <div class=\"card-label\">{{ data.label }}</div>\n @if (data.items?.length) {\n <div class=\"card-items\"\n [@expandCollapse]=\"itemsExpanded\">\n @for (item of data.items; track item) {\n <a class=\"card-item\"\n [routerLink]=\"item.link\">\n @if (item.count) {\n <div class=\"card-item-count\">{{ item.count }}</div>\n }\n <div class=\"card-item-text\">{{ item.label }}</div>\n @if (item.tooltip) {\n <kit-svg-icon kitTooltip\n kitTooltipFilter=\".card-item-icon\"\n class=\"card-item-icon\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.tooltip\"\n [icon]=\"KitSvgIcon.INFO_CIRCLE\"\n ></kit-svg-icon>\n } @else if (item.icon) {\n <kit-svg-icon class=\"card-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item.iconType\"\n ></kit-svg-icon>\n }\n </a>\n }\n </div>\n }\n @if (data.items?.length > 1) {\n <button class=\"toggle-btn\"\n (click)=\"toggleList()\">\n @if (itemsExpanded) {\n <span class=\"toggle-btn-label\">Show less</span>\n <kit-svg-icon class=\"toggle-btn-icon\"\n [icon]=\"KitSvgIcon.CARET_UP\"\n ></kit-svg-icon>\n } @else {\n <span class=\"toggle-btn-label\">Show more</span>\n <kit-svg-icon class=\"toggle-btn-icon\"\n [icon]=\"KitSvgIcon.CARET_DOWN\"\n ></kit-svg-icon>\n }\n </button>\n }\n </div>\n <div class=\"kit-card-action\">\n <a [routerLink]=\"data.link\">\n <kit-button class=\"action-button\"\n [type]=\"KitButtonType.GHOST\"\n [kind]=\"KitButtonKind.MEDIUM\"\n [label]=\"data.buttonLabel\"\n (clicked)=\"buttonClicked.emit()\"\n ></kit-button>\n </a>\n </div>\n </div>\n}\n", styles: [".kit-card{display:flex;flex-direction:column;padding:25px;width:100%;height:100%;color:var(--ui-kit-color-grey-10);font-weight:400;border:1px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box}.kit-card-head{display:flex;align-items:center;gap:12px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-card .head-icon{width:32px;height:32px}.kit-card .head-title{display:flex;align-items:center;flex:1;height:36px;font-size:18px}.kit-card-content{display:flex;flex-direction:column;margin-top:10px;flex-grow:1;text-align:center}.kit-card .card-count{padding-bottom:10px;font-size:48px;border-bottom:2px solid var(--ui-kit-color-main);line-height:40px;letter-spacing:-2.4px}.kit-card .card-label{margin-top:10px;font-size:16px}.kit-card .card-items{display:flex;flex-direction:column;flex-grow:1;gap:5px;margin-top:15px;overflow:hidden}.kit-card .card-item{display:flex;align-items:center;justify-content:center;gap:5px;color:var(--ui-kit-color-grey-14);font-size:14px;text-decoration:none}.kit-card .card-item:hover{color:var(--ui-kit-color-hover)}.kit-card .card-item-count{font-weight:600}.kit-card .card-item-icon{width:16px;height:16px}.kit-card .toggle-btn{display:inline-flex;justify-content:center;gap:3px;margin-top:5px;padding:0;color:var(--ui-kit-color-main);border:none;background:transparent;cursor:pointer}.kit-card .toggle-btn-label{font-size:14px;font-weight:500}.kit-card .toggle-btn-icon{width:16px;height:16px}.kit-card-action{margin-top:auto;padding-top:15px}.kit-card .action-button ::ng-deep .k-button{width:100%}.kit-card:hover{border-color:var(--ui-kit-color-hover)}.kit-card.default-theme .head-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.default-theme .head-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-card.default-theme .card-count{border-color:var(--ui-kit-color-main)}.kit-card.default-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.default-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.default-theme .card-item-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.default-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-card.default-theme .toggle-btn{color:var(--ui-kit-color-main)}.kit-card.default-theme .toggle-btn-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.green-theme .head-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.green-theme .head-icon.stroke{stroke:var(--ui-kit-color-green-3);fill:none}.kit-card.green-theme .card-count{border-color:var(--ui-kit-color-green-3)}.kit-card.green-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.green-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.green-theme .card-item-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.green-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-green-3);fill:none}.kit-card.green-theme .toggle-btn{color:var(--ui-kit-color-green-3)}.kit-card.green-theme .toggle-btn-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.pink-theme .head-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.pink-theme .head-icon.stroke{stroke:var(--ui-kit-color-pink);fill:none}.kit-card.pink-theme .card-count{border-color:var(--ui-kit-color-pink)}.kit-card.pink-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.pink-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.pink-theme .card-item-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.pink-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-pink);fill:none}.kit-card.pink-theme .toggle-btn{color:var(--ui-kit-color-pink)}.kit-card.pink-theme .toggle-btn-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.purple-theme .head-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.purple-theme .head-icon.stroke{stroke:var(--ui-kit-color-purple);fill:none}.kit-card.purple-theme .card-count{border-color:var(--ui-kit-color-purple)}.kit-card.purple-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.purple-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.purple-theme .card-item-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.purple-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-purple);fill:none}.kit-card.purple-theme .toggle-btn{color:var(--ui-kit-color-purple)}.kit-card.purple-theme .toggle-btn-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.teal-theme .head-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.teal-theme .head-icon.stroke{stroke:var(--ui-kit-color-teal);fill:none}.kit-card.teal-theme .card-count{border-color:var(--ui-kit-color-teal)}.kit-card.teal-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.teal-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.teal-theme .card-item-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.teal-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-teal);fill:none}.kit-card.teal-theme .toggle-btn{color:var(--ui-kit-color-teal)}.kit-card.teal-theme .toggle-btn-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.grey-theme .head-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.grey-theme .head-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card.grey-theme .card-count{border-color:var(--ui-kit-color-grey-10)}.kit-card.grey-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.grey-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.grey-theme .card-item-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.grey-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card.grey-theme .toggle-btn{color:var(--ui-kit-color-grey-10)}.kit-card.grey-theme .toggle-btn-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.orange-theme .head-icon{fill:var(--ui-kit-color-orange-2);stroke:none}.kit-card.orange-theme .head-icon.stroke{stroke:var(--ui-kit-color-orange-2);fill:none}.kit-card.orange-theme .card-count{border-color:var(--ui-kit-color-orange-2)}.kit-card.orange-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.orange-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.orange-theme .card-item-icon{fill:var(--ui-kit-color-orange-2);stroke:none}.kit-card.orange-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-orange-2);fill:none}.kit-card.orange-theme .toggle-btn{color:var(--ui-kit-color-orange-2)}.kit-card.orange-theme .toggle-btn-icon{fill:var(--ui-kit-color-orange-2);stroke:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i3.KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass"], outputs: ["clicked"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef"] }], animations: [
|
|
45
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitCardComponent, selector: "kit-card", inputs: { data: "data", theme: "theme", itemsExpanded: "itemsExpanded" }, outputs: { buttonClicked: "buttonClicked", toggleClicked: "toggleClicked" }, ngImport: i0, template: "@if (data) {\n <div class=\"kit-card {{ theme }}-theme\">\n <div class=\"kit-card-head\">\n <kit-svg-icon class=\"head-icon\"\n [icon]=\"data.titleIcon\"\n [ngClass]=\"data?.titleIconType\"\n ></kit-svg-icon>\n <div class=\"head-title\">{{ data.title }}</div>\n </div>\n <div class=\"kit-card-content\">\n <div class=\"card-count\">{{ data.count }}</div>\n <div class=\"card-label\">{{ data.label }}</div>\n @if (data.items?.length) {\n <div class=\"card-items\"\n [@expandCollapse]=\"itemsExpanded\">\n @for (item of data.items; track item) {\n <a class=\"card-item\"\n [routerLink]=\"item.link\">\n @if (item.count) {\n <div class=\"card-item-count\">{{ item.count }}</div>\n }\n <div class=\"card-item-text\">{{ item.label }}</div>\n @if (item.tooltip) {\n <kit-svg-icon kitTooltip\n kitTooltipFilter=\".card-item-icon\"\n class=\"card-item-icon\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.tooltip\"\n [icon]=\"KitSvgIcon.INFO_CIRCLE\"\n ></kit-svg-icon>\n } @else if (item.icon) {\n <kit-svg-icon class=\"card-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item.iconType\"\n ></kit-svg-icon>\n }\n </a>\n }\n </div>\n }\n @if (data.items?.length > 1) {\n <button class=\"toggle-btn\"\n (click)=\"toggleList()\">\n @if (itemsExpanded) {\n <span class=\"toggle-btn-label\">Show less</span>\n <kit-svg-icon class=\"toggle-btn-icon\"\n [icon]=\"KitSvgIcon.CARET_UP\"\n ></kit-svg-icon>\n } @else {\n <span class=\"toggle-btn-label\">Show more</span>\n <kit-svg-icon class=\"toggle-btn-icon\"\n [icon]=\"KitSvgIcon.CARET_DOWN\"\n ></kit-svg-icon>\n }\n </button>\n }\n </div>\n <div class=\"kit-card-action\">\n <a [routerLink]=\"data.link\">\n <kit-button class=\"action-button\"\n [type]=\"KitButtonType.GHOST\"\n [kind]=\"KitButtonKind.MEDIUM\"\n [label]=\"data.buttonLabel\"\n (clicked)=\"buttonClicked.emit()\"\n ></kit-button>\n </a>\n </div>\n </div>\n}\n", styles: [".kit-card{display:flex;flex-direction:column;padding:25px;width:100%;height:100%;color:var(--ui-kit-color-grey-10);font-weight:400;border:1px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box}.kit-card-head{display:flex;align-items:center;gap:12px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-card .head-icon{width:32px;height:32px}.kit-card .head-title{display:flex;align-items:center;flex:1;height:36px;font-size:18px}.kit-card-content{display:flex;flex-direction:column;margin-top:10px;flex-grow:1;text-align:center}.kit-card .card-count{padding-bottom:10px;font-size:48px;border-bottom:2px solid var(--ui-kit-color-main);line-height:40px;letter-spacing:-2.4px}.kit-card .card-label{margin-top:10px;font-size:16px}.kit-card .card-items{display:flex;flex-direction:column;flex-grow:1;gap:5px;margin-top:15px;overflow:hidden}.kit-card .card-item{display:flex;align-items:center;justify-content:center;gap:5px;color:var(--ui-kit-color-grey-14);font-size:14px;text-decoration:none}.kit-card .card-item:hover{color:var(--ui-kit-color-hover)}.kit-card .card-item-count{font-weight:600}.kit-card .card-item-icon{width:16px;height:16px}.kit-card .toggle-btn{display:inline-flex;justify-content:center;gap:3px;margin-top:5px;padding:0;color:var(--ui-kit-color-main);border:none;background:transparent;cursor:pointer}.kit-card .toggle-btn-label{font-size:14px;font-weight:500}.kit-card .toggle-btn-icon{width:16px;height:16px}.kit-card-action{margin-top:auto;padding-top:15px}.kit-card .action-button ::ng-deep .k-button{width:100%}.kit-card:hover{border-color:var(--ui-kit-color-hover)}.kit-card.default-theme .head-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.default-theme .head-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-card.default-theme .card-count{border-color:var(--ui-kit-color-main)}.kit-card.default-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.default-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.default-theme .card-item-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.default-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-card.default-theme .toggle-btn{color:var(--ui-kit-color-main)}.kit-card.default-theme .toggle-btn-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.green-theme .head-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.green-theme .head-icon.stroke{stroke:var(--ui-kit-color-green-3);fill:none}.kit-card.green-theme .card-count{border-color:var(--ui-kit-color-green-3)}.kit-card.green-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.green-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.green-theme .card-item-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.green-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-green-3);fill:none}.kit-card.green-theme .toggle-btn{color:var(--ui-kit-color-green-3)}.kit-card.green-theme .toggle-btn-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.pink-theme .head-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.pink-theme .head-icon.stroke{stroke:var(--ui-kit-color-pink);fill:none}.kit-card.pink-theme .card-count{border-color:var(--ui-kit-color-pink)}.kit-card.pink-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.pink-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.pink-theme .card-item-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.pink-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-pink);fill:none}.kit-card.pink-theme .toggle-btn{color:var(--ui-kit-color-pink)}.kit-card.pink-theme .toggle-btn-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.purple-theme .head-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.purple-theme .head-icon.stroke{stroke:var(--ui-kit-color-purple);fill:none}.kit-card.purple-theme .card-count{border-color:var(--ui-kit-color-purple)}.kit-card.purple-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.purple-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.purple-theme .card-item-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.purple-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-purple);fill:none}.kit-card.purple-theme .toggle-btn{color:var(--ui-kit-color-purple)}.kit-card.purple-theme .toggle-btn-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.teal-theme .head-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.teal-theme .head-icon.stroke{stroke:var(--ui-kit-color-teal);fill:none}.kit-card.teal-theme .card-count{border-color:var(--ui-kit-color-teal)}.kit-card.teal-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.teal-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.teal-theme .card-item-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.teal-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-teal);fill:none}.kit-card.teal-theme .toggle-btn{color:var(--ui-kit-color-teal)}.kit-card.teal-theme .toggle-btn-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.grey-theme .head-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.grey-theme .head-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card.grey-theme .card-count{border-color:var(--ui-kit-color-grey-10)}.kit-card.grey-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.grey-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.grey-theme .card-item-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.grey-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card.grey-theme .toggle-btn{color:var(--ui-kit-color-grey-10)}.kit-card.grey-theme .toggle-btn-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.orange-theme .head-icon{fill:var(--ui-kit-color-orange-2);stroke:none}.kit-card.orange-theme .head-icon.stroke{stroke:var(--ui-kit-color-orange-2);fill:none}.kit-card.orange-theme .card-count{border-color:var(--ui-kit-color-orange-2)}.kit-card.orange-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.orange-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.orange-theme .card-item-icon{fill:var(--ui-kit-color-orange-2);stroke:none}.kit-card.orange-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-orange-2);fill:none}.kit-card.orange-theme .toggle-btn{color:var(--ui-kit-color-orange-2)}.kit-card.orange-theme .toggle-btn-icon{fill:var(--ui-kit-color-orange-2);stroke:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i3.KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef"] }], animations: [
|
|
46
46
|
trigger('expandCollapse', [
|
|
47
47
|
state('true', style({ height: '*' })),
|
|
48
48
|
state('false', style({
|
|
@@ -86,4 +86,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
86
86
|
}], toggleClicked: [{
|
|
87
87
|
type: Output
|
|
88
88
|
}] } });
|
|
89
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
89
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2l0LWNhcmQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkta2l0L3NyYy9saWIvY29tcG9uZW50cy9raXQtY2FyZC9raXQtY2FyZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1jYXJkL2tpdC1jYXJkLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDaEcsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQ2hFLE9BQU8sRUFBRSxhQUFhLEVBQUUsYUFBYSxFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFFOUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUNqRixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxvREFBb0QsQ0FBQztBQUN4RixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sa0JBQWtCLENBQUM7Ozs7Ozs7QUF1QmhELE1BQU0sT0FBTyxnQkFBZ0I7SUFyQjdCO1FBc0JFOztXQUVHO1FBQ00sU0FBSSxHQUFtQixJQUFJLENBQUM7UUFFckM7O1dBRUc7UUFDTSxVQUFLLEdBQWlCLFlBQVksQ0FBQyxPQUFPLENBQUM7UUFFcEQ7O1dBRUc7UUFDTSxrQkFBYSxHQUFZLEtBQUssQ0FBQztRQUV4Qzs7V0FFRztRQUNPLGtCQUFhLEdBQXVCLElBQUksWUFBWSxFQUFRLENBQUM7UUFFdkU7O1dBRUc7UUFDTyxrQkFBYSxHQUEwQixJQUFJLFlBQVksRUFBVyxDQUFDO1FBRXBFLGVBQVUsR0FBc0IsVUFBVSxDQUFDO1FBQzNDLGtCQUFhLEdBQXlCLGFBQWEsQ0FBQztRQUNwRCxrQkFBYSxHQUF5QixhQUFhLENBQUM7UUFDcEQsdUJBQWtCLEdBQThCLGtCQUFrQixDQUFDO0tBTTdFO0lBSkMsVUFBVTtRQUNSLElBQUksQ0FBQyxhQUFhLEdBQUcsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDO1FBQ3pDLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUM5QyxDQUFDOzhHQWxDVSxnQkFBZ0I7a0dBQWhCLGdCQUFnQix1TUM3QjdCLCtvRkFxRUEsMnBQRHhEYztZQUNWLE9BQU8sQ0FBQyxnQkFBZ0IsRUFBRTtnQkFDeEIsS0FBSyxDQUFDLE1BQU0sRUFBRSxLQUFLLENBQUMsRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLENBQUMsQ0FBQztnQkFDckMsS0FBSyxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUM7b0JBQ25CLE1BQU0sRUFBRSxNQUFNO29CQUNkLFNBQVMsRUFBRSxNQUFNO2lCQUNsQixDQUFDLENBQUM7Z0JBQ0gsVUFBVSxDQUFDLGVBQWUsRUFBRTtvQkFDMUIsT0FBTyxDQUFDLGVBQWUsQ0FBQztpQkFDekIsQ0FBQztnQkFDRixVQUFVLENBQUMsZUFBZSxFQUFFO29CQUMxQixPQUFPLENBQUMsY0FBYyxDQUFDO2lCQUN4QixDQUFDO2FBQ0gsQ0FBQztTQUNIOzsyRkFFVSxnQkFBZ0I7a0JBckI1QixTQUFTOytCQUNFLFVBQVUsbUJBR0gsdUJBQXVCLENBQUMsTUFBTSxjQUNuQzt3QkFDVixPQUFPLENBQUMsZ0JBQWdCLEVBQUU7NEJBQ3hCLEtBQUssQ0FBQyxNQUFNLEVBQUUsS0FBSyxDQUFDLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBRSxDQUFDLENBQUM7NEJBQ3JDLEtBQUssQ0FBQyxPQUFPLEVBQUUsS0FBSyxDQUFDO2dDQUNuQixNQUFNLEVBQUUsTUFBTTtnQ0FDZCxTQUFTLEVBQUUsTUFBTTs2QkFDbEIsQ0FBQyxDQUFDOzRCQUNILFVBQVUsQ0FBQyxlQUFlLEVBQUU7Z0NBQzFCLE9BQU8sQ0FBQyxlQUFlLENBQUM7NkJBQ3pCLENBQUM7NEJBQ0YsVUFBVSxDQUFDLGVBQWUsRUFBRTtnQ0FDMUIsT0FBTyxDQUFDLGNBQWMsQ0FBQzs2QkFDeEIsQ0FBQzt5QkFDSCxDQUFDO3FCQUNIOzhCQU1RLElBQUk7c0JBQVosS0FBSztnQkFLRyxLQUFLO3NCQUFiLEtBQUs7Z0JBS0csYUFBYTtzQkFBckIsS0FBSztnQkFLSSxhQUFhO3NCQUF0QixNQUFNO2dCQUtHLGFBQWE7c0JBQXRCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEtpdFN2Z0ljb24gfSBmcm9tICcuLi9raXQtc3ZnLWljb24va2l0LXN2Zy1pY29uLmNvbnN0JztcbmltcG9ydCB7IEtpdEJ1dHRvbktpbmQsIEtpdEJ1dHRvblR5cGUgfSBmcm9tICcuLi9raXQtYnV0dG9uL2tpdC1idXR0b24uY29uc3QnO1xuaW1wb3J0IHsgS2l0Q2FyZCB9IGZyb20gJy4va2l0LWNhcmQubW9kZWwnO1xuaW1wb3J0IHsgYW5pbWF0ZSwgc3RhdGUsIHN0eWxlLCB0cmFuc2l0aW9uLCB0cmlnZ2VyIH0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XG5pbXBvcnQgeyBLaXRUb29sdGlwUG9zaXRpb24gfSBmcm9tICcuLi8uLi9kaXJlY3RpdmVzL2tpdC10b29sdGlwL2tpdC10b29sdGlwLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBLaXRDYXJkVGhlbWUgfSBmcm9tICcuL2tpdC1jYXJkLmNvbnN0JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAna2l0LWNhcmQnLFxuICB0ZW1wbGF0ZVVybDogJy4va2l0LWNhcmQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4va2l0LWNhcmQuY29tcG9uZW50LnNjc3MnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgYW5pbWF0aW9uczogW1xuICAgIHRyaWdnZXIoJ2V4cGFuZENvbGxhcHNlJywgW1xuICAgICAgc3RhdGUoJ3RydWUnLCBzdHlsZSh7IGhlaWdodDogJyonIH0pKSxcbiAgICAgIHN0YXRlKCdmYWxzZScsIHN0eWxlKHtcbiAgICAgICAgaGVpZ2h0OiAnMThweCcsXG4gICAgICAgIG1pbkhlaWdodDogJzE4cHgnLFxuICAgICAgfSkpLFxuICAgICAgdHJhbnNpdGlvbigndHJ1ZSA9PiBmYWxzZScsIFtcbiAgICAgICAgYW5pbWF0ZSgnMC4ycyBlYXNlLW91dCcpLFxuICAgICAgXSksXG4gICAgICB0cmFuc2l0aW9uKCdmYWxzZSA9PiB0cnVlJywgW1xuICAgICAgICBhbmltYXRlKCcwLjJzIGVhc2UtaW4nKSxcbiAgICAgIF0pLFxuICAgIF0pLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBLaXRDYXJkQ29tcG9uZW50IHtcbiAgLyoqXG4gICAqIERlZmluZXMgY2FyZCBkYXRhXG4gICAqL1xuICBASW5wdXQoKSBkYXRhOiBLaXRDYXJkIHwgbnVsbCA9IG51bGw7XG5cbiAgLyoqXG4gICAqIERlZmluZXMgY2FyZCBjb2xvciB0aGVtZVxuICAgKi9cbiAgQElucHV0KCkgdGhlbWU6IEtpdENhcmRUaGVtZSA9IEtpdENhcmRUaGVtZS5ERUZBVUxUO1xuXG4gIC8qKlxuICAgKiBEZWZpbmVzIHdoZXRoZXIgdGhlIGl0ZW1zIGxpc3Qgd2lsbCBiZSBleHBhbmRlZFxuICAgKi9cbiAgQElucHV0KCkgaXRlbXNFeHBhbmRlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBBbiBhY3Rpb24gd2hpY2ggaXMgZW1pdHRlZCB3aGVuIGFjdGlvbiBidXR0b24gY2xpY2tlZFxuICAgKi9cbiAgQE91dHB1dCgpIGJ1dHRvbkNsaWNrZWQ6IEV2ZW50RW1pdHRlcjx2b2lkPiA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICAvKipcbiAgICogQW4gYWN0aW9uIHdoaWNoIGlzIGVtaXR0ZWQgd2hlbiB0b2dnbGUgYnV0dG9uIGNsaWNrZWRcbiAgICovXG4gIEBPdXRwdXQoKSB0b2dnbGVDbGlja2VkOiBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4gPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cbiAgcmVhZG9ubHkgS2l0U3ZnSWNvbjogdHlwZW9mIEtpdFN2Z0ljb24gPSBLaXRTdmdJY29uO1xuICByZWFkb25seSBLaXRCdXR0b25UeXBlOiB0eXBlb2YgS2l0QnV0dG9uVHlwZSA9IEtpdEJ1dHRvblR5cGU7XG4gIHJlYWRvbmx5IEtpdEJ1dHRvbktpbmQ6IHR5cGVvZiBLaXRCdXR0b25LaW5kID0gS2l0QnV0dG9uS2luZDtcbiAgcmVhZG9ubHkgS2l0VG9vbHRpcFBvc2l0aW9uOiB0eXBlb2YgS2l0VG9vbHRpcFBvc2l0aW9uID0gS2l0VG9vbHRpcFBvc2l0aW9uO1xuXG4gIHRvZ2dsZUxpc3QoKTogdm9pZCB7XG4gICAgdGhpcy5pdGVtc0V4cGFuZGVkID0gIXRoaXMuaXRlbXNFeHBhbmRlZDtcbiAgICB0aGlzLnRvZ2dsZUNsaWNrZWQuZW1pdCh0aGlzLml0ZW1zRXhwYW5kZWQpO1xuICB9XG59XG4iLCJAaWYgKGRhdGEpIHtcbiAgPGRpdiBjbGFzcz1cImtpdC1jYXJkIHt7IHRoZW1lIH19LXRoZW1lXCI+XG4gICAgPGRpdiBjbGFzcz1cImtpdC1jYXJkLWhlYWRcIj5cbiAgICAgIDxraXQtc3ZnLWljb24gY2xhc3M9XCJoZWFkLWljb25cIlxuICAgICAgICAgICAgICAgICAgICBbaWNvbl09XCJkYXRhLnRpdGxlSWNvblwiXG4gICAgICAgICAgICAgICAgICAgIFtuZ0NsYXNzXT1cImRhdGE/LnRpdGxlSWNvblR5cGVcIlxuICAgICAgPjwva2l0LXN2Zy1pY29uPlxuICAgICAgPGRpdiBjbGFzcz1cImhlYWQtdGl0bGVcIj57eyBkYXRhLnRpdGxlIH19PC9kaXY+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cImtpdC1jYXJkLWNvbnRlbnRcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJjYXJkLWNvdW50XCI+e3sgZGF0YS5jb3VudCB9fTwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cImNhcmQtbGFiZWxcIj57eyBkYXRhLmxhYmVsIH19PC9kaXY+XG4gICAgICBAaWYgKGRhdGEuaXRlbXM/Lmxlbmd0aCkge1xuICAgICAgICA8ZGl2IGNsYXNzPVwiY2FyZC1pdGVtc1wiXG4gICAgICAgICAgICAgW0BleHBhbmRDb2xsYXBzZV09XCJpdGVtc0V4cGFuZGVkXCI+XG4gICAgICAgICAgQGZvciAoaXRlbSBvZiBkYXRhLml0ZW1zOyB0cmFjayBpdGVtKSB7XG4gICAgICAgICAgICA8YSBjbGFzcz1cImNhcmQtaXRlbVwiXG4gICAgICAgICAgICAgICBbcm91dGVyTGlua109XCJpdGVtLmxpbmtcIj5cbiAgICAgICAgICAgICAgQGlmIChpdGVtLmNvdW50KSB7XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImNhcmQtaXRlbS1jb3VudFwiPnt7IGl0ZW0uY291bnQgfX08L2Rpdj5cbiAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiY2FyZC1pdGVtLXRleHRcIj57eyBpdGVtLmxhYmVsIH19PC9kaXY+XG4gICAgICAgICAgICAgIEBpZiAoaXRlbS50b29sdGlwKSB7XG4gICAgICAgICAgICAgICAgPGtpdC1zdmctaWNvbiBraXRUb29sdGlwXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICBraXRUb29sdGlwRmlsdGVyPVwiLmNhcmQtaXRlbS1pY29uXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNsYXNzPVwiY2FyZC1pdGVtLWljb25cIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgW2tpdFRvb2x0aXBQb3NpdGlvbl09XCJLaXRUb29sdGlwUG9zaXRpb24uUklHSFRcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgW3RpdGxlXT1cIml0ZW0udG9vbHRpcFwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICBbaWNvbl09XCJLaXRTdmdJY29uLklORk9fQ0lSQ0xFXCJcbiAgICAgICAgICAgICAgICA+PC9raXQtc3ZnLWljb24+XG4gICAgICAgICAgICAgIH0gQGVsc2UgaWYgKGl0ZW0uaWNvbikge1xuICAgICAgICAgICAgICAgIDxraXQtc3ZnLWljb24gY2xhc3M9XCJjYXJkLWl0ZW0taWNvblwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICBbaWNvbl09XCJpdGVtLmljb25cIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgW25nQ2xhc3NdPVwiaXRlbS5pY29uVHlwZVwiXG4gICAgICAgICAgICAgICAgPjwva2l0LXN2Zy1pY29uPlxuICAgICAgICAgICAgICB9XG4gICAgICAgICAgICA8L2E+XG4gICAgICAgICAgfVxuICAgICAgICA8L2Rpdj5cbiAgICAgIH1cbiAgICAgIEBpZiAoZGF0YS5pdGVtcz8ubGVuZ3RoID4gMSkge1xuICAgICAgICA8YnV0dG9uIGNsYXNzPVwidG9nZ2xlLWJ0blwiXG4gICAgICAgICAgICAgICAgKGNsaWNrKT1cInRvZ2dsZUxpc3QoKVwiPlxuICAgICAgICAgIEBpZiAoaXRlbXNFeHBhbmRlZCkge1xuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJ0b2dnbGUtYnRuLWxhYmVsXCI+U2hvdyBsZXNzPC9zcGFuPlxuICAgICAgICAgICAgPGtpdC1zdmctaWNvbiBjbGFzcz1cInRvZ2dsZS1idG4taWNvblwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgIFtpY29uXT1cIktpdFN2Z0ljb24uQ0FSRVRfVVBcIlxuICAgICAgICAgICAgPjwva2l0LXN2Zy1pY29uPlxuICAgICAgICAgIH0gQGVsc2Uge1xuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJ0b2dnbGUtYnRuLWxhYmVsXCI+U2hvdyBtb3JlPC9zcGFuPlxuICAgICAgICAgICAgPGtpdC1zdmctaWNvbiBjbGFzcz1cInRvZ2dsZS1idG4taWNvblwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgIFtpY29uXT1cIktpdFN2Z0ljb24uQ0FSRVRfRE9XTlwiXG4gICAgICAgICAgICA+PC9raXQtc3ZnLWljb24+XG4gICAgICAgICAgfVxuICAgICAgICA8L2J1dHRvbj5cbiAgICAgIH1cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwia2l0LWNhcmQtYWN0aW9uXCI+XG4gICAgICA8YSBbcm91dGVyTGlua109XCJkYXRhLmxpbmtcIj5cbiAgICAgICAgPGtpdC1idXR0b24gY2xhc3M9XCJhY3Rpb24tYnV0dG9uXCJcbiAgICAgICAgICAgICAgICAgICAgW3R5cGVdPVwiS2l0QnV0dG9uVHlwZS5HSE9TVFwiXG4gICAgICAgICAgICAgICAgICAgIFtraW5kXT1cIktpdEJ1dHRvbktpbmQuTUVESVVNXCJcbiAgICAgICAgICAgICAgICAgICAgW2xhYmVsXT1cImRhdGEuYnV0dG9uTGFiZWxcIlxuICAgICAgICAgICAgICAgICAgICAoY2xpY2tlZCk9XCJidXR0b25DbGlja2VkLmVtaXQoKVwiXG4gICAgICAgID48L2tpdC1idXR0b24+XG4gICAgICA8L2E+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxufVxuIl19
|
|
@@ -15,7 +15,7 @@ export class KitCtaPanelActionComponent {
|
|
|
15
15
|
this.KitButtonType = KitButtonType;
|
|
16
16
|
}
|
|
17
17
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitCtaPanelActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", 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.GHOST\"\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", "iconType", "kind", "iconPosition", "buttonClass"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
18
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", 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.GHOST\"\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", "iconType", "kind", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
19
19
|
}
|
|
20
20
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitCtaPanelActionComponent, decorators: [{
|
|
21
21
|
type: Component,
|
|
@@ -72,7 +72,7 @@ export class KitDatepickerComponent {
|
|
|
72
72
|
provide: NG_VALUE_ACCESSOR,
|
|
73
73
|
useExisting: forwardRef(() => KitDatepickerComponent),
|
|
74
74
|
multi: true,
|
|
75
|
-
}], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepicker"], descendants: true }], ngImport: i0, template: "<div class=\"kit-datepicker\"\n [class.disabled]=\"disabled\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(datepicker)\"\n ></kit-input-label>\n }\n\n <div class=\"kit-datepicker-input\">\n <kendo-datepicker #datepicker\n calendarType=\"classic\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [format]=\"format\"\n [min]=\"min\"\n [max]=\"max\"\n [popupSettings]=\"datepickerPopupSettings\"\n [value]=\"defaultDate\"\n [focusedDate]=\"defaultDate\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onValueChange($event)\"\n ></kendo-datepicker>\n <button class=\"toggle-btn\"\n (click)=\"onPopupToggle()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"calendarIcon\"\n ></kit-svg-icon>\n </button>\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-datepicker .label{display:block;margin-bottom:4px}.kit-datepicker-input{position:relative}.kit-datepicker .k-input-button{display:none}.kit-datepicker .toggle-btn{position:absolute;top:0;right:0;padding:0 12px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-datepicker .toggle-btn .button-icon{display:block;width:16px;height:16px;fill:
|
|
75
|
+
}], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepicker"], descendants: true }], ngImport: i0, template: "<div class=\"kit-datepicker\"\n [class.disabled]=\"disabled\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(datepicker)\"\n ></kit-input-label>\n }\n\n <div class=\"kit-datepicker-input\">\n <kendo-datepicker #datepicker\n calendarType=\"classic\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [format]=\"format\"\n [min]=\"min\"\n [max]=\"max\"\n [popupSettings]=\"datepickerPopupSettings\"\n [value]=\"defaultDate\"\n [focusedDate]=\"defaultDate\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onValueChange($event)\"\n ></kendo-datepicker>\n <button class=\"toggle-btn\"\n (click)=\"onPopupToggle()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"calendarIcon\"\n ></kit-svg-icon>\n </button>\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-datepicker .label{display:block;margin-bottom:4px}.kit-datepicker-input{position:relative}.kit-datepicker .k-input-button{display:none}.kit-datepicker .toggle-btn{position:absolute;top:0;right:0;padding:0 12px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-datepicker .toggle-btn .button-icon{display:block;width:16px;height:16px;fill:var(--ui-kit-color-grey-12);stroke:none}.kit-datepicker .toggle-btn:hover .button-icon{fill:var(--ui-kit-color-hover)}.kit-datepicker:hover .k-datepicker{border-color:var(--ui-kit-color-hover)}.kit-datepicker .k-datepicker{height:40px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);box-shadow:none}.kit-datepicker .k-datepicker.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-datepicker .k-datepicker.k-focus+.toggle-btn .button-icon{fill:var(--ui-kit-color-main)}.kit-datepicker .k-input-inner{padding:0 12px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-datepicker .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-datepicker .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-datepicker.disabled .k-datepicker{border-color:var(--ui-kit-color-grey-12)}.kit-datepicker.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-datepicker.disabled .toggle-btn{cursor:default}.kit-datepicker.disabled .toggle-btn .button-icon{fill:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup{margin-top:10px;padding:8px;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-datepicker-popup.k-popup .k-calendar-table{display:flex;flex-direction:column;gap:6px;padding:3px 8px}.kit-datepicker-popup.k-popup .k-calendar-header{padding:0 0 10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datepicker-popup.k-popup .k-calendar-title{padding:6px 8px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;border-radius:4px;border:none}.kit-datepicker-popup.k-popup .k-calendar-title:hover{background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-nav-today{padding:2px 8px;color:var(--ui-kit-color-grey-10)}.kit-datepicker-popup.k-popup .k-calendar-nav-today:hover{color:var(--ui-kit-color-hover)}.kit-datepicker-popup.k-popup .k-calendar-nav-today:hover:before{opacity:0}.kit-datepicker-popup.k-popup .k-calendar-nav-prev,.kit-datepicker-popup.k-popup .k-calendar-nav-next{padding:0;width:32px;height:32px;color:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup .k-calendar-nav-prev:before,.kit-datepicker-popup.k-popup .k-calendar-nav-next:before{opacity:0}.kit-datepicker-popup.k-popup .k-calendar-nav-prev:hover,.kit-datepicker-popup.k-popup .k-calendar-nav-next:hover{color:var(--ui-kit-color-hover)}.kit-datepicker-popup.k-popup .k-calendar-view{padding:10px 0 0;min-height:auto;width:auto}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td{width:auto;height:auto;border-radius:6px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td:hover .k-link{border:none;background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td:focus .k-link{box-shadow:none}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td.k-other-month .k-link{color:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td.k-focus .k-link{box-shadow:none}.kit-datepicker-popup.k-popup .k-calendar-view .k-link{padding:0;width:54px;height:24px;color:var(--ui-kit-color-grey-10);border-radius:6px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-tbody{display:flex;flex-direction:column;row-gap:16px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-tr{display:flex;gap:16px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-th{width:24px;height:22px;color:var(--ui-kit-color-main);font-size:14px;text-transform:capitalize;line-height:20px}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-link{width:24px}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-calendar-tbody{row-gap:6px}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-grey-10);border:1px solid var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-calendar-td.k-selected .k-link{color:var(--ui-kit-color-white);border:none;background:var(--ui-kit-color-main);box-shadow:none}\n"], dependencies: [{ kind: "component", type: i1.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "component", type: i2.KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }, { kind: "component", type: i3.KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: i4.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
76
76
|
}
|
|
77
77
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitDatepickerComponent, decorators: [{
|
|
78
78
|
type: Component,
|
|
@@ -80,7 +80,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
80
80
|
provide: NG_VALUE_ACCESSOR,
|
|
81
81
|
useExisting: forwardRef(() => KitDatepickerComponent),
|
|
82
82
|
multi: true,
|
|
83
|
-
}], template: "<div class=\"kit-datepicker\"\n [class.disabled]=\"disabled\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(datepicker)\"\n ></kit-input-label>\n }\n\n <div class=\"kit-datepicker-input\">\n <kendo-datepicker #datepicker\n calendarType=\"classic\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [format]=\"format\"\n [min]=\"min\"\n [max]=\"max\"\n [popupSettings]=\"datepickerPopupSettings\"\n [value]=\"defaultDate\"\n [focusedDate]=\"defaultDate\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onValueChange($event)\"\n ></kendo-datepicker>\n <button class=\"toggle-btn\"\n (click)=\"onPopupToggle()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"calendarIcon\"\n ></kit-svg-icon>\n </button>\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-datepicker .label{display:block;margin-bottom:4px}.kit-datepicker-input{position:relative}.kit-datepicker .k-input-button{display:none}.kit-datepicker .toggle-btn{position:absolute;top:0;right:0;padding:0 12px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-datepicker .toggle-btn .button-icon{display:block;width:16px;height:16px;fill:
|
|
83
|
+
}], template: "<div class=\"kit-datepicker\"\n [class.disabled]=\"disabled\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(datepicker)\"\n ></kit-input-label>\n }\n\n <div class=\"kit-datepicker-input\">\n <kendo-datepicker #datepicker\n calendarType=\"classic\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [format]=\"format\"\n [min]=\"min\"\n [max]=\"max\"\n [popupSettings]=\"datepickerPopupSettings\"\n [value]=\"defaultDate\"\n [focusedDate]=\"defaultDate\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onValueChange($event)\"\n ></kendo-datepicker>\n <button class=\"toggle-btn\"\n (click)=\"onPopupToggle()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"calendarIcon\"\n ></kit-svg-icon>\n </button>\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-datepicker .label{display:block;margin-bottom:4px}.kit-datepicker-input{position:relative}.kit-datepicker .k-input-button{display:none}.kit-datepicker .toggle-btn{position:absolute;top:0;right:0;padding:0 12px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-datepicker .toggle-btn .button-icon{display:block;width:16px;height:16px;fill:var(--ui-kit-color-grey-12);stroke:none}.kit-datepicker .toggle-btn:hover .button-icon{fill:var(--ui-kit-color-hover)}.kit-datepicker:hover .k-datepicker{border-color:var(--ui-kit-color-hover)}.kit-datepicker .k-datepicker{height:40px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);box-shadow:none}.kit-datepicker .k-datepicker.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-datepicker .k-datepicker.k-focus+.toggle-btn .button-icon{fill:var(--ui-kit-color-main)}.kit-datepicker .k-input-inner{padding:0 12px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-datepicker .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-datepicker .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-datepicker.disabled .k-datepicker{border-color:var(--ui-kit-color-grey-12)}.kit-datepicker.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-datepicker.disabled .toggle-btn{cursor:default}.kit-datepicker.disabled .toggle-btn .button-icon{fill:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup{margin-top:10px;padding:8px;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-datepicker-popup.k-popup .k-calendar-table{display:flex;flex-direction:column;gap:6px;padding:3px 8px}.kit-datepicker-popup.k-popup .k-calendar-header{padding:0 0 10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datepicker-popup.k-popup .k-calendar-title{padding:6px 8px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;border-radius:4px;border:none}.kit-datepicker-popup.k-popup .k-calendar-title:hover{background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-nav-today{padding:2px 8px;color:var(--ui-kit-color-grey-10)}.kit-datepicker-popup.k-popup .k-calendar-nav-today:hover{color:var(--ui-kit-color-hover)}.kit-datepicker-popup.k-popup .k-calendar-nav-today:hover:before{opacity:0}.kit-datepicker-popup.k-popup .k-calendar-nav-prev,.kit-datepicker-popup.k-popup .k-calendar-nav-next{padding:0;width:32px;height:32px;color:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup .k-calendar-nav-prev:before,.kit-datepicker-popup.k-popup .k-calendar-nav-next:before{opacity:0}.kit-datepicker-popup.k-popup .k-calendar-nav-prev:hover,.kit-datepicker-popup.k-popup .k-calendar-nav-next:hover{color:var(--ui-kit-color-hover)}.kit-datepicker-popup.k-popup .k-calendar-view{padding:10px 0 0;min-height:auto;width:auto}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td{width:auto;height:auto;border-radius:6px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td:hover .k-link{border:none;background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td:focus .k-link{box-shadow:none}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td.k-other-month .k-link{color:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td.k-focus .k-link{box-shadow:none}.kit-datepicker-popup.k-popup .k-calendar-view .k-link{padding:0;width:54px;height:24px;color:var(--ui-kit-color-grey-10);border-radius:6px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-tbody{display:flex;flex-direction:column;row-gap:16px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-tr{display:flex;gap:16px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-th{width:24px;height:22px;color:var(--ui-kit-color-main);font-size:14px;text-transform:capitalize;line-height:20px}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-link{width:24px}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-calendar-tbody{row-gap:6px}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-grey-10);border:1px solid var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-calendar-td.k-selected .k-link{color:var(--ui-kit-color-white);border:none;background:var(--ui-kit-color-main);box-shadow:none}\n"] }]
|
|
84
84
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: Document, decorators: [{
|
|
85
85
|
type: Inject,
|
|
86
86
|
args: [DOCUMENT]
|
|
@@ -75,11 +75,11 @@ export class KitDaterangeComponent {
|
|
|
75
75
|
this.closed.emit(rangeValue);
|
|
76
76
|
}
|
|
77
77
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitDaterangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
78
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitDaterangeComponent, selector: "kit-daterange", inputs: { type: "type", label: "label", startLabel: "startLabel", endLabel: "endLabel", startPlaceholder: "startPlaceholder", endPlaceholder: "endPlaceholder", format: "format", defaultStartDate: "defaultStartDate", defaultEndDate: "defaultEndDate", min: "min", max: "max", disabled: "disabled", invalid: "invalid", messageIcon: "messageIcon", messageText: "messageText", startDateControl: "startDateControl", endDateControl: "endDateControl" }, outputs: { startDateChanged: "startDateChanged", closed: "closed", endDateChanged: "endDateChanged" }, viewQueries: [{ propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: DateRangePopupComponent }], ngImport: i0, template: "<div class=\"kit-daterange\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\"\n [ngClass]=\"type\">\n <button #anchor\n class=\"daterange-button\"\n [disabled]=\"disabled\"\n (click)=\"openCalendarPopup()\">\n <div class=\"button-text\">{{ label }}</div>\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n <kendo-daterange class=\"daterange-wrapper\">\n <div class=\"daterange-input-wrapper\">\n @if (startLabel) {\n <kit-input-label class=\"label\"\n [text]=\"startLabel\"\n [for]=\"$any(startInput)\"\n ></kit-input-label>\n }\n <div class=\"daterange-input\">\n <kendo-dateinput #startInput\n kendoDateRangeStartInput\n [placeholder]=\"startPlaceholder\"\n [format]=\"format\"\n [value]=\"startDateControl.value || defaultStartDate\"\n [min]=\"min\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onStartDateChange($event)\"\n ></kendo-dateinput>\n <button class=\"daterange-input-button\"\n [disabled]=\"disabled\"\n (click)=\"openCalendarPopup()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n </div>\n <div class=\"daterange-input-wrapper\">\n @if (endLabel) {\n <kit-input-label class=\"label\"\n [text]=\"endLabel\"\n [for]=\"$any(endInput)\"\n ></kit-input-label>\n }\n <div class=\"daterange-input\">\n <kendo-dateinput #endInput\n kendoDateRangeEndInput\n [placeholder]=\"endPlaceholder\"\n [format]=\"format\"\n [value]=\"endDateControl.value || defaultEndDate\"\n [max]=\"max\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onEndDateChange($event)\"\n ></kendo-dateinput>\n <button class=\"daterange-input-button\"\n [disabled]=\"disabled\"\n (click)=\"openCalendarPopup()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n </div>\n @if (type === KitDaterangeType.DEFAULT) {\n <kendo-daterange-popup #popup\n appendTo=\"component\"\n (close)=\"onClose()\"\n ></kendo-daterange-popup>\n }\n @if (type === KitDaterangeType.BUTTON) {\n <kendo-daterange-popup #popup\n appendTo=\"component\"\n [anchor]=\"$any(anchor)\"\n (close)=\"onClose()\"\n ></kendo-daterange-popup>\n }\n </kendo-daterange>\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-daterange.button .daterange-button{display:flex}.kit-daterange.button .daterange-input-wrapper{display:none}.kit-daterange.invalid .daterange-button{border-color:var(--ui-kit-color-red-1)}.kit-daterange.invalid .daterange-button .button-icon{stroke:var(--ui-kit-color-red-1)}.kit-daterange.invalid .k-dateinput{border-color:var(--ui-kit-color-red-1)}.kit-daterange.invalid .daterange-input-button .button-icon{stroke:var(--ui-kit-color-red-1)}.kit-daterange.disabled .daterange-button{border-color:var(--ui-kit-color-grey-11);cursor:default}.kit-daterange.disabled .daterange-button .button-text{color:var(--ui-kit-color-grey-12)}.kit-daterange.disabled .daterange-button .button-icon{stroke:var(--ui-kit-color-grey-12)}.kit-daterange.disabled .daterange-button:hover{border-color:var(--ui-kit-color-grey-11)}.kit-daterange.disabled .daterange-button:hover .button-icon{stroke:var(--ui-kit-color-grey-12)}.kit-daterange.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);border-color:var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-grey-13)}.kit-daterange.disabled .daterange-input-button,.kit-daterange.disabled .daterange-input-button:hover{cursor:default}.kit-daterange.disabled .daterange-input-button .button-icon,.kit-daterange.disabled .daterange-input-button:hover .button-icon{stroke:var(--ui-kit-color-grey-12)}.kit-daterange .daterange-button{display:none;align-items:center;gap:8px;padding:0 12px;width:100%;height:40px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-white);cursor:pointer}.kit-daterange .daterange-button .button-text{flex-grow:1;color:var(--ui-kit-color-grey-10);font-size:14px;text-align:left}.kit-daterange .daterange-button .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:var(--ui-kit-color-grey-12)}.kit-daterange .daterange-button:hover{border-color:var(--ui-kit-color-hover)}.kit-daterange .daterange-button:hover .button-icon{stroke:var(--ui-kit-color-hover)}.kit-daterange .daterange-wrapper{display:flex;gap:10px}.kit-daterange .label{display:block;margin-bottom:4px}.kit-daterange .daterange-input{display:flex;align-items:center;position:relative}.kit-daterange .daterange-input-button{position:absolute;right:0;padding:0 12px 0 8px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-daterange .daterange-input-button:hover .button-icon{stroke:var(--ui-kit-color-hover)}.kit-daterange .daterange-input-button .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:var(--ui-kit-color-grey-12)}.kit-daterange .kit-daterange-default{display:flex}.kit-daterange .k-dateinput{height:40px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-white)}.kit-daterange .k-dateinput:hover{border-color:var(--ui-kit-color-hover)}.kit-daterange .k-dateinput.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-daterange .k-dateinput.k-focus+.daterange-input-button .button-icon{stroke:var(--ui-kit-color-main)}.kit-daterange .k-input-inner{padding:0 36px 0 12px;width:100%;font-size:14px;font-weight:400;color:var(--ui-kit-color-grey-10)}.kit-daterange .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-daterange .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-daterange .k-popup{margin-top:10px;padding:8px;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-daterange .k-popup .k-calendar-title{padding:6px 8px;color:var(--ui-kit-color-grey-10);font-weight:400;line-height:20px;border-radius:4px;border:none}.kit-daterange .k-popup .k-calendar-header{padding:0 0 10px;color:var(--ui-kit-color-grey-10);font-size:14px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-daterange .k-popup .k-calendar-nav-prev,.kit-daterange .k-popup .k-calendar-nav-next{padding:0;width:32px;height:32px;color:var(--ui-kit-color-grey-12)}.kit-daterange .k-popup .k-calendar-nav-prev:before,.kit-daterange .k-popup .k-calendar-nav-next:before{opacity:0}.kit-daterange .k-popup .k-calendar-nav-prev:hover,.kit-daterange .k-popup .k-calendar-nav-next:hover{color:var(--ui-kit-color-hover)}.kit-daterange .k-popup .k-calendar-nav-today{display:flex;align-items:center;padding:0 8px;color:var(--ui-kit-color-grey-10)}.kit-daterange .k-popup .k-calendar-nav-today:hover{color:var(--ui-kit-color-hover)}.kit-daterange .k-popup .k-calendar-nav-today:hover:before{opacity:0}.kit-daterange .k-popup .k-calendar-table{display:flex;flex-direction:column;gap:6px;padding:3px 8px}.kit-daterange .k-popup .k-calendar-view{padding:10px 0 0;gap:16px;box-sizing:border-box}.kit-daterange .k-popup .k-calendar-tbody{display:flex;flex-direction:column;row-gap:16px}.kit-daterange .k-popup .k-calendar-tr{display:flex;gap:16px}.kit-daterange .k-popup .k-calendar-td{width:auto;height:auto;border-radius:6px}.kit-daterange .k-popup .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.kit-daterange .k-popup .k-calendar-td:hover .k-link{border:none;background:var(--ui-kit-color-grey-13)}.kit-daterange .k-popup .k-calendar-td:focus .k-link{box-shadow:none}.kit-daterange .k-popup .k-calendar-td.k-other-month .k-link{color:var(--ui-kit-color-grey-12)}.kit-daterange .k-popup .k-calendar-td.k-focus .k-link{box-shadow:none}.kit-daterange .k-popup .k-calendar-td.k-range-mid{background:var(--ui-kit-color-selected)}.kit-daterange .k-popup .k-calendar-td.k-range-mid .k-link{color:var(--ui-kit-color-main)}.kit-daterange .k-popup .k-link{padding:0;width:54px;height:24px;color:var(--ui-kit-color-grey-10);border-radius:6px}.kit-daterange .k-popup .k-calendar-th{width:24px;height:22px;color:var(--ui-kit-color-main);font-size:14px;text-transform:capitalize}.kit-daterange .k-popup .k-calendar-monthview .k-link{width:24px}.kit-daterange .k-popup .k-calendar-monthview .k-calendar-tbody{row-gap:6px}.kit-daterange .k-popup .k-calendar-monthview .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-grey-10);border:1px solid var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-daterange .k-popup .k-calendar-monthview .k-calendar-td.k-selected .k-link{color:var(--ui-kit-color-white);border:none;background:var(--ui-kit-color-main);box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "directive", type: i2.DateRangeEndInputDirective, selector: "[kendoDateRangeEndInput]", inputs: ["autoCorrectOn", "navigateCalendarOnFocus"] }, { kind: "component", type: i2.DateRangeComponent, selector: "kendo-daterange", inputs: ["size"] }, { kind: "component", type: i2.DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["allowReverse", "animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "title", "subtitle", "size"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }, { kind: "directive", type: i2.DateRangeStartInputDirective, selector: "[kendoDateRangeStartInput]", inputs: ["autoCorrectOn", "navigateCalendarOnFocus"] }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i4.KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: i5.KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
78
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitDaterangeComponent, selector: "kit-daterange", inputs: { type: "type", label: "label", startLabel: "startLabel", endLabel: "endLabel", startPlaceholder: "startPlaceholder", endPlaceholder: "endPlaceholder", format: "format", defaultStartDate: "defaultStartDate", defaultEndDate: "defaultEndDate", min: "min", max: "max", disabled: "disabled", invalid: "invalid", messageIcon: "messageIcon", messageText: "messageText", startDateControl: "startDateControl", endDateControl: "endDateControl" }, outputs: { startDateChanged: "startDateChanged", closed: "closed", endDateChanged: "endDateChanged" }, viewQueries: [{ propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: DateRangePopupComponent }], ngImport: i0, template: "<div class=\"kit-daterange\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\"\n [ngClass]=\"type\">\n <button #anchor\n class=\"daterange-button\"\n [disabled]=\"disabled\"\n (click)=\"openCalendarPopup()\">\n <div class=\"button-text\">{{ label }}</div>\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n <kendo-daterange class=\"daterange-wrapper\">\n <div class=\"daterange-input-wrapper\">\n @if (startLabel) {\n <kit-input-label class=\"label\"\n [text]=\"startLabel\"\n [for]=\"$any(startInput)\"\n ></kit-input-label>\n }\n <div class=\"daterange-input\">\n <kendo-dateinput #startInput\n kendoDateRangeStartInput\n [placeholder]=\"startPlaceholder\"\n [format]=\"format\"\n [value]=\"startDateControl.value || defaultStartDate\"\n [min]=\"min\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onStartDateChange($event)\"\n ></kendo-dateinput>\n <button class=\"daterange-input-button\"\n [disabled]=\"disabled\"\n (click)=\"openCalendarPopup()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n </div>\n <div class=\"daterange-input-wrapper\">\n @if (endLabel) {\n <kit-input-label class=\"label\"\n [text]=\"endLabel\"\n [for]=\"$any(endInput)\"\n ></kit-input-label>\n }\n <div class=\"daterange-input\">\n <kendo-dateinput #endInput\n kendoDateRangeEndInput\n [placeholder]=\"endPlaceholder\"\n [format]=\"format\"\n [value]=\"endDateControl.value || defaultEndDate\"\n [max]=\"max\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onEndDateChange($event)\"\n ></kendo-dateinput>\n <button class=\"daterange-input-button\"\n [disabled]=\"disabled\"\n (click)=\"openCalendarPopup()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n </div>\n @if (type === KitDaterangeType.DEFAULT) {\n <kendo-daterange-popup #popup\n appendTo=\"component\"\n (close)=\"onClose()\"\n ></kendo-daterange-popup>\n }\n @if (type === KitDaterangeType.BUTTON) {\n <kendo-daterange-popup #popup\n appendTo=\"component\"\n [anchor]=\"$any(anchor)\"\n (close)=\"onClose()\"\n ></kendo-daterange-popup>\n }\n </kendo-daterange>\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-daterange.button .daterange-button{display:flex}.kit-daterange.button .daterange-input-wrapper{display:none}.kit-daterange.invalid .daterange-button{border-color:var(--ui-kit-color-red-1)}.kit-daterange.invalid .daterange-button .button-icon{fill:var(--ui-kit-color-red-1)}.kit-daterange.invalid .k-dateinput{border-color:var(--ui-kit-color-red-1)}.kit-daterange.invalid .daterange-input-button .button-icon{fill:var(--ui-kit-color-red-1)}.kit-daterange.disabled .daterange-button{border-color:var(--ui-kit-color-grey-11);cursor:default}.kit-daterange.disabled .daterange-button .button-text{color:var(--ui-kit-color-grey-12)}.kit-daterange.disabled .daterange-button .button-icon{fill:var(--ui-kit-color-grey-12)}.kit-daterange.disabled .daterange-button:hover{border-color:var(--ui-kit-color-grey-11)}.kit-daterange.disabled .daterange-button:hover .button-icon{fill:var(--ui-kit-color-grey-12)}.kit-daterange.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);border-color:var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-grey-13)}.kit-daterange.disabled .daterange-input-button,.kit-daterange.disabled .daterange-input-button:hover{cursor:default}.kit-daterange.disabled .daterange-input-button .button-icon,.kit-daterange.disabled .daterange-input-button:hover .button-icon{fill:var(--ui-kit-color-grey-12)}.kit-daterange .daterange-button{display:none;align-items:center;gap:8px;padding:0 12px;width:100%;height:40px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-white);cursor:pointer}.kit-daterange .daterange-button .button-text{flex-grow:1;color:var(--ui-kit-color-grey-10);font-size:14px;text-align:left}.kit-daterange .daterange-button .button-icon{display:block;width:16px;height:16px;stroke:none;fill:var(--ui-kit-color-grey-12)}.kit-daterange .daterange-button:hover{border-color:var(--ui-kit-color-hover)}.kit-daterange .daterange-button:hover .button-icon{fill:var(--ui-kit-color-hover)}.kit-daterange .daterange-wrapper{display:flex;gap:10px}.kit-daterange .label{display:block;margin-bottom:4px}.kit-daterange .daterange-input{display:flex;align-items:center;position:relative}.kit-daterange .daterange-input-button{position:absolute;right:0;padding:0 12px 0 8px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-daterange .daterange-input-button:hover .button-icon{fill:var(--ui-kit-color-hover)}.kit-daterange .daterange-input-button .button-icon{display:block;width:16px;height:16px;stroke:none;fill:var(--ui-kit-color-grey-12)}.kit-daterange .kit-daterange-default{display:flex}.kit-daterange .k-dateinput{height:40px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-white)}.kit-daterange .k-dateinput:hover{border-color:var(--ui-kit-color-hover)}.kit-daterange .k-dateinput.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-daterange .k-dateinput.k-focus+.daterange-input-button .button-icon{fill:var(--ui-kit-color-main)}.kit-daterange .k-input-inner{padding:0 36px 0 12px;width:100%;font-size:14px;font-weight:400;color:var(--ui-kit-color-grey-10)}.kit-daterange .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-daterange .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-daterange .k-popup{margin-top:10px;padding:8px;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-daterange .k-popup .k-calendar-title{padding:6px 8px;color:var(--ui-kit-color-grey-10);font-weight:400;line-height:20px;border-radius:4px;border:none}.kit-daterange .k-popup .k-calendar-header{padding:0 0 10px;color:var(--ui-kit-color-grey-10);font-size:14px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-daterange .k-popup .k-calendar-nav-prev,.kit-daterange .k-popup .k-calendar-nav-next{padding:0;width:32px;height:32px;color:var(--ui-kit-color-grey-12)}.kit-daterange .k-popup .k-calendar-nav-prev:before,.kit-daterange .k-popup .k-calendar-nav-next:before{opacity:0}.kit-daterange .k-popup .k-calendar-nav-prev:hover,.kit-daterange .k-popup .k-calendar-nav-next:hover{color:var(--ui-kit-color-hover)}.kit-daterange .k-popup .k-calendar-nav-today{display:flex;align-items:center;padding:0 8px;color:var(--ui-kit-color-grey-10)}.kit-daterange .k-popup .k-calendar-nav-today:hover{color:var(--ui-kit-color-hover)}.kit-daterange .k-popup .k-calendar-nav-today:hover:before{opacity:0}.kit-daterange .k-popup .k-calendar-table{display:flex;flex-direction:column;gap:6px;padding:3px 8px}.kit-daterange .k-popup .k-calendar-view{padding:10px 0 0;gap:16px;box-sizing:border-box}.kit-daterange .k-popup .k-calendar-tbody{display:flex;flex-direction:column;row-gap:16px}.kit-daterange .k-popup .k-calendar-tr{display:flex;gap:16px}.kit-daterange .k-popup .k-calendar-td{width:auto;height:auto;border-radius:6px}.kit-daterange .k-popup .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.kit-daterange .k-popup .k-calendar-td:hover .k-link{border:none;background:var(--ui-kit-color-grey-13)}.kit-daterange .k-popup .k-calendar-td:focus .k-link{box-shadow:none}.kit-daterange .k-popup .k-calendar-td.k-other-month .k-link{color:var(--ui-kit-color-grey-12)}.kit-daterange .k-popup .k-calendar-td.k-focus .k-link{box-shadow:none}.kit-daterange .k-popup .k-calendar-td.k-range-mid{background:var(--ui-kit-color-selected)}.kit-daterange .k-popup .k-calendar-td.k-range-mid .k-link{color:var(--ui-kit-color-main)}.kit-daterange .k-popup .k-link{padding:0;width:54px;height:24px;color:var(--ui-kit-color-grey-10);border-radius:6px}.kit-daterange .k-popup .k-calendar-th{width:24px;height:22px;color:var(--ui-kit-color-main);font-size:14px;text-transform:capitalize}.kit-daterange .k-popup .k-calendar-monthview .k-link{width:24px}.kit-daterange .k-popup .k-calendar-monthview .k-calendar-tbody{row-gap:6px}.kit-daterange .k-popup .k-calendar-monthview .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-grey-10);border:1px solid var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-daterange .k-popup .k-calendar-monthview .k-calendar-td.k-selected .k-link{color:var(--ui-kit-color-white);border:none;background:var(--ui-kit-color-main);box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "directive", type: i2.DateRangeEndInputDirective, selector: "[kendoDateRangeEndInput]", inputs: ["autoCorrectOn", "navigateCalendarOnFocus"] }, { kind: "component", type: i2.DateRangeComponent, selector: "kendo-daterange", inputs: ["size"] }, { kind: "component", type: i2.DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["allowReverse", "animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin", "adaptiveMode", "title", "subtitle", "size"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }, { kind: "directive", type: i2.DateRangeStartInputDirective, selector: "[kendoDateRangeStartInput]", inputs: ["autoCorrectOn", "navigateCalendarOnFocus"] }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i4.KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: i5.KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
79
79
|
}
|
|
80
80
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitDaterangeComponent, decorators: [{
|
|
81
81
|
type: Component,
|
|
82
|
-
args: [{ selector: 'kit-daterange', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-daterange\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\"\n [ngClass]=\"type\">\n <button #anchor\n class=\"daterange-button\"\n [disabled]=\"disabled\"\n (click)=\"openCalendarPopup()\">\n <div class=\"button-text\">{{ label }}</div>\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n <kendo-daterange class=\"daterange-wrapper\">\n <div class=\"daterange-input-wrapper\">\n @if (startLabel) {\n <kit-input-label class=\"label\"\n [text]=\"startLabel\"\n [for]=\"$any(startInput)\"\n ></kit-input-label>\n }\n <div class=\"daterange-input\">\n <kendo-dateinput #startInput\n kendoDateRangeStartInput\n [placeholder]=\"startPlaceholder\"\n [format]=\"format\"\n [value]=\"startDateControl.value || defaultStartDate\"\n [min]=\"min\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onStartDateChange($event)\"\n ></kendo-dateinput>\n <button class=\"daterange-input-button\"\n [disabled]=\"disabled\"\n (click)=\"openCalendarPopup()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n </div>\n <div class=\"daterange-input-wrapper\">\n @if (endLabel) {\n <kit-input-label class=\"label\"\n [text]=\"endLabel\"\n [for]=\"$any(endInput)\"\n ></kit-input-label>\n }\n <div class=\"daterange-input\">\n <kendo-dateinput #endInput\n kendoDateRangeEndInput\n [placeholder]=\"endPlaceholder\"\n [format]=\"format\"\n [value]=\"endDateControl.value || defaultEndDate\"\n [max]=\"max\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onEndDateChange($event)\"\n ></kendo-dateinput>\n <button class=\"daterange-input-button\"\n [disabled]=\"disabled\"\n (click)=\"openCalendarPopup()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n </div>\n @if (type === KitDaterangeType.DEFAULT) {\n <kendo-daterange-popup #popup\n appendTo=\"component\"\n (close)=\"onClose()\"\n ></kendo-daterange-popup>\n }\n @if (type === KitDaterangeType.BUTTON) {\n <kendo-daterange-popup #popup\n appendTo=\"component\"\n [anchor]=\"$any(anchor)\"\n (close)=\"onClose()\"\n ></kendo-daterange-popup>\n }\n </kendo-daterange>\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-daterange.button .daterange-button{display:flex}.kit-daterange.button .daterange-input-wrapper{display:none}.kit-daterange.invalid .daterange-button{border-color:var(--ui-kit-color-red-1)}.kit-daterange.invalid .daterange-button .button-icon{
|
|
82
|
+
args: [{ selector: 'kit-daterange', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-daterange\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\"\n [ngClass]=\"type\">\n <button #anchor\n class=\"daterange-button\"\n [disabled]=\"disabled\"\n (click)=\"openCalendarPopup()\">\n <div class=\"button-text\">{{ label }}</div>\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n <kendo-daterange class=\"daterange-wrapper\">\n <div class=\"daterange-input-wrapper\">\n @if (startLabel) {\n <kit-input-label class=\"label\"\n [text]=\"startLabel\"\n [for]=\"$any(startInput)\"\n ></kit-input-label>\n }\n <div class=\"daterange-input\">\n <kendo-dateinput #startInput\n kendoDateRangeStartInput\n [placeholder]=\"startPlaceholder\"\n [format]=\"format\"\n [value]=\"startDateControl.value || defaultStartDate\"\n [min]=\"min\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onStartDateChange($event)\"\n ></kendo-dateinput>\n <button class=\"daterange-input-button\"\n [disabled]=\"disabled\"\n (click)=\"openCalendarPopup()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n </div>\n <div class=\"daterange-input-wrapper\">\n @if (endLabel) {\n <kit-input-label class=\"label\"\n [text]=\"endLabel\"\n [for]=\"$any(endInput)\"\n ></kit-input-label>\n }\n <div class=\"daterange-input\">\n <kendo-dateinput #endInput\n kendoDateRangeEndInput\n [placeholder]=\"endPlaceholder\"\n [format]=\"format\"\n [value]=\"endDateControl.value || defaultEndDate\"\n [max]=\"max\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onEndDateChange($event)\"\n ></kendo-dateinput>\n <button class=\"daterange-input-button\"\n [disabled]=\"disabled\"\n (click)=\"openCalendarPopup()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n </div>\n @if (type === KitDaterangeType.DEFAULT) {\n <kendo-daterange-popup #popup\n appendTo=\"component\"\n (close)=\"onClose()\"\n ></kendo-daterange-popup>\n }\n @if (type === KitDaterangeType.BUTTON) {\n <kendo-daterange-popup #popup\n appendTo=\"component\"\n [anchor]=\"$any(anchor)\"\n (close)=\"onClose()\"\n ></kendo-daterange-popup>\n }\n </kendo-daterange>\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-daterange.button .daterange-button{display:flex}.kit-daterange.button .daterange-input-wrapper{display:none}.kit-daterange.invalid .daterange-button{border-color:var(--ui-kit-color-red-1)}.kit-daterange.invalid .daterange-button .button-icon{fill:var(--ui-kit-color-red-1)}.kit-daterange.invalid .k-dateinput{border-color:var(--ui-kit-color-red-1)}.kit-daterange.invalid .daterange-input-button .button-icon{fill:var(--ui-kit-color-red-1)}.kit-daterange.disabled .daterange-button{border-color:var(--ui-kit-color-grey-11);cursor:default}.kit-daterange.disabled .daterange-button .button-text{color:var(--ui-kit-color-grey-12)}.kit-daterange.disabled .daterange-button .button-icon{fill:var(--ui-kit-color-grey-12)}.kit-daterange.disabled .daterange-button:hover{border-color:var(--ui-kit-color-grey-11)}.kit-daterange.disabled .daterange-button:hover .button-icon{fill:var(--ui-kit-color-grey-12)}.kit-daterange.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);border-color:var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-grey-13)}.kit-daterange.disabled .daterange-input-button,.kit-daterange.disabled .daterange-input-button:hover{cursor:default}.kit-daterange.disabled .daterange-input-button .button-icon,.kit-daterange.disabled .daterange-input-button:hover .button-icon{fill:var(--ui-kit-color-grey-12)}.kit-daterange .daterange-button{display:none;align-items:center;gap:8px;padding:0 12px;width:100%;height:40px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-white);cursor:pointer}.kit-daterange .daterange-button .button-text{flex-grow:1;color:var(--ui-kit-color-grey-10);font-size:14px;text-align:left}.kit-daterange .daterange-button .button-icon{display:block;width:16px;height:16px;stroke:none;fill:var(--ui-kit-color-grey-12)}.kit-daterange .daterange-button:hover{border-color:var(--ui-kit-color-hover)}.kit-daterange .daterange-button:hover .button-icon{fill:var(--ui-kit-color-hover)}.kit-daterange .daterange-wrapper{display:flex;gap:10px}.kit-daterange .label{display:block;margin-bottom:4px}.kit-daterange .daterange-input{display:flex;align-items:center;position:relative}.kit-daterange .daterange-input-button{position:absolute;right:0;padding:0 12px 0 8px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-daterange .daterange-input-button:hover .button-icon{fill:var(--ui-kit-color-hover)}.kit-daterange .daterange-input-button .button-icon{display:block;width:16px;height:16px;stroke:none;fill:var(--ui-kit-color-grey-12)}.kit-daterange .kit-daterange-default{display:flex}.kit-daterange .k-dateinput{height:40px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-white)}.kit-daterange .k-dateinput:hover{border-color:var(--ui-kit-color-hover)}.kit-daterange .k-dateinput.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-daterange .k-dateinput.k-focus+.daterange-input-button .button-icon{fill:var(--ui-kit-color-main)}.kit-daterange .k-input-inner{padding:0 36px 0 12px;width:100%;font-size:14px;font-weight:400;color:var(--ui-kit-color-grey-10)}.kit-daterange .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-daterange .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-daterange .k-popup{margin-top:10px;padding:8px;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-daterange .k-popup .k-calendar-title{padding:6px 8px;color:var(--ui-kit-color-grey-10);font-weight:400;line-height:20px;border-radius:4px;border:none}.kit-daterange .k-popup .k-calendar-header{padding:0 0 10px;color:var(--ui-kit-color-grey-10);font-size:14px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-daterange .k-popup .k-calendar-nav-prev,.kit-daterange .k-popup .k-calendar-nav-next{padding:0;width:32px;height:32px;color:var(--ui-kit-color-grey-12)}.kit-daterange .k-popup .k-calendar-nav-prev:before,.kit-daterange .k-popup .k-calendar-nav-next:before{opacity:0}.kit-daterange .k-popup .k-calendar-nav-prev:hover,.kit-daterange .k-popup .k-calendar-nav-next:hover{color:var(--ui-kit-color-hover)}.kit-daterange .k-popup .k-calendar-nav-today{display:flex;align-items:center;padding:0 8px;color:var(--ui-kit-color-grey-10)}.kit-daterange .k-popup .k-calendar-nav-today:hover{color:var(--ui-kit-color-hover)}.kit-daterange .k-popup .k-calendar-nav-today:hover:before{opacity:0}.kit-daterange .k-popup .k-calendar-table{display:flex;flex-direction:column;gap:6px;padding:3px 8px}.kit-daterange .k-popup .k-calendar-view{padding:10px 0 0;gap:16px;box-sizing:border-box}.kit-daterange .k-popup .k-calendar-tbody{display:flex;flex-direction:column;row-gap:16px}.kit-daterange .k-popup .k-calendar-tr{display:flex;gap:16px}.kit-daterange .k-popup .k-calendar-td{width:auto;height:auto;border-radius:6px}.kit-daterange .k-popup .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.kit-daterange .k-popup .k-calendar-td:hover .k-link{border:none;background:var(--ui-kit-color-grey-13)}.kit-daterange .k-popup .k-calendar-td:focus .k-link{box-shadow:none}.kit-daterange .k-popup .k-calendar-td.k-other-month .k-link{color:var(--ui-kit-color-grey-12)}.kit-daterange .k-popup .k-calendar-td.k-focus .k-link{box-shadow:none}.kit-daterange .k-popup .k-calendar-td.k-range-mid{background:var(--ui-kit-color-selected)}.kit-daterange .k-popup .k-calendar-td.k-range-mid .k-link{color:var(--ui-kit-color-main)}.kit-daterange .k-popup .k-link{padding:0;width:54px;height:24px;color:var(--ui-kit-color-grey-10);border-radius:6px}.kit-daterange .k-popup .k-calendar-th{width:24px;height:22px;color:var(--ui-kit-color-main);font-size:14px;text-transform:capitalize}.kit-daterange .k-popup .k-calendar-monthview .k-link{width:24px}.kit-daterange .k-popup .k-calendar-monthview .k-calendar-tbody{row-gap:6px}.kit-daterange .k-popup .k-calendar-monthview .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-grey-10);border:1px solid var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-daterange .k-popup .k-calendar-monthview .k-calendar-td.k-selected .k-link{color:var(--ui-kit-color-white);border:none;background:var(--ui-kit-color-main);box-shadow:none}\n"] }]
|
|
83
83
|
}], propDecorators: { type: [{
|
|
84
84
|
type: Input
|
|
85
85
|
}], label: [{
|