@indigina/ui-kit 1.1.541 → 1.1.543
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.
|
@@ -1340,6 +1340,7 @@ class KitNumericTextboxComponent {
|
|
|
1340
1340
|
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
1341
1341
|
this.size = input(KitNumericTextboxSize.REGULAR, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1342
1342
|
this.showStateIcon = input(true, ...(ngDevMode ? [{ debugName: "showStateIcon" }] : /* istanbul ignore next */ []));
|
|
1343
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
1343
1344
|
/**
|
|
1344
1345
|
* An action which is emitted when input field lost focus
|
|
1345
1346
|
*/
|
|
@@ -1398,11 +1399,11 @@ class KitNumericTextboxComponent {
|
|
|
1398
1399
|
this.numericTextboxComponent().focus();
|
|
1399
1400
|
}
|
|
1400
1401
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitNumericTextboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1401
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitNumericTextboxComponent, isStandalone: true, selector: "kit-numeric-textbox", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null }, messageText: { classPropertyName: "messageText", publicName: "messageText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showStateIcon: { classPropertyName: "showStateIcon", publicName: "showStateIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { defaultValue: "defaultValueChange", disabled: "disabledChange", blured: "blured", changed: "changed" }, providers: [{
|
|
1402
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitNumericTextboxComponent, isStandalone: true, selector: "kit-numeric-textbox", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null }, messageText: { classPropertyName: "messageText", publicName: "messageText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showStateIcon: { classPropertyName: "showStateIcon", publicName: "showStateIcon", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { defaultValue: "defaultValueChange", disabled: "disabledChange", blured: "blured", changed: "changed" }, providers: [{
|
|
1402
1403
|
provide: NG_VALUE_ACCESSOR,
|
|
1403
1404
|
useExisting: forwardRef(() => KitNumericTextboxComponent),
|
|
1404
1405
|
multi: true,
|
|
1405
|
-
}], viewQueries: [{ propertyName: "numericTextboxComponent", first: true, predicate: NumericTextBoxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-numeric-textbox\"\n [ngClass]=\"[state(), size()]\"\n [class.disabled]=\"disabled()\">\n @if (label()) {\n <kit-form-label class=\"label\"\n [text]=\"label()\"\n [for]=\"textbox\"\n ></kit-form-label>\n }\n\n <div class=\"kit-numeric-textbox-input\">\n @if (icon()) {\n <kit-svg-icon class=\"kit-numeric-textbox-icon\"\n [icon]=\"icon()\"\n ></kit-svg-icon>\n }\n <kendo-numerictextbox #textbox\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [value]=\"defaultValue()\"\n [decimals]=\"decimals()\"\n [min]=\"min()\"\n [max]=\"max()\"\n [maxlength]=\"maxlength()\"\n [format]=\"format()\"\n [autoCorrect]=\"true\"\n [spinners]=\"false\"\n [selectOnFocus]=\"false\"\n (blur)=\"onInputBlur()\"\n (valueChange)=\"onInputChange($event)\"\n ></kendo-numerictextbox>\n @if (showStateIcon()) {\n <kit-svg-icon class=\"kit-numeric-textbox-state-icon\"\n [icon]=\"numericTextboxStateIcon[state()]\"\n ></kit-svg-icon>\n }\n </div>\n\n @if (messageText()) {\n <kit-form-message [icon]=\"messageIcon()\"\n [message]=\"messageText()\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-numeric-textbox.regular .kit-numeric-textbox-input{padding:0 12px;border-radius:8px}.kit-numeric-textbox.regular .k-input{height:38px}.kit-numeric-textbox.small .kit-numeric-textbox-input{padding:0 8px;border-radius:4px}.kit-numeric-textbox.small .k-input{height:30px}.kit-numeric-textbox .label{display:block;margin-bottom:4px}.kit-numeric-textbox-state-icon{flex-shrink:0;display:block;margin-left:12px;width:14px;height:14px}.kit-numeric-textbox-icon{flex-shrink:0;display:block;margin-right:8px;width:16px;height:16px;fill:var(--ui-kit-color-grey-10)}.kit-numeric-textbox-input{display:flex;align-items:center;padding:0 12px;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;background:var(--ui-kit-color-white)}.kit-numeric-textbox .k-input{padding:0;height:38px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;opacity:1;box-shadow:none;border:none}.kit-numeric-textbox .k-input:focus-within{box-shadow:none}.kit-numeric-textbox .k-input .k-input-inner{padding:0}.kit-numeric-textbox .k-input-inner{width:100%;line-height:1}.kit-numeric-textbox .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-numeric-textbox .k-input-prefix,.kit-numeric-textbox .k-input-suffix{height:0}.kit-numeric-textbox.default .kit-numeric-textbox-state-icon{fill:var(--ui-kit-color-grey-12)}.kit-numeric-textbox.default:hover .kit-numeric-textbox-input{border-color:var(--ui-kit-color-hover)}.kit-numeric-textbox.default:focus-within .kit-numeric-textbox-input{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-numeric-textbox.warning .kit-numeric-textbox-input{border-color:var(--ui-kit-color-orange)}.kit-numeric-textbox.warning .kit-numeric-textbox-state-icon,.kit-numeric-textbox.warning .kit-numeric-textbox-icon{fill:var(--ui-kit-color-orange)}.kit-numeric-textbox.warning:focus-within .kit-numeric-textbox-input{box-shadow:0 0 0 2px var(--ui-kit-color-orange-1)}.kit-numeric-textbox.error .kit-numeric-textbox-input{border-color:var(--ui-kit-color-red-1)}.kit-numeric-textbox.error .kit-numeric-textbox-state-icon,.kit-numeric-textbox.error .kit-numeric-textbox-icon{fill:var(--ui-kit-color-red-1)}.kit-numeric-textbox.error:focus-within .kit-numeric-textbox-input{box-shadow:0 0 0 2px var(--ui-kit-color-red-2)}.kit-numeric-textbox.error .kit-form-message-text{color:var(--ui-kit-color-red-1)}.kit-numeric-textbox.success .kit-numeric-textbox-state-icon{fill:var(--ui-kit-color-green-1)}.kit-numeric-textbox.success:hover .kit-numeric-textbox-input{border-color:var(--ui-kit-color-green-1)}.kit-numeric-textbox.success:focus-within .kit-numeric-textbox-input{border-color:var(--ui-kit-color-green-1);box-shadow:0 0 0 2px var(--ui-kit-color-green-2)}.kit-numeric-textbox.disabled .k-input{color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-13)}.kit-numeric-textbox.disabled .kit-numeric-textbox-input{border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-numeric-textbox.disabled .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-numeric-textbox.disabled .kit-numeric-textbox-icon{fill:var(--ui-kit-color-grey-12)}.kit-numeric-textbox.disabled:hover .kit-numeric-textbox-input{border-color:var(--ui-kit-color-grey-11)}\n"], dependencies: [{ kind: "ngmodule", type: NumericTextBoxModule }, { kind: "component", type: i1$4.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: KitFormMessageComponent, selector: "kit-form-message", inputs: ["icon", "message"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitFormLabelComponent, selector: "kit-form-label", inputs: ["text", "for", "tooltip", "popoverConfig"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1406
|
+
}], viewQueries: [{ propertyName: "numericTextboxComponent", first: true, predicate: NumericTextBoxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-numeric-textbox\"\n [ngClass]=\"[state(), size()]\"\n [class.disabled]=\"disabled()\"\n [class.readonly]=\"readonly()\">\n @if (label()) {\n <kit-form-label class=\"label\"\n [text]=\"label()\"\n [for]=\"textbox\"\n ></kit-form-label>\n }\n\n <div class=\"kit-numeric-textbox-input\">\n @if (icon()) {\n <kit-svg-icon class=\"kit-numeric-textbox-icon\"\n [icon]=\"icon()\"\n ></kit-svg-icon>\n }\n <kendo-numerictextbox #textbox\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [value]=\"defaultValue()\"\n [decimals]=\"decimals()\"\n [min]=\"min()\"\n [max]=\"max()\"\n [maxlength]=\"maxlength()\"\n [readonly]=\"readonly()\"\n [format]=\"format()\"\n [autoCorrect]=\"true\"\n [spinners]=\"false\"\n [selectOnFocus]=\"false\"\n (blur)=\"onInputBlur()\"\n (valueChange)=\"onInputChange($event)\"\n ></kendo-numerictextbox>\n @if (showStateIcon()) {\n <kit-svg-icon class=\"kit-numeric-textbox-state-icon\"\n [icon]=\"numericTextboxStateIcon[state()]\"\n ></kit-svg-icon>\n }\n </div>\n\n @if (messageText()) {\n <kit-form-message [icon]=\"messageIcon()\"\n [message]=\"messageText()\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-numeric-textbox.regular .kit-numeric-textbox-input{padding:0 12px;border-radius:8px}.kit-numeric-textbox.regular .k-input{height:38px}.kit-numeric-textbox.small .kit-numeric-textbox-input{padding:0 8px;border-radius:4px}.kit-numeric-textbox.small .k-input{height:30px}.kit-numeric-textbox .label{display:block;margin-bottom:4px}.kit-numeric-textbox-state-icon{flex-shrink:0;display:block;margin-left:12px;width:14px;height:14px}.kit-numeric-textbox-icon{flex-shrink:0;display:block;margin-right:8px;width:16px;height:16px;fill:var(--ui-kit-color-grey-10)}.kit-numeric-textbox-input{display:flex;align-items:center;padding:0 12px;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;background:var(--ui-kit-color-white)}.kit-numeric-textbox .k-input{padding:0;height:38px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;opacity:1;box-shadow:none;border:none}.kit-numeric-textbox .k-input:focus-within{box-shadow:none}.kit-numeric-textbox .k-input .k-input-inner{padding:0}.kit-numeric-textbox .k-input-inner{width:100%;line-height:1}.kit-numeric-textbox .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-numeric-textbox .k-input-prefix,.kit-numeric-textbox .k-input-suffix{height:0}.kit-numeric-textbox.default .kit-numeric-textbox-state-icon{fill:var(--ui-kit-color-grey-12)}.kit-numeric-textbox.default:hover .kit-numeric-textbox-input{border-color:var(--ui-kit-color-hover)}.kit-numeric-textbox.default:focus-within .kit-numeric-textbox-input{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-numeric-textbox.warning .kit-numeric-textbox-input{border-color:var(--ui-kit-color-orange)}.kit-numeric-textbox.warning .kit-numeric-textbox-state-icon,.kit-numeric-textbox.warning .kit-numeric-textbox-icon{fill:var(--ui-kit-color-orange)}.kit-numeric-textbox.warning:focus-within .kit-numeric-textbox-input{box-shadow:0 0 0 2px var(--ui-kit-color-orange-1)}.kit-numeric-textbox.error .kit-numeric-textbox-input{border-color:var(--ui-kit-color-red-1)}.kit-numeric-textbox.error .kit-numeric-textbox-state-icon,.kit-numeric-textbox.error .kit-numeric-textbox-icon{fill:var(--ui-kit-color-red-1)}.kit-numeric-textbox.error:focus-within .kit-numeric-textbox-input{box-shadow:0 0 0 2px var(--ui-kit-color-red-2)}.kit-numeric-textbox.error .kit-form-message-text{color:var(--ui-kit-color-red-1)}.kit-numeric-textbox.success .kit-numeric-textbox-state-icon{fill:var(--ui-kit-color-green-1)}.kit-numeric-textbox.success:hover .kit-numeric-textbox-input{border-color:var(--ui-kit-color-green-1)}.kit-numeric-textbox.success:focus-within .kit-numeric-textbox-input{border-color:var(--ui-kit-color-green-1);box-shadow:0 0 0 2px var(--ui-kit-color-green-2)}.kit-numeric-textbox.disabled .k-input,.kit-numeric-textbox.readonly .k-input{color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-13)}.kit-numeric-textbox.disabled .kit-numeric-textbox-input,.kit-numeric-textbox.readonly .kit-numeric-textbox-input{border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-numeric-textbox.disabled .k-input-inner::placeholder,.kit-numeric-textbox.readonly .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-numeric-textbox.disabled .kit-numeric-textbox-icon,.kit-numeric-textbox.readonly .kit-numeric-textbox-icon{fill:var(--ui-kit-color-grey-12)}.kit-numeric-textbox.disabled:hover .kit-numeric-textbox-input,.kit-numeric-textbox.readonly:hover .kit-numeric-textbox-input{border-color:var(--ui-kit-color-grey-11)}.kit-numeric-textbox.readonly{background:none}.kit-numeric-textbox.readonly .k-input-inner{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: NumericTextBoxModule }, { kind: "component", type: i1$4.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: KitFormMessageComponent, selector: "kit-form-message", inputs: ["icon", "message"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitFormLabelComponent, selector: "kit-form-label", inputs: ["text", "for", "tooltip", "popoverConfig"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1406
1407
|
}
|
|
1407
1408
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitNumericTextboxComponent, decorators: [{
|
|
1408
1409
|
type: Component,
|
|
@@ -1416,8 +1417,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
1416
1417
|
KitSvgIconComponent,
|
|
1417
1418
|
KitFormLabelComponent,
|
|
1418
1419
|
NgClass,
|
|
1419
|
-
], template: "<div class=\"kit-numeric-textbox\"\n [ngClass]=\"[state(), size()]\"\n [class.disabled]=\"disabled()\">\n @if (label()) {\n <kit-form-label class=\"label\"\n [text]=\"label()\"\n [for]=\"textbox\"\n ></kit-form-label>\n }\n\n <div class=\"kit-numeric-textbox-input\">\n @if (icon()) {\n <kit-svg-icon class=\"kit-numeric-textbox-icon\"\n [icon]=\"icon()\"\n ></kit-svg-icon>\n }\n <kendo-numerictextbox #textbox\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [value]=\"defaultValue()\"\n [decimals]=\"decimals()\"\n [min]=\"min()\"\n [max]=\"max()\"\n [maxlength]=\"maxlength()\"\n [format]=\"format()\"\n [autoCorrect]=\"true\"\n [spinners]=\"false\"\n [selectOnFocus]=\"false\"\n (blur)=\"onInputBlur()\"\n (valueChange)=\"onInputChange($event)\"\n ></kendo-numerictextbox>\n @if (showStateIcon()) {\n <kit-svg-icon class=\"kit-numeric-textbox-state-icon\"\n [icon]=\"numericTextboxStateIcon[state()]\"\n ></kit-svg-icon>\n }\n </div>\n\n @if (messageText()) {\n <kit-form-message [icon]=\"messageIcon()\"\n [message]=\"messageText()\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-numeric-textbox.regular .kit-numeric-textbox-input{padding:0 12px;border-radius:8px}.kit-numeric-textbox.regular .k-input{height:38px}.kit-numeric-textbox.small .kit-numeric-textbox-input{padding:0 8px;border-radius:4px}.kit-numeric-textbox.small .k-input{height:30px}.kit-numeric-textbox .label{display:block;margin-bottom:4px}.kit-numeric-textbox-state-icon{flex-shrink:0;display:block;margin-left:12px;width:14px;height:14px}.kit-numeric-textbox-icon{flex-shrink:0;display:block;margin-right:8px;width:16px;height:16px;fill:var(--ui-kit-color-grey-10)}.kit-numeric-textbox-input{display:flex;align-items:center;padding:0 12px;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;background:var(--ui-kit-color-white)}.kit-numeric-textbox .k-input{padding:0;height:38px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;opacity:1;box-shadow:none;border:none}.kit-numeric-textbox .k-input:focus-within{box-shadow:none}.kit-numeric-textbox .k-input .k-input-inner{padding:0}.kit-numeric-textbox .k-input-inner{width:100%;line-height:1}.kit-numeric-textbox .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-numeric-textbox .k-input-prefix,.kit-numeric-textbox .k-input-suffix{height:0}.kit-numeric-textbox.default .kit-numeric-textbox-state-icon{fill:var(--ui-kit-color-grey-12)}.kit-numeric-textbox.default:hover .kit-numeric-textbox-input{border-color:var(--ui-kit-color-hover)}.kit-numeric-textbox.default:focus-within .kit-numeric-textbox-input{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-numeric-textbox.warning .kit-numeric-textbox-input{border-color:var(--ui-kit-color-orange)}.kit-numeric-textbox.warning .kit-numeric-textbox-state-icon,.kit-numeric-textbox.warning .kit-numeric-textbox-icon{fill:var(--ui-kit-color-orange)}.kit-numeric-textbox.warning:focus-within .kit-numeric-textbox-input{box-shadow:0 0 0 2px var(--ui-kit-color-orange-1)}.kit-numeric-textbox.error .kit-numeric-textbox-input{border-color:var(--ui-kit-color-red-1)}.kit-numeric-textbox.error .kit-numeric-textbox-state-icon,.kit-numeric-textbox.error .kit-numeric-textbox-icon{fill:var(--ui-kit-color-red-1)}.kit-numeric-textbox.error:focus-within .kit-numeric-textbox-input{box-shadow:0 0 0 2px var(--ui-kit-color-red-2)}.kit-numeric-textbox.error .kit-form-message-text{color:var(--ui-kit-color-red-1)}.kit-numeric-textbox.success .kit-numeric-textbox-state-icon{fill:var(--ui-kit-color-green-1)}.kit-numeric-textbox.success:hover .kit-numeric-textbox-input{border-color:var(--ui-kit-color-green-1)}.kit-numeric-textbox.success:focus-within .kit-numeric-textbox-input{border-color:var(--ui-kit-color-green-1);box-shadow:0 0 0 2px var(--ui-kit-color-green-2)}.kit-numeric-textbox.disabled .k-input{color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-13)}.kit-numeric-textbox.disabled .kit-numeric-textbox-input{border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-numeric-textbox.disabled .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-numeric-textbox.disabled .kit-numeric-textbox-icon{fill:var(--ui-kit-color-grey-12)}.kit-numeric-textbox.disabled:hover .kit-numeric-textbox-input{border-color:var(--ui-kit-color-grey-11)}\n"] }]
|
|
1420
|
-
}], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }, { type: i0.Output, args: ["defaultValueChange"] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], messageText: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showStateIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStateIcon", required: false }] }], blured: [{ type: i0.Output, args: ["blured"] }], changed: [{ type: i0.Output, args: ["changed"] }], numericTextboxComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NumericTextBoxComponent), { isSignal: true }] }] } });
|
|
1420
|
+
], template: "<div class=\"kit-numeric-textbox\"\n [ngClass]=\"[state(), size()]\"\n [class.disabled]=\"disabled()\"\n [class.readonly]=\"readonly()\">\n @if (label()) {\n <kit-form-label class=\"label\"\n [text]=\"label()\"\n [for]=\"textbox\"\n ></kit-form-label>\n }\n\n <div class=\"kit-numeric-textbox-input\">\n @if (icon()) {\n <kit-svg-icon class=\"kit-numeric-textbox-icon\"\n [icon]=\"icon()\"\n ></kit-svg-icon>\n }\n <kendo-numerictextbox #textbox\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [value]=\"defaultValue()\"\n [decimals]=\"decimals()\"\n [min]=\"min()\"\n [max]=\"max()\"\n [maxlength]=\"maxlength()\"\n [readonly]=\"readonly()\"\n [format]=\"format()\"\n [autoCorrect]=\"true\"\n [spinners]=\"false\"\n [selectOnFocus]=\"false\"\n (blur)=\"onInputBlur()\"\n (valueChange)=\"onInputChange($event)\"\n ></kendo-numerictextbox>\n @if (showStateIcon()) {\n <kit-svg-icon class=\"kit-numeric-textbox-state-icon\"\n [icon]=\"numericTextboxStateIcon[state()]\"\n ></kit-svg-icon>\n }\n </div>\n\n @if (messageText()) {\n <kit-form-message [icon]=\"messageIcon()\"\n [message]=\"messageText()\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-numeric-textbox.regular .kit-numeric-textbox-input{padding:0 12px;border-radius:8px}.kit-numeric-textbox.regular .k-input{height:38px}.kit-numeric-textbox.small .kit-numeric-textbox-input{padding:0 8px;border-radius:4px}.kit-numeric-textbox.small .k-input{height:30px}.kit-numeric-textbox .label{display:block;margin-bottom:4px}.kit-numeric-textbox-state-icon{flex-shrink:0;display:block;margin-left:12px;width:14px;height:14px}.kit-numeric-textbox-icon{flex-shrink:0;display:block;margin-right:8px;width:16px;height:16px;fill:var(--ui-kit-color-grey-10)}.kit-numeric-textbox-input{display:flex;align-items:center;padding:0 12px;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;background:var(--ui-kit-color-white)}.kit-numeric-textbox .k-input{padding:0;height:38px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;opacity:1;box-shadow:none;border:none}.kit-numeric-textbox .k-input:focus-within{box-shadow:none}.kit-numeric-textbox .k-input .k-input-inner{padding:0}.kit-numeric-textbox .k-input-inner{width:100%;line-height:1}.kit-numeric-textbox .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-numeric-textbox .k-input-prefix,.kit-numeric-textbox .k-input-suffix{height:0}.kit-numeric-textbox.default .kit-numeric-textbox-state-icon{fill:var(--ui-kit-color-grey-12)}.kit-numeric-textbox.default:hover .kit-numeric-textbox-input{border-color:var(--ui-kit-color-hover)}.kit-numeric-textbox.default:focus-within .kit-numeric-textbox-input{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-numeric-textbox.warning .kit-numeric-textbox-input{border-color:var(--ui-kit-color-orange)}.kit-numeric-textbox.warning .kit-numeric-textbox-state-icon,.kit-numeric-textbox.warning .kit-numeric-textbox-icon{fill:var(--ui-kit-color-orange)}.kit-numeric-textbox.warning:focus-within .kit-numeric-textbox-input{box-shadow:0 0 0 2px var(--ui-kit-color-orange-1)}.kit-numeric-textbox.error .kit-numeric-textbox-input{border-color:var(--ui-kit-color-red-1)}.kit-numeric-textbox.error .kit-numeric-textbox-state-icon,.kit-numeric-textbox.error .kit-numeric-textbox-icon{fill:var(--ui-kit-color-red-1)}.kit-numeric-textbox.error:focus-within .kit-numeric-textbox-input{box-shadow:0 0 0 2px var(--ui-kit-color-red-2)}.kit-numeric-textbox.error .kit-form-message-text{color:var(--ui-kit-color-red-1)}.kit-numeric-textbox.success .kit-numeric-textbox-state-icon{fill:var(--ui-kit-color-green-1)}.kit-numeric-textbox.success:hover .kit-numeric-textbox-input{border-color:var(--ui-kit-color-green-1)}.kit-numeric-textbox.success:focus-within .kit-numeric-textbox-input{border-color:var(--ui-kit-color-green-1);box-shadow:0 0 0 2px var(--ui-kit-color-green-2)}.kit-numeric-textbox.disabled .k-input,.kit-numeric-textbox.readonly .k-input{color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-13)}.kit-numeric-textbox.disabled .kit-numeric-textbox-input,.kit-numeric-textbox.readonly .kit-numeric-textbox-input{border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-numeric-textbox.disabled .k-input-inner::placeholder,.kit-numeric-textbox.readonly .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-numeric-textbox.disabled .kit-numeric-textbox-icon,.kit-numeric-textbox.readonly .kit-numeric-textbox-icon{fill:var(--ui-kit-color-grey-12)}.kit-numeric-textbox.disabled:hover .kit-numeric-textbox-input,.kit-numeric-textbox.readonly:hover .kit-numeric-textbox-input{border-color:var(--ui-kit-color-grey-11)}.kit-numeric-textbox.readonly{background:none}.kit-numeric-textbox.readonly .k-input-inner{cursor:default}\n"] }]
|
|
1421
|
+
}], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }, { type: i0.Output, args: ["defaultValueChange"] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], messageText: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showStateIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStateIcon", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], blured: [{ type: i0.Output, args: ["blured"] }], changed: [{ type: i0.Output, args: ["changed"] }], numericTextboxComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NumericTextBoxComponent), { isSignal: true }] }] } });
|
|
1421
1422
|
|
|
1422
1423
|
class KitFormFieldComponent {
|
|
1423
1424
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -6612,33 +6613,20 @@ class KitCardComponent {
|
|
|
6612
6613
|
/**
|
|
6613
6614
|
* Defines card data
|
|
6614
6615
|
*/
|
|
6615
|
-
this.data = null;
|
|
6616
|
+
this.data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
6616
6617
|
/**
|
|
6617
6618
|
* Defines card color theme
|
|
6618
6619
|
*/
|
|
6619
|
-
this.theme = KitCardTheme.DEFAULT;
|
|
6620
|
-
/**
|
|
6621
|
-
* Defines whether the items list will be expanded
|
|
6622
|
-
*/
|
|
6623
|
-
this.itemsExpanded = false;
|
|
6624
|
-
this.hideToggle = false;
|
|
6620
|
+
this.theme = input(KitCardTheme.DEFAULT, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
|
|
6625
6621
|
/**
|
|
6626
6622
|
* An action which is emitted when action button clicked
|
|
6627
6623
|
*/
|
|
6628
|
-
this.buttonClicked =
|
|
6629
|
-
/**
|
|
6630
|
-
* An action which is emitted when toggle button clicked
|
|
6631
|
-
*/
|
|
6632
|
-
this.toggleClicked = new EventEmitter();
|
|
6624
|
+
this.buttonClicked = output();
|
|
6633
6625
|
this.KitSvgIcon = KitSvgIcon;
|
|
6634
6626
|
this.KitButtonType = KitButtonType;
|
|
6635
6627
|
this.KitButtonKind = KitButtonKind;
|
|
6636
6628
|
this.KitTooltipPosition = KitTooltipPosition;
|
|
6637
6629
|
}
|
|
6638
|
-
toggleList() {
|
|
6639
|
-
this.itemsExpanded = !this.itemsExpanded;
|
|
6640
|
-
this.toggleClicked.emit(this.itemsExpanded);
|
|
6641
|
-
}
|
|
6642
6630
|
openItemLink(item) {
|
|
6643
6631
|
if (!item.disabled && item.link.length) {
|
|
6644
6632
|
this.router.navigate(item.link, {
|
|
@@ -6651,58 +6639,18 @@ class KitCardComponent {
|
|
|
6651
6639
|
}
|
|
6652
6640
|
}
|
|
6653
6641
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6654
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitCardComponent, isStandalone: true, selector: "kit-card", inputs: { data: "data", theme: "theme", itemsExpanded: "itemsExpanded", hideToggle: "hideToggle" }, 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 [class.disabled]=\"item.disabled\"\n (click)=\"openItemLink(item)\">\n <div class=\"card-item-count\">{{ item.count ?? '' }}</div>\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 && !hideToggle) {\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.buttonDisabled ? null : data.link\"\n [queryParams]=\"data.navigationExtras?.queryParams\">\n <kit-button class=\"action-button\"\n [type]=\"KitButtonType.GHOST\"\n [kind]=\"KitButtonKind.MEDIUM\"\n [label]=\"data.buttonLabel\"\n [disabled]=\"data.buttonDisabled\"\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:not(.disabled){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{cursor:pointer}.kit-card.default-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.default-theme .card-item:hover:not(.disabled) .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{cursor:pointer}.kit-card.green-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.green-theme .card-item:hover:not(.disabled) .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{cursor:pointer}.kit-card.pink-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.pink-theme .card-item:hover:not(.disabled) .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{cursor:pointer}.kit-card.purple-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.purple-theme .card-item:hover:not(.disabled) .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{cursor:pointer}.kit-card.teal-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.teal-theme .card-item:hover:not(.disabled) .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{cursor:pointer}.kit-card.grey-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.grey-theme .card-item:hover:not(.disabled) .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{cursor:pointer}.kit-card.orange-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.orange-theme .card-item:hover:not(.disabled) .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: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
6655
|
-
trigger('expandCollapse', [
|
|
6656
|
-
state('true', style({ height: '*' })),
|
|
6657
|
-
state('false', style({
|
|
6658
|
-
height: '18px',
|
|
6659
|
-
minHeight: '18px',
|
|
6660
|
-
})),
|
|
6661
|
-
transition('true => false', [
|
|
6662
|
-
animate('0.2s ease-out'),
|
|
6663
|
-
]),
|
|
6664
|
-
transition('false => true', [
|
|
6665
|
-
animate('0.2s ease-in'),
|
|
6666
|
-
]),
|
|
6667
|
-
]),
|
|
6668
|
-
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6642
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitCardComponent, isStandalone: true, selector: "kit-card", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "@if (data(); as card) {\n <div class=\"kit-card {{ theme() }}-theme\">\n <div class=\"kit-card-head\">\n <kit-svg-icon class=\"head-icon\"\n [icon]=\"card.titleIcon\"\n [ngClass]=\"card.titleIconType\"\n ></kit-svg-icon>\n <div class=\"head-title\">{{ card.title }}</div>\n </div>\n <div class=\"kit-card-content\">\n <div class=\"card-count\">{{ card.count }}</div>\n <div class=\"card-label\">{{ card.label }}</div>\n @if (card.items; as items) {\n @if (items.length) {\n <div class=\"card-items\">\n @for (item of items; track item) {\n <a class=\"card-item\"\n [class.disabled]=\"item.disabled\"\n (click)=\"openItemLink(item)\">\n <div class=\"card-item-count\">{{ item.count ?? '' }}</div>\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 }\n </div>\n <div class=\"kit-card-action\">\n <a [routerLink]=\"card.buttonDisabled ? null : (card.link ?? null)\"\n [queryParams]=\"card.navigationExtras?.queryParams\">\n <kit-button class=\"action-button\"\n [type]=\"KitButtonType.GHOST\"\n [kind]=\"KitButtonKind.MEDIUM\"\n [label]=\"card.buttonLabel\"\n [disabled]=\"card.buttonDisabled ?? false\"\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:not(.disabled){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-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{cursor:pointer}.kit-card.default-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.default-theme .card-item:hover:not(.disabled) .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.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{cursor:pointer}.kit-card.green-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.green-theme .card-item:hover:not(.disabled) .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.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{cursor:pointer}.kit-card.pink-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.pink-theme .card-item:hover:not(.disabled) .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.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{cursor:pointer}.kit-card.purple-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.purple-theme .card-item:hover:not(.disabled) .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.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{cursor:pointer}.kit-card.teal-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.teal-theme .card-item:hover:not(.disabled) .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.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{cursor:pointer}.kit-card.grey-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.grey-theme .card-item:hover:not(.disabled) .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.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{cursor:pointer}.kit-card.orange-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.orange-theme .card-item:hover:not(.disabled) .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}\n"], dependencies: [{ kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6669
6643
|
}
|
|
6670
6644
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitCardComponent, decorators: [{
|
|
6671
6645
|
type: Component,
|
|
6672
|
-
args: [{ selector: 'kit-card', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
6673
|
-
trigger('expandCollapse', [
|
|
6674
|
-
state('true', style({ height: '*' })),
|
|
6675
|
-
state('false', style({
|
|
6676
|
-
height: '18px',
|
|
6677
|
-
minHeight: '18px',
|
|
6678
|
-
})),
|
|
6679
|
-
transition('true => false', [
|
|
6680
|
-
animate('0.2s ease-out'),
|
|
6681
|
-
]),
|
|
6682
|
-
transition('false => true', [
|
|
6683
|
-
animate('0.2s ease-in'),
|
|
6684
|
-
]),
|
|
6685
|
-
]),
|
|
6686
|
-
], imports: [
|
|
6646
|
+
args: [{ selector: 'kit-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
6687
6647
|
KitSvgIconComponent,
|
|
6688
6648
|
KitButtonComponent,
|
|
6689
6649
|
RouterLink,
|
|
6690
6650
|
KitTooltipDirective,
|
|
6691
6651
|
NgClass,
|
|
6692
|
-
], 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 [class.disabled]=\"item.disabled\"\n (click)=\"openItemLink(item)\">\n <div class=\"card-item-count\">{{ item.count ?? '' }}</div>\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 && !hideToggle) {\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.buttonDisabled ? null : data.link\"\n [queryParams]=\"data.navigationExtras?.queryParams\">\n <kit-button class=\"action-button\"\n [type]=\"KitButtonType.GHOST\"\n [kind]=\"KitButtonKind.MEDIUM\"\n [label]=\"data.buttonLabel\"\n [disabled]=\"data.buttonDisabled\"\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:not(.disabled){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{cursor:pointer}.kit-card.default-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.default-theme .card-item:hover:not(.disabled) .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{cursor:pointer}.kit-card.green-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.green-theme .card-item:hover:not(.disabled) .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{cursor:pointer}.kit-card.pink-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.pink-theme .card-item:hover:not(.disabled) .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{cursor:pointer}.kit-card.purple-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.purple-theme .card-item:hover:not(.disabled) .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{cursor:pointer}.kit-card.teal-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.teal-theme .card-item:hover:not(.disabled) .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{cursor:pointer}.kit-card.grey-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.grey-theme .card-item:hover:not(.disabled) .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{cursor:pointer}.kit-card.orange-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.orange-theme .card-item:hover:not(.disabled) .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"] }]
|
|
6693
|
-
}], propDecorators: { data: [{
|
|
6694
|
-
type: Input
|
|
6695
|
-
}], theme: [{
|
|
6696
|
-
type: Input
|
|
6697
|
-
}], itemsExpanded: [{
|
|
6698
|
-
type: Input
|
|
6699
|
-
}], hideToggle: [{
|
|
6700
|
-
type: Input
|
|
6701
|
-
}], buttonClicked: [{
|
|
6702
|
-
type: Output
|
|
6703
|
-
}], toggleClicked: [{
|
|
6704
|
-
type: Output
|
|
6705
|
-
}] } });
|
|
6652
|
+
], template: "@if (data(); as card) {\n <div class=\"kit-card {{ theme() }}-theme\">\n <div class=\"kit-card-head\">\n <kit-svg-icon class=\"head-icon\"\n [icon]=\"card.titleIcon\"\n [ngClass]=\"card.titleIconType\"\n ></kit-svg-icon>\n <div class=\"head-title\">{{ card.title }}</div>\n </div>\n <div class=\"kit-card-content\">\n <div class=\"card-count\">{{ card.count }}</div>\n <div class=\"card-label\">{{ card.label }}</div>\n @if (card.items; as items) {\n @if (items.length) {\n <div class=\"card-items\">\n @for (item of items; track item) {\n <a class=\"card-item\"\n [class.disabled]=\"item.disabled\"\n (click)=\"openItemLink(item)\">\n <div class=\"card-item-count\">{{ item.count ?? '' }}</div>\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 }\n </div>\n <div class=\"kit-card-action\">\n <a [routerLink]=\"card.buttonDisabled ? null : (card.link ?? null)\"\n [queryParams]=\"card.navigationExtras?.queryParams\">\n <kit-button class=\"action-button\"\n [type]=\"KitButtonType.GHOST\"\n [kind]=\"KitButtonKind.MEDIUM\"\n [label]=\"card.buttonLabel\"\n [disabled]=\"card.buttonDisabled ?? false\"\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:not(.disabled){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-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{cursor:pointer}.kit-card.default-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.default-theme .card-item:hover:not(.disabled) .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.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{cursor:pointer}.kit-card.green-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.green-theme .card-item:hover:not(.disabled) .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.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{cursor:pointer}.kit-card.pink-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.pink-theme .card-item:hover:not(.disabled) .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.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{cursor:pointer}.kit-card.purple-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.purple-theme .card-item:hover:not(.disabled) .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.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{cursor:pointer}.kit-card.teal-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.teal-theme .card-item:hover:not(.disabled) .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.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{cursor:pointer}.kit-card.grey-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.grey-theme .card-item:hover:not(.disabled) .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.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{cursor:pointer}.kit-card.orange-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.orange-theme .card-item:hover:not(.disabled) .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}\n"] }]
|
|
6653
|
+
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], buttonClicked: [{ type: i0.Output, args: ["buttonClicked"] }] } });
|
|
6706
6654
|
|
|
6707
6655
|
var KitStatusLabelColor;
|
|
6708
6656
|
(function (KitStatusLabelColor) {
|
|
@@ -13323,7 +13271,7 @@ class KitFilterInputComponent {
|
|
|
13323
13271
|
this.focusRafId = null;
|
|
13324
13272
|
}
|
|
13325
13273
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13326
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitFilterInputComponent, isStandalone: true, selector: "kit-filter-input", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, filterInputType: { classPropertyName: "filterInputType", publicName: "filterInputType", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "textboxComponents", predicate: KitTextboxComponent, descendants: true, isSignal: true }, { propertyName: "numericTextboxComponents", predicate: KitNumericTextboxComponent, descendants: true, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (selectedValues()?.filters; as selectedFilters) {\n <kit-truncate-text class=\"kit-filter-input-selected-values\">\n @for (filter of selectedFilters; track $index) {\n {{ getSelectedFilterText(filter) }}\n\n @if ($index === 0) {\n {{ getSelectedLogicText(selectedValues()) }}\n }\n }\n </kit-truncate-text>\n }\n</kit-pill>\n\n<kit-popup #popup\n popupClass=\"kit-filter-input-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [isApplyButtonDisabled]=\"applyButtonDisabled\"\n [closePopupOnCancel]=\"false\"\n [extraInsideSelectors]=\"['.kit-dropdown-popup']\"\n (opened)=\"onPopupOpened()\"\n (applyAction)=\"applyFilter()\"\n (cancelAction)=\"clearAllFilters()\"\n (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n @for (item of filterItems().filters; track $index) {\n <div class=\"filter-item\">\n <kit-dropdown [items]=\"getFilterOperatorDropdownItems()\"\n [size]=\"kitDropdownSize.SMALL\"\n [selectedItem]=\"$any(item.operator)\"\n (selected)=\"onOperatorSelect($event.value, $index)\"\n ></kit-dropdown>\n <div class=\"filter-controls\">\n @switch (filterInputType()) {\n @case (kitFilterType.TEXT) {\n <kit-textbox class=\"filter-item-value\"\n [size]=\"kitTextboxSize.SMALL\"\n [defaultValue]=\"item.value\"\n [disabled]=\"isFilterValueTextboxDisabled($index)\"\n (changed)=\"onValueChange($event, $index)\"\n (keydown.enter)=\"onEnterKey()\"\n ></kit-textbox>\n }\n @case (kitFilterType.NUMERIC) {\n <kit-numeric-textbox class=\"filter-item-value\"\n format=\"#.###\"\n [size]=\"kitNumericTextboxSize.SMALL\"\n [defaultValue]=\"item.value\"\n [min]=\"0\"\n [max]=\"maxIntegerValue\"\n [disabled]=\"isFilterValueTextboxDisabled($index)\"\n (changed)=\"onValueChange($event, $index)\"\n (keydown.enter)=\"onEnterKey()\"\n ></kit-numeric-textbox>\n }\n }\n @if ($index === 0) {\n <kit-dropdown class=\"logic-selector\"\n [selectedItem]=\"filterItems().logic\"\n [items]=\"filterLogicDropdownItems\"\n [size]=\"kitDropdownSize.SMALL\"\n (selected)=\"onLogicChange($event.value)\"\n ></kit-dropdown>\n }\n </div>\n </div>\n }\n </div>\n</ng-template>\n", styles: [".kit-filter-input-selected-values{max-width:180px}::ng-deep .kit-filter-input-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-input-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-input-popup .filter-item-value{flex:1}::ng-deep .kit-filter-input-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-input-popup .logic-selector{flex-shrink:0;width:100px}\n"], dependencies: [{ kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "readonly", "size"], outputs: ["selectedItemChange", "disabledChange", "selected"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitNumericTextboxComponent, selector: "kit-numeric-textbox", inputs: ["placeholder", "label", "defaultValue", "decimals", "min", "max", "maxlength", "messageIcon", "messageText", "disabled", "format", "state", "icon", "size", "showStateIcon"], outputs: ["defaultValueChange", "disabledChange", "blured", "changed"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13274
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitFilterInputComponent, isStandalone: true, selector: "kit-filter-input", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, filterInputType: { classPropertyName: "filterInputType", publicName: "filterInputType", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "textboxComponents", predicate: KitTextboxComponent, descendants: true, isSignal: true }, { propertyName: "numericTextboxComponents", predicate: KitNumericTextboxComponent, descendants: true, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (selectedValues()?.filters; as selectedFilters) {\n <kit-truncate-text class=\"kit-filter-input-selected-values\">\n @for (filter of selectedFilters; track $index) {\n {{ getSelectedFilterText(filter) }}\n\n @if ($index === 0) {\n {{ getSelectedLogicText(selectedValues()) }}\n }\n }\n </kit-truncate-text>\n }\n</kit-pill>\n\n<kit-popup #popup\n popupClass=\"kit-filter-input-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [isApplyButtonDisabled]=\"applyButtonDisabled\"\n [closePopupOnCancel]=\"false\"\n [extraInsideSelectors]=\"['.kit-dropdown-popup']\"\n (opened)=\"onPopupOpened()\"\n (applyAction)=\"applyFilter()\"\n (cancelAction)=\"clearAllFilters()\"\n (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n @for (item of filterItems().filters; track $index) {\n <div class=\"filter-item\">\n <kit-dropdown [items]=\"getFilterOperatorDropdownItems()\"\n [size]=\"kitDropdownSize.SMALL\"\n [selectedItem]=\"$any(item.operator)\"\n (selected)=\"onOperatorSelect($event.value, $index)\"\n ></kit-dropdown>\n <div class=\"filter-controls\">\n @switch (filterInputType()) {\n @case (kitFilterType.TEXT) {\n <kit-textbox class=\"filter-item-value\"\n [size]=\"kitTextboxSize.SMALL\"\n [defaultValue]=\"item.value\"\n [disabled]=\"isFilterValueTextboxDisabled($index)\"\n (changed)=\"onValueChange($event, $index)\"\n (keydown.enter)=\"onEnterKey()\"\n ></kit-textbox>\n }\n @case (kitFilterType.NUMERIC) {\n <kit-numeric-textbox class=\"filter-item-value\"\n format=\"#.###\"\n [size]=\"kitNumericTextboxSize.SMALL\"\n [defaultValue]=\"item.value\"\n [min]=\"0\"\n [max]=\"maxIntegerValue\"\n [disabled]=\"isFilterValueTextboxDisabled($index)\"\n (changed)=\"onValueChange($event, $index)\"\n (keydown.enter)=\"onEnterKey()\"\n ></kit-numeric-textbox>\n }\n }\n @if ($index === 0) {\n <kit-dropdown class=\"logic-selector\"\n [selectedItem]=\"filterItems().logic\"\n [items]=\"filterLogicDropdownItems\"\n [size]=\"kitDropdownSize.SMALL\"\n (selected)=\"onLogicChange($event.value)\"\n ></kit-dropdown>\n }\n </div>\n </div>\n }\n </div>\n</ng-template>\n", styles: [".kit-filter-input-selected-values{max-width:180px}::ng-deep .kit-filter-input-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-input-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-input-popup .filter-item-value{flex:1}::ng-deep .kit-filter-input-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-input-popup .logic-selector{flex-shrink:0;width:100px}\n"], dependencies: [{ kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "readonly", "size"], outputs: ["selectedItemChange", "disabledChange", "selected"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitNumericTextboxComponent, selector: "kit-numeric-textbox", inputs: ["placeholder", "label", "defaultValue", "decimals", "min", "max", "maxlength", "messageIcon", "messageText", "disabled", "format", "state", "icon", "size", "showStateIcon", "readonly"], outputs: ["defaultValueChange", "disabledChange", "blured", "changed"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13327
13275
|
}
|
|
13328
13276
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterInputComponent, decorators: [{
|
|
13329
13277
|
type: Component,
|