@indigina/ui-kit 1.1.17 → 1.1.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/kit-autocomplete/kit-autocomplete.component.mjs +2 -2
- package/esm2022/lib/components/kit-button/kit-button.component.mjs +2 -2
- package/esm2022/lib/components/kit-dropdown/kit-dropdown.component.mjs +2 -2
- package/esm2022/lib/components/kit-navigation-menu/kit-navigation-menu.component.mjs +3 -3
- package/esm2022/lib/components/kit-switch/kit-switch.component.mjs +2 -2
- package/esm2022/lib/components/kit-text-label/kit-text-label.component.mjs +2 -2
- package/fesm2022/indigina-ui-kit.mjs +12 -12
- package/fesm2022/indigina-ui-kit.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/theming.scss +3 -2
|
@@ -139,7 +139,7 @@ export class KitAutocompleteComponent {
|
|
|
139
139
|
provide: NG_VALUE_ACCESSOR,
|
|
140
140
|
useExisting: forwardRef(() => KitAutocompleteComponent),
|
|
141
141
|
multi: true,
|
|
142
|
-
}], viewQueries: [{ propertyName: "combobox", first: true, predicate: ["combobox"], descendants: true }], ngImport: i0, template: "<div class=\"kit-autocomplete {{ state }}\"\n [class.autocomplete-empty]=\"!items || !items.length\"\n [class.autocomplete-disabled]=\"disabled\"\n [class.autocomplete-loading]=\"loaderVisible\">\n <kendo-label *ngIf=\"label\" class=\"label display-block\"\n [text]=\"label\"\n [for]=\"combobox\">\n </kendo-label>\n <div class=\"autocomplete-wrap\">\n <kendo-combobox #combobox textField=\"text\" valueField=\"value\"\n kendoDropDownFilter\n [data]=\"items\"\n [placeholder]=\"placeholder\"\n [filterable]=\"true\"\n [disabled]=\"disabled\"\n [clearButton]=\"false\"\n [value]=\"selectedValue\"\n [allowCustom]=\"true\"\n [valueNormalizer]=\"normalizedSelectedValue$\"\n [popupSettings]=\"dropdownPopupSettings\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (selectionChange)=\"onValueSelect($event)\"\n (filterChange)=\"onFilterChange($event)\">\n <ng-template kendoComboBoxHeaderTemplate>\n <kit-loader *ngIf=\"loaderVisible\" class=\"popup-loader\"></kit-loader>\n </ng-template>\n <ng-template kendoComboBoxItemTemplate let-item>\n <span class=\"template\">{{ getOptionText(item) }}</span>\n </ng-template>\n </kendo-combobox>\n <kit-svg-icon class=\"input-icon\" icon=\"search\"></kit-svg-icon>\n </div>\n <kit-input-message *ngIf=\"messageText\"\n [type]=\"messageType\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #
|
|
142
|
+
}], viewQueries: [{ propertyName: "combobox", first: true, predicate: ["combobox"], descendants: true }], ngImport: i0, template: "<div class=\"kit-autocomplete {{ state }}\"\n [class.autocomplete-empty]=\"!items || !items.length\"\n [class.autocomplete-disabled]=\"disabled\"\n [class.autocomplete-loading]=\"loaderVisible\">\n <kendo-label *ngIf=\"label\" class=\"label display-block\"\n [text]=\"label\"\n [for]=\"combobox\">\n </kendo-label>\n <div class=\"autocomplete-wrap\">\n <kendo-combobox #combobox textField=\"text\" valueField=\"value\"\n kendoDropDownFilter\n [data]=\"items\"\n [placeholder]=\"placeholder\"\n [filterable]=\"true\"\n [disabled]=\"disabled\"\n [clearButton]=\"false\"\n [value]=\"selectedValue\"\n [allowCustom]=\"true\"\n [valueNormalizer]=\"normalizedSelectedValue$\"\n [popupSettings]=\"dropdownPopupSettings\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (selectionChange)=\"onValueSelect($event)\"\n (filterChange)=\"onFilterChange($event)\">\n <ng-template kendoComboBoxHeaderTemplate>\n <kit-loader *ngIf=\"loaderVisible\" class=\"popup-loader\"></kit-loader>\n </ng-template>\n <ng-template kendoComboBoxItemTemplate let-item>\n <span class=\"template\">{{ getOptionText(item) }}</span>\n </ng-template>\n </kendo-combobox>\n <kit-svg-icon class=\"input-icon\" icon=\"search\"></kit-svg-icon>\n </div>\n <kit-input-message *ngIf=\"messageText\"\n [type]=\"messageType\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #002a3a;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14}.kit-autocomplete .label{margin-bottom:4px;font-weight:500;font-size:13px;color:#a9a8a8}.kit-autocomplete .autocomplete-wrap{position:relative;display:flex;align-items:center}.kit-autocomplete .k-input-button{display:none}.kit-autocomplete .k-combobox{position:static;padding:0 32px 0 8px;height:34px;border:1px solid #efefef;border-radius:4px;background:#fff}.kit-autocomplete .k-combobox.k-focus{box-shadow:none}.kit-autocomplete .k-input-inner{padding:0;color:#002a3a;font-size:13px;line-height:1}.kit-autocomplete .k-input-inner::selection{color:#fff;background:#00b0ad}.kit-autocomplete .popup-loader{height:100%}.kit-autocomplete .kit-loader,.kit-autocomplete .kit-loader>div{height:100%}.kit-autocomplete .kit-loader .circle{box-sizing:content-box}.kit-autocomplete .input-icon{position:absolute;right:8px;width:16px;height:16px;fill:#fff;stroke:#000}.kit-autocomplete .kit-autocomplete-popup{margin-top:4px;border:1px solid #c1c7d0;border-radius:4px;box-shadow:0 0 5px #003e5680;background-color:#f3f4f6;padding:4px}.kit-autocomplete .kit-autocomplete-popup .k-list{background-color:#f3f4f6}.kit-autocomplete .kit-autocomplete-popup .k-list-item{padding:8px;min-height:auto;background-color:#fff;font-size:13px;font-weight:500;line-height:1.26;box-shadow:none;border-radius:2px;color:#002a3a}.kit-autocomplete .kit-autocomplete-popup .k-list-item:not(:last-of-type){margin-bottom:4px}.kit-autocomplete .kit-autocomplete-popup .k-list-item:hover{background-color:#f3f5fa;color:#56a2f7}.kit-autocomplete:focus-within .k-combobox{border-color:#00b0ad}.kit-autocomplete.autocomplete-empty .kit-autocomplete-popup{display:none}.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup{display:block;height:200px}.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup .k-no-data,.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup .k-list{display:none}.kit-autocomplete.autocomplete-disabled .label{color:#74777d}.kit-autocomplete.danger .k-combobox{border-color:#ef3e42;background:#f8e0e0}.kit-autocomplete.danger .input-icon{fill:#f8e0e0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.HeaderTemplateDirective, selector: "[kendoDropDownListHeaderTemplate],[kendoComboBoxHeaderTemplate],[kendoDropDownTreeHeaderTemplate],[kendoMultiColumnComboBoxHeaderTemplate],[kendoAutoCompleteHeaderTemplate],[kendoMultiSelectHeaderTemplate],[kendoMultiSelectTreeHeaderTemplate]" }, { kind: "directive", type: i2.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i2.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["data", "kendoDropDownFilter", "filterable"] }, { kind: "component", type: i2.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoComboBox"] }, { kind: "component", type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: i4.KitInputMessageComponent, selector: "kit-input-message", inputs: ["type", "icon", "message"] }, { kind: "component", type: i5.KitLoaderComponent, selector: "kit-loader" }, { kind: "component", type: i6.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
143
143
|
}
|
|
144
144
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitAutocompleteComponent, decorators: [{
|
|
145
145
|
type: Component,
|
|
@@ -147,7 +147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
147
147
|
provide: NG_VALUE_ACCESSOR,
|
|
148
148
|
useExisting: forwardRef(() => KitAutocompleteComponent),
|
|
149
149
|
multi: true,
|
|
150
|
-
}], template: "<div class=\"kit-autocomplete {{ state }}\"\n [class.autocomplete-empty]=\"!items || !items.length\"\n [class.autocomplete-disabled]=\"disabled\"\n [class.autocomplete-loading]=\"loaderVisible\">\n <kendo-label *ngIf=\"label\" class=\"label display-block\"\n [text]=\"label\"\n [for]=\"combobox\">\n </kendo-label>\n <div class=\"autocomplete-wrap\">\n <kendo-combobox #combobox textField=\"text\" valueField=\"value\"\n kendoDropDownFilter\n [data]=\"items\"\n [placeholder]=\"placeholder\"\n [filterable]=\"true\"\n [disabled]=\"disabled\"\n [clearButton]=\"false\"\n [value]=\"selectedValue\"\n [allowCustom]=\"true\"\n [valueNormalizer]=\"normalizedSelectedValue$\"\n [popupSettings]=\"dropdownPopupSettings\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (selectionChange)=\"onValueSelect($event)\"\n (filterChange)=\"onFilterChange($event)\">\n <ng-template kendoComboBoxHeaderTemplate>\n <kit-loader *ngIf=\"loaderVisible\" class=\"popup-loader\"></kit-loader>\n </ng-template>\n <ng-template kendoComboBoxItemTemplate let-item>\n <span class=\"template\">{{ getOptionText(item) }}</span>\n </ng-template>\n </kendo-combobox>\n <kit-svg-icon class=\"input-icon\" icon=\"search\"></kit-svg-icon>\n </div>\n <kit-input-message *ngIf=\"messageText\"\n [type]=\"messageType\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #
|
|
150
|
+
}], template: "<div class=\"kit-autocomplete {{ state }}\"\n [class.autocomplete-empty]=\"!items || !items.length\"\n [class.autocomplete-disabled]=\"disabled\"\n [class.autocomplete-loading]=\"loaderVisible\">\n <kendo-label *ngIf=\"label\" class=\"label display-block\"\n [text]=\"label\"\n [for]=\"combobox\">\n </kendo-label>\n <div class=\"autocomplete-wrap\">\n <kendo-combobox #combobox textField=\"text\" valueField=\"value\"\n kendoDropDownFilter\n [data]=\"items\"\n [placeholder]=\"placeholder\"\n [filterable]=\"true\"\n [disabled]=\"disabled\"\n [clearButton]=\"false\"\n [value]=\"selectedValue\"\n [allowCustom]=\"true\"\n [valueNormalizer]=\"normalizedSelectedValue$\"\n [popupSettings]=\"dropdownPopupSettings\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (selectionChange)=\"onValueSelect($event)\"\n (filterChange)=\"onFilterChange($event)\">\n <ng-template kendoComboBoxHeaderTemplate>\n <kit-loader *ngIf=\"loaderVisible\" class=\"popup-loader\"></kit-loader>\n </ng-template>\n <ng-template kendoComboBoxItemTemplate let-item>\n <span class=\"template\">{{ getOptionText(item) }}</span>\n </ng-template>\n </kendo-combobox>\n <kit-svg-icon class=\"input-icon\" icon=\"search\"></kit-svg-icon>\n </div>\n <kit-input-message *ngIf=\"messageText\"\n [type]=\"messageType\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #002a3a;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14}.kit-autocomplete .label{margin-bottom:4px;font-weight:500;font-size:13px;color:#a9a8a8}.kit-autocomplete .autocomplete-wrap{position:relative;display:flex;align-items:center}.kit-autocomplete .k-input-button{display:none}.kit-autocomplete .k-combobox{position:static;padding:0 32px 0 8px;height:34px;border:1px solid #efefef;border-radius:4px;background:#fff}.kit-autocomplete .k-combobox.k-focus{box-shadow:none}.kit-autocomplete .k-input-inner{padding:0;color:#002a3a;font-size:13px;line-height:1}.kit-autocomplete .k-input-inner::selection{color:#fff;background:#00b0ad}.kit-autocomplete .popup-loader{height:100%}.kit-autocomplete .kit-loader,.kit-autocomplete .kit-loader>div{height:100%}.kit-autocomplete .kit-loader .circle{box-sizing:content-box}.kit-autocomplete .input-icon{position:absolute;right:8px;width:16px;height:16px;fill:#fff;stroke:#000}.kit-autocomplete .kit-autocomplete-popup{margin-top:4px;border:1px solid #c1c7d0;border-radius:4px;box-shadow:0 0 5px #003e5680;background-color:#f3f4f6;padding:4px}.kit-autocomplete .kit-autocomplete-popup .k-list{background-color:#f3f4f6}.kit-autocomplete .kit-autocomplete-popup .k-list-item{padding:8px;min-height:auto;background-color:#fff;font-size:13px;font-weight:500;line-height:1.26;box-shadow:none;border-radius:2px;color:#002a3a}.kit-autocomplete .kit-autocomplete-popup .k-list-item:not(:last-of-type){margin-bottom:4px}.kit-autocomplete .kit-autocomplete-popup .k-list-item:hover{background-color:#f3f5fa;color:#56a2f7}.kit-autocomplete:focus-within .k-combobox{border-color:#00b0ad}.kit-autocomplete.autocomplete-empty .kit-autocomplete-popup{display:none}.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup{display:block;height:200px}.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup .k-no-data,.kit-autocomplete.autocomplete-loading .kit-autocomplete-popup .k-list{display:none}.kit-autocomplete.autocomplete-disabled .label{color:#74777d}.kit-autocomplete.danger .k-combobox{border-color:#ef3e42;background:#f8e0e0}.kit-autocomplete.danger .input-icon{fill:#f8e0e0}\n"] }]
|
|
151
151
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
|
|
152
152
|
type: Input
|
|
153
153
|
}], placeholder: [{
|
|
@@ -36,11 +36,11 @@ export class KitButtonComponent {
|
|
|
36
36
|
this.clicked = new EventEmitter();
|
|
37
37
|
}
|
|
38
38
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
39
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitButtonComponent, selector: "kit-button", inputs: { disabled: "disabled", label: "label", type: "type", icon: "icon", kind: "kind", iconPosition: "iconPosition", buttonClass: "buttonClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [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 ></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;fill:none}.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{stroke:var(--ui-kit-color-grey-12)}.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-
|
|
39
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitButtonComponent, selector: "kit-button", inputs: { disabled: "disabled", label: "label", type: "type", icon: "icon", kind: "kind", iconPosition: "iconPosition", buttonClass: "buttonClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [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 ></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;fill:none}.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{stroke:var(--ui-kit-color-grey-12)}.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-active)}.kit-button .primary .kit-button-icon{stroke:var(--ui-kit-color-white)}.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);background:var(--ui-kit-color-white)}.kit-button .ghost:hover .kit-button-icon{stroke:var(--ui-kit-color-hover)}.kit-button .ghost:active{color:var(--ui-kit-color-active);background:var(--ui-kit-color-white)}.kit-button .ghost:active .kit-button-icon{stroke:var(--ui-kit-color-active)}.kit-button .ghost .kit-button-icon{stroke:var(--ui-kit-color-grey-10)}.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 .kit-button-icon{stroke:var(--ui-kit-color-grey-10)}.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{stroke:var(--ui-kit-color-hover)}.kit-button .link:active{color:var(--ui-kit-color-active)}.kit-button .link:active .kit-button-icon{stroke:var(--ui-kit-color-active)}.kit-button .link .kit-button-icon{stroke:var(--ui-kit-color-main)}.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{stroke:var(--ui-kit-color-hover)}.kit-button .dashed:active{color:var(--ui-kit-color-active);border-color:var(--ui-kit-color-active)}.kit-button .dashed:active .kit-button-icon{stroke:var(--ui-kit-color-active)}.kit-button .dashed .kit-button-icon{stroke:var(--ui-kit-color-main)}.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 }); }
|
|
40
40
|
}
|
|
41
41
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitButtonComponent, decorators: [{
|
|
42
42
|
type: Component,
|
|
43
|
-
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 ></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;fill:none}.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{stroke:var(--ui-kit-color-grey-12)}.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-
|
|
43
|
+
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 ></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;fill:none}.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{stroke:var(--ui-kit-color-grey-12)}.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-active)}.kit-button .primary .kit-button-icon{stroke:var(--ui-kit-color-white)}.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);background:var(--ui-kit-color-white)}.kit-button .ghost:hover .kit-button-icon{stroke:var(--ui-kit-color-hover)}.kit-button .ghost:active{color:var(--ui-kit-color-active);background:var(--ui-kit-color-white)}.kit-button .ghost:active .kit-button-icon{stroke:var(--ui-kit-color-active)}.kit-button .ghost .kit-button-icon{stroke:var(--ui-kit-color-grey-10)}.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 .kit-button-icon{stroke:var(--ui-kit-color-grey-10)}.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{stroke:var(--ui-kit-color-hover)}.kit-button .link:active{color:var(--ui-kit-color-active)}.kit-button .link:active .kit-button-icon{stroke:var(--ui-kit-color-active)}.kit-button .link .kit-button-icon{stroke:var(--ui-kit-color-main)}.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{stroke:var(--ui-kit-color-hover)}.kit-button .dashed:active{color:var(--ui-kit-color-active);border-color:var(--ui-kit-color-active)}.kit-button .dashed:active .kit-button-icon{stroke:var(--ui-kit-color-active)}.kit-button .dashed .kit-button-icon{stroke:var(--ui-kit-color-main)}.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"] }]
|
|
44
44
|
}], propDecorators: { disabled: [{
|
|
45
45
|
type: Input
|
|
46
46
|
}], label: [{
|
|
@@ -106,7 +106,7 @@ export class KitDropdownComponent {
|
|
|
106
106
|
provide: NG_VALUE_ACCESSOR,
|
|
107
107
|
useExisting: forwardRef(() => KitDropdownComponent),
|
|
108
108
|
multi: true,
|
|
109
|
-
}], queries: [{ propertyName: "kitDropdownItemTemplate", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<div class=\"kit-dropdown {{ state }}\" [class.disabled]=\"disabled\">\n <kendo-label *ngIf=\"label\" class=\"label display-block\"\n [text]=\"label\"\n [for]=\"dropdown\"\n ></kendo-label>\n <kendo-dropdownlist #dropdown valueField=\"value\" textField=\"text\" class=\"dropdown\"\n [data]=\"items\"\n [(ngModel)]=\"selectedItem\"\n [valuePrimitive]=\"true\"\n [disabled]=\"disabled\"\n [popupSettings]=\"buildPopupSettings()\"\n [itemDisabled]=\"onItemDisabled()\"\n [defaultItem]=\"defaultItem\"\n [listHeight]=\"listHeight\"\n (selectionChange)=\"onItemSelect($event)\">\n <ng-template kendoDropDownListValueTemplate let-dataItem>\n <span class=\"value-text\">{{ dataItem?.text }}</span>\n <kit-svg-icon class=\"value-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template *ngIf=\"kitDropdownItemTemplate\" kendoDropDownListItemTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"kitDropdownItemTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n </kendo-dropdownlist>\n <kit-input-message *ngIf=\"messageText\"\n [type]=\"messageType\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #
|
|
109
|
+
}], queries: [{ propertyName: "kitDropdownItemTemplate", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<div class=\"kit-dropdown {{ state }}\" [class.disabled]=\"disabled\">\n <kendo-label *ngIf=\"label\" class=\"label display-block\"\n [text]=\"label\"\n [for]=\"dropdown\"\n ></kendo-label>\n <kendo-dropdownlist #dropdown valueField=\"value\" textField=\"text\" class=\"dropdown\"\n [data]=\"items\"\n [(ngModel)]=\"selectedItem\"\n [valuePrimitive]=\"true\"\n [disabled]=\"disabled\"\n [popupSettings]=\"buildPopupSettings()\"\n [itemDisabled]=\"onItemDisabled()\"\n [defaultItem]=\"defaultItem\"\n [listHeight]=\"listHeight\"\n (selectionChange)=\"onItemSelect($event)\">\n <ng-template kendoDropDownListValueTemplate let-dataItem>\n <span class=\"value-text\">{{ dataItem?.text }}</span>\n <kit-svg-icon class=\"value-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template *ngIf=\"kitDropdownItemTemplate\" kendoDropDownListItemTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"kitDropdownItemTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n </kendo-dropdownlist>\n <kit-input-message *ngIf=\"messageText\"\n [type]=\"messageType\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #002a3a;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14}.kit-dropdown .label{margin-bottom:4px;font-weight:500;font-size:13px;color:#a9a8a8}.kit-dropdown .k-state-disabled{background-color:#f3f4f6}.kit-dropdown .k-input-value-text{display:flex;align-items:center;height:100%;font-size:13px;font-weight:400;color:#002a3a}.kit-dropdown .k-input-button{display:none}.kit-dropdown .dropdown{width:100%;height:34px;border-radius:4px;background:#fff;border:1px solid #efefef}.kit-dropdown .dropdown:hover{background-color:#fff}.kit-dropdown .dropdown.k-focus{box-shadow:none}.kit-dropdown .dropdown .value{display:flex;align-items:center}.kit-dropdown .dropdown .value-text{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-dropdown .dropdown .value-icon{display:block;width:16px;height:16px;fill:none;stroke:#002a3a}.kit-dropdown:focus-within .dropdown{border:1px solid #00b0ad}.kit-dropdown.disabled .label{color:#74777d}.kit-dropdown.disabled .value-icon{stroke:#74777d}.kit-dropdown.danger .dropdown{border-color:#ef3e42;background:#f8e0e0}.kit-dropdown-popup.k-popup{margin-top:4px;border:1px solid #c1c7d0;border-radius:4px;box-shadow:0 0 8px #003e5680;background-color:#f3f4f6;padding:4px}.kit-dropdown-popup.k-popup.kit-dropdown-popup-default-item .k-list-optionlabel{display:flex}.kit-dropdown-popup.k-popup .k-list-optionlabel{display:none}.kit-dropdown-popup.k-popup .k-list-ul{background-color:#f3f4f6}.kit-dropdown-popup.k-popup .k-list-optionlabel,.kit-dropdown-popup.k-popup .k-list-item{padding:8px;background-color:#fff;font-size:13px;font-weight:500;box-shadow:none;border-radius:2px;color:#002a3a}.kit-dropdown-popup.k-popup .k-list-optionlabel:not(:last-of-type),.kit-dropdown-popup.k-popup .k-list-item:not(:last-of-type){margin-bottom:4px}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-list-optionlabel:before,.kit-dropdown-popup.k-popup .k-list-item.k-list-optionlabel:before{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel:hover,.kit-dropdown-popup.k-popup .k-list-optionlabel.k-focus:hover,.kit-dropdown-popup.k-popup .k-list-item:hover,.kit-dropdown-popup.k-popup .k-list-item.k-focus:hover{background-color:#f3f5fa;color:#56a2f7}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected,.kit-dropdown-popup.k-popup .k-list-item.k-selected{background-color:#56a2f7;color:#fff}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-disabled,.kit-dropdown-popup.k-popup .k-list-item.k-disabled{background-color:#f3f4f6;color:#9a9fa6}\n"], dependencies: [{ kind: "component", type: i1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: i1.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i1.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "component", type: i2.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.KitInputMessageComponent, selector: "kit-input-message", inputs: ["type", "icon", "message"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
110
110
|
}
|
|
111
111
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitDropdownComponent, decorators: [{
|
|
112
112
|
type: Component,
|
|
@@ -114,7 +114,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
114
114
|
provide: NG_VALUE_ACCESSOR,
|
|
115
115
|
useExisting: forwardRef(() => KitDropdownComponent),
|
|
116
116
|
multi: true,
|
|
117
|
-
}], template: "<div class=\"kit-dropdown {{ state }}\" [class.disabled]=\"disabled\">\n <kendo-label *ngIf=\"label\" class=\"label display-block\"\n [text]=\"label\"\n [for]=\"dropdown\"\n ></kendo-label>\n <kendo-dropdownlist #dropdown valueField=\"value\" textField=\"text\" class=\"dropdown\"\n [data]=\"items\"\n [(ngModel)]=\"selectedItem\"\n [valuePrimitive]=\"true\"\n [disabled]=\"disabled\"\n [popupSettings]=\"buildPopupSettings()\"\n [itemDisabled]=\"onItemDisabled()\"\n [defaultItem]=\"defaultItem\"\n [listHeight]=\"listHeight\"\n (selectionChange)=\"onItemSelect($event)\">\n <ng-template kendoDropDownListValueTemplate let-dataItem>\n <span class=\"value-text\">{{ dataItem?.text }}</span>\n <kit-svg-icon class=\"value-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template *ngIf=\"kitDropdownItemTemplate\" kendoDropDownListItemTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"kitDropdownItemTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n </kendo-dropdownlist>\n <kit-input-message *ngIf=\"messageText\"\n [type]=\"messageType\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #
|
|
117
|
+
}], template: "<div class=\"kit-dropdown {{ state }}\" [class.disabled]=\"disabled\">\n <kendo-label *ngIf=\"label\" class=\"label display-block\"\n [text]=\"label\"\n [for]=\"dropdown\"\n ></kendo-label>\n <kendo-dropdownlist #dropdown valueField=\"value\" textField=\"text\" class=\"dropdown\"\n [data]=\"items\"\n [(ngModel)]=\"selectedItem\"\n [valuePrimitive]=\"true\"\n [disabled]=\"disabled\"\n [popupSettings]=\"buildPopupSettings()\"\n [itemDisabled]=\"onItemDisabled()\"\n [defaultItem]=\"defaultItem\"\n [listHeight]=\"listHeight\"\n (selectionChange)=\"onItemSelect($event)\">\n <ng-template kendoDropDownListValueTemplate let-dataItem>\n <span class=\"value-text\">{{ dataItem?.text }}</span>\n <kit-svg-icon class=\"value-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template *ngIf=\"kitDropdownItemTemplate\" kendoDropDownListItemTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"kitDropdownItemTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n </kendo-dropdownlist>\n <kit-input-message *ngIf=\"messageText\"\n [type]=\"messageType\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #002a3a;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14}.kit-dropdown .label{margin-bottom:4px;font-weight:500;font-size:13px;color:#a9a8a8}.kit-dropdown .k-state-disabled{background-color:#f3f4f6}.kit-dropdown .k-input-value-text{display:flex;align-items:center;height:100%;font-size:13px;font-weight:400;color:#002a3a}.kit-dropdown .k-input-button{display:none}.kit-dropdown .dropdown{width:100%;height:34px;border-radius:4px;background:#fff;border:1px solid #efefef}.kit-dropdown .dropdown:hover{background-color:#fff}.kit-dropdown .dropdown.k-focus{box-shadow:none}.kit-dropdown .dropdown .value{display:flex;align-items:center}.kit-dropdown .dropdown .value-text{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-dropdown .dropdown .value-icon{display:block;width:16px;height:16px;fill:none;stroke:#002a3a}.kit-dropdown:focus-within .dropdown{border:1px solid #00b0ad}.kit-dropdown.disabled .label{color:#74777d}.kit-dropdown.disabled .value-icon{stroke:#74777d}.kit-dropdown.danger .dropdown{border-color:#ef3e42;background:#f8e0e0}.kit-dropdown-popup.k-popup{margin-top:4px;border:1px solid #c1c7d0;border-radius:4px;box-shadow:0 0 8px #003e5680;background-color:#f3f4f6;padding:4px}.kit-dropdown-popup.k-popup.kit-dropdown-popup-default-item .k-list-optionlabel{display:flex}.kit-dropdown-popup.k-popup .k-list-optionlabel{display:none}.kit-dropdown-popup.k-popup .k-list-ul{background-color:#f3f4f6}.kit-dropdown-popup.k-popup .k-list-optionlabel,.kit-dropdown-popup.k-popup .k-list-item{padding:8px;background-color:#fff;font-size:13px;font-weight:500;box-shadow:none;border-radius:2px;color:#002a3a}.kit-dropdown-popup.k-popup .k-list-optionlabel:not(:last-of-type),.kit-dropdown-popup.k-popup .k-list-item:not(:last-of-type){margin-bottom:4px}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-list-optionlabel:before,.kit-dropdown-popup.k-popup .k-list-item.k-list-optionlabel:before{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel:hover,.kit-dropdown-popup.k-popup .k-list-optionlabel.k-focus:hover,.kit-dropdown-popup.k-popup .k-list-item:hover,.kit-dropdown-popup.k-popup .k-list-item.k-focus:hover{background-color:#f3f5fa;color:#56a2f7}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected,.kit-dropdown-popup.k-popup .k-list-item.k-selected{background-color:#56a2f7;color:#fff}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-disabled,.kit-dropdown-popup.k-popup .k-list-item.k-disabled{background-color:#f3f4f6;color:#9a9fa6}\n"] }]
|
|
118
118
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { items: [{
|
|
119
119
|
type: Input
|
|
120
120
|
}], selectedItem: [{
|
|
@@ -40,14 +40,14 @@ export class KitNavigationMenuComponent {
|
|
|
40
40
|
});
|
|
41
41
|
}
|
|
42
42
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
43
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitNavigationMenuComponent, selector: "kit-navigation-menu", inputs: { items: "items", animate: "animate" }, ngImport: i0, template: "<div class=\"kit-navigation-menu\">\n <kendo-panelbar [expandMode]=\"PanelBarExpandMode.Single\"\n [animate]=\"animate\">\n @for (item of items; track item) {\n <kendo-panelbar-item class=\"menu-item\"\n [ngClass]=\"item.cssClass\"\n [expanded]=\"item.expanded\"\n [routerLink]=\"item.link\">\n <ng-template kendoPanelBarItemTitle>\n <kit-svg-icon class=\"item-icon\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n <span class=\"item-text\">{{ item.title }}</span>\n </ng-template>\n\n @for (child of item.items; track child) {\n <kendo-panelbar-item
|
|
43
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitNavigationMenuComponent, selector: "kit-navigation-menu", inputs: { items: "items", animate: "animate" }, ngImport: i0, template: "<div class=\"kit-navigation-menu\">\n <kendo-panelbar [expandMode]=\"PanelBarExpandMode.Single\"\n [animate]=\"animate\">\n @for (item of items; track item) {\n <kendo-panelbar-item class=\"menu-item\"\n routerLinkActive=\"active\"\n [ngClass]=\"item.cssClass\"\n [class.has-children]=\"item.items?.length\"\n [expanded]=\"item.expanded\"\n [routerLink]=\"item.link\">\n <ng-template kendoPanelBarItemTitle>\n <kit-svg-icon class=\"item-icon\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n <span class=\"item-text\">{{ item.title }}</span>\n </ng-template>\n\n @for (child of item.items; track child) {\n <kendo-panelbar-item class=\"menu-child-item\"\n routerLinkActive=\"active\"\n [title]=\"child.title\"\n [ngClass]=\"child.cssClass\"\n [class.has-children]=\"child.items?.length\"\n [expanded]=\"child.expanded\"\n [routerLink]=\"child.link\">\n @for (subChild of child.items; track subChild) {\n <kendo-panelbar-item class=\"menu-link\"\n routerLinkActive=\"active\"\n [ngClass]=\"subChild.cssClass\"\n [routerLink]=\"subChild.link\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"item-text\">{{ subChild.title }}</span>\n <kit-svg-icon class=\"item-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n </ng-template>\n </kendo-panelbar-item>\n }\n </kendo-panelbar-item>\n }\n </kendo-panelbar-item>\n }\n </kendo-panelbar>\n</div>\n\n", styles: [".kit-navigation-menu .k-panelbar{display:flex;flex-direction:column;gap:20px;border:none;background:none}.kit-navigation-menu ::ng-deep .k-panelbar-group{display:flex;flex-direction:column;gap:20px;margin-top:20px}.kit-navigation-menu .menu-item{border:none}.kit-navigation-menu .menu-item .item-icon{width:16px;height:16px;fill:var(--ui-kit-color-main)}.kit-navigation-menu .menu-item .item-text{color:var(--ui-kit-color-white);font-size:14px;font-weight:400}.kit-navigation-menu .menu-item.k-expanded ::ng-deep>.k-link{background:var(--ui-kit-color-selected)}.kit-navigation-menu .menu-item.k-expanded ::ng-deep>.k-link .k-panelbar-toggle{color:var(--ui-kit-color-main)}.kit-navigation-menu .menu-item.k-expanded ::ng-deep>.k-link .item-icon{fill:var(--ui-kit-color-main)}.kit-navigation-menu .menu-item.active:not(.has-children) ::ng-deep>.k-link{background:var(--ui-kit-color-main)}.kit-navigation-menu .menu-item.active:not(.has-children) ::ng-deep>.k-link .item-text{color:var(--ui-kit-color-white)}.kit-navigation-menu .menu-item.active:not(.has-children) ::ng-deep>.k-link .item-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu .menu-item ::ng-deep .k-link{padding:9px 24px;gap:8px;color:var(--ui-kit-color-white);border-radius:8px;background:none;cursor:pointer;transition:none}.kit-navigation-menu .menu-item ::ng-deep .k-link.k-focus{box-shadow:none}.kit-navigation-menu .menu-item ::ng-deep .k-link .k-panelbar-toggle{color:var(--ui-kit-color-main)}.kit-navigation-menu .menu-item ::ng-deep .k-link:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-item ::ng-deep .k-link:hover .item-text{color:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-item ::ng-deep .k-link:hover .k-panelbar-toggle{color:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-child-item.k-expanded ::ng-deep>.k-link{color:var(--ui-kit-color-main)}.kit-navigation-menu .menu-child-item.active:not(.has-children) ::ng-deep>.k-link{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-navigation-menu .menu-child-item ::ng-deep .k-panelbar-toggle{display:none}.kit-navigation-menu .menu-child-item ::ng-deep .k-selected:hover{background:none}.kit-navigation-menu .menu-child-item ::ng-deep .k-link:hover{color:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-link .item-icon{stroke:var(--ui-kit-color-grey-9);fill:none}.kit-navigation-menu .menu-link .item-text{color:var(--ui-kit-color-grey-9)}.kit-navigation-menu .menu-link ::ng-deep .k-link{padding:9px 6px 9px 36px}.kit-navigation-menu .menu-link ::ng-deep .k-link:hover .item-icon{fill:none;stroke:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-link.active ::ng-deep .k-link{background:var(--ui-kit-color-main)}.kit-navigation-menu .menu-link.active ::ng-deep .k-link .item-text{color:var(--ui-kit-color-white)}.kit-navigation-menu .menu-link.active ::ng-deep .k-link .item-icon{stroke:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.PanelBarComponent, selector: "kendo-panelbar", inputs: ["expandMode", "selectable", "animate", "height", "keepItemContent", "items"], outputs: ["stateChange", "select", "expand", "collapse", "itemClick"], exportAs: ["kendoPanelbar"] }, { kind: "component", type: i3.PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { kind: "directive", type: i3.PanelBarItemTitleDirective, selector: "[kendoPanelBarItemTitle]" }, { kind: "component", type: i4.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
44
44
|
}
|
|
45
45
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuComponent, decorators: [{
|
|
46
46
|
type: Component,
|
|
47
|
-
args: [{ selector: 'kit-navigation-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-navigation-menu\">\n <kendo-panelbar [expandMode]=\"PanelBarExpandMode.Single\"\n [animate]=\"animate\">\n @for (item of items; track item) {\n <kendo-panelbar-item class=\"menu-item\"\n [ngClass]=\"item.cssClass\"\n [expanded]=\"item.expanded\"\n [routerLink]=\"item.link\">\n <ng-template kendoPanelBarItemTitle>\n <kit-svg-icon class=\"item-icon\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n <span class=\"item-text\">{{ item.title }}</span>\n </ng-template>\n\n @for (child of item.items; track child) {\n <kendo-panelbar-item
|
|
47
|
+
args: [{ selector: 'kit-navigation-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-navigation-menu\">\n <kendo-panelbar [expandMode]=\"PanelBarExpandMode.Single\"\n [animate]=\"animate\">\n @for (item of items; track item) {\n <kendo-panelbar-item class=\"menu-item\"\n routerLinkActive=\"active\"\n [ngClass]=\"item.cssClass\"\n [class.has-children]=\"item.items?.length\"\n [expanded]=\"item.expanded\"\n [routerLink]=\"item.link\">\n <ng-template kendoPanelBarItemTitle>\n <kit-svg-icon class=\"item-icon\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n <span class=\"item-text\">{{ item.title }}</span>\n </ng-template>\n\n @for (child of item.items; track child) {\n <kendo-panelbar-item class=\"menu-child-item\"\n routerLinkActive=\"active\"\n [title]=\"child.title\"\n [ngClass]=\"child.cssClass\"\n [class.has-children]=\"child.items?.length\"\n [expanded]=\"child.expanded\"\n [routerLink]=\"child.link\">\n @for (subChild of child.items; track subChild) {\n <kendo-panelbar-item class=\"menu-link\"\n routerLinkActive=\"active\"\n [ngClass]=\"subChild.cssClass\"\n [routerLink]=\"subChild.link\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"item-text\">{{ subChild.title }}</span>\n <kit-svg-icon class=\"item-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n </ng-template>\n </kendo-panelbar-item>\n }\n </kendo-panelbar-item>\n }\n </kendo-panelbar-item>\n }\n </kendo-panelbar>\n</div>\n\n", styles: [".kit-navigation-menu .k-panelbar{display:flex;flex-direction:column;gap:20px;border:none;background:none}.kit-navigation-menu ::ng-deep .k-panelbar-group{display:flex;flex-direction:column;gap:20px;margin-top:20px}.kit-navigation-menu .menu-item{border:none}.kit-navigation-menu .menu-item .item-icon{width:16px;height:16px;fill:var(--ui-kit-color-main)}.kit-navigation-menu .menu-item .item-text{color:var(--ui-kit-color-white);font-size:14px;font-weight:400}.kit-navigation-menu .menu-item.k-expanded ::ng-deep>.k-link{background:var(--ui-kit-color-selected)}.kit-navigation-menu .menu-item.k-expanded ::ng-deep>.k-link .k-panelbar-toggle{color:var(--ui-kit-color-main)}.kit-navigation-menu .menu-item.k-expanded ::ng-deep>.k-link .item-icon{fill:var(--ui-kit-color-main)}.kit-navigation-menu .menu-item.active:not(.has-children) ::ng-deep>.k-link{background:var(--ui-kit-color-main)}.kit-navigation-menu .menu-item.active:not(.has-children) ::ng-deep>.k-link .item-text{color:var(--ui-kit-color-white)}.kit-navigation-menu .menu-item.active:not(.has-children) ::ng-deep>.k-link .item-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu .menu-item ::ng-deep .k-link{padding:9px 24px;gap:8px;color:var(--ui-kit-color-white);border-radius:8px;background:none;cursor:pointer;transition:none}.kit-navigation-menu .menu-item ::ng-deep .k-link.k-focus{box-shadow:none}.kit-navigation-menu .menu-item ::ng-deep .k-link .k-panelbar-toggle{color:var(--ui-kit-color-main)}.kit-navigation-menu .menu-item ::ng-deep .k-link:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-item ::ng-deep .k-link:hover .item-text{color:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-item ::ng-deep .k-link:hover .k-panelbar-toggle{color:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-child-item.k-expanded ::ng-deep>.k-link{color:var(--ui-kit-color-main)}.kit-navigation-menu .menu-child-item.active:not(.has-children) ::ng-deep>.k-link{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-navigation-menu .menu-child-item ::ng-deep .k-panelbar-toggle{display:none}.kit-navigation-menu .menu-child-item ::ng-deep .k-selected:hover{background:none}.kit-navigation-menu .menu-child-item ::ng-deep .k-link:hover{color:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-link .item-icon{stroke:var(--ui-kit-color-grey-9);fill:none}.kit-navigation-menu .menu-link .item-text{color:var(--ui-kit-color-grey-9)}.kit-navigation-menu .menu-link ::ng-deep .k-link{padding:9px 6px 9px 36px}.kit-navigation-menu .menu-link ::ng-deep .k-link:hover .item-icon{fill:none;stroke:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-link.active ::ng-deep .k-link{background:var(--ui-kit-color-main)}.kit-navigation-menu .menu-link.active ::ng-deep .k-link .item-text{color:var(--ui-kit-color-white)}.kit-navigation-menu .menu-link.active ::ng-deep .k-link .item-icon{stroke:var(--ui-kit-color-white)}\n"] }]
|
|
48
48
|
}], ctorParameters: () => [{ type: i1.Router }], propDecorators: { items: [{
|
|
49
49
|
type: Input
|
|
50
50
|
}], animate: [{
|
|
51
51
|
type: Input
|
|
52
52
|
}] } });
|
|
53
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
53
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2l0LW5hdmlnYXRpb24tbWVudS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1uYXZpZ2F0aW9uLW1lbnUva2l0LW5hdmlnYXRpb24tbWVudS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1uYXZpZ2F0aW9uLW1lbnUva2l0LW5hdmlnYXRpb24tbWVudS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUUxRSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFDaEUsT0FBTyxFQUFFLGFBQWEsRUFBVSxNQUFNLGlCQUFpQixDQUFDO0FBQ3hELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQ3BFLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDOUIsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7Ozs7OztBQVFoRSxNQUFNLE9BQU8sMEJBQTBCO0lBY3JDLFlBQ1UsTUFBYztRQUFkLFdBQU0sR0FBTixNQUFNLENBQVE7UUFkeEI7O1dBRUc7UUFDTSxVQUFLLEdBQTRCLEVBQUUsQ0FBQztRQUU3Qzs7V0FFRztRQUNNLFlBQU8sR0FBWSxJQUFJLENBQUM7UUFFeEIsZUFBVSxHQUFzQixVQUFVLENBQUM7UUFDM0MsdUJBQWtCLEdBQThCLGtCQUFrQixDQUFDO1FBSzFFLElBQUksQ0FBQyw4QkFBOEIsRUFBRSxDQUFDO0lBQ3hDLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUNyRCxDQUFDO0lBRU8sOEJBQThCO1FBQ3BDLElBQUksQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLElBQUksQ0FDckIsTUFBTSxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsS0FBSyxZQUFZLGFBQWEsQ0FBQyxFQUMvQyxrQkFBa0IsRUFBRSxDQUNyQixDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7SUFDeEUsQ0FBQztJQUVPLGdCQUFnQixDQUFDLEtBQThCLEVBQUUsR0FBVztRQUNsRSxLQUFLLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxFQUFFO1lBQ25CLElBQUksQ0FBQyxRQUFRLEdBQUcsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksSUFBSSxHQUFHLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDO1lBQzNELElBQUksSUFBSSxDQUFDLEtBQUssRUFBRTtnQkFDZCxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxHQUFHLENBQUMsQ0FBQztnQkFDdkMsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQzthQUMxRDtRQUNILENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzs4R0F2Q1UsMEJBQTBCO2tHQUExQiwwQkFBMEIsMkdDZHZDLG1oRUE2Q0E7OzJGRC9CYSwwQkFBMEI7a0JBTnRDLFNBQVM7K0JBQ0UscUJBQXFCLG1CQUdkLHVCQUF1QixDQUFDLE1BQU07MkVBTXRDLEtBQUs7c0JBQWIsS0FBSztnQkFLRyxPQUFPO3NCQUFmLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgS2l0TmF2aWdhdGlvbk1lbnVJdGVtIH0gZnJvbSAnLi9raXQtbmF2aWdhdGlvbi1tZW51Lm1vZGVsJztcbmltcG9ydCB7IEtpdFN2Z0ljb24gfSBmcm9tICcuLi9raXQtc3ZnLWljb24va2l0LXN2Zy1pY29uLmNvbnN0JztcbmltcG9ydCB7IE5hdmlnYXRpb25FbmQsIFJvdXRlciB9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XG5pbXBvcnQgeyBQYW5lbEJhckV4cGFuZE1vZGUgfSBmcm9tICdAcHJvZ3Jlc3Mva2VuZG8tYW5ndWxhci1sYXlvdXQnO1xuaW1wb3J0IHsgZmlsdGVyIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyB0YWtlVW50aWxEZXN0cm95ZWQgfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2tpdC1uYXZpZ2F0aW9uLW1lbnUnLFxuICB0ZW1wbGF0ZVVybDogJy4va2l0LW5hdmlnYXRpb24tbWVudS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9raXQtbmF2aWdhdGlvbi1tZW51LmNvbXBvbmVudC5zY3NzJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEtpdE5hdmlnYXRpb25NZW51Q29tcG9uZW50IHtcbiAgLyoqXG4gICAqIEFuIGl0ZW1zIGxpc3Qgd2hpY2ggaXMgZ29pbmcgdG8gYmUgcmVuZGVyZWQgYXMgbWVudSBpdGVtc1xuICAgKi9cbiAgQElucHV0KCkgaXRlbXM6IEtpdE5hdmlnYXRpb25NZW51SXRlbVtdID0gW107XG5cbiAgLyoqXG4gICAqIERlZmluZXMgd2hldGhlciB0aGUgY29tcG9uZW50IHdpbGwgaGF2ZSBhbiBhbmltYXRpb24gd2hlbiBjb2xsYXBzaW5nL2V4cGFuZGluZyB0aGUgbWVudVxuICAgKi9cbiAgQElucHV0KCkgYW5pbWF0ZTogYm9vbGVhbiA9IHRydWU7XG5cbiAgcmVhZG9ubHkgS2l0U3ZnSWNvbjogdHlwZW9mIEtpdFN2Z0ljb24gPSBLaXRTdmdJY29uO1xuICByZWFkb25seSBQYW5lbEJhckV4cGFuZE1vZGU6IHR5cGVvZiBQYW5lbEJhckV4cGFuZE1vZGUgPSBQYW5lbEJhckV4cGFuZE1vZGU7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSByb3V0ZXI6IFJvdXRlcixcbiAgKSB7XG4gICAgdGhpcy5zZXRFeHBhbmRlZFN0YXRlT25Sb3V0ZXJDaGFuZ2UoKTtcbiAgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuc2V0RXhwYW5kZWRTdGF0ZSh0aGlzLml0ZW1zLCB0aGlzLnJvdXRlci51cmwpO1xuICB9XG5cbiAgcHJpdmF0ZSBzZXRFeHBhbmRlZFN0YXRlT25Sb3V0ZXJDaGFuZ2UoKTogdm9pZCB7XG4gICAgdGhpcy5yb3V0ZXIuZXZlbnRzLnBpcGUoXG4gICAgICBmaWx0ZXIoZXZlbnQgPT4gZXZlbnQgaW5zdGFuY2VvZiBOYXZpZ2F0aW9uRW5kKSxcbiAgICAgIHRha2VVbnRpbERlc3Ryb3llZCgpLFxuICAgICkuc3Vic2NyaWJlKCgpID0+IHRoaXMuc2V0RXhwYW5kZWRTdGF0ZSh0aGlzLml0ZW1zLCB0aGlzLnJvdXRlci51cmwpKTtcbiAgfVxuXG4gIHByaXZhdGUgc2V0RXhwYW5kZWRTdGF0ZShpdGVtczogS2l0TmF2aWdhdGlvbk1lbnVJdGVtW10sIHVybDogc3RyaW5nKTogdm9pZCB7XG4gICAgaXRlbXMuZm9yRWFjaChpdGVtID0+IHtcbiAgICAgIGl0ZW0uZXhwYW5kZWQgPSAhIShpdGVtLmxpbmsgJiYgdXJsLnN0YXJ0c1dpdGgoaXRlbS5saW5rKSk7XG4gICAgICBpZiAoaXRlbS5pdGVtcykge1xuICAgICAgICB0aGlzLnNldEV4cGFuZGVkU3RhdGUoaXRlbS5pdGVtcywgdXJsKTtcbiAgICAgICAgaXRlbS5leHBhbmRlZCA9IGl0ZW0uaXRlbXMuc29tZShjaGlsZCA9PiBjaGlsZC5leHBhbmRlZCk7XG4gICAgICB9XG4gICAgfSk7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJraXQtbmF2aWdhdGlvbi1tZW51XCI+XG4gIDxrZW5kby1wYW5lbGJhciBbZXhwYW5kTW9kZV09XCJQYW5lbEJhckV4cGFuZE1vZGUuU2luZ2xlXCJcbiAgICAgICAgICAgICAgICAgIFthbmltYXRlXT1cImFuaW1hdGVcIj5cbiAgICBAZm9yIChpdGVtIG9mIGl0ZW1zOyB0cmFjayBpdGVtKSB7XG4gICAgICA8a2VuZG8tcGFuZWxiYXItaXRlbSBjbGFzcz1cIm1lbnUtaXRlbVwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICByb3V0ZXJMaW5rQWN0aXZlPVwiYWN0aXZlXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgIFtuZ0NsYXNzXT1cIml0ZW0uY3NzQ2xhc3NcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgW2NsYXNzLmhhcy1jaGlsZHJlbl09XCJpdGVtLml0ZW1zPy5sZW5ndGhcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgW2V4cGFuZGVkXT1cIml0ZW0uZXhwYW5kZWRcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgW3JvdXRlckxpbmtdPVwiaXRlbS5saW5rXCI+XG4gICAgICAgIDxuZy10ZW1wbGF0ZSBrZW5kb1BhbmVsQmFySXRlbVRpdGxlPlxuICAgICAgICAgIDxraXQtc3ZnLWljb24gY2xhc3M9XCJpdGVtLWljb25cIlxuICAgICAgICAgICAgICAgICAgICAgICAgW2ljb25dPVwiaXRlbS5pY29uXCJcbiAgICAgICAgICA+PC9raXQtc3ZnLWljb24+XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJpdGVtLXRleHRcIj57eyBpdGVtLnRpdGxlIH19PC9zcGFuPlxuICAgICAgICA8L25nLXRlbXBsYXRlPlxuXG4gICAgICAgIEBmb3IgKGNoaWxkIG9mIGl0ZW0uaXRlbXM7IHRyYWNrIGNoaWxkKSB7XG4gICAgICAgICAgPGtlbmRvLXBhbmVsYmFyLWl0ZW0gY2xhc3M9XCJtZW51LWNoaWxkLWl0ZW1cIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHJvdXRlckxpbmtBY3RpdmU9XCJhY3RpdmVcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFt0aXRsZV09XCJjaGlsZC50aXRsZVwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgW25nQ2xhc3NdPVwiY2hpbGQuY3NzQ2xhc3NcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtjbGFzcy5oYXMtY2hpbGRyZW5dPVwiY2hpbGQuaXRlbXM/Lmxlbmd0aFwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgW2V4cGFuZGVkXT1cImNoaWxkLmV4cGFuZGVkXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBbcm91dGVyTGlua109XCJjaGlsZC5saW5rXCI+XG4gICAgICAgICAgICBAZm9yIChzdWJDaGlsZCBvZiBjaGlsZC5pdGVtczsgdHJhY2sgc3ViQ2hpbGQpIHtcbiAgICAgICAgICAgICAgPGtlbmRvLXBhbmVsYmFyLWl0ZW0gY2xhc3M9XCJtZW51LWxpbmtcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICByb3V0ZXJMaW5rQWN0aXZlPVwiYWN0aXZlXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgW25nQ2xhc3NdPVwic3ViQ2hpbGQuY3NzQ2xhc3NcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBbcm91dGVyTGlua109XCJzdWJDaGlsZC5saW5rXCI+XG4gICAgICAgICAgICAgICAgPG5nLXRlbXBsYXRlIGtlbmRvUGFuZWxCYXJJdGVtVGl0bGU+XG4gICAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cIml0ZW0tdGV4dFwiPnt7IHN1YkNoaWxkLnRpdGxlIH19PC9zcGFuPlxuICAgICAgICAgICAgICAgICAgPGtpdC1zdmctaWNvbiBjbGFzcz1cIml0ZW0taWNvblwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtpY29uXT1cIktpdFN2Z0ljb24uQ0hFVlJPTl9SSUdIVFwiXG4gICAgICAgICAgICAgICAgICA+PC9raXQtc3ZnLWljb24+XG4gICAgICAgICAgICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgICAgICAgPC9rZW5kby1wYW5lbGJhci1pdGVtPlxuICAgICAgICAgICAgfVxuICAgICAgICAgIDwva2VuZG8tcGFuZWxiYXItaXRlbT5cbiAgICAgICAgfVxuICAgICAgPC9rZW5kby1wYW5lbGJhci1pdGVtPlxuICAgIH1cbiAgPC9rZW5kby1wYW5lbGJhcj5cbjwvZGl2PlxuXG4iXX0=
|
|
@@ -73,11 +73,11 @@ export class KitSwitchComponent {
|
|
|
73
73
|
return this.mode === KitSwitchMode.SINGLE;
|
|
74
74
|
}
|
|
75
75
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
76
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitSwitchComponent, selector: "kit-switch", inputs: { items: "items", mode: "mode", label: "label", disabled: "disabled", selection: "selection", messageIcon: "messageIcon", messageText: "messageText", messageType: "messageType", state: "state" }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"kit-switch {{ state }}\">\n <ng-container *ngIf=\"items.length\">\n <label *ngIf=\"label\" class=\"label display-block\"\n [title]=\"label\"\n >{{ label }}</label>\n\n <kendo-buttongroup look=\"outline\" class=\"button-group\"\n [selection]=\"mode\"\n [class.disabled]=\"disabled\">\n <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n [selected]=\"isItemSelected(item)\"\n [togglable]=\"true\"\n [disabled]=\"item.disabled && item.disabled(item)\"\n (selectedChange)=\"onItemSelect($event, item)\">\n <ng-container *ngIf=\"item.title; else icon\">\n {{ item.title }}\n </ng-container>\n\n <ng-template #icon>\n <kit-svg-icon class=\"icon-wrapper\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n </ng-template>\n </button>\n </kendo-buttongroup>\n <kit-input-message *ngIf=\"messageText\"\n [type]=\"messageType\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n </ng-container>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #
|
|
76
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitSwitchComponent, selector: "kit-switch", inputs: { items: "items", mode: "mode", label: "label", disabled: "disabled", selection: "selection", messageIcon: "messageIcon", messageText: "messageText", messageType: "messageType", state: "state" }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"kit-switch {{ state }}\">\n <ng-container *ngIf=\"items.length\">\n <label *ngIf=\"label\" class=\"label display-block\"\n [title]=\"label\"\n >{{ label }}</label>\n\n <kendo-buttongroup look=\"outline\" class=\"button-group\"\n [selection]=\"mode\"\n [class.disabled]=\"disabled\">\n <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n [selected]=\"isItemSelected(item)\"\n [togglable]=\"true\"\n [disabled]=\"item.disabled && item.disabled(item)\"\n (selectedChange)=\"onItemSelect($event, item)\">\n <ng-container *ngIf=\"item.title; else icon\">\n {{ item.title }}\n </ng-container>\n\n <ng-template #icon>\n <kit-svg-icon class=\"icon-wrapper\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n </ng-template>\n </button>\n </kendo-buttongroup>\n <kit-input-message *ngIf=\"messageText\"\n [type]=\"messageType\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n </ng-container>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #002a3a;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14}.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-switch .label{margin-bottom:4px;color:#27282a;font-weight:500;font-size:13px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{stroke:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{stroke:var(--ui-kit-color-cobalt);fill:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{stroke:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "component", type: i1.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i4.KitInputMessageComponent, selector: "kit-input-message", inputs: ["type", "icon", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
77
77
|
}
|
|
78
78
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitSwitchComponent, decorators: [{
|
|
79
79
|
type: Component,
|
|
80
|
-
args: [{ selector: 'kit-switch', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-switch {{ state }}\">\n <ng-container *ngIf=\"items.length\">\n <label *ngIf=\"label\" class=\"label display-block\"\n [title]=\"label\"\n >{{ label }}</label>\n\n <kendo-buttongroup look=\"outline\" class=\"button-group\"\n [selection]=\"mode\"\n [class.disabled]=\"disabled\">\n <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n [selected]=\"isItemSelected(item)\"\n [togglable]=\"true\"\n [disabled]=\"item.disabled && item.disabled(item)\"\n (selectedChange)=\"onItemSelect($event, item)\">\n <ng-container *ngIf=\"item.title; else icon\">\n {{ item.title }}\n </ng-container>\n\n <ng-template #icon>\n <kit-svg-icon class=\"icon-wrapper\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n </ng-template>\n </button>\n </kendo-buttongroup>\n <kit-input-message *ngIf=\"messageText\"\n [type]=\"messageType\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n </ng-container>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #
|
|
80
|
+
args: [{ selector: 'kit-switch', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-switch {{ state }}\">\n <ng-container *ngIf=\"items.length\">\n <label *ngIf=\"label\" class=\"label display-block\"\n [title]=\"label\"\n >{{ label }}</label>\n\n <kendo-buttongroup look=\"outline\" class=\"button-group\"\n [selection]=\"mode\"\n [class.disabled]=\"disabled\">\n <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n [selected]=\"isItemSelected(item)\"\n [togglable]=\"true\"\n [disabled]=\"item.disabled && item.disabled(item)\"\n (selectedChange)=\"onItemSelect($event, item)\">\n <ng-container *ngIf=\"item.title; else icon\">\n {{ item.title }}\n </ng-container>\n\n <ng-template #icon>\n <kit-svg-icon class=\"icon-wrapper\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n </ng-template>\n </button>\n </kendo-buttongroup>\n <kit-input-message *ngIf=\"messageText\"\n [type]=\"messageType\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n </ng-container>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #002a3a;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14}.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}.kit-switch .label{margin-bottom:4px;color:#27282a;font-weight:500;font-size:13px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{stroke:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{stroke:var(--ui-kit-color-cobalt);fill:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{stroke:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"] }]
|
|
81
81
|
}], propDecorators: { items: [{
|
|
82
82
|
type: Input
|
|
83
83
|
}], mode: [{
|
|
@@ -33,11 +33,11 @@ export class KitTextLabelComponent {
|
|
|
33
33
|
this.state = KitTextLabelState.REGULAR;
|
|
34
34
|
}
|
|
35
35
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitTextLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
36
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitTextLabelComponent, selector: "kit-text-label", inputs: { label: "label", value: "value", htmlMode: "htmlMode", noValueMessage: "noValueMessage", messageText: "messageText", messageType: "messageType", state: "state" }, ngImport: i0, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n <kendo-label *ngIf=\"value\" [text]=\"label\"></kendo-label>\n <kendo-label *ngIf=\"!value\" [text]=\"noValueMessage || label\"></kendo-label>\n <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n <ng-template #htmlModeTemplate>\n <div class=\"value\" [innerHTML]=\"value\"></div>\n </ng-template>\n <kit-input-message *ngIf=\"messageText && value\"\n [type]=\"messageType\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #
|
|
36
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitTextLabelComponent, selector: "kit-text-label", inputs: { label: "label", value: "value", htmlMode: "htmlMode", noValueMessage: "noValueMessage", messageText: "messageText", messageType: "messageType", state: "state" }, ngImport: i0, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n <kendo-label *ngIf=\"value\" [text]=\"label\"></kendo-label>\n <kendo-label *ngIf=\"!value\" [text]=\"noValueMessage || label\"></kendo-label>\n <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n <ng-template #htmlModeTemplate>\n <div class=\"value\" [innerHTML]=\"value\"></div>\n </ng-template>\n <kit-input-message *ngIf=\"messageText && value\"\n [type]=\"messageType\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #002a3a;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .k-label{display:block;margin-bottom:4px;color:#a9a8a8;font-weight:500;font-size:13px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: i3.KitInputMessageComponent, selector: "kit-input-message", inputs: ["type", "icon", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
37
37
|
}
|
|
38
38
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitTextLabelComponent, decorators: [{
|
|
39
39
|
type: Component,
|
|
40
|
-
args: [{ selector: 'kit-text-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n <kendo-label *ngIf=\"value\" [text]=\"label\"></kendo-label>\n <kendo-label *ngIf=\"!value\" [text]=\"noValueMessage || label\"></kendo-label>\n <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n <ng-template #htmlModeTemplate>\n <div class=\"value\" [innerHTML]=\"value\"></div>\n </ng-template>\n <kit-input-message *ngIf=\"messageText && value\"\n [type]=\"messageType\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #
|
|
40
|
+
args: [{ selector: 'kit-text-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n <kendo-label *ngIf=\"value\" [text]=\"label\"></kendo-label>\n <kendo-label *ngIf=\"!value\" [text]=\"noValueMessage || label\"></kendo-label>\n <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n <ng-template #htmlModeTemplate>\n <div class=\"value\" [innerHTML]=\"value\"></div>\n </ng-template>\n <kit-input-message *ngIf=\"messageText && value\"\n [type]=\"messageType\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #002a3a;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-orange: #faad14}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .k-label{display:block;margin-bottom:4px;color:#a9a8a8;font-weight:500;font-size:13px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"] }]
|
|
41
41
|
}], propDecorators: { label: [{
|
|
42
42
|
type: Input
|
|
43
43
|
}], value: [{
|