@indigina/ui-kit 1.1.461 → 1.1.463

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.
@@ -4844,7 +4844,7 @@ class KitMultiselectComponent {
4844
4844
  provide: NG_VALUE_ACCESSOR,
4845
4845
  useExisting: forwardRef(() => KitMultiselectComponent),
4846
4846
  multi: true,
4847
- }], queries: [{ propertyName: "multiSelectGroupTagTemplate", first: true, predicate: KitMultiselectGroupTagTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "multiselectComponent", first: true, predicate: MultiSelectComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-multiselect\"\n [class.disabled]=\"disabled()\"\n [class.all-option-selected]=\"hasSelectedAllOption\"\n [class.invalid]=\"invalid()\">\n @if (label) {\n <kit-form-label class=\"label\"\n [text]=\"label\"\n [for]=\"multiselect\"\n ></kit-form-label>\n }\n <kendo-multiselect #multiselect\n valueField=\"value\"\n textField=\"text\"\n kendoDropDownFilter\n [ngClass]=\"[size(), itemsDirection()]\"\n [data]=\"items\"\n [disabled]=\"disabled()\"\n [autoClose]=\"autoClose\"\n [placeholder]=\"placeholder\"\n [valuePrimitive]=\"true\"\n [itemDisabled]=\"onItemDisabled()\"\n [popupSettings]=\"buildPopupSettings()\"\n [tagMapper]=\"tagMapper()\"\n [kendoMultiSelectSummaryTag]=\"autoSummaryTagValue()\"\n [checkboxes]=\"useCheckboxes()\"\n [listHeight]=\"listHeight()\"\n [allowCustom]=\"allowCustom()\"\n [filterable]=\"filterable()\"\n [(ngModel)]=\"selectedItems\">\n <ng-template kendoMultiSelectTagTemplate\n let-dataItem>\n <kit-truncate-text>\n <span class=\"chip-text\"\n [class.all-option]=\"dataItem.value === allOption().value\"\n [ngClass]=\"dataItem?.optionClass\">\n {{ dataItem?.text }}\n </span>\n </kit-truncate-text>\n <kit-svg-icon class=\"chip-icon\"\n [icon]=\"KitSvgIcon.CROSS\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoMultiSelectItemTemplate\n let-dataItem>\n <kit-truncate-text>\n <span class=\"option-text\"\n [ngClass]=\"dataItem?.optionClass\">\n {{ dataItem?.text }}\n </span>\n </kit-truncate-text>\n @if (showCheckIcon()) {\n <kit-svg-icon class=\"option-icon\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </ng-template>\n <ng-template kendoMultiSelectGroupTagTemplate let-dataItems>\n <ng-container *ngTemplateOutlet=\"multiSelectGroupTagTemplate(); context: { dataItems }\"/>\n </ng-template>\n </kendo-multiselect>\n\n @if (messageText) {\n <kit-form-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-multiselect .label{display:block;margin-bottom:4px}.kit-multiselect .k-multiselect{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-multiselect .k-multiselect:hover{border-color:var(--ui-kit-color-hover)}.kit-multiselect .k-multiselect.k-focus{box-shadow:none}.kit-multiselect .k-multiselect.small{min-height:30px;border-radius:4px}.kit-multiselect .k-multiselect.small .k-input-values{padding:5px 7px}.kit-multiselect .k-multiselect.small .k-chip{height:20px;border-radius:4px}.kit-multiselect .k-multiselect.default{min-height:40px;border-radius:8px}.kit-multiselect .k-multiselect.default .k-input-values{padding:7px 12px}.kit-multiselect .k-multiselect.default .k-chip{height:24px;border-radius:8px}.kit-multiselect .k-input .k-input-inner{padding:0}.kit-multiselect .k-input .k-chip-list{display:flex}.kit-multiselect .k-input.ltr .k-chip-list{flex-direction:row}.kit-multiselect .k-input.rtl .k-chip-list{flex-direction:row-reverse}.kit-multiselect .k-input-values{gap:8px}.kit-multiselect .k-input-inner{font-size:14px;font-weight:400}.kit-multiselect .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-multiselect .k-chip{display:flex;align-items:center;position:relative;padding:0 8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-multiselect .k-chip-label{display:flex;align-items:center;gap:4px;line-height:1}.kit-multiselect .k-chip-actions{position:absolute;right:8px;width:12px;height:12px;opacity:0}.kit-multiselect .k-chip-action{display:flex;padding:0;cursor:pointer}.kit-multiselect .k-chip-content:has(+.k-chip-actions:hover) .chip-icon{stroke:var(--ui-kit-color-main)}.kit-multiselect .k-chip .chip-text{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500}.kit-multiselect .k-chip .chip-icon{display:block;width:12px;height:12px;stroke:var(--ui-kit-color-grey-12);cursor:pointer}.kit-multiselect .k-chip .k-icon{width:12px;height:12px}.kit-multiselect .k-chip:has(.chip-text.all-option){display:flex}.kit-multiselect .k-chip:last-child:has(.k-chip-content .group-tag) .k-chip-actions{display:none}.kit-multiselect .k-clear-value{margin-right:12px;padding:0;opacity:1;color:var(--ui-kit-color-grey-12)}.kit-multiselect .k-clear-value:hover{color:var(--ui-kit-color-main)}.kit-multiselect.disabled .k-multiselect{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-multiselect.disabled .chip-text{color:var(--ui-kit-color-grey-12)}.kit-multiselect.invalid .k-multiselect{border-color:var(--ui-kit-color-red-1)}.kit-multiselect.invalid .kit-form-message-text{color:var(--ui-kit-color-red-1)}.kit-multiselect:focus-within .k-multiselect{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-multiselect.all-option-selected .k-chip{display:none}.kit-multiselect-popup{margin-top:10px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-multiselect-popup.k-popup{padding:4px}.kit-multiselect-popup .k-list-ul{gap:4px}.kit-multiselect-popup .k-list-item{padding:6px 12px;background-color:var(--ui-kit-color-white);font-size:14px;font-weight:400;box-shadow:none;border-radius:4px;color:var(--ui-kit-color-grey-10)}.kit-multiselect-popup .k-list-item:hover{color:var(--ui-kit-color-main)}.kit-multiselect-popup .k-list-item .option-icon{display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-multiselect-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-multiselect-popup .k-list-item.k-selected{display:flex;align-items:center;background-color:var(--ui-kit-color-grey-13)}.kit-multiselect-popup .k-list-item.k-selected .option-text{flex:1}.kit-multiselect-popup .k-list-item.k-selected .option-icon{display:block}.kit-multiselect-popup .k-checkbox{background-color:var(--ui-kit-color-grey-13);border:1px solid var(--ui-kit-color-grey-11);margin-right:4px}.kit-multiselect-popup .k-checkbox:checked{border-color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i1$5.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["data", "kendoDropDownFilter", "filterable"] }, { kind: "component", type: i1$5.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["showStickyHeader", "focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer", "inputAttributes"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { kind: "directive", type: i1$5.SummaryTagDirective, selector: "[kendoMultiSelectSummaryTag]", inputs: ["kendoMultiSelectSummaryTag"] }, { kind: "directive", type: i1$5.GroupTagTemplateDirective, selector: "[kendoMultiSelectGroupTagTemplate],[kendoMultiSelectTreeGroupTagTemplate]" }, { kind: "directive", type: i1$5.TagTemplateDirective, selector: "[kendoMultiSelectTagTemplate],[kendoMultiSelectTreeTagTemplate]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitFormMessageComponent, selector: "kit-form-message", inputs: ["icon", "message"] }, { kind: "component", type: KitFormLabelComponent, selector: "kit-form-label", inputs: ["text", "for", "tooltip", "popoverConfig"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
4847
+ }], queries: [{ propertyName: "multiSelectGroupTagTemplate", first: true, predicate: KitMultiselectGroupTagTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "multiselectComponent", first: true, predicate: MultiSelectComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-multiselect\"\n [class.disabled]=\"disabled()\"\n [class.all-option-selected]=\"hasSelectedAllOption\"\n [class.invalid]=\"invalid()\">\n @if (label) {\n <kit-form-label class=\"label\"\n [text]=\"label\"\n [for]=\"multiselect\"\n ></kit-form-label>\n }\n <kendo-multiselect #multiselect\n valueField=\"value\"\n textField=\"text\"\n kendoDropDownFilter\n [ngClass]=\"[size(), itemsDirection()]\"\n [data]=\"items\"\n [disabled]=\"disabled()\"\n [autoClose]=\"autoClose\"\n [placeholder]=\"placeholder\"\n [valuePrimitive]=\"true\"\n [itemDisabled]=\"onItemDisabled()\"\n [popupSettings]=\"buildPopupSettings()\"\n [tagMapper]=\"tagMapper()\"\n [kendoMultiSelectSummaryTag]=\"autoSummaryTagValue()\"\n [checkboxes]=\"useCheckboxes()\"\n [listHeight]=\"listHeight()\"\n [allowCustom]=\"allowCustom()\"\n [filterable]=\"filterable()\"\n [(ngModel)]=\"selectedItems\">\n <ng-template kendoMultiSelectTagTemplate\n let-dataItem>\n <kit-truncate-text>\n <span class=\"chip-text\"\n [class.all-option]=\"dataItem.value === allOption().value\"\n [ngClass]=\"dataItem?.optionClass\">\n {{ dataItem?.text }}\n </span>\n </kit-truncate-text>\n <kit-svg-icon class=\"chip-icon\"\n [icon]=\"KitSvgIcon.CROSS\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoMultiSelectItemTemplate\n let-dataItem>\n <kit-truncate-text>\n <span class=\"option-text\"\n [ngClass]=\"dataItem?.optionClass\">\n {{ dataItem?.text }}\n </span>\n </kit-truncate-text>\n @if (showCheckIcon()) {\n <kit-svg-icon class=\"option-icon\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </ng-template>\n <ng-template kendoMultiSelectGroupTagTemplate let-dataItems>\n <ng-container *ngTemplateOutlet=\"multiSelectGroupTagTemplate(); context: { dataItems }\"/>\n </ng-template>\n </kendo-multiselect>\n\n @if (messageText) {\n <kit-form-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-multiselect .label{display:block;margin-bottom:4px}.kit-multiselect .k-multiselect{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-multiselect .k-multiselect:hover{border-color:var(--ui-kit-color-hover)}.kit-multiselect .k-multiselect.k-focus{box-shadow:none}.kit-multiselect .k-multiselect.small{min-height:30px;border-radius:4px}.kit-multiselect .k-multiselect.small .k-input-values{padding:5px 7px}.kit-multiselect .k-multiselect.small .k-chip{height:20px;border-radius:4px}.kit-multiselect .k-multiselect.default{min-height:40px;border-radius:8px}.kit-multiselect .k-multiselect.default .k-input-values{padding:7px 12px}.kit-multiselect .k-multiselect.default .k-chip{height:24px;border-radius:8px}.kit-multiselect .k-input .k-input-inner{padding:0}.kit-multiselect .k-input .k-chip-list{display:flex}.kit-multiselect .k-input.ltr .k-chip-list{flex-direction:row}.kit-multiselect .k-input.rtl .k-chip-list{flex-direction:row-reverse}.kit-multiselect .k-input-values{gap:8px}.kit-multiselect .k-input-inner{font-size:14px;font-weight:400}.kit-multiselect .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-multiselect .k-chip{display:flex;align-items:center;position:relative;padding:0 8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-multiselect .k-chip-label{display:flex;align-items:center;gap:4px;line-height:1}.kit-multiselect .k-chip-actions{position:absolute;right:8px;width:12px;height:12px;opacity:0}.kit-multiselect .k-chip-action{display:flex;padding:0;cursor:pointer}.kit-multiselect .k-chip-content:has(+.k-chip-actions:hover) .chip-icon{stroke:var(--ui-kit-color-main)}.kit-multiselect .k-chip .chip-text{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500}.kit-multiselect .k-chip .chip-icon{display:block;width:12px;height:12px;stroke:var(--ui-kit-color-grey-12);cursor:pointer}.kit-multiselect .k-chip .k-icon{width:12px;height:12px}.kit-multiselect .k-chip:has(.chip-text.all-option){display:flex}.kit-multiselect .k-chip:last-child:has(.k-chip-content .group-tag) .k-chip-actions{display:none}.kit-multiselect .k-clear-value{margin-right:12px;padding:0;opacity:1;color:var(--ui-kit-color-grey-12)}.kit-multiselect .k-clear-value:hover{color:var(--ui-kit-color-main)}.kit-multiselect.disabled .k-multiselect{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-multiselect.disabled .chip-text{color:var(--ui-kit-color-grey-12)}.kit-multiselect.invalid .k-multiselect{border-color:var(--ui-kit-color-red-1)}.kit-multiselect.invalid .kit-form-message-text{color:var(--ui-kit-color-red-1)}.kit-multiselect:focus-within .k-multiselect{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-multiselect.all-option-selected .k-chip{display:none}.kit-multiselect-popup{margin-top:10px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-multiselect-popup.k-popup{padding:4px}.kit-multiselect-popup .k-list-ul{gap:4px}.kit-multiselect-popup .k-list-item{padding:6px 12px;background-color:var(--ui-kit-color-white);font-size:14px;font-weight:400;box-shadow:none;border-radius:4px;color:var(--ui-kit-color-grey-10);flex-wrap:nowrap}.kit-multiselect-popup .k-list-item:hover{color:var(--ui-kit-color-main)}.kit-multiselect-popup .k-list-item .option-icon{display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-multiselect-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-multiselect-popup .k-list-item.k-selected{display:flex;align-items:center;background-color:var(--ui-kit-color-grey-13)}.kit-multiselect-popup .k-list-item.k-selected .option-text{flex:1}.kit-multiselect-popup .k-list-item.k-selected .option-icon{display:block}.kit-multiselect-popup .k-checkbox{background-color:var(--ui-kit-color-grey-13);border:1px solid var(--ui-kit-color-grey-11);margin-right:4px}.kit-multiselect-popup .k-checkbox:checked{border-color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i1$5.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["data", "kendoDropDownFilter", "filterable"] }, { kind: "component", type: i1$5.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["showStickyHeader", "focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer", "inputAttributes"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { kind: "directive", type: i1$5.SummaryTagDirective, selector: "[kendoMultiSelectSummaryTag]", inputs: ["kendoMultiSelectSummaryTag"] }, { kind: "directive", type: i1$5.GroupTagTemplateDirective, selector: "[kendoMultiSelectGroupTagTemplate],[kendoMultiSelectTreeGroupTagTemplate]" }, { kind: "directive", type: i1$5.TagTemplateDirective, selector: "[kendoMultiSelectTagTemplate],[kendoMultiSelectTreeTagTemplate]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitFormMessageComponent, selector: "kit-form-message", inputs: ["icon", "message"] }, { kind: "component", type: KitFormLabelComponent, selector: "kit-form-label", inputs: ["text", "for", "tooltip", "popoverConfig"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
4848
4848
  }
4849
4849
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMultiselectComponent, decorators: [{
4850
4850
  type: Component,
@@ -4861,7 +4861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
4861
4861
  KitFormLabelComponent,
4862
4862
  NgClass,
4863
4863
  KitTruncateTextComponent,
4864
- ], template: "<div class=\"kit-multiselect\"\n [class.disabled]=\"disabled()\"\n [class.all-option-selected]=\"hasSelectedAllOption\"\n [class.invalid]=\"invalid()\">\n @if (label) {\n <kit-form-label class=\"label\"\n [text]=\"label\"\n [for]=\"multiselect\"\n ></kit-form-label>\n }\n <kendo-multiselect #multiselect\n valueField=\"value\"\n textField=\"text\"\n kendoDropDownFilter\n [ngClass]=\"[size(), itemsDirection()]\"\n [data]=\"items\"\n [disabled]=\"disabled()\"\n [autoClose]=\"autoClose\"\n [placeholder]=\"placeholder\"\n [valuePrimitive]=\"true\"\n [itemDisabled]=\"onItemDisabled()\"\n [popupSettings]=\"buildPopupSettings()\"\n [tagMapper]=\"tagMapper()\"\n [kendoMultiSelectSummaryTag]=\"autoSummaryTagValue()\"\n [checkboxes]=\"useCheckboxes()\"\n [listHeight]=\"listHeight()\"\n [allowCustom]=\"allowCustom()\"\n [filterable]=\"filterable()\"\n [(ngModel)]=\"selectedItems\">\n <ng-template kendoMultiSelectTagTemplate\n let-dataItem>\n <kit-truncate-text>\n <span class=\"chip-text\"\n [class.all-option]=\"dataItem.value === allOption().value\"\n [ngClass]=\"dataItem?.optionClass\">\n {{ dataItem?.text }}\n </span>\n </kit-truncate-text>\n <kit-svg-icon class=\"chip-icon\"\n [icon]=\"KitSvgIcon.CROSS\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoMultiSelectItemTemplate\n let-dataItem>\n <kit-truncate-text>\n <span class=\"option-text\"\n [ngClass]=\"dataItem?.optionClass\">\n {{ dataItem?.text }}\n </span>\n </kit-truncate-text>\n @if (showCheckIcon()) {\n <kit-svg-icon class=\"option-icon\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </ng-template>\n <ng-template kendoMultiSelectGroupTagTemplate let-dataItems>\n <ng-container *ngTemplateOutlet=\"multiSelectGroupTagTemplate(); context: { dataItems }\"/>\n </ng-template>\n </kendo-multiselect>\n\n @if (messageText) {\n <kit-form-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-multiselect .label{display:block;margin-bottom:4px}.kit-multiselect .k-multiselect{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-multiselect .k-multiselect:hover{border-color:var(--ui-kit-color-hover)}.kit-multiselect .k-multiselect.k-focus{box-shadow:none}.kit-multiselect .k-multiselect.small{min-height:30px;border-radius:4px}.kit-multiselect .k-multiselect.small .k-input-values{padding:5px 7px}.kit-multiselect .k-multiselect.small .k-chip{height:20px;border-radius:4px}.kit-multiselect .k-multiselect.default{min-height:40px;border-radius:8px}.kit-multiselect .k-multiselect.default .k-input-values{padding:7px 12px}.kit-multiselect .k-multiselect.default .k-chip{height:24px;border-radius:8px}.kit-multiselect .k-input .k-input-inner{padding:0}.kit-multiselect .k-input .k-chip-list{display:flex}.kit-multiselect .k-input.ltr .k-chip-list{flex-direction:row}.kit-multiselect .k-input.rtl .k-chip-list{flex-direction:row-reverse}.kit-multiselect .k-input-values{gap:8px}.kit-multiselect .k-input-inner{font-size:14px;font-weight:400}.kit-multiselect .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-multiselect .k-chip{display:flex;align-items:center;position:relative;padding:0 8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-multiselect .k-chip-label{display:flex;align-items:center;gap:4px;line-height:1}.kit-multiselect .k-chip-actions{position:absolute;right:8px;width:12px;height:12px;opacity:0}.kit-multiselect .k-chip-action{display:flex;padding:0;cursor:pointer}.kit-multiselect .k-chip-content:has(+.k-chip-actions:hover) .chip-icon{stroke:var(--ui-kit-color-main)}.kit-multiselect .k-chip .chip-text{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500}.kit-multiselect .k-chip .chip-icon{display:block;width:12px;height:12px;stroke:var(--ui-kit-color-grey-12);cursor:pointer}.kit-multiselect .k-chip .k-icon{width:12px;height:12px}.kit-multiselect .k-chip:has(.chip-text.all-option){display:flex}.kit-multiselect .k-chip:last-child:has(.k-chip-content .group-tag) .k-chip-actions{display:none}.kit-multiselect .k-clear-value{margin-right:12px;padding:0;opacity:1;color:var(--ui-kit-color-grey-12)}.kit-multiselect .k-clear-value:hover{color:var(--ui-kit-color-main)}.kit-multiselect.disabled .k-multiselect{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-multiselect.disabled .chip-text{color:var(--ui-kit-color-grey-12)}.kit-multiselect.invalid .k-multiselect{border-color:var(--ui-kit-color-red-1)}.kit-multiselect.invalid .kit-form-message-text{color:var(--ui-kit-color-red-1)}.kit-multiselect:focus-within .k-multiselect{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-multiselect.all-option-selected .k-chip{display:none}.kit-multiselect-popup{margin-top:10px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-multiselect-popup.k-popup{padding:4px}.kit-multiselect-popup .k-list-ul{gap:4px}.kit-multiselect-popup .k-list-item{padding:6px 12px;background-color:var(--ui-kit-color-white);font-size:14px;font-weight:400;box-shadow:none;border-radius:4px;color:var(--ui-kit-color-grey-10)}.kit-multiselect-popup .k-list-item:hover{color:var(--ui-kit-color-main)}.kit-multiselect-popup .k-list-item .option-icon{display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-multiselect-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-multiselect-popup .k-list-item.k-selected{display:flex;align-items:center;background-color:var(--ui-kit-color-grey-13)}.kit-multiselect-popup .k-list-item.k-selected .option-text{flex:1}.kit-multiselect-popup .k-list-item.k-selected .option-icon{display:block}.kit-multiselect-popup .k-checkbox{background-color:var(--ui-kit-color-grey-13);border:1px solid var(--ui-kit-color-grey-11);margin-right:4px}.kit-multiselect-popup .k-checkbox:checked{border-color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-main)}\n"] }]
4864
+ ], template: "<div class=\"kit-multiselect\"\n [class.disabled]=\"disabled()\"\n [class.all-option-selected]=\"hasSelectedAllOption\"\n [class.invalid]=\"invalid()\">\n @if (label) {\n <kit-form-label class=\"label\"\n [text]=\"label\"\n [for]=\"multiselect\"\n ></kit-form-label>\n }\n <kendo-multiselect #multiselect\n valueField=\"value\"\n textField=\"text\"\n kendoDropDownFilter\n [ngClass]=\"[size(), itemsDirection()]\"\n [data]=\"items\"\n [disabled]=\"disabled()\"\n [autoClose]=\"autoClose\"\n [placeholder]=\"placeholder\"\n [valuePrimitive]=\"true\"\n [itemDisabled]=\"onItemDisabled()\"\n [popupSettings]=\"buildPopupSettings()\"\n [tagMapper]=\"tagMapper()\"\n [kendoMultiSelectSummaryTag]=\"autoSummaryTagValue()\"\n [checkboxes]=\"useCheckboxes()\"\n [listHeight]=\"listHeight()\"\n [allowCustom]=\"allowCustom()\"\n [filterable]=\"filterable()\"\n [(ngModel)]=\"selectedItems\">\n <ng-template kendoMultiSelectTagTemplate\n let-dataItem>\n <kit-truncate-text>\n <span class=\"chip-text\"\n [class.all-option]=\"dataItem.value === allOption().value\"\n [ngClass]=\"dataItem?.optionClass\">\n {{ dataItem?.text }}\n </span>\n </kit-truncate-text>\n <kit-svg-icon class=\"chip-icon\"\n [icon]=\"KitSvgIcon.CROSS\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoMultiSelectItemTemplate\n let-dataItem>\n <kit-truncate-text>\n <span class=\"option-text\"\n [ngClass]=\"dataItem?.optionClass\">\n {{ dataItem?.text }}\n </span>\n </kit-truncate-text>\n @if (showCheckIcon()) {\n <kit-svg-icon class=\"option-icon\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </ng-template>\n <ng-template kendoMultiSelectGroupTagTemplate let-dataItems>\n <ng-container *ngTemplateOutlet=\"multiSelectGroupTagTemplate(); context: { dataItems }\"/>\n </ng-template>\n </kendo-multiselect>\n\n @if (messageText) {\n <kit-form-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-multiselect .label{display:block;margin-bottom:4px}.kit-multiselect .k-multiselect{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-multiselect .k-multiselect:hover{border-color:var(--ui-kit-color-hover)}.kit-multiselect .k-multiselect.k-focus{box-shadow:none}.kit-multiselect .k-multiselect.small{min-height:30px;border-radius:4px}.kit-multiselect .k-multiselect.small .k-input-values{padding:5px 7px}.kit-multiselect .k-multiselect.small .k-chip{height:20px;border-radius:4px}.kit-multiselect .k-multiselect.default{min-height:40px;border-radius:8px}.kit-multiselect .k-multiselect.default .k-input-values{padding:7px 12px}.kit-multiselect .k-multiselect.default .k-chip{height:24px;border-radius:8px}.kit-multiselect .k-input .k-input-inner{padding:0}.kit-multiselect .k-input .k-chip-list{display:flex}.kit-multiselect .k-input.ltr .k-chip-list{flex-direction:row}.kit-multiselect .k-input.rtl .k-chip-list{flex-direction:row-reverse}.kit-multiselect .k-input-values{gap:8px}.kit-multiselect .k-input-inner{font-size:14px;font-weight:400}.kit-multiselect .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-multiselect .k-chip{display:flex;align-items:center;position:relative;padding:0 8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-multiselect .k-chip-label{display:flex;align-items:center;gap:4px;line-height:1}.kit-multiselect .k-chip-actions{position:absolute;right:8px;width:12px;height:12px;opacity:0}.kit-multiselect .k-chip-action{display:flex;padding:0;cursor:pointer}.kit-multiselect .k-chip-content:has(+.k-chip-actions:hover) .chip-icon{stroke:var(--ui-kit-color-main)}.kit-multiselect .k-chip .chip-text{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500}.kit-multiselect .k-chip .chip-icon{display:block;width:12px;height:12px;stroke:var(--ui-kit-color-grey-12);cursor:pointer}.kit-multiselect .k-chip .k-icon{width:12px;height:12px}.kit-multiselect .k-chip:has(.chip-text.all-option){display:flex}.kit-multiselect .k-chip:last-child:has(.k-chip-content .group-tag) .k-chip-actions{display:none}.kit-multiselect .k-clear-value{margin-right:12px;padding:0;opacity:1;color:var(--ui-kit-color-grey-12)}.kit-multiselect .k-clear-value:hover{color:var(--ui-kit-color-main)}.kit-multiselect.disabled .k-multiselect{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-multiselect.disabled .chip-text{color:var(--ui-kit-color-grey-12)}.kit-multiselect.invalid .k-multiselect{border-color:var(--ui-kit-color-red-1)}.kit-multiselect.invalid .kit-form-message-text{color:var(--ui-kit-color-red-1)}.kit-multiselect:focus-within .k-multiselect{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-multiselect.all-option-selected .k-chip{display:none}.kit-multiselect-popup{margin-top:10px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-multiselect-popup.k-popup{padding:4px}.kit-multiselect-popup .k-list-ul{gap:4px}.kit-multiselect-popup .k-list-item{padding:6px 12px;background-color:var(--ui-kit-color-white);font-size:14px;font-weight:400;box-shadow:none;border-radius:4px;color:var(--ui-kit-color-grey-10);flex-wrap:nowrap}.kit-multiselect-popup .k-list-item:hover{color:var(--ui-kit-color-main)}.kit-multiselect-popup .k-list-item .option-icon{display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-multiselect-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-multiselect-popup .k-list-item.k-selected{display:flex;align-items:center;background-color:var(--ui-kit-color-grey-13)}.kit-multiselect-popup .k-list-item.k-selected .option-text{flex:1}.kit-multiselect-popup .k-list-item.k-selected .option-icon{display:block}.kit-multiselect-popup .k-checkbox{background-color:var(--ui-kit-color-grey-13);border:1px solid var(--ui-kit-color-grey-11);margin-right:4px}.kit-multiselect-popup .k-checkbox:checked{border-color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-main)}\n"] }]
4865
4865
  }], ctorParameters: () => [], propDecorators: { items: [{
4866
4866
  type: Input
4867
4867
  }], selectedItems: [{
@@ -10512,6 +10512,7 @@ var KitUserSettingsKeys;
10512
10512
  (function (KitUserSettingsKeys) {
10513
10513
  KitUserSettingsKeys["ExpandNotesPanel"] = "expandNotesPanel";
10514
10514
  KitUserSettingsKeys["UseDarkThemeForMobile"] = "useDarkThemeForMobile";
10515
+ KitUserSettingsKeys["FilterDetails"] = "filterDetails";
10515
10516
  })(KitUserSettingsKeys || (KitUserSettingsKeys = {}));
10516
10517
 
10517
10518
  class KitFilterCheckboxComponent {
@@ -12057,6 +12058,8 @@ class KitEntityGridComponent {
12057
12058
  ngOnInit() {
12058
12059
  const stateColumns = this.gridState().columns;
12059
12060
  const availableColumns = this.gridColumns();
12061
+ const filterDetailsSetting = this.store.selectSnapshot(KitUserSettingsState.getSettingByKey(KitUserSettingsKeys.FilterDetails));
12062
+ this.filtersVisible.set(filterDetailsSetting === 'true');
12060
12063
  if (kitShouldResetGridState({ stateColumns, availableColumns })) {
12061
12064
  this.store.dispatch(new StateReset(KitGridState, ...this.statesToReset()));
12062
12065
  }