@indigina/ui-kit 1.1.590 → 1.1.591
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.
|
@@ -1742,7 +1742,7 @@ class KitDropdownComponent {
|
|
|
1742
1742
|
provide: NG_VALUE_ACCESSOR,
|
|
1743
1743
|
useExisting: forwardRef(() => KitDropdownComponent),
|
|
1744
1744
|
multi: true,
|
|
1745
|
-
}], queries: [{ propertyName: "kitDropdownValueTemplate", first: true, predicate: ["kitDropdownValueTemplate"], descendants: true, read: TemplateRef }, { propertyName: "kitDropdownItemTemplate", first: true, predicate: KitDropdownItemTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "dropdownComponent", first: true, predicate: DropDownListComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-dropdown {{ size() }}\"\n [class.disabled]=\"disabled()\"\n [class.readonly]=\"readonly()\"\n [class.invalid]=\"invalid()\">\n @if (label()) {\n <kit-form-label class=\"label\"\n [text]=\"label()\"\n [for]=\"dropdown\"\n ></kit-form-label>\n }\n <kendo-dropdownlist #dropdown\n valueField=\"value\"\n textField=\"text\"\n class=\"dropdown\"\n [ngClass]=\"getCssClasses()\"\n [data]=\"items()\"\n [valuePrimitive]=\"isValuePrimitive()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [popupSettings]=\"buildPopupSettings()\"\n [itemDisabled]=\"onItemDisabled()\"\n [defaultItem]=\"defaultItem()\"\n [listHeight]=\"listHeight()\"\n [value]=\"selectedItem()\"\n (open)=\"onOpen()\"\n (close)=\"onClose()\"\n (selectionChange)=\"onItemSelect($event)\">\n <ng-template kendoDropDownListValueTemplate\n let-dataItem>\n @if (kitDropdownValueTemplate) {\n <div class=\"value-text\">\n <ng-container *ngTemplateOutlet=\"kitDropdownValueTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </div>\n } @else {\n <span class=\"value-text\">{{ dataItem?.text }}</span>\n }\n <kit-svg-icon class=\"value-icon\"\n [icon]=\"toggleIcon()\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoDropDownListItemTemplate\n let-dataItem>\n @if (kitDropdownItemTemplate) {\n <ng-container *ngTemplateOutlet=\"kitDropdownItemTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n } @else {\n <kit-truncate-text class=\"option-text\">{{ dataItem?.text }}</kit-truncate-text>\n <kit-svg-icon class=\"option-icon\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </ng-template>\n @if (footerTemplate()) {\n <ng-template kendoDropDownListFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate()\" />\n </ng-template>\n }\n @if (noDataTemplate()) {\n <ng-template kendoDropDownListNoDataTemplate>\n <ng-container *ngTemplateOutlet=\"noDataTemplate()\" />\n </ng-template>\n }\n </kendo-dropdownlist>\n @if (messageText()) {\n <kit-form-message [icon]=\"messageIcon()\"\n [message]=\"messageText()\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-dropdown.default .dropdown{height:40px;border-radius:8px}.kit-dropdown.default .k-input-inner{padding:0 12px}.kit-dropdown.small .dropdown{height:32px;border-radius:4px}.kit-dropdown.small .k-input-inner{padding:0 8px}.kit-dropdown .label{display:block;margin-bottom:4px}.kit-dropdown .k-input-value-text{display:flex;align-items:center;height:100%;font-size:14px;font-weight:400;color:var(--ui-kit-color-grey-12)}.kit-dropdown .k-input-button{display:none}.kit-dropdown .dropdown{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-dropdown .dropdown:hover{border-color:var(--ui-kit-color-hover)}.kit-dropdown .dropdown:focus-within{box-shadow:none}.kit-dropdown .dropdown.k-focus{box-shadow:none}.kit-dropdown .dropdown.has-value .k-input-value-text{color:var(--ui-kit-color-grey-10)}.kit-dropdown .dropdown.expanded .value-icon{transform:rotate(180deg)}.kit-dropdown .dropdown .value{display:flex;align-items:center}.kit-dropdown .dropdown .value-text{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-dropdown .dropdown .value-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12);stroke:none}.kit-dropdown:focus-within .dropdown{border:1px solid var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-dropdown.disabled .dropdown{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown.disabled .k-input-value-text,.kit-dropdown.disabled .has-value .k-input-value-text{color:var(--ui-kit-color-grey-12)}.kit-dropdown.disabled .value-icon{fill:var(--ui-kit-color-grey-12)}.kit-dropdown.readonly{background:none}.kit-dropdown.readonly .dropdown{cursor:default}.kit-dropdown.readonly .k-input-value-text,.kit-dropdown.readonly .has-value .k-input-value-text{color:var(--ui-kit-color-grey-12)}.kit-dropdown.readonly:focus-within .dropdown{border-color:var(--ui-kit-color-grey-11);box-shadow:none}.kit-dropdown.readonly:hover .dropdown{border-color:var(--ui-kit-color-grey-11)}.kit-dropdown.invalid .dropdown{border-color:var(--ui-kit-color-red-1)}.kit-dropdown.invalid .value-icon{fill:var(--ui-kit-color-red-1)}.kit-dropdown.invalid .kit-form-message-text{color:var(--ui-kit-color-red-1)}.kit-dropdown-popup.k-popup{margin-top:10px;padding:4px;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-dropdown-popup.k-popup.kit-dropdown-popup-default-item .k-list-optionlabel{display:flex}.kit-dropdown-popup.k-popup .k-list-optionlabel{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel,.kit-dropdown-popup.k-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-dropdown-popup.k-popup .k-list-optionlabel.k-list-optionlabel:before,.kit-dropdown-popup.k-popup .k-list-item.k-list-optionlabel:before{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel:hover,.kit-dropdown-popup.k-popup .k-list-optionlabel.k-focus:hover,.kit-dropdown-popup.k-popup .k-list-item:hover,.kit-dropdown-popup.k-popup .k-list-item.k-focus:hover{color:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel .option-icon,.kit-dropdown-popup.k-popup .k-list-item .option-icon{flex-shrink:0;display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected,.kit-dropdown-popup.k-popup .k-list-item.k-selected{display:flex;align-items:center;background-color:var(--ui-kit-color-grey-13);color:var(--ui-kit-color-grey-10)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-text,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-text{flex:1}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-icon,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-icon{display:block}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-disabled,.kit-dropdown-popup.k-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}\n"], dependencies: [{ kind: "ngmodule", type: DropDownListModule }, { kind: "component", type: i1$5.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: i1$5.FooterTemplateDirective, selector: "[kendoDropDownListFooterTemplate],[kendoComboBoxFooterTemplate],[kendoDropDownTreeFooterTemplate],[kendoMultiColumnComboBoxFooterTemplate],[kendoAutoCompleteFooterTemplate],[kendoMultiSelectFooterTemplate],[kendoMultiSelectTreeFooterTemplate]" }, { kind: "directive", type: i1$5.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i1$5.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "directive", type: i1$5.NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]" }, { kind: "component", type: KitFormMessageComponent, selector: "kit-form-message", inputs: ["icon", "message"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1745
|
+
}], queries: [{ propertyName: "kitDropdownValueTemplate", first: true, predicate: ["kitDropdownValueTemplate"], descendants: true, read: TemplateRef }, { propertyName: "kitDropdownItemTemplate", first: true, predicate: KitDropdownItemTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "dropdownComponent", first: true, predicate: DropDownListComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-dropdown {{ size() }}\"\n [class.disabled]=\"disabled()\"\n [class.readonly]=\"readonly()\"\n [class.invalid]=\"invalid()\">\n @if (label()) {\n <kit-form-label class=\"label\"\n [text]=\"label()\"\n [for]=\"dropdown\"\n ></kit-form-label>\n }\n <kendo-dropdownlist #dropdown\n valueField=\"value\"\n textField=\"text\"\n class=\"dropdown\"\n [ngClass]=\"getCssClasses()\"\n [data]=\"items()\"\n [valuePrimitive]=\"isValuePrimitive()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [popupSettings]=\"buildPopupSettings()\"\n [itemDisabled]=\"onItemDisabled()\"\n [defaultItem]=\"defaultItem()\"\n [listHeight]=\"listHeight()\"\n [value]=\"selectedItem()\"\n (open)=\"onOpen()\"\n (close)=\"onClose()\"\n (selectionChange)=\"onItemSelect($event)\">\n <ng-template kendoDropDownListValueTemplate\n let-dataItem>\n @if (kitDropdownValueTemplate) {\n <div class=\"value-text\">\n <ng-container *ngTemplateOutlet=\"kitDropdownValueTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </div>\n } @else {\n <span class=\"value-text\">{{ dataItem?.text }}</span>\n }\n <kit-svg-icon class=\"value-icon\"\n [icon]=\"toggleIcon()\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoDropDownListItemTemplate\n let-dataItem>\n @if (kitDropdownItemTemplate) {\n <ng-container *ngTemplateOutlet=\"kitDropdownItemTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n } @else {\n <kit-truncate-text class=\"option-text\">{{ dataItem?.text }}</kit-truncate-text>\n <kit-svg-icon class=\"option-icon\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </ng-template>\n @if (footerTemplate()) {\n <ng-template kendoDropDownListFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate()\" />\n </ng-template>\n }\n @if (noDataTemplate()) {\n <ng-template kendoDropDownListNoDataTemplate>\n <ng-container *ngTemplateOutlet=\"noDataTemplate()\" />\n </ng-template>\n }\n </kendo-dropdownlist>\n @if (messageText()) {\n <kit-form-message [icon]=\"messageIcon()\"\n [message]=\"messageText()\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-dropdown.default .dropdown{height:40px;border-radius:8px}.kit-dropdown.default .k-input-inner{padding:0 12px}.kit-dropdown.small .dropdown{height:32px;border-radius:4px}.kit-dropdown.small .k-input-inner{padding:0 8px}.kit-dropdown .label{display:block;margin-bottom:4px}.kit-dropdown .k-input-value-text{display:flex;align-items:center;height:100%;font-size:14px;font-weight:400;color:var(--ui-kit-color-grey-12)}.kit-dropdown .k-input-button{display:none}.kit-dropdown .dropdown{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-dropdown .dropdown:hover{border-color:var(--ui-kit-color-hover)}.kit-dropdown .dropdown:focus-within{box-shadow:none}.kit-dropdown .dropdown.k-focus{box-shadow:none}.kit-dropdown .dropdown.has-value .k-input-value-text{color:var(--ui-kit-color-grey-10)}.kit-dropdown .dropdown.expanded .value-icon{transform:rotate(180deg)}.kit-dropdown .dropdown .value{display:flex;align-items:center}.kit-dropdown .dropdown .value-text{flex:1;min-width:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-dropdown .dropdown .value-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12);stroke:none}.kit-dropdown:focus-within .dropdown{border:1px solid var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-dropdown.disabled .dropdown{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown.disabled .k-input-value-text,.kit-dropdown.disabled .has-value .k-input-value-text{color:var(--ui-kit-color-grey-12)}.kit-dropdown.disabled .value-icon{fill:var(--ui-kit-color-grey-12)}.kit-dropdown.readonly{background:none}.kit-dropdown.readonly .dropdown{cursor:default}.kit-dropdown.readonly .k-input-value-text,.kit-dropdown.readonly .has-value .k-input-value-text{color:var(--ui-kit-color-grey-12)}.kit-dropdown.readonly:focus-within .dropdown{border-color:var(--ui-kit-color-grey-11);box-shadow:none}.kit-dropdown.readonly:hover .dropdown{border-color:var(--ui-kit-color-grey-11)}.kit-dropdown.invalid .dropdown{border-color:var(--ui-kit-color-red-1)}.kit-dropdown.invalid .value-icon{fill:var(--ui-kit-color-red-1)}.kit-dropdown.invalid .kit-form-message-text{color:var(--ui-kit-color-red-1)}.kit-dropdown-popup.k-popup{margin-top:10px;padding:4px;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-dropdown-popup.k-popup.collapsed-list-popup{max-width:360px}.kit-dropdown-popup.k-popup.kit-dropdown-popup-default-item .k-list-optionlabel{display:flex}.kit-dropdown-popup.k-popup .k-list-optionlabel{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel,.kit-dropdown-popup.k-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-dropdown-popup.k-popup .k-list-optionlabel.k-list-optionlabel:before,.kit-dropdown-popup.k-popup .k-list-item.k-list-optionlabel:before{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel:hover,.kit-dropdown-popup.k-popup .k-list-optionlabel.k-focus:hover,.kit-dropdown-popup.k-popup .k-list-item:hover,.kit-dropdown-popup.k-popup .k-list-item.k-focus:hover{color:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel .option-text,.kit-dropdown-popup.k-popup .k-list-item .option-text{flex:1;min-width:0}.kit-dropdown-popup.k-popup .k-list-optionlabel .option-icon,.kit-dropdown-popup.k-popup .k-list-item .option-icon{flex-shrink:0;display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected,.kit-dropdown-popup.k-popup .k-list-item.k-selected{background-color:var(--ui-kit-color-grey-13);color:var(--ui-kit-color-grey-10)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-icon,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-icon{display:block}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-disabled,.kit-dropdown-popup.k-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}\n"], dependencies: [{ kind: "ngmodule", type: DropDownListModule }, { kind: "component", type: i1$5.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: i1$5.FooterTemplateDirective, selector: "[kendoDropDownListFooterTemplate],[kendoComboBoxFooterTemplate],[kendoDropDownTreeFooterTemplate],[kendoMultiColumnComboBoxFooterTemplate],[kendoAutoCompleteFooterTemplate],[kendoMultiSelectFooterTemplate],[kendoMultiSelectTreeFooterTemplate]" }, { kind: "directive", type: i1$5.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i1$5.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "directive", type: i1$5.NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]" }, { kind: "component", type: KitFormMessageComponent, selector: "kit-form-message", inputs: ["icon", "message"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1746
1746
|
}
|
|
1747
1747
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitDropdownComponent, decorators: [{
|
|
1748
1748
|
type: Component,
|
|
@@ -1760,7 +1760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
1760
1760
|
KitTruncateTextComponent,
|
|
1761
1761
|
NgClass,
|
|
1762
1762
|
NgTemplateOutlet,
|
|
1763
|
-
], template: "<div class=\"kit-dropdown {{ size() }}\"\n [class.disabled]=\"disabled()\"\n [class.readonly]=\"readonly()\"\n [class.invalid]=\"invalid()\">\n @if (label()) {\n <kit-form-label class=\"label\"\n [text]=\"label()\"\n [for]=\"dropdown\"\n ></kit-form-label>\n }\n <kendo-dropdownlist #dropdown\n valueField=\"value\"\n textField=\"text\"\n class=\"dropdown\"\n [ngClass]=\"getCssClasses()\"\n [data]=\"items()\"\n [valuePrimitive]=\"isValuePrimitive()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [popupSettings]=\"buildPopupSettings()\"\n [itemDisabled]=\"onItemDisabled()\"\n [defaultItem]=\"defaultItem()\"\n [listHeight]=\"listHeight()\"\n [value]=\"selectedItem()\"\n (open)=\"onOpen()\"\n (close)=\"onClose()\"\n (selectionChange)=\"onItemSelect($event)\">\n <ng-template kendoDropDownListValueTemplate\n let-dataItem>\n @if (kitDropdownValueTemplate) {\n <div class=\"value-text\">\n <ng-container *ngTemplateOutlet=\"kitDropdownValueTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </div>\n } @else {\n <span class=\"value-text\">{{ dataItem?.text }}</span>\n }\n <kit-svg-icon class=\"value-icon\"\n [icon]=\"toggleIcon()\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoDropDownListItemTemplate\n let-dataItem>\n @if (kitDropdownItemTemplate) {\n <ng-container *ngTemplateOutlet=\"kitDropdownItemTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n } @else {\n <kit-truncate-text class=\"option-text\">{{ dataItem?.text }}</kit-truncate-text>\n <kit-svg-icon class=\"option-icon\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </ng-template>\n @if (footerTemplate()) {\n <ng-template kendoDropDownListFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate()\" />\n </ng-template>\n }\n @if (noDataTemplate()) {\n <ng-template kendoDropDownListNoDataTemplate>\n <ng-container *ngTemplateOutlet=\"noDataTemplate()\" />\n </ng-template>\n }\n </kendo-dropdownlist>\n @if (messageText()) {\n <kit-form-message [icon]=\"messageIcon()\"\n [message]=\"messageText()\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-dropdown.default .dropdown{height:40px;border-radius:8px}.kit-dropdown.default .k-input-inner{padding:0 12px}.kit-dropdown.small .dropdown{height:32px;border-radius:4px}.kit-dropdown.small .k-input-inner{padding:0 8px}.kit-dropdown .label{display:block;margin-bottom:4px}.kit-dropdown .k-input-value-text{display:flex;align-items:center;height:100%;font-size:14px;font-weight:400;color:var(--ui-kit-color-grey-12)}.kit-dropdown .k-input-button{display:none}.kit-dropdown .dropdown{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-dropdown .dropdown:hover{border-color:var(--ui-kit-color-hover)}.kit-dropdown .dropdown:focus-within{box-shadow:none}.kit-dropdown .dropdown.k-focus{box-shadow:none}.kit-dropdown .dropdown.has-value .k-input-value-text{color:var(--ui-kit-color-grey-10)}.kit-dropdown .dropdown.expanded .value-icon{transform:rotate(180deg)}.kit-dropdown .dropdown .value{display:flex;align-items:center}.kit-dropdown .dropdown .value-text{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-dropdown .dropdown .value-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12);stroke:none}.kit-dropdown:focus-within .dropdown{border:1px solid var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-dropdown.disabled .dropdown{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown.disabled .k-input-value-text,.kit-dropdown.disabled .has-value .k-input-value-text{color:var(--ui-kit-color-grey-12)}.kit-dropdown.disabled .value-icon{fill:var(--ui-kit-color-grey-12)}.kit-dropdown.readonly{background:none}.kit-dropdown.readonly .dropdown{cursor:default}.kit-dropdown.readonly .k-input-value-text,.kit-dropdown.readonly .has-value .k-input-value-text{color:var(--ui-kit-color-grey-12)}.kit-dropdown.readonly:focus-within .dropdown{border-color:var(--ui-kit-color-grey-11);box-shadow:none}.kit-dropdown.readonly:hover .dropdown{border-color:var(--ui-kit-color-grey-11)}.kit-dropdown.invalid .dropdown{border-color:var(--ui-kit-color-red-1)}.kit-dropdown.invalid .value-icon{fill:var(--ui-kit-color-red-1)}.kit-dropdown.invalid .kit-form-message-text{color:var(--ui-kit-color-red-1)}.kit-dropdown-popup.k-popup{margin-top:10px;padding:4px;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-dropdown-popup.k-popup.kit-dropdown-popup-default-item .k-list-optionlabel{display:flex}.kit-dropdown-popup.k-popup .k-list-optionlabel{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel,.kit-dropdown-popup.k-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-dropdown-popup.k-popup .k-list-optionlabel.k-list-optionlabel:before,.kit-dropdown-popup.k-popup .k-list-item.k-list-optionlabel:before{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel:hover,.kit-dropdown-popup.k-popup .k-list-optionlabel.k-focus:hover,.kit-dropdown-popup.k-popup .k-list-item:hover,.kit-dropdown-popup.k-popup .k-list-item.k-focus:hover{color:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel .option-icon,.kit-dropdown-popup.k-popup .k-list-item .option-icon{flex-shrink:0;display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected,.kit-dropdown-popup.k-popup .k-list-item.k-selected{
|
|
1763
|
+
], template: "<div class=\"kit-dropdown {{ size() }}\"\n [class.disabled]=\"disabled()\"\n [class.readonly]=\"readonly()\"\n [class.invalid]=\"invalid()\">\n @if (label()) {\n <kit-form-label class=\"label\"\n [text]=\"label()\"\n [for]=\"dropdown\"\n ></kit-form-label>\n }\n <kendo-dropdownlist #dropdown\n valueField=\"value\"\n textField=\"text\"\n class=\"dropdown\"\n [ngClass]=\"getCssClasses()\"\n [data]=\"items()\"\n [valuePrimitive]=\"isValuePrimitive()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [popupSettings]=\"buildPopupSettings()\"\n [itemDisabled]=\"onItemDisabled()\"\n [defaultItem]=\"defaultItem()\"\n [listHeight]=\"listHeight()\"\n [value]=\"selectedItem()\"\n (open)=\"onOpen()\"\n (close)=\"onClose()\"\n (selectionChange)=\"onItemSelect($event)\">\n <ng-template kendoDropDownListValueTemplate\n let-dataItem>\n @if (kitDropdownValueTemplate) {\n <div class=\"value-text\">\n <ng-container *ngTemplateOutlet=\"kitDropdownValueTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </div>\n } @else {\n <span class=\"value-text\">{{ dataItem?.text }}</span>\n }\n <kit-svg-icon class=\"value-icon\"\n [icon]=\"toggleIcon()\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoDropDownListItemTemplate\n let-dataItem>\n @if (kitDropdownItemTemplate) {\n <ng-container *ngTemplateOutlet=\"kitDropdownItemTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n } @else {\n <kit-truncate-text class=\"option-text\">{{ dataItem?.text }}</kit-truncate-text>\n <kit-svg-icon class=\"option-icon\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </ng-template>\n @if (footerTemplate()) {\n <ng-template kendoDropDownListFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate()\" />\n </ng-template>\n }\n @if (noDataTemplate()) {\n <ng-template kendoDropDownListNoDataTemplate>\n <ng-container *ngTemplateOutlet=\"noDataTemplate()\" />\n </ng-template>\n }\n </kendo-dropdownlist>\n @if (messageText()) {\n <kit-form-message [icon]=\"messageIcon()\"\n [message]=\"messageText()\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-dropdown.default .dropdown{height:40px;border-radius:8px}.kit-dropdown.default .k-input-inner{padding:0 12px}.kit-dropdown.small .dropdown{height:32px;border-radius:4px}.kit-dropdown.small .k-input-inner{padding:0 8px}.kit-dropdown .label{display:block;margin-bottom:4px}.kit-dropdown .k-input-value-text{display:flex;align-items:center;height:100%;font-size:14px;font-weight:400;color:var(--ui-kit-color-grey-12)}.kit-dropdown .k-input-button{display:none}.kit-dropdown .dropdown{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-dropdown .dropdown:hover{border-color:var(--ui-kit-color-hover)}.kit-dropdown .dropdown:focus-within{box-shadow:none}.kit-dropdown .dropdown.k-focus{box-shadow:none}.kit-dropdown .dropdown.has-value .k-input-value-text{color:var(--ui-kit-color-grey-10)}.kit-dropdown .dropdown.expanded .value-icon{transform:rotate(180deg)}.kit-dropdown .dropdown .value{display:flex;align-items:center}.kit-dropdown .dropdown .value-text{flex:1;min-width:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-dropdown .dropdown .value-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12);stroke:none}.kit-dropdown:focus-within .dropdown{border:1px solid var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-dropdown.disabled .dropdown{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown.disabled .k-input-value-text,.kit-dropdown.disabled .has-value .k-input-value-text{color:var(--ui-kit-color-grey-12)}.kit-dropdown.disabled .value-icon{fill:var(--ui-kit-color-grey-12)}.kit-dropdown.readonly{background:none}.kit-dropdown.readonly .dropdown{cursor:default}.kit-dropdown.readonly .k-input-value-text,.kit-dropdown.readonly .has-value .k-input-value-text{color:var(--ui-kit-color-grey-12)}.kit-dropdown.readonly:focus-within .dropdown{border-color:var(--ui-kit-color-grey-11);box-shadow:none}.kit-dropdown.readonly:hover .dropdown{border-color:var(--ui-kit-color-grey-11)}.kit-dropdown.invalid .dropdown{border-color:var(--ui-kit-color-red-1)}.kit-dropdown.invalid .value-icon{fill:var(--ui-kit-color-red-1)}.kit-dropdown.invalid .kit-form-message-text{color:var(--ui-kit-color-red-1)}.kit-dropdown-popup.k-popup{margin-top:10px;padding:4px;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-dropdown-popup.k-popup.collapsed-list-popup{max-width:360px}.kit-dropdown-popup.k-popup.kit-dropdown-popup-default-item .k-list-optionlabel{display:flex}.kit-dropdown-popup.k-popup .k-list-optionlabel{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel,.kit-dropdown-popup.k-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-dropdown-popup.k-popup .k-list-optionlabel.k-list-optionlabel:before,.kit-dropdown-popup.k-popup .k-list-item.k-list-optionlabel:before{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel:hover,.kit-dropdown-popup.k-popup .k-list-optionlabel.k-focus:hover,.kit-dropdown-popup.k-popup .k-list-item:hover,.kit-dropdown-popup.k-popup .k-list-item.k-focus:hover{color:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel .option-text,.kit-dropdown-popup.k-popup .k-list-item .option-text{flex:1;min-width:0}.kit-dropdown-popup.k-popup .k-list-optionlabel .option-icon,.kit-dropdown-popup.k-popup .k-list-item .option-icon{flex-shrink:0;display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected,.kit-dropdown-popup.k-popup .k-list-item.k-selected{background-color:var(--ui-kit-color-grey-13);color:var(--ui-kit-color-grey-10)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-icon,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-icon{display:block}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-disabled,.kit-dropdown-popup.k-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}\n"] }]
|
|
1764
1764
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selectedItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItem", required: false }] }, { type: i0.Output, args: ["selectedItemChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], messageText: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageText", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], defaultItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultItem", required: false }] }], listHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "listHeight", required: false }] }], hideDefaultItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDefaultItem", required: false }] }], toggleIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleIcon", required: false }] }], popupSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupSettings", required: false }] }], isValuePrimitive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isValuePrimitive", required: false }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: false }] }], noDataTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataTemplate", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], kitDropdownValueTemplate: [{
|
|
1765
1765
|
type: ContentChild,
|
|
1766
1766
|
args: ['kitDropdownValueTemplate', { read: TemplateRef }]
|
|
@@ -8077,7 +8077,7 @@ class KitCollapsedListComponent {
|
|
|
8077
8077
|
this.shouldShowDropdown.set(resizeParams.shouldShowDropdown);
|
|
8078
8078
|
}
|
|
8079
8079
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitCollapsedListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8080
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitCollapsedListComponent, isStandalone: true, selector: "kit-collapsed-list", inputs: { itemList: { classPropertyName: "itemList", publicName: "itemList", isSignal: true, isRequired: true, transformFunction: null }, lineHeight: { classPropertyName: "lineHeight", publicName: "lineHeight", isSignal: true, isRequired: false, transformFunction: null }, dropdownDefaultValueText: { classPropertyName: "dropdownDefaultValueText", publicName: "dropdownDefaultValueText", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, disableActions: { classPropertyName: "disableActions", publicName: "disableActions", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownFooterTemplate: { classPropertyName: "dropdownFooterTemplate", publicName: "dropdownFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownItemTemplate: { classPropertyName: "dropdownItemTemplate", publicName: "dropdownItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownNoDataTemplate: { classPropertyName: "dropdownNoDataTemplate", publicName: "dropdownNoDataTemplate", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowDropdown: { classPropertyName: "alwaysShowDropdown", publicName: "alwaysShowDropdown", isSignal: true, isRequired: false, transformFunction: null }, dropdownAlign: { classPropertyName: "dropdownAlign", publicName: "dropdownAlign", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectItem: "selectItem" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }, { propertyName: "wrapperInner", first: true, predicate: ["wrapperInner"], descendants: true, isSignal: true }, { propertyName: "measureItem", predicate: ["measureItem"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, read: ElementRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div #wrapper\n class=\"kit-collapsed-list\"\n [ngClass]=\"dropdownAlign()\"\n [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n [style.--kit-collapsed-list-gap.px]=\"gap()\">\n <div #wrapperInner \n class=\"wrapper-inner\">\n @if (visibleItems().length) {\n <div class=\"element-container\">\n @for (item of visibleItems(); track $index) {\n <div class=\"item-wrapper\"\n (click)=\"selectionChange(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate, context: { $implicit: item }\" />\n </div>\n }\n </div>\n }\n @if (shouldShowDropdown()) {\n <kit-dropdown #dropdown\n class=\"collapsed-list-dropdown\"\n [class.selected]=\"dropdownSelectedItem().value !== defaultSelectedItem().value\"\n [items]=\"dropdownItems()\"\n [selectedItem]=\"dropdownSelectedItem()\"\n [disabled]=\"disableActions()\"\n [size]=\"kitDropdownSize.SMALL\"\n [popupSettings]=\"popupSettings\"\n [isValuePrimitive]=\"false\"\n [footerTemplate]=\"dropdownFooterTemplate()\"\n [noDataTemplate]=\"dropdownNoDataTemplate()\"\n (selected)=\"selectionChange($event)\">\n @if (dropdownItemTemplate()) {\n <ng-template kitDropdownItemTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"dropdownItemTemplate(), context: { $implicit: dataItem }\" />\n </ng-template>\n }\n </kit-dropdown>\n }\n </div>\n\n <div class=\"wrapper-inner measure-container\">\n <div class=\"element-container\">\n @for (item of itemList(); track $index) {\n <div #measureItem\n class=\"item-wrapper\">\n <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate; context: { $implicit: item }\" />\n </div>\n }\n </div>\n </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n <kit-button class=\"item\"\n [class.active]=\"item.value === _selectedItem().value\"\n [label]=\"item.text\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [active]=\"item.value === _selectedItem().value\"\n [disabled]=\"disableActions()\" />\n</ng-template>\n", styles: [".kit-collapsed-list.inline .wrapper-inner{justify-content:flex-start}.kit-collapsed-list.end .wrapper-inner{justify-content:space-between}.kit-collapsed-list .wrapper-inner{position:relative;display:flex;gap:var(--kit-collapsed-list-gap, 20px);width:100%;min-width:max-content;height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner.measure-container{position:absolute;visibility:hidden;pointer-events:none;white-space:nowrap;height:0;overflow:hidden}.kit-collapsed-list .wrapper-inner .element-container{display:flex;gap:var(--kit-collapsed-list-gap, 20px)}.kit-collapsed-list .wrapper-inner .element-container .item ::ng-deep .kit-button .k-button{height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown{max-width:100%;height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown ::ng-deep .kit-dropdown.small .dropdown{height:var(--kit-collapsed-list-height, 24px)}\n"], dependencies: [{ kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DropDownListModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8080
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitCollapsedListComponent, isStandalone: true, selector: "kit-collapsed-list", inputs: { itemList: { classPropertyName: "itemList", publicName: "itemList", isSignal: true, isRequired: true, transformFunction: null }, lineHeight: { classPropertyName: "lineHeight", publicName: "lineHeight", isSignal: true, isRequired: false, transformFunction: null }, dropdownDefaultValueText: { classPropertyName: "dropdownDefaultValueText", publicName: "dropdownDefaultValueText", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, disableActions: { classPropertyName: "disableActions", publicName: "disableActions", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownFooterTemplate: { classPropertyName: "dropdownFooterTemplate", publicName: "dropdownFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownItemTemplate: { classPropertyName: "dropdownItemTemplate", publicName: "dropdownItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownNoDataTemplate: { classPropertyName: "dropdownNoDataTemplate", publicName: "dropdownNoDataTemplate", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowDropdown: { classPropertyName: "alwaysShowDropdown", publicName: "alwaysShowDropdown", isSignal: true, isRequired: false, transformFunction: null }, dropdownAlign: { classPropertyName: "dropdownAlign", publicName: "dropdownAlign", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectItem: "selectItem" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }, { propertyName: "wrapperInner", first: true, predicate: ["wrapperInner"], descendants: true, isSignal: true }, { propertyName: "measureItem", predicate: ["measureItem"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, read: ElementRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div #wrapper\n class=\"kit-collapsed-list\"\n [ngClass]=\"dropdownAlign()\"\n [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n [style.--kit-collapsed-list-gap.px]=\"gap()\">\n <div #wrapperInner \n class=\"wrapper-inner\">\n @if (visibleItems().length) {\n <div class=\"element-container\">\n @for (item of visibleItems(); track $index) {\n <div class=\"item-wrapper\"\n (click)=\"selectionChange(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate, context: { $implicit: item }\" />\n </div>\n }\n </div>\n }\n @if (shouldShowDropdown()) {\n <kit-dropdown #dropdown\n class=\"collapsed-list-dropdown\"\n [class.selected]=\"dropdownSelectedItem().value !== defaultSelectedItem().value\"\n [items]=\"dropdownItems()\"\n [selectedItem]=\"dropdownSelectedItem()\"\n [disabled]=\"disableActions()\"\n [size]=\"kitDropdownSize.SMALL\"\n [popupSettings]=\"popupSettings\"\n [isValuePrimitive]=\"false\"\n [footerTemplate]=\"dropdownFooterTemplate()\"\n [noDataTemplate]=\"dropdownNoDataTemplate()\"\n (selected)=\"selectionChange($event)\">\n @if (dropdownItemTemplate()) {\n <ng-template kitDropdownItemTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"dropdownItemTemplate(), context: { $implicit: dataItem }\" />\n </ng-template>\n }\n </kit-dropdown>\n }\n </div>\n\n <div class=\"wrapper-inner measure-container\">\n <div class=\"element-container\">\n @for (item of itemList(); track $index) {\n <div #measureItem\n class=\"item-wrapper\">\n <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate; context: { $implicit: item }\" />\n </div>\n }\n </div>\n </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n <kit-button class=\"item\"\n [class.active]=\"item.value === _selectedItem().value\"\n [label]=\"item.text\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [active]=\"item.value === _selectedItem().value\"\n [disabled]=\"disableActions()\" />\n</ng-template>\n", styles: [".kit-collapsed-list.inline .wrapper-inner{justify-content:flex-start}.kit-collapsed-list.end .wrapper-inner{justify-content:space-between}.kit-collapsed-list .wrapper-inner{position:relative;display:flex;gap:var(--kit-collapsed-list-gap, 20px);width:100%;min-width:max-content;height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner.measure-container{position:absolute;visibility:hidden;pointer-events:none;white-space:nowrap;height:0;overflow:hidden}.kit-collapsed-list .wrapper-inner .element-container{display:flex;gap:var(--kit-collapsed-list-gap, 20px)}.kit-collapsed-list .wrapper-inner .element-container .item ::ng-deep .kit-button .k-button{height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown{max-width:100%;height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown ::ng-deep .kit-dropdown.small .dropdown{height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown ::ng-deep .value-text{max-width:360px}\n"], dependencies: [{ kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DropDownListModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8081
8081
|
}
|
|
8082
8082
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitCollapsedListComponent, decorators: [{
|
|
8083
8083
|
type: Component,
|
|
@@ -8087,7 +8087,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
8087
8087
|
NgTemplateOutlet,
|
|
8088
8088
|
DropDownListModule,
|
|
8089
8089
|
NgClass,
|
|
8090
|
-
], template: "<div #wrapper\n class=\"kit-collapsed-list\"\n [ngClass]=\"dropdownAlign()\"\n [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n [style.--kit-collapsed-list-gap.px]=\"gap()\">\n <div #wrapperInner \n class=\"wrapper-inner\">\n @if (visibleItems().length) {\n <div class=\"element-container\">\n @for (item of visibleItems(); track $index) {\n <div class=\"item-wrapper\"\n (click)=\"selectionChange(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate, context: { $implicit: item }\" />\n </div>\n }\n </div>\n }\n @if (shouldShowDropdown()) {\n <kit-dropdown #dropdown\n class=\"collapsed-list-dropdown\"\n [class.selected]=\"dropdownSelectedItem().value !== defaultSelectedItem().value\"\n [items]=\"dropdownItems()\"\n [selectedItem]=\"dropdownSelectedItem()\"\n [disabled]=\"disableActions()\"\n [size]=\"kitDropdownSize.SMALL\"\n [popupSettings]=\"popupSettings\"\n [isValuePrimitive]=\"false\"\n [footerTemplate]=\"dropdownFooterTemplate()\"\n [noDataTemplate]=\"dropdownNoDataTemplate()\"\n (selected)=\"selectionChange($event)\">\n @if (dropdownItemTemplate()) {\n <ng-template kitDropdownItemTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"dropdownItemTemplate(), context: { $implicit: dataItem }\" />\n </ng-template>\n }\n </kit-dropdown>\n }\n </div>\n\n <div class=\"wrapper-inner measure-container\">\n <div class=\"element-container\">\n @for (item of itemList(); track $index) {\n <div #measureItem\n class=\"item-wrapper\">\n <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate; context: { $implicit: item }\" />\n </div>\n }\n </div>\n </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n <kit-button class=\"item\"\n [class.active]=\"item.value === _selectedItem().value\"\n [label]=\"item.text\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [active]=\"item.value === _selectedItem().value\"\n [disabled]=\"disableActions()\" />\n</ng-template>\n", styles: [".kit-collapsed-list.inline .wrapper-inner{justify-content:flex-start}.kit-collapsed-list.end .wrapper-inner{justify-content:space-between}.kit-collapsed-list .wrapper-inner{position:relative;display:flex;gap:var(--kit-collapsed-list-gap, 20px);width:100%;min-width:max-content;height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner.measure-container{position:absolute;visibility:hidden;pointer-events:none;white-space:nowrap;height:0;overflow:hidden}.kit-collapsed-list .wrapper-inner .element-container{display:flex;gap:var(--kit-collapsed-list-gap, 20px)}.kit-collapsed-list .wrapper-inner .element-container .item ::ng-deep .kit-button .k-button{height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown{max-width:100%;height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown ::ng-deep .kit-dropdown.small .dropdown{height:var(--kit-collapsed-list-height, 24px)}\n"] }]
|
|
8090
|
+
], template: "<div #wrapper\n class=\"kit-collapsed-list\"\n [ngClass]=\"dropdownAlign()\"\n [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n [style.--kit-collapsed-list-gap.px]=\"gap()\">\n <div #wrapperInner \n class=\"wrapper-inner\">\n @if (visibleItems().length) {\n <div class=\"element-container\">\n @for (item of visibleItems(); track $index) {\n <div class=\"item-wrapper\"\n (click)=\"selectionChange(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate, context: { $implicit: item }\" />\n </div>\n }\n </div>\n }\n @if (shouldShowDropdown()) {\n <kit-dropdown #dropdown\n class=\"collapsed-list-dropdown\"\n [class.selected]=\"dropdownSelectedItem().value !== defaultSelectedItem().value\"\n [items]=\"dropdownItems()\"\n [selectedItem]=\"dropdownSelectedItem()\"\n [disabled]=\"disableActions()\"\n [size]=\"kitDropdownSize.SMALL\"\n [popupSettings]=\"popupSettings\"\n [isValuePrimitive]=\"false\"\n [footerTemplate]=\"dropdownFooterTemplate()\"\n [noDataTemplate]=\"dropdownNoDataTemplate()\"\n (selected)=\"selectionChange($event)\">\n @if (dropdownItemTemplate()) {\n <ng-template kitDropdownItemTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"dropdownItemTemplate(), context: { $implicit: dataItem }\" />\n </ng-template>\n }\n </kit-dropdown>\n }\n </div>\n\n <div class=\"wrapper-inner measure-container\">\n <div class=\"element-container\">\n @for (item of itemList(); track $index) {\n <div #measureItem\n class=\"item-wrapper\">\n <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate; context: { $implicit: item }\" />\n </div>\n }\n </div>\n </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n <kit-button class=\"item\"\n [class.active]=\"item.value === _selectedItem().value\"\n [label]=\"item.text\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [active]=\"item.value === _selectedItem().value\"\n [disabled]=\"disableActions()\" />\n</ng-template>\n", styles: [".kit-collapsed-list.inline .wrapper-inner{justify-content:flex-start}.kit-collapsed-list.end .wrapper-inner{justify-content:space-between}.kit-collapsed-list .wrapper-inner{position:relative;display:flex;gap:var(--kit-collapsed-list-gap, 20px);width:100%;min-width:max-content;height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner.measure-container{position:absolute;visibility:hidden;pointer-events:none;white-space:nowrap;height:0;overflow:hidden}.kit-collapsed-list .wrapper-inner .element-container{display:flex;gap:var(--kit-collapsed-list-gap, 20px)}.kit-collapsed-list .wrapper-inner .element-container .item ::ng-deep .kit-button .k-button{height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown{max-width:100%;height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown ::ng-deep .kit-dropdown.small .dropdown{height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown ::ng-deep .value-text{max-width:360px}\n"] }]
|
|
8091
8091
|
}], propDecorators: { itemList: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemList", required: true }] }], lineHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineHeight", required: false }] }], dropdownDefaultValueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownDefaultValueText", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], disableActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableActions", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], dropdownFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownFooterTemplate", required: false }] }], dropdownItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownItemTemplate", required: false }] }], dropdownNoDataTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownNoDataTemplate", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], alwaysShowDropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "alwaysShowDropdown", required: false }] }], dropdownAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownAlign", required: false }] }], selectItem: [{ type: i0.Output, args: ["selectItem"] }], wrapper: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }], wrapperInner: [{ type: i0.ViewChild, args: ['wrapperInner', { isSignal: true }] }], measureItem: [{ type: i0.ViewChildren, args: ['measureItem', { isSignal: true }] }], dropdown: [{ type: i0.ViewChild, args: ['dropdown', { ...{
|
|
8092
8092
|
read: ElementRef,
|
|
8093
8093
|
}, isSignal: true }] }] } });
|