@edm-sdui/sdui 1.0.32 → 1.0.33

package/fesm2022/edm-sdui-sdui.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Optional, Inject, Injectable, Injector, Input, Component, EventEmitter, Output, createComponent, HostListener, Directive, ViewChild, inject, NgModule, ChangeDetectionStrategy } from '@angular/core';
+import { InjectionToken, Optional, Inject, Injectable, Injector, Input, Component, EventEmitter, Output, createComponent, HostListener, Directive, ViewChild, inject, NgModule, ChangeDetectionStrategy, HostBinding } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$3 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import { map, BehaviorSubject, finalize, catchError, of } from 'rxjs';
+import { map, BehaviorSubject, finalize, catchError, of, fromEvent, Subject } from 'rxjs';
 import * as i1 from '@angular/common/http';
-import { tap } from 'rxjs/operators';
+import { tap, auditTime, startWith, map as map$1, distinctUntilChanged } from 'rxjs/operators';
 import * as i1$2 from '@angular/platform-browser';
 
 var UIScreenIdentifier;
@@ -43,6 +43,7 @@ var UIComponentType;
     UIComponentType["PICKER_ITEM"] = "PICKER_ITEM";
     // tag
     UIComponentType["TAG"] = "TAG";
+    UIComponentType["TAGS_ROW"] = "TAGS_ROW";
     // profile
     UIComponentType["PROFILE_BUTTON"] = "PROFILE_BUTTON";
     // progress bar
@@ -168,7 +169,8 @@ class UIScreenService {
                 ? json.components.map((c) => this.mapToUIComponent(c))
                 : [],
             element: json.element ? this.mapToUIElement(json.element) : null,
-            excluded_platforms: json.excluded_platforms
+            excluded_platforms: json.excluded_platforms,
+            tags: json.tags,
         };
     }
     mapToUIElement(json) {
@@ -391,6 +393,7 @@ const componentMapping = {
     [UIComponentType.PICKER_ITEM]: () => Promise.resolve().then(function () { return pickerItem_component; }).then((m) => m.PickerItemComponent),
     // tag
     [UIComponentType.TAG]: () => Promise.resolve().then(function () { return tag_component; }).then((m) => m.TagComponent),
+    [UIComponentType.TAGS_ROW]: () => Promise.resolve().then(function () { return tagsRow_component; }).then((m) => m.TagsRowComponent),
     // profile
     [UIComponentType.PROFILE_BUTTON]: () => Promise.resolve().then(function () { return profileButton_component; }).then((m) => m.ProfileButtonComponent),
     // progress bar
@@ -556,7 +559,6 @@ class UIActionService {
     execute(action) {
         if (!action || !action.type)
             return;
-        console.log(action);
         switch (action.type) {
             case UIActionType.INTERNAL_URL:
                 if (action.url && isSduiUrl(action.url)) {
@@ -603,29 +605,43 @@ class UIActionService {
         }
     }
     scrollToAnchor(action) {
-        // Confluence: param = string para uso geral; aqui priorizamos param como id do elemento
         const raw = action.param || action.url || '';
         const targetId = String(raw).replace(/^#/, '').trim();
-        if (!targetId) {
-            console.warn('[UIActionService] ANCHOR sem destino informado');
+        if (!targetId)
             return;
-        }
         const el = document.getElementById(targetId);
-        if (!el) {
-            console.warn('[UIActionService] ANCHOR não encontrou elemento com id:', targetId);
+        if (!el)
+            return;
+        const target = el.querySelector('span');
+        const container = this.getScrollParent(target);
+        const isPage = container === document.documentElement ||
+            container === document.body ||
+            container === document.scrollingElement;
+        const isCanFix = document.querySelector('.tags-row--can-fix');
+        const OFFSET_TOP = isCanFix ? 140 : 180;
+        if (isPage) {
+            const top = target.getBoundingClientRect().top + window.scrollY - OFFSET_TOP;
+            window.scrollTo({ top, behavior: 'smooth' });
             return;
         }
-        try {
-            el.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
-        }
-        catch {
-            el.scrollIntoView();
-        }
-        // guarda o último anchor acessado (usado pelo app host para restaurar)
-        try {
-            sessionStorage.setItem('exploreLastAnchor', targetId);
-        }
-        catch { }
+        const top = target.getBoundingClientRect().top -
+            container.getBoundingClientRect().top +
+            container.scrollTop -
+            OFFSET_TOP;
+        container.scrollTo({ top, behavior: 'smooth' });
+    }
+    getScrollParent(el) {
+        let parent = el.parentElement;
+        while (parent) {
+            const style = getComputedStyle(parent);
+            const overflowY = style.overflowY;
+            const canScroll = (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') &&
+                parent.scrollHeight > parent.clientHeight;
+            if (canScroll)
+                return parent;
+            parent = parent.parentElement;
+        }
+        return document.scrollingElement || document.documentElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UIActionService, deps: [{ token: i1$3.Router }, { token: ModalService }, { token: UIActionHandlersService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UIActionService, providedIn: 'root' }); }
@@ -1532,6 +1548,15 @@ var UIColor;
     UIColor["TEXT_CHALLENGE_DISABLED"] = "text_challenge_disabled";
     UIColor["TEXT_CHALLENGE_MAIN"] = "text_challenge_main";
     UIColor["CHALLENGE_WAY"] = "challenge_way";
+    UIColor["AUX_TAG_EXPLORER_AUX"] = "aux_tag_explorer_aux";
+    UIColor["BT_TAG_EXPLORER_OFF"] = "bt_tag_explorer_off";
+    UIColor["BT_TAG_EXPLORER_ON"] = "bt_tag_explorer_on";
+    UIColor["FONT_BT_TAG_EXPLORER_OFF"] = "font_bt_tag_explorer_off";
+    UIColor["TAG_EXPLORER_HIGHLIGHT"] = "tag_explorer_highlight";
+    UIColor["FONT_BT_TAG_EXPLORER_ON"] = "font_bt_tag_explorer_on";
+    UIColor["BT_EXPLORER"] = "bt_explorer";
+    UIColor["BG_EXPLORER"] = "bg_explorer";
+    UIColor["FONT_BT_EXPLORER"] = "font_bt_explorer";
 })(UIColor || (UIColor = {}));
 
 const colorMapping = {
@@ -1662,6 +1687,15 @@ const colorMapping = {
     [UIColor.TEXT_CHALLENGE_DISABLED]: 'var(--text-challenge-disabled)',
     [UIColor.TEXT_CHALLENGE_MAIN]: 'var(--text-challenge-main)',
     [UIColor.CHALLENGE_WAY]: 'var(--challenge-way)',
+    [UIColor.AUX_TAG_EXPLORER_AUX]: 'var(--aux-tag-explorer-aux)',
+    [UIColor.BT_TAG_EXPLORER_OFF]: 'var(--bt-tag-explorer-off)',
+    [UIColor.BT_TAG_EXPLORER_ON]: 'var(--bt-tag-explorer-on)',
+    [UIColor.FONT_BT_TAG_EXPLORER_OFF]: 'var(--font-bt-tag-explorer-off)',
+    [UIColor.TAG_EXPLORER_HIGHLIGHT]: 'var(--tag-explorer-highlight)',
+    [UIColor.FONT_BT_TAG_EXPLORER_ON]: 'var(--font-bt-tag-explorer-on)',
+    [UIColor.BT_EXPLORER]: 'var(--bt-explorer)',
+    [UIColor.BG_EXPLORER]: 'var(--bg-explorer)',
+    [UIColor.FONT_BT_EXPLORER]: 'var(--font-bt-explorer)',
 };
 
 var UIPaddingLevel;
@@ -1873,8 +1907,8 @@ var UISize;
 const sizeMappingHeight = {
     [UISize.THUMB_1]: '56px',
     [UISize.THUMB_2]: '40px',
-    [UISize.THUMB_3]: '135px',
-    [UISize.THUMB_4]: '218px',
+    [UISize.THUMB_3]: '118px',
+    [UISize.THUMB_4]: '169px',
     [UISize.ASSET_1]: '26px',
     [UISize.ASSET_2]: '16px',
     [UISize.ASSET_3]: '80px',
@@ -1883,14 +1917,14 @@ const sizeMappingHeight = {
     [UISize.ASSET_6]: '20px',
     [UISize.ASSET_7]: '22px',
     [UISize.ASSET_8]: '24px',
-    [UISize.CARD_1]: '240px',
-    [UISize.CARD_2]: '218px',
+    [UISize.CARD_1]: '201px',
+    [UISize.CARD_2]: '333px',
 };
 const sizeMappingWidth = {
     [UISize.THUMB_1]: '100px',
     [UISize.THUMB_2]: '105px',
-    [UISize.THUMB_3]: '240px',
-    [UISize.THUMB_4]: '150px',
+    [UISize.THUMB_3]: '210px',
+    [UISize.THUMB_4]: '300px',
     [UISize.ASSET_1]: '26px',
     [UISize.ASSET_2]: '16px',
     [UISize.ASSET_3]: '80px',
@@ -1899,8 +1933,8 @@ const sizeMappingWidth = {
     [UISize.ASSET_6]: '20px',
     [UISize.ASSET_7]: '22px',
     [UISize.ASSET_8]: '24px',
-    [UISize.CARD_1]: '240px',
-    [UISize.CARD_2]: '309px',
+    [UISize.CARD_1]: '210px',
+    [UISize.CARD_2]: '300px',
 };
 
 class UIViewDirective {
@@ -2400,6 +2434,7 @@ class LabelComponent {
         }
     }
     applyElement(element) {
+        let resolvedLineHeight = null;
         if (element.textColor) {
             const color = colorMapping[element.textColor];
             this.renderer.setStyle(this.spanElementRef.nativeElement, 'color', color);
@@ -2413,6 +2448,7 @@ class LabelComponent {
             this.renderer.setStyle(this.spanElementRef.nativeElement, 'font-weight', fontWeight);
             this.renderer.setStyle(this.spanElementRef.nativeElement, 'font-size', fontSize);
             this.renderer.setStyle(this.spanElementRef.nativeElement, 'line-height', lineHeight);
+            resolvedLineHeight = lineHeight;
         }
         const normalizedMaxLinesRaw = element.maxLines ?? 1;
         const normalizedMaxLines = Number(normalizedMaxLinesRaw);
@@ -2424,6 +2460,12 @@ class LabelComponent {
             this.renderer.setStyle(this.spanElementRef.nativeElement, 'white-space', 'normal');
             this.renderer.setStyle(this.spanElementRef.nativeElement, 'word-break', 'break-word');
             this.renderer.setStyle(this.spanElementRef.nativeElement, '-webkit-line-clamp', normalizedMaxLines);
+            if (resolvedLineHeight) {
+                const minHeight = this.getMinHeight(resolvedLineHeight, normalizedMaxLines);
+                if (minHeight) {
+                    this.renderer.setStyle(this.spanElementRef.nativeElement, 'min-height', minHeight);
+                }
+            }
         }
         if (element.opacity) {
             const opacity = element.opacity;
@@ -2447,6 +2489,16 @@ class LabelComponent {
             }
         }
     }
+    getMinHeight(lineHeight, lines) {
+        if (lines <= 0)
+            return null;
+        const pxMatch = /^(\d+(?:\.\d+)?)px$/.exec(lineHeight);
+        if (pxMatch) {
+            const pxValue = parseFloat(pxMatch[1]) * lines;
+            return `${pxValue}px`;
+        }
+        return `calc(${lineHeight} * ${lines})`;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LabelComponent, deps: [{ token: 'uiComponent' }, { token: i0.Renderer2 }, { token: FontSizeMappingService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: LabelComponent, isStandalone: false, selector: "edm-sdui-label", viewQueries: [{ propertyName: "spanElementRef", first: true, predicate: ["spanElement"], descendants: true }], ngImport: i0, template: "<span #spanElement [edmSduiView]=\"uiComponent.element\" *ngIf=\"uiComponent\">{{\n  uiComponent.element?.label ?? \"\"\n}}</span>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }] }); }
 }
@@ -2557,18 +2609,23 @@ class ButtonComponent {
         if (element.textStyle) {
             const textStyleMappingFontSize = this.fontSizeMappingService.getMapping();
             const fontSize = textStyleMappingFontSize[element.textStyle];
+            const fontWeight = textStyleMappingFontWeight[element.textStyle];
+            const lineHeight = textStyleMappingLineHeight[element.textStyle];
+            //TODO: Substituir por classe no futuro.
+            this.renderer.setStyle(this.buttonElementRef.nativeElement, 'font-weight', fontWeight);
             this.renderer.setStyle(this.buttonElementRef.nativeElement, 'font-size', fontSize);
+            this.renderer.setStyle(this.buttonElementRef.nativeElement, 'line-height', lineHeight);
         }
     }
     getAssetPath(asset) {
         return assetMapping[asset];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ButtonComponent, deps: [{ token: 'uiComponent' }, { token: i0.Renderer2 }, { token: FontSizeMappingService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ButtonComponent, isStandalone: false, selector: "edm-sdui-button", viewQueries: [{ propertyName: "buttonElementRef", first: true, predicate: ["buttonElement"], descendants: true }], ngImport: i0, template: "<button #buttonElement [edmSduiView]=\"uiComponent.element\" *ngIf=\"uiComponent\">\n  <img *ngIf=\"uiComponent.element.asset\" [src]=\"getAssetPath(uiComponent.element.asset)\" alt=\"\">\n  {{ uiComponent.element.label }}\n</button>\n", styles: [":host{display:contents}button{border:none;white-space:nowrap;background-color:unset}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ButtonComponent, isStandalone: false, selector: "edm-sdui-button", viewQueries: [{ propertyName: "buttonElementRef", first: true, predicate: ["buttonElement"], descendants: true }], ngImport: i0, template: "<button #buttonElement [edmSduiView]=\"uiComponent.element\" *ngIf=\"uiComponent\">\n  <img *ngIf=\"uiComponent.element.asset\" [src]=\"getAssetPath(uiComponent.element.asset)\" alt=\"\">\n  {{ uiComponent.element.label }}\n</button>\n", styles: [":host{display:contents}button{border:none;white-space:nowrap;background-color:unset;width:fit-content}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'edm-sdui-button', standalone: false, template: "<button #buttonElement [edmSduiView]=\"uiComponent.element\" *ngIf=\"uiComponent\">\n  <img *ngIf=\"uiComponent.element.asset\" [src]=\"getAssetPath(uiComponent.element.asset)\" alt=\"\">\n  {{ uiComponent.element.label }}\n</button>\n", styles: [":host{display:contents}button{border:none;white-space:nowrap;background-color:unset}\n"] }]
+            args: [{ selector: 'edm-sdui-button', standalone: false, template: "<button #buttonElement [edmSduiView]=\"uiComponent.element\" *ngIf=\"uiComponent\">\n  <img *ngIf=\"uiComponent.element.asset\" [src]=\"getAssetPath(uiComponent.element.asset)\" alt=\"\">\n  {{ uiComponent.element.label }}\n</button>\n", styles: [":host{display:contents}button{border:none;white-space:nowrap;background-color:unset;width:fit-content}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: ['uiComponent']
@@ -2707,24 +2764,168 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
+class ScrollSpyService {
+    observeActiveId(options) {
+        const container = this.resolveContainer(options.container);
+        const anchorSelector = options.anchorSelector ?? '[data-anchor-target]';
+        const throttleMs = options.throttleMs ?? 16;
+        const debug = !!options.debug;
+        const scrollTarget = this.isPageContainer(container) ? window : container;
+        const getOffsetTop = options.getOffsetTop ?? (() => 0);
+        const resolveId = options.resolveId ??
+            ((anchorEl) => anchorEl.closest('[id]')?.id ?? null);
+        return fromEvent(scrollTarget, 'scroll', { passive: true }).pipe(auditTime(throttleMs), startWith(null), tap(() => {
+            if (debug)
+                console.log('[ScrollSpy] event', { scrollTop: container.scrollTop });
+        }), map$1(() => {
+            const anchors = Array.from(container.querySelectorAll(anchorSelector));
+            if (debug)
+                console.log('[ScrollSpy] anchors found', anchors.length);
+            if (!anchors.length)
+                return null;
+            const offsetTop = getOffsetTop({ container });
+            const isPage = this.isPageContainer(container);
+            const containerRect = isPage
+                ? { top: 0, bottom: window.innerHeight }
+                : container.getBoundingClientRect();
+            const topLine = offsetTop;
+            let bestAnchor = null;
+            let bestScore = Number.POSITIVE_INFINITY;
+            for (const a of anchors) {
+                const r = a.getBoundingClientRect();
+                const isVisible = r.bottom > containerRect.top + offsetTop &&
+                    r.top < containerRect.bottom;
+                if (!isVisible)
+                    continue;
+                const dist = r.top - topLine; // 0 = colado no topo útil
+                // Prefer anchors próximos do topo útil; leve preferência para quem já passou do topo.
+                const score = Math.abs(dist) + (dist > 0 ? 10 : 0);
+                if (debug) {
+                    console.log('[ScrollSpy] anchor candidate', {
+                        id: a.id || a.closest('[id]')?.id,
+                        top: r.top,
+                        bottom: r.bottom,
+                        dist,
+                        score,
+                        visible: isVisible,
+                    });
+                }
+                if (score < bestScore) {
+                    bestScore = score;
+                    bestAnchor = a;
+                }
+            }
+            if (!bestAnchor) {
+                if (debug)
+                    console.log('[ScrollSpy] no visible anchors, returning null');
+                return null;
+            }
+            const resolved = resolveId(bestAnchor);
+            if (debug)
+                console.log('[ScrollSpy] resolved active id', resolved, 'from', bestAnchor);
+            return resolved;
+        }), distinctUntilChanged());
+    }
+    /** Ajuda: encontra o scroll parent real de um elemento */
+    getScrollParent(el) {
+        let parent = el.parentElement;
+        while (parent) {
+            const style = getComputedStyle(parent);
+            const overflowY = style.overflowY;
+            const canScroll = (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') &&
+                parent.scrollHeight > parent.clientHeight;
+            if (canScroll)
+                return parent;
+            parent = parent.parentElement;
+        }
+        return document.scrollingElement || document.documentElement;
+    }
+    isPageContainer(container) {
+        return (container === document.documentElement ||
+            container === document.body ||
+            container === document.scrollingElement);
+    }
+    resolveContainer(container) {
+        if (typeof container !== 'string')
+            return container;
+        const found = document.querySelector(container);
+        if (!found) {
+            throw new Error(`[ScrollSpyService] Container não encontrado: ${container}`);
+        }
+        return found;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ScrollSpyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ScrollSpyService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ScrollSpyService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class TagComponent {
-    constructor(uiComponent, renderer, fontSizeMappingService) {
+    static { this.scrollSpyInitialized = false; }
+    static { this.scrollSpy$ = null; }
+    static { this.scrollSpySub = null; }
+    static { this.scrollSpyInitTries = 0; }
+    static { this.scrollSpyContainer = null; }
+    static { this.activeId = null; }
+    constructor(uiComponent, renderer, fontSizeMappingService, scrollSpy) {
         this.uiComponent = uiComponent;
         this.renderer = renderer;
         this.fontSizeMappingService = fontSizeMappingService;
+        this.scrollSpy = scrollSpy;
+        this.destroy$ = new Subject();
     }
     ngOnInit() {
     }
     ngAfterViewInit() {
         if (this.uiComponent.element) {
             this.applyElement(this.uiComponent.element);
-        }
-        if (this.uiComponent.element) {
             this.applyLabelElement(this.uiComponent.element);
+            // Map: tag.action.param -> section div id
+            const actionParam = this.uiComponent?.element?.action?.param;
+            if (actionParam != null && this.tagElementRef?.nativeElement) {
+                this.renderer.setAttribute(this.tagElementRef.nativeElement, 'data-tag', String(actionParam));
+            }
+            else {
+                console.warn('[TagComponent] tag without action.param', this.uiComponent?.element);
+            }
+            // Reaplica seleção se este tag corresponde ao ativo atual.
+            this.syncSelectionState();
+            // IMPORTANT: TagComponent renders once per tag.
+            // We initialize the scroll observer only once, but we MUST NOT tie it to the first instance lifecycle,
+            // because the first instance may be destroyed (e.g. rerender) and the subscription would die.
+            this.initScrollSpyOnce();
         }
     }
     applyElement(element) {
     }
+    markSelectedTag(id) {
+        const tags = Array.from(document.querySelectorAll('.tag'));
+        const dataTags = tags.map(t => t.getAttribute('data-tag'));
+        console.log('[TagComponent] markSelectedTag', { id, dataTags });
+        TagComponent.activeId = id;
+        for (const t of tags)
+            t.classList.remove('tag--selected');
+        const active = document.querySelector(`.tag[data-tag="${CSS.escape(id)}"]`);
+        if (!active) {
+            console.warn('[TagComponent] active tag not found for id', id);
+            return;
+        }
+        active.classList.add('tag--selected');
+        console.log('[TagComponent] tag--selected applied to', active);
+    }
+    syncSelectionState() {
+        const dataTag = this.tagElementRef?.nativeElement?.getAttribute('data-tag');
+        if (!dataTag)
+            return;
+        if (TagComponent.activeId && TagComponent.activeId === dataTag) {
+            this.tagElementRef.nativeElement.classList.add('tag--selected');
+        }
+        else {
+            this.tagElementRef.nativeElement.classList.remove('tag--selected');
+        }
+    }
     applyLabelElement(element) {
         if (element.textColor) {
             const color = colorMapping[element.textColor];
@@ -2739,16 +2940,94 @@ class TagComponent {
         }
         this.renderer.setStyle(this.tagElementRef.nativeElement, 'height', sizeMappingHeight[UISize.ASSET_8]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TagComponent, deps: [{ token: 'uiComponent' }, { token: i0.Renderer2 }, { token: FontSizeMappingService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TagComponent, isStandalone: false, selector: "edm-sdui-tag", viewQueries: [{ propertyName: "tagElementRef", first: true, predicate: ["tagElement"], descendants: true }, { propertyName: "tagNameElementRef", first: true, predicate: ["tagNameElement"], descendants: true }], ngImport: i0, template: "<div class=\"tag\" #tagElement *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\">\n    <span class=\"tag-name\" #tagNameElement>{{ uiComponent.element?.label ?? '' }}</span>\n</div>", styles: [":host{display:contents}.tag{padding:4px 8px;display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }] }); }
+    initScrollSpyOnce() {
+        // Already subscribed
+        if (TagComponent.scrollSpySub) {
+            const currentContainer = this.resolveScrollContainer();
+            const stale = !TagComponent.scrollSpyContainer?.isConnected || (currentContainer && TagComponent.scrollSpyContainer !== currentContainer);
+            if (!stale)
+                return;
+            try {
+                TagComponent.scrollSpySub.unsubscribe();
+            }
+            catch { }
+            TagComponent.scrollSpySub = null;
+            TagComponent.scrollSpy$ = null;
+            TagComponent.scrollSpyContainer = null;
+            TagComponent.scrollSpyInitialized = false;
+        }
+        // Ensure container exists; TagComponent can render before the scroll container is in the DOM.
+        const containerExists = !!this.resolveScrollContainer();
+        if (!containerExists) {
+            TagComponent.scrollSpyInitTries++;
+            if (TagComponent.scrollSpyInitTries <= 30) {
+                requestAnimationFrame(() => this.initScrollSpyOnce());
+            }
+            else {
+                console.warn('[TagComponent] ScrollSpy: .scrollable-container not found after retries');
+            }
+            return;
+        }
+        try {
+            TagComponent.scrollSpyInitialized = true;
+            const currentContainer = this.resolveScrollContainer();
+            TagComponent.scrollSpy$ = this.scrollSpy.observeActiveId({
+                container: currentContainer,
+                anchorSelector: '[data-anchor-target], .column[id]',
+                getOffsetTop: () => (document.querySelector('.tags-row--can-fix') ? 140 : 180),
+                resolveId: (anchor) => {
+                    const section = anchor.closest('[data-anchor-target]');
+                    if (section?.id)
+                        return section.id;
+                    if (anchor.id)
+                        return anchor.id;
+                    return anchor.closest('[id]')?.id || null;
+                },
+                debug: false,
+            });
+            TagComponent.scrollSpyContainer = currentContainer;
+            TagComponent.scrollSpySub = TagComponent.scrollSpy$.subscribe({
+                next: (activeId) => {
+                    console.log('[TagComponent] ScrollSpy next', activeId);
+                    if (!activeId)
+                        return;
+                    this.markSelectedTag(activeId);
+                },
+                error: (err) => {
+                    console.error('[TagComponent] ScrollSpy subscription error', err);
+                },
+            });
+        }
+        catch (e) {
+            console.error('[TagComponent] ScrollSpy init failed', e);
+        }
+    }
+    resolveScrollContainer() {
+        const explicit = document.querySelector('.scrollable-container');
+        if (explicit && explicit.scrollHeight > explicit.clientHeight) {
+            return explicit;
+        }
+        const anchorSample = document.querySelector('.column[id]') ||
+            document.querySelector('[data-anchor-target]');
+        if (anchorSample) {
+            return this.scrollSpy.getScrollParent(anchorSample);
+        }
+        return document.scrollingElement || document.documentElement;
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TagComponent, deps: [{ token: 'uiComponent' }, { token: i0.Renderer2 }, { token: FontSizeMappingService }, { token: ScrollSpyService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TagComponent, isStandalone: false, selector: "edm-sdui-tag", viewQueries: [{ propertyName: "tagElementRef", first: true, predicate: ["tagElement"], descendants: true }, { propertyName: "tagNameElementRef", first: true, predicate: ["tagNameElement"], descendants: true }], ngImport: i0, template: "<div class=\"tag\" #tagElement *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\">\n    <span class=\"tag-name\" #tagNameElement>{{ uiComponent.element?.label ?? '' }}</span>\n</div>\n", styles: [":host{display:contents}.tag{display:inline-flex;align-items:center;gap:8px;padding:14px 16px;border:.5px solid var(--tag-explorer-aux);cursor:pointer;font-size:16px}.tag--square{border-radius:4px}.tag--rounded{border-radius:999px}.tag--selected{border-color:var(--tag-explorer-highlight);background-color:var(--bt-tag-explorer-on);background-origin:border-box}.tag-name{font-weight:600;color:var(--font-bt-tag-explorer-on);font-size:15px;line-height:17.25px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'edm-sdui-tag', template: "<div class=\"tag\" #tagElement *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\">\n    <span class=\"tag-name\" #tagNameElement>{{ uiComponent.element?.label ?? '' }}</span>\n</div>", styles: [":host{display:contents}.tag{padding:4px 8px;display:flex;align-items:center}\n"] }]
+            args: [{ standalone: false, selector: 'edm-sdui-tag', template: "<div class=\"tag\" #tagElement *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\">\n    <span class=\"tag-name\" #tagNameElement>{{ uiComponent.element?.label ?? '' }}</span>\n</div>\n", styles: [":host{display:contents}.tag{display:inline-flex;align-items:center;gap:8px;padding:14px 16px;border:.5px solid var(--tag-explorer-aux);cursor:pointer;font-size:16px}.tag--square{border-radius:4px}.tag--rounded{border-radius:999px}.tag--selected{border-color:var(--tag-explorer-highlight);background-color:var(--bt-tag-explorer-on);background-origin:border-box}.tag-name{font-weight:600;color:var(--font-bt-tag-explorer-on);font-size:15px;line-height:17.25px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: ['uiComponent']
-                }] }, { type: i0.Renderer2 }, { type: FontSizeMappingService }], propDecorators: { tagElementRef: [{
+                }] }, { type: i0.Renderer2 }, { type: FontSizeMappingService }, { type: ScrollSpyService }], propDecorators: { tagElementRef: [{
                 type: ViewChild,
                 args: ['tagElement']
             }], tagNameElementRef: [{
@@ -3452,6 +3731,89 @@ var progressBar_component = /*#__PURE__*/Object.freeze({
     ProgressBarComponent: ProgressBarComponent
 });
 
+class TagsRowComponent {
+    constructor(uiComponent, injector, hostRef, cdr) {
+        this.uiComponent = uiComponent;
+        this.injector = injector;
+        this.hostRef = hostRef;
+        this.cdr = cdr;
+        this.isFixed = false;
+        this.canFix = false;
+        this.tagComponent = TagComponent;
+    }
+    get tags() {
+        return this.uiComponent.tags ?? [];
+    }
+    trackByLabel(index, tag) {
+        return tag.label ?? index;
+    }
+    createInjector(tag) {
+        const component = {
+            type: UIComponentType.TAG,
+            element: tag,
+        };
+        return Injector.create({
+            providers: [{ provide: 'uiComponent', useValue: component }],
+            parent: this.injector,
+        });
+    }
+    ngAfterViewInit() {
+        requestAnimationFrame(() => {
+            this.updateFixedState();
+            this.cdr.detectChanges();
+        });
+    }
+    onWindowScroll() {
+        this.updateFixedState();
+    }
+    updateFixedState() {
+        const offset = this.getStickyOffset();
+        const rect = this.hostRef.nativeElement.getBoundingClientRect();
+        if (!this.initialTop) {
+            this.initialTop = rect.top + window.scrollY;
+        }
+        if (!this.hostMinHeight) {
+            this.hostMinHeight = rect.height;
+        }
+        const shouldFix = window.scrollY + offset >= (this.initialTop ?? 0);
+        this.canFix = shouldFix;
+        this.isFixed = shouldFix;
+    }
+    getStickyOffset() {
+        const variable = getComputedStyle(document.documentElement).getPropertyValue('--sdui-sticky-offset');
+        const parsed = parseInt(variable || '', 10);
+        if (!isNaN(parsed))
+            return parsed;
+        return 72; // fallback to navbar height
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TagsRowComponent, deps: [{ token: 'uiComponent' }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TagsRowComponent, isStandalone: false, selector: "edm-sdui-tags-row", host: { listeners: { "window:scroll": "onWindowScroll()" }, properties: { "class.tags-row--fixed": "this.isFixed", "class.tags-row--can-fix": "this.canFix", "style.min-height.px": "this.hostMinHeight" } }, ngImport: i0, template: "<div class=\"tags-row\" [class.tags-row-fixed]=\"isFixed\" *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\">\n  <ng-container *ngFor=\"let tag of tags; trackBy: trackByLabel\">\n    <ng-container\n      *ngComponentOutlet=\"tagComponent; injector: createInjector(tag)\"\n    ></ng-container>\n  </ng-container>\n</div>\n", styles: [":host{display:block;width:100%;box-sizing:border-box;padding:0 var(--sdui-header-padding, 12px);margin-top:var(--sdui-header-margin-top, 12px)}.tags-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 0;background-color:inherit;justify-content:flex-start;box-sizing:border-box;width:100%}:host.tags-row--fixed{position:fixed;top:53px;left:35px;right:0;z-index:120;box-sizing:border-box}:host.tags-row--fixed .tags-row{padding:6px 0}.tags-row-fixed{width:100%;height:60px}:host.tags-row--can-fix{background:var(--bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 4px 16px #0003}\n"], dependencies: [{ kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UIViewDirective, selector: "[edmSduiView]", inputs: ["edmSduiView", "disableClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TagsRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'edm-sdui-tags-row', standalone: false, template: "<div class=\"tags-row\" [class.tags-row-fixed]=\"isFixed\" *ngIf=\"uiComponent\" [edmSduiView]=\"uiComponent.element\">\n  <ng-container *ngFor=\"let tag of tags; trackBy: trackByLabel\">\n    <ng-container\n      *ngComponentOutlet=\"tagComponent; injector: createInjector(tag)\"\n    ></ng-container>\n  </ng-container>\n</div>\n", styles: [":host{display:block;width:100%;box-sizing:border-box;padding:0 var(--sdui-header-padding, 12px);margin-top:var(--sdui-header-margin-top, 12px)}.tags-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 0;background-color:inherit;justify-content:flex-start;box-sizing:border-box;width:100%}:host.tags-row--fixed{position:fixed;top:53px;left:35px;right:0;z-index:120;box-sizing:border-box}:host.tags-row--fixed .tags-row{padding:6px 0}.tags-row-fixed{width:100%;height:60px}:host.tags-row--can-fix{background:var(--bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 4px 16px #0003}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['uiComponent']
+                }] }, { type: i0.Injector }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { isFixed: [{
+                type: HostBinding,
+                args: ['class.tags-row--fixed']
+            }], canFix: [{
+                type: HostBinding,
+                args: ['class.tags-row--can-fix']
+            }], hostMinHeight: [{
+                type: HostBinding,
+                args: ['style.min-height.px']
+            }], onWindowScroll: [{
+                type: HostListener,
+                args: ['window:scroll']
+            }] } });
+
+var tagsRow_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    TagsRowComponent: TagsRowComponent
+});
+
 class SduiModule {
     static forRoot(config) {
         return {
@@ -3491,6 +3853,7 @@ class SduiModule {
             ButtonComponent,
             ImageComponent,
             TagComponent,
+            TagsRowComponent,
             SearchBarComponent,
             SearchBarDismissComponent,
             MediaTypeComponent,
@@ -3530,6 +3893,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         ButtonComponent,
                         ImageComponent,
                         TagComponent,
+                        TagsRowComponent,
                         SearchBarComponent,
                         SearchBarDismissComponent,
                         MediaTypeComponent,