@indigina/ui-kit 1.1.580 → 1.1.581

package/fesm2022/indigina-ui-kit.mjs

@@ -8184,24 +8184,11 @@ class KitScrollNavigationComponent {
         if (!contentElement || !this.sectionContentRefs.length || this.disableScrollUpdates) {
             return;
         }
-        let index = 0;
-        const contentScrollTop = contentElement.scrollTop + (contentElement.clientHeight / 2);
-        const scrolledSectionIndexes = new Set();
-        for (const ref of this.sectionContentRefs.toArray()) {
-            const sectionElement = ref.nativeElement;
-            const sectionTop = sectionElement.offsetTop;
-            const sectionHeight = sectionElement.offsetHeight;
-            const isFullyVisibleOnScreen = sectionTop <= contentScrollTop && ((sectionTop + sectionHeight) >= contentScrollTop);
-            if ((sectionTop + sectionHeight < (contentElement.scrollTop + contentElement.clientHeight)) || isFullyVisibleOnScreen) {
-                scrolledSectionIndexes.add(index);
-            }
-            if ((contentElement.scrollTop + contentElement.clientHeight) === contentElement.scrollHeight) {
-                scrolledSectionIndexes.add(index);
-            }
-            index++;
+        const activeSectionIndex = this.getActiveSectionIndex(contentElement);
+        const activeItem = this.collapsedListItems()[activeSectionIndex];
+        if (activeItem) {
+            this.collapsedList?.setSelectedItem(activeItem);
         }
-        const activeSectionIndex = Array.from(scrolledSectionIndexes)[scrolledSectionIndexes.size - 1];
-        this.collapsedList?.setSelectedItem(this.collapsedListItems()[activeSectionIndex]);
     }
     scrollToSection(selectedItem) {
         this.disableScrollUpdates = true;
@@ -8217,17 +8204,15 @@ class KitScrollNavigationComponent {
         });
     }
     updateListItems() {
-        const sectionsData = this.sections?.toArray()?.map(section => {
-            return {
-                text: section.title,
-                value: section.title,
-                state: section.buttonState,
-                icon: section.buttonIcon,
-                tooltipText: section.tooltipText,
-                badgeCount: section.badgeCount,
-                id: section.id,
-            };
-        }) ?? [];
+        const sectionsData = this.sections?.toArray()?.map(section => ({
+            text: section.title,
+            value: section.title,
+            state: section.buttonState,
+            icon: section.buttonIcon,
+            tooltipText: section.tooltipText,
+            badgeCount: section.badgeCount,
+            id: section.id,
+        })) ?? [];
         this.collapsedListItems.set(sectionsData);
         this.collapsedList?.setSelectedItem(this.collapsedListItems()[0]);
     }
@@ -8249,6 +8234,22 @@ class KitScrollNavigationComponent {
             lastSection.style.minHeight = `${contentHeight}px`;
         }
     }
+    getActiveSectionIndex(contentElement) {
+        const sectionCount = this.sectionContentRefs.length;
+        const isScrolledToBottom = (contentElement.scrollTop + contentElement.clientHeight) >= contentElement.scrollHeight;
+        const activeSectionScrollOffset = 1;
+        if (isScrolledToBottom) {
+            return Math.max(sectionCount - 1, 0);
+        }
+        const scrollTop = Math.floor(contentElement.scrollTop) + activeSectionScrollOffset;
+        let activeSectionIndex = 0;
+        this.sectionContentRefs.toArray().forEach((ref, index) => {
+            if (ref.nativeElement.offsetTop <= scrollTop) {
+                activeSectionIndex = index;
+            }
+        });
+        return activeSectionIndex;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitScrollNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitScrollNavigationComponent, isStandalone: true, selector: "kit-scroll-navigation", inputs: { isNavigationBtnDisabled: { classPropertyName: "isNavigationBtnDisabled", publicName: "isNavigationBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, dropdownDefaultText: { classPropertyName: "dropdownDefaultText", publicName: "dropdownDefaultText", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "sections", predicate: KitScrollNavigationSectionComponent }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "collapsedList", first: true, predicate: KitCollapsedListComponent, descendants: true }, { propertyName: "sectionContentRefs", predicate: ["sectionContent"], descendants: true }], ngImport: i0, template: "<div class=\"kit-scroll-navigation\">\n  <div class=\"kit-scroll-navigation-items\">\n    <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n                        [dropdownDefaultValueText]=\"dropdownDefaultText()\"\n                        [gap]=\"18\"\n                        [itemTemplate]=\"navItem\"\n                        [disableActions]=\"isNavigationBtnDisabled()\"\n                        [dropdownAlign]=\"kitCollapsedListDropdownAlign.END\"\n                        (selectItem)=\"scrollToSection($event)\" />\n  </div>\n\n  <div #content\n       class=\"kit-scroll-navigation-content\"\n       (scroll)=\"onSectionScroll()\">\n    @for (item of sections?.toArray(); track item) {\n      <div #sectionContent\n           class=\"kit-scroll-navigation-section\">\n        <ng-container *ngTemplateOutlet=\"item.sectionTemplate\" />\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template #navItem let-item>\n  <div kitBadge\n       [kitBadgeVisible]=\"item.badgeCount\"\n       [kitBadgeText]=\"item.badgeCount\"\n       [kitBadgeTheme]=\"kitBadgeTheme.DANGER\">\n    <kit-button kitTooltip\n                kitTooltipFilter='.nav-item'\n                class=\"nav-item\"\n                [active]=\"currentVisibleItem?.value === item.value\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.SMALL\"\n                [icon]=\"item.icon\"\n                [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                [state]=\"item.state ?? kitButtonState.DEFAULT\"\n                [label]=\"item.text\"\n                [title]=\"item.tooltipText\"\n                [disabled]=\"isNavigationBtnDisabled()\"\n                [kitTooltipVisible]=\"!!item.tooltipText\"\n    ></kit-button>\n  </div>\n</ng-template>\n", styles: [".kit-scroll-navigation{display:flex;flex-direction:column;height:100%}.kit-scroll-navigation-items{padding-bottom:27px}.kit-scroll-navigation .nav-item.active .kit-button .k-button{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.kit-scroll-navigation-content{display:flex;flex-direction:column;flex:1;gap:20px;position:relative;overflow-y:auto}.kit-scroll-navigation-section{flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitCollapsedListComponent, selector: "kit-collapsed-list", inputs: ["itemList", "lineHeight", "dropdownDefaultValueText", "gap", "disableActions", "itemTemplate", "dropdownFooterTemplate", "dropdownItemTemplate", "dropdownNoDataTemplate", "appendTo", "alwaysShowDropdown", "dropdownAlign"], outputs: ["selectItem"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "directive", type: KitBadgeDirective, selector: "[kitBadge]", inputs: ["kitBadgeText", "kitBadgeTheme", "kitBadgeVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }