@indigina/ui-kit 1.1.199 → 1.1.200

package/fesm2022/indigina-ui-kit.mjs

@@ -5924,6 +5924,16 @@ class KitCollapsedListComponent {
         this.resizeObserver.observe(this.wrapper().nativeElement);
     }
     resize() {
+        const resizeParams = this.calculateResizeParams();
+        const oldShouldShowDropdown = this.shouldShowDropdown();
+        this.setResizeParams(resizeParams);
+        if (oldShouldShowDropdown !== this.shouldShowDropdown()) {
+            requestAnimationFrame(() => {
+                this.resize();
+            });
+        }
+    }
+    calculateResizeParams() {
         const allItems = this.itemList();
         const wrapperWidth = this.wrapper().nativeElement.getBoundingClientRect().width;
         const measuredItems = this.measureItem().map(ref => ref.nativeElement);
@@ -5941,9 +5951,16 @@ class KitCollapsedListComponent {
             totalWidth += itemWidth;
             fitCount++;
         }
-        this.visibleItems.set(allItems.slice(0, fitCount));
-        this.dropdownItems.set(allItems.slice(fitCount));
-        this.shouldShowDropdown.set(fitCount < allItems.length);
+        return {
+            visibleItems: allItems.slice(0, fitCount),
+            dropdownItems: allItems.slice(fitCount),
+            shouldShowDropdown: fitCount < allItems.length,
+        };
+    }
+    setResizeParams(resizeParams) {
+        this.visibleItems.set(resizeParams.visibleItems);
+        this.dropdownItems.set(resizeParams.dropdownItems);
+        this.shouldShowDropdown.set(resizeParams.shouldShowDropdown);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitCollapsedListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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: { onSelectItem: "onSelectItem" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], 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 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              [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%;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: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: KitDropdownModule }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "size"], outputs: ["selected"] }, { kind: "directive", type: KitDropdownItemTemplateDirective, selector: "[kitDropdownItemTemplate]" }, { 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 }); }