@wizco/fenixds-ngx 17.10.0 → 17.11.1

package/esm2022/lib/sub-tabs/sub-tabs.component.mjs

@@ -0,0 +1,109 @@
+import { Component, EventEmitter, HostListener, Input, Output, ViewEncapsulation, } from '@angular/core';
+import * as i0 from "@angular/core";
+export class SubTabsComponent {
+    el;
+    selectedIndex = 0;
+    tabChange = new EventEmitter();
+    indicator;
+    resizeObserver;
+    constructor(el) {
+        this.el = el;
+    }
+    ngAfterContentInit() {
+        this.indicator = document.createElement('div');
+        this.indicator.className = 'wco-sub-tabs__indicator';
+        this.el.nativeElement.prepend(this.indicator);
+        setTimeout(() => {
+            this.reserveBoldWidth();
+            this.indicator.style.transition = 'none';
+            this.applySelection(this.selectedIndex, false);
+            requestAnimationFrame(() => requestAnimationFrame(() => {
+                this.indicator.style.transition = '';
+            }));
+        }, 0);
+        this.resizeObserver = new ResizeObserver(() => {
+            this.refreshIndicator();
+        });
+        this.resizeObserver.observe(this.el.nativeElement);
+    }
+    ngOnChanges(changes) {
+        if (changes['selectedIndex'] && !changes['selectedIndex'].firstChange) {
+            this.applySelection(this.selectedIndex, false);
+        }
+    }
+    onClick(event) {
+        const items = this.getItems();
+        const target = event.target;
+        for (let i = 0; i < items.length; i++) {
+            if (items[i] === target || items[i].contains(target)) {
+                this.applySelection(i, true);
+                break;
+            }
+        }
+    }
+    getItems() {
+        return Array.from(this.el.nativeElement.children).filter((c) => !c.classList.contains('wco-sub-tabs__indicator'));
+    }
+    reserveBoldWidth() {
+        const items = this.getItems();
+        const host = this.el.nativeElement;
+        items.forEach((item) => {
+            const clone = item.cloneNode(true);
+            clone.style.cssText = `
+        font-weight: 600;
+        visibility: hidden;
+        position: absolute;
+        pointer-events: none;
+        white-space: nowrap;
+      `;
+            host.appendChild(clone);
+            const boldWidth = clone.offsetWidth;
+            host.removeChild(clone);
+            item.style.minWidth = boldWidth + 'px';
+        });
+    }
+    applySelection(index, emit) {
+        const items = this.getItems();
+        if (!items.length)
+            return;
+        const clamped = Math.max(0, Math.min(index, items.length - 1));
+        this.selectedIndex = clamped;
+        items.forEach((item, i) => {
+            item.classList.toggle('wco-subtab-selected', i === clamped);
+        });
+        this.moveIndicator(items[clamped]);
+        if (emit) {
+            this.tabChange.emit(clamped);
+        }
+    }
+    refreshIndicator() {
+        const items = this.getItems();
+        const selected = items[this.selectedIndex];
+        if (selected) {
+            this.moveIndicator(selected);
+        }
+    }
+    moveIndicator(element) {
+        if (!this.indicator)
+            return;
+        this.el.nativeElement.style.setProperty('--subtab-left', element.offsetLeft + 'px');
+        this.el.nativeElement.style.setProperty('--subtab-width', element.offsetWidth + 'px');
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubTabsComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SubTabsComponent, isStandalone: true, selector: "wco-sub-tabs", inputs: { selectedIndex: "selectedIndex" }, outputs: { tabChange: "tabChange" }, host: { listeners: { "click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: ["wco-sub-tabs{display:inline-flex;position:relative;background:#e5e5e5;border-radius:8px;padding:4px}wco-sub-tabs>.wco-sub-tabs__indicator{position:absolute;top:4px;bottom:4px;left:var(--subtab-left, 0px);width:var(--subtab-width, 0px);background:#fff;border-radius:6px;box-shadow:0 1px 3px #0000001f;pointer-events:none;z-index:0;transition:left .22s cubic-bezier(.645,.045,.355,1),width .15s cubic-bezier(.645,.045,.355,1)}wco-sub-tabs>*:not(.wco-sub-tabs__indicator){position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:6px 12px;background:transparent;border:none;cursor:pointer;font-size:var(--wco-font-size-xs);font-weight:500;color:var(--wco-color-neutral-700);border-radius:6px;white-space:nowrap;line-height:1.4;transition:color .2s ease}wco-sub-tabs>*:not(.wco-sub-tabs__indicator):focus-visible{outline:2px solid var(--wco-color-primary-400);outline-offset:-2px}wco-sub-tabs>*.wco-subtab-selected{color:var(--wco-color-neutral-900);font-weight:600}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wco-sub-tabs', standalone: true, imports: [], template: `<ng-content></ng-content>`, encapsulation: ViewEncapsulation.None, styles: ["wco-sub-tabs{display:inline-flex;position:relative;background:#e5e5e5;border-radius:8px;padding:4px}wco-sub-tabs>.wco-sub-tabs__indicator{position:absolute;top:4px;bottom:4px;left:var(--subtab-left, 0px);width:var(--subtab-width, 0px);background:#fff;border-radius:6px;box-shadow:0 1px 3px #0000001f;pointer-events:none;z-index:0;transition:left .22s cubic-bezier(.645,.045,.355,1),width .15s cubic-bezier(.645,.045,.355,1)}wco-sub-tabs>*:not(.wco-sub-tabs__indicator){position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:6px 12px;background:transparent;border:none;cursor:pointer;font-size:var(--wco-font-size-xs);font-weight:500;color:var(--wco-color-neutral-700);border-radius:6px;white-space:nowrap;line-height:1.4;transition:color .2s ease}wco-sub-tabs>*:not(.wco-sub-tabs__indicator):focus-visible{outline:2px solid var(--wco-color-primary-400);outline-offset:-2px}wco-sub-tabs>*.wco-subtab-selected{color:var(--wco-color-neutral-900);font-weight:600}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { selectedIndex: [{
+                type: Input
+            }], tabChange: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3ViLXRhYnMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWNvbXBvbmVudHMvc3JjL2xpYi9zdWItdGFicy9zdWItdGFicy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUVMLFNBQVMsRUFFVCxZQUFZLEVBQ1osWUFBWSxFQUNaLEtBQUssRUFHTCxNQUFNLEVBRU4saUJBQWlCLEdBQ2xCLE1BQU0sZUFBZSxDQUFDOztBQVV2QixNQUFNLE9BQU8sZ0JBQWdCO0lBVVA7SUFSYixhQUFhLEdBQUcsQ0FBQyxDQUFDO0lBR2xCLFNBQVMsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0lBRXRDLFNBQVMsQ0FBZTtJQUN4QixjQUFjLENBQWtCO0lBRXhDLFlBQW9CLEVBQTJCO1FBQTNCLE9BQUUsR0FBRixFQUFFLENBQXlCO0lBQUcsQ0FBQztJQUVuRCxrQkFBa0I7UUFDaEIsSUFBSSxDQUFDLFNBQVMsR0FBRyxRQUFRLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQy9DLElBQUksQ0FBQyxTQUFTLENBQUMsU0FBUyxHQUFHLHlCQUF5QixDQUFDO1FBQ3JELElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7UUFFOUMsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNkLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO1lBQ3hCLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLFVBQVUsR0FBRyxNQUFNLENBQUM7WUFDekMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsYUFBYSxFQUFFLEtBQUssQ0FBQyxDQUFDO1lBQy9DLHFCQUFxQixDQUFDLEdBQUcsRUFBRSxDQUFDLHFCQUFxQixDQUFDLEdBQUcsRUFBRTtnQkFDckQsSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFL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Q1osSUFBSSxXQUNQLEVBQUUsWUFDRCwyQkFBMkIsaUJBRXRCLGlCQUFpQixDQUFDLElBQUk7K0VBSTlCLGFBQWE7c0JBRG5CLEtBQUs7Z0JBSUMsU0FBUztzQkFEZixNQUFNO2dCQW1DUCxPQUFPO3NCQUROLFlBQVk7dUJBQUMsT0FBTyxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQWZ0ZXJDb250ZW50SW5pdCxcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBFdmVudEVtaXR0ZXIsXG4gIEhvc3RMaXN0ZW5lcixcbiAgSW5wdXQsXG4gIE9uQ2hhbmdlcyxcbiAgT25EZXN0cm95LFxuICBPdXRwdXQsXG4gIFNpbXBsZUNoYW5nZXMsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnd2NvLXN1Yi10YWJzJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW10sXG4gIHRlbXBsYXRlOiBgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PmAsXG4gIHN0eWxlVXJsczogWycuL3N1Yi10YWJzLmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIFN1YlRhYnNDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlckNvbnRlbnRJbml0LCBPbkNoYW5nZXMsIE9uRGVzdHJveSB7XG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBzZWxlY3RlZEluZGV4ID0gMDtcblxuICBAT3V0cHV0KClcbiAgcHVibGljIHRhYkNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8bnVtYmVyPigpO1xuXG4gIHByaXZhdGUgaW5kaWNhdG9yITogSFRNTEVsZW1lbnQ7XG4gIHByaXZhdGUgcmVzaXplT2JzZXJ2ZXI/OiBSZXNpemVPYnNlcnZlcjtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50Pikge31cblxuICBuZ0FmdGVyQ29udGVudEluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5pbmRpY2F0b3IgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdkaXYnKTtcbiAgICB0aGlzLmluZGljYXRvci5jbGFzc05hbWUgPSAnd2NvLXN1Yi10YWJzX19pbmRpY2F0b3InO1xuICAgIHRoaXMuZWwubmF0aXZlRWxlbWVudC5wcmVwZW5kKHRoaXMuaW5kaWNhdG9yKTtcblxuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgdGhpcy5yZXNlcnZlQm9sZFdpZHRoKCk7XG4gICAgICB0aGlzLmluZGljYXRvci5zdHlsZS50cmFuc2l0aW9uID0gJ25vbmUnO1xuICAgICAgdGhpcy5hcHBseVNlbGVjdGlvbih0aGlzLnNlbGVjdGVkSW5kZXgsIGZhbHNlKTtcbiAgICAgIHJlcXVlc3RBbmltYXRpb25GcmFtZSgoKSA9PiByZXF1ZXN0QW5pbWF0aW9uRnJhbWUoKCkgPT4ge1xuICAgICAgICB0aGlzLmluZGljYXRvci5zdHlsZS50cmFuc2l0aW9uID0gJyc7XG4gICAgICB9KSk7XG4gICAgfSwgMCk7XG5cbiAgICB0aGlzLnJlc2l6ZU9ic2VydmVyID0gbmV3IFJlc2l6ZU9ic2VydmVyKCgpID0+IHtcbiAgICAgIHRoaXMucmVmcmVzaEluZGljYXRvcigpO1xuICAgIH0pO1xuICAgIHRoaXMucmVzaXplT2JzZXJ2ZXIub2JzZXJ2ZSh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQpO1xuICB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGlmIChjaGFuZ2VzWydzZWxlY3RlZEluZGV4J10gJiYgIWNoYW5nZXNbJ3NlbGVjdGVkSW5kZXgnXS5maXJzdENoYW5nZSkge1xuICAgICAgdGhpcy5hcHBseVNlbGVjdGlvbih0aGlzLnNlbGVjdGVkSW5kZXgsIGZhbHNlKTtcbiAgICB9XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdjbGljaycsIFsnJGV2ZW50J10pXG4gIG9uQ2xpY2soZXZlbnQ6IEV2ZW50KTogdm9pZCB7XG4gICAgY29uc3QgaXRlbXMgPSB0aGlzLmdldEl0ZW1zKCk7XG4gICAgY29uc3QgdGFyZ2V0ID0gZXZlbnQudGFyZ2V0IGFzIEhUTUxFbGVtZW50O1xuXG4gICAgZm9yIChsZXQgaSA9IDA7IGkgPCBpdGVtcy5sZW5ndGg7IGkrKykge1xuICAgICAgaWYgKGl0ZW1zW2ldID09PSB0YXJnZXQgfHwgaXRlbXNbaV0uY29udGFpbnModGFyZ2V0KSkge1xuICAgICAgICB0aGlzLmFwcGx5U2VsZWN0aW9uKGksIHRydWUpO1xuICAgICAgICBicmVhaztcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGdldEl0ZW1zKCk6IEhUTUxFbGVtZW50W10ge1xuICAgIHJldHVybiBBcnJheS5mcm9tKHRoaXMuZWwubmF0aXZlRWxlbWVudC5jaGlsZHJlbikuZmlsdGVyKFxuICAgICAgKGMpID0+ICFjLmNsYXNzTGlzdC5jb250YWlucygnd2NvLXN1Yi10YWJzX19pbmRpY2F0b3InKVxuICAgICkgYXMgSFRNTEVsZW1lbnRbXTtcbiAgfVxuXG4gIHByaXZhdGUgcmVzZXJ2ZUJvbGRXaWR0aCgpOiB2b2lkIHtcbiAgICBjb25zdCBpdGVtcyA9IHRoaXMuZ2V0SXRlbXMoKTtcbiAgICBjb25zdCBob3N0ID0gdGhpcy5lbC5uYXRpdmVFbGVtZW50O1xuXG4gICAgaXRlbXMuZm9yRWFjaCgoaXRlbSkgPT4ge1xuICAgICAgY29uc3QgY2xvbmUgPSBpdGVtLmNsb25lTm9kZSh0cnVlKSBhcyBIVE1MRWxlbWVudDtcbiAgICAgIGNsb25lLnN0eWxlLmNzc1RleHQgPSBgXG4gICAgICAgIGZvbnQtd2VpZ2h0OiA2MDA7XG4gICAgICAgIHZpc2liaWxpdHk6IGhpZGRlbjtcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICAgICAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgICAgIGA7XG4gICAgICBob3N0LmFwcGVuZENoaWxkKGNsb25lKTtcbiAgICAgIGNvbnN0IGJvbGRXaWR0aCA9IGNsb25lLm9mZnNldFdpZHRoO1xuICAgICAgaG9zdC5yZW1vdmVDaGlsZChjbG9uZSk7XG4gICAgICBpdGVtLnN0eWxlLm1pbldpZHRoID0gYm9sZFdpZHRoICsgJ3B4JztcbiAgICB9KTtcbiAgfVxuXG4gIHByaXZhdGUgYXBwbHlTZWxlY3Rpb24oaW5kZXg6IG51bWJlciwgZW1pdDogYm9vbGVhbik6IHZvaWQge1xuICAgIGNvbnN0IGl0ZW1zID0gdGhpcy5nZXRJdGVtcygpO1xuICAgIGlmICghaXRlbXMubGVuZ3RoKSByZXR1cm47XG5cbiAgICBjb25zdCBjbGFtcGVkID0gTWF0aC5tYXgoMCwgTWF0aC5taW4oaW5kZXgsIGl0ZW1zLmxlbmd0aCAtIDEpKTtcbiAgICB0aGlzLnNlbGVjdGVkSW5kZXggPSBjbGFtcGVkO1xuXG4gICAgaXRlbXMuZm9yRWFjaCgoaXRlbSwgaSkgPT4ge1xuICAgICAgaXRlbS5jbGFzc0xpc3QudG9nZ2xlKCd3Y28tc3VidGFiLXNlbGVjdGVkJywgaSA9PT0gY2xhbXBlZCk7XG4gICAgfSk7XG5cbiAgICB0aGlzLm1vdmVJbmRpY2F0b3IoaXRlbXNbY2xhbXBlZF0pO1xuXG4gICAgaWYgKGVtaXQpIHtcbiAgICAgIHRoaXMudGFiQ2hhbmdlLmVtaXQoY2xhbXBlZCk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSByZWZyZXNoSW5kaWNhdG9yKCk6IHZvaWQge1xuICAgIGNvbnN0IGl0ZW1zID0gdGhpcy5nZXRJdGVtcygpO1xuICAgIGNvbnN0IHNlbGVjdGVkID0gaXRlbXNbdGhpcy5zZWxlY3RlZEluZGV4XTtcbiAgICBpZiAoc2VsZWN0ZWQpIHtcbiAgICAgIHRoaXMubW92ZUluZGljYXRvcihzZWxlY3RlZCk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBtb3ZlSW5kaWNhdG9yKGVsZW1lbnQ6IEhUTUxFbGVtZW50KTogdm9pZCB7XG4gICAgaWYgKCF0aGlzLmluZGljYXRvcikgcmV0dXJuO1xuICAgIHRoaXMuZWwubmF0aXZlRWxlbWVudC5zdHlsZS5zZXRQcm9wZXJ0eSgnLS1zdWJ0YWItbGVmdCcsIGVsZW1lbnQub2Zmc2V0TGVmdCArICdweCcpO1xuICAgIHRoaXMuZWwubmF0aXZlRWxlbWVudC5zdHlsZS5zZXRQcm9wZXJ0eSgnLS1zdWJ0YWItd2lkdGgnLCBlbGVtZW50Lm9mZnNldFdpZHRoICsgJ3B4Jyk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLnJlc2l6ZU9ic2VydmVyPy5kaXNjb25uZWN0KCk7XG4gIH1cbn1cbiJdfQ==

package/esm2022/public-api.mjs

@@ -30,4 +30,6 @@ export * from './lib/modal-alert/modal-alert.types';
 // Table
 export * from './lib/table/table.component';
 export * from './lib/table/table.types';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL25neC1jb21wb25lbnRzL3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLGlDQUFpQyxDQUFDO0FBQ2hELGNBQWMsNkNBQTZDLENBQUM7QUFDNUQsY0FBYywrQkFBK0IsQ0FBQztBQUM5QyxjQUFjLDJCQUEyQixDQUFDO0FBRTFDLG1CQUFtQjtBQUNuQixjQUFjLG1EQUFtRCxDQUFDO0FBQ2xFLGNBQWMsOENBQThDLENBQUM7QUFFN0QsYUFBYTtBQUNiLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYyx1QkFBdUIsQ0FBQztBQUV0QyxZQUFZO0FBQ1osY0FBYyx1Q0FBdUMsQ0FBQztBQUV0RCxTQUFTO0FBQ1QsY0FBYyx5Q0FBeUMsQ0FBQztBQUV4RCxlQUFlO0FBQ2YsY0FBYywyQ0FBMkMsQ0FBQztBQUMxRCxjQUFjLG1EQUFtRCxDQUFDO0FBRWxFLFdBQVc7QUFDWCxjQUFjLG1DQUFtQyxDQUFDO0FBRWxELGVBQWU7QUFDZixjQUFjLDJDQUEyQyxDQUFDO0FBQzFELGNBQWMsdUNBQXVDLENBQUM7QUFFdEQsUUFBUTtBQUNSLGNBQWMseUNBQXlDLENBQUM7QUFDeEQsY0FBYyxxQ0FBcUMsQ0FBQztBQUVwRCxRQUFRO0FBQ1IsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLHlCQUF5QixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBuZ3gtZmVuaXhkc1xuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL3N0ZXAvc3RlcC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc3RlcHBlci9zdGVwcGVyLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9zdGVwcGVyLWdyb3VwL3N0ZXBwZXItZ3JvdXAuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3VwbG9hZC91cGxvYWQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3VwbG9hZC91cGxvYWQudHlwZXMnO1xuXG4vLyBtc2cgYm94IGZlZWRiYWNrXG5leHBvcnQgKiBmcm9tICcuL2xpYi9tc2ctYm94LWZlZWRiYWNrL21zZy1ib3gtZmVlZGJhY2suY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL21zZy1ib3gtZmVlZGJhY2svbXNnLWJveC1mZWViYWNrLnR5cGVzJztcblxuLy9tc2cgbmF2dGFic1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdGFicy90YWJzLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi90YWJzL3RhYnMudHlwZXMnO1xuXG4vL1BhZ2luYXRpb25cbmV4cG9ydCAqIGZyb20gJy4vbGliL3BhZ2luYXRpb24vcGFnaW5hdGlvbi5jb21wb25lbnQnO1xuXG4vLyBBdmF0YXJcbmV4cG9ydCAqIGZyb20gJy4vbGliL3VzZXItYXZhdGFyL3VzZXItYXZhdGFyLmNvbXBvbmVudCc7XG5cbi8vIFNtYXJ0IFNlbGVjdFxuZXhwb3J0ICogZnJvbSAnLi9saWIvc21hcnQtc2VsZWN0L3NtYXJ0LXNlbGVjdC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc21hcnQtc2VsZWN0L3NtYXJ0LXNlbGVjdC1vcHRpb25zLmNvbXBvbmVudCc7XG5cbi8vIFRpbWVsaW5lXG5leHBvcnQgKiBmcm9tICcuL2xpYi90aW1lbGluZS90aW1lbGluZS5jb21wb25lbnQnO1xuXG4vLyBQcmV2aWV3IEZpbGVcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ByZXZpZXctZmlsZS9wcmV2aWV3LWZpbGUuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ByZXZpZXctZmlsZS9wcmV2aWV3LWZpbGUudHlwZXMnO1xuXG4vLyBNb2RhbFxuZXhwb3J0ICogZnJvbSAnLi9saWIvbW9kYWwtYWxlcnQvbW9kYWwtYWxlcnQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL21vZGFsLWFsZXJ0L21vZGFsLWFsZXJ0LnR5cGVzJztcblxuLy8gVGFibGVcbmV4cG9ydCAqIGZyb20gJy4vbGliL3RhYmxlL3RhYmxlLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi90YWJsZS90YWJsZS50eXBlcyc7XG4iXX0=
+// Sub Tabs
+export * from './lib/sub-tabs/sub-tabs.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL25neC1jb21wb25lbnRzL3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLGlDQUFpQyxDQUFDO0FBQ2hELGNBQWMsNkNBQTZDLENBQUM7QUFDNUQsY0FBYywrQkFBK0IsQ0FBQztBQUM5QyxjQUFjLDJCQUEyQixDQUFDO0FBRTFDLG1CQUFtQjtBQUNuQixjQUFjLG1EQUFtRCxDQUFDO0FBQ2xFLGNBQWMsOENBQThDLENBQUM7QUFFN0QsYUFBYTtBQUNiLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYyx1QkFBdUIsQ0FBQztBQUV0QyxZQUFZO0FBQ1osY0FBYyx1Q0FBdUMsQ0FBQztBQUV0RCxTQUFTO0FBQ1QsY0FBYyx5Q0FBeUMsQ0FBQztBQUV4RCxlQUFlO0FBQ2YsY0FBYywyQ0FBMkMsQ0FBQztBQUMxRCxjQUFjLG1EQUFtRCxDQUFDO0FBRWxFLFdBQVc7QUFDWCxjQUFjLG1DQUFtQyxDQUFDO0FBRWxELGVBQWU7QUFDZixjQUFjLDJDQUEyQyxDQUFDO0FBQzFELGNBQWMsdUNBQXVDLENBQUM7QUFFdEQsUUFBUTtBQUNSLGNBQWMseUNBQXlDLENBQUM7QUFDeEQsY0FBYyxxQ0FBcUMsQ0FBQztBQUVwRCxRQUFRO0FBQ1IsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLHlCQUF5QixDQUFDO0FBRXhDLFdBQVc7QUFDWCxjQUFjLG1DQUFtQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBuZ3gtZmVuaXhkc1xuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL3N0ZXAvc3RlcC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc3RlcHBlci9zdGVwcGVyLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9zdGVwcGVyLWdyb3VwL3N0ZXBwZXItZ3JvdXAuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3VwbG9hZC91cGxvYWQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3VwbG9hZC91cGxvYWQudHlwZXMnO1xuXG4vLyBtc2cgYm94IGZlZWRiYWNrXG5leHBvcnQgKiBmcm9tICcuL2xpYi9tc2ctYm94LWZlZWRiYWNrL21zZy1ib3gtZmVlZGJhY2suY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL21zZy1ib3gtZmVlZGJhY2svbXNnLWJveC1mZWViYWNrLnR5cGVzJztcblxuLy9tc2cgbmF2dGFic1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdGFicy90YWJzLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi90YWJzL3RhYnMudHlwZXMnO1xuXG4vL1BhZ2luYXRpb25cbmV4cG9ydCAqIGZyb20gJy4vbGliL3BhZ2luYXRpb24vcGFnaW5hdGlvbi5jb21wb25lbnQnO1xuXG4vLyBBdmF0YXJcbmV4cG9ydCAqIGZyb20gJy4vbGliL3VzZXItYXZhdGFyL3VzZXItYXZhdGFyLmNvbXBvbmVudCc7XG5cbi8vIFNtYXJ0IFNlbGVjdFxuZXhwb3J0ICogZnJvbSAnLi9saWIvc21hcnQtc2VsZWN0L3NtYXJ0LXNlbGVjdC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc21hcnQtc2VsZWN0L3NtYXJ0LXNlbGVjdC1vcHRpb25zLmNvbXBvbmVudCc7XG5cbi8vIFRpbWVsaW5lXG5leHBvcnQgKiBmcm9tICcuL2xpYi90aW1lbGluZS90aW1lbGluZS5jb21wb25lbnQnO1xuXG4vLyBQcmV2aWV3IEZpbGVcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ByZXZpZXctZmlsZS9wcmV2aWV3LWZpbGUuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ByZXZpZXctZmlsZS9wcmV2aWV3LWZpbGUudHlwZXMnO1xuXG4vLyBNb2RhbFxuZXhwb3J0ICogZnJvbSAnLi9saWIvbW9kYWwtYWxlcnQvbW9kYWwtYWxlcnQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL21vZGFsLWFsZXJ0L21vZGFsLWFsZXJ0LnR5cGVzJztcblxuLy8gVGFibGVcbmV4cG9ydCAqIGZyb20gJy4vbGliL3RhYmxlL3RhYmxlLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi90YWJsZS90YWJsZS50eXBlcyc7XG5cbi8vIFN1YiBUYWJzXG5leHBvcnQgKiBmcm9tICcuL2xpYi9zdWItdGFicy9zdWItdGFicy5jb21wb25lbnQnO1xuIl19

package/fesm2022/wizco-fenixds-ngx.mjs

@@ -2187,6 +2187,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['table']
             }] } });
 
+class SubTabsComponent {
+    el;
+    selectedIndex = 0;
+    tabChange = new EventEmitter();
+    indicator;
+    resizeObserver;
+    constructor(el) {
+        this.el = el;
+    }
+    ngAfterContentInit() {
+        this.indicator = document.createElement('div');
+        this.indicator.className = 'wco-sub-tabs__indicator';
+        this.el.nativeElement.prepend(this.indicator);
+        setTimeout(() => {
+            this.reserveBoldWidth();
+            this.indicator.style.transition = 'none';
+            this.applySelection(this.selectedIndex, false);
+            requestAnimationFrame(() => requestAnimationFrame(() => {
+                this.indicator.style.transition = '';
+            }));
+        }, 0);
+        this.resizeObserver = new ResizeObserver(() => {
+            this.refreshIndicator();
+        });
+        this.resizeObserver.observe(this.el.nativeElement);
+    }
+    ngOnChanges(changes) {
+        if (changes['selectedIndex'] && !changes['selectedIndex'].firstChange) {
+            this.applySelection(this.selectedIndex, false);
+        }
+    }
+    onClick(event) {
+        const items = this.getItems();
+        const target = event.target;
+        for (let i = 0; i < items.length; i++) {
+            if (items[i] === target || items[i].contains(target)) {
+                this.applySelection(i, true);
+                break;
+            }
+        }
+    }
+    getItems() {
+        return Array.from(this.el.nativeElement.children).filter((c) => !c.classList.contains('wco-sub-tabs__indicator'));
+    }
+    reserveBoldWidth() {
+        const items = this.getItems();
+        const host = this.el.nativeElement;
+        items.forEach((item) => {
+            const clone = item.cloneNode(true);
+            clone.style.cssText = `
+        font-weight: 600;
+        visibility: hidden;
+        position: absolute;
+        pointer-events: none;
+        white-space: nowrap;
+      `;
+            host.appendChild(clone);
+            const boldWidth = clone.offsetWidth;
+            host.removeChild(clone);
+            item.style.minWidth = boldWidth + 'px';
+        });
+    }
+    applySelection(index, emit) {
+        const items = this.getItems();
+        if (!items.length)
+            return;
+        const clamped = Math.max(0, Math.min(index, items.length - 1));
+        this.selectedIndex = clamped;
+        items.forEach((item, i) => {
+            item.classList.toggle('wco-subtab-selected', i === clamped);
+        });
+        this.moveIndicator(items[clamped]);
+        if (emit) {
+            this.tabChange.emit(clamped);
+        }
+    }
+    refreshIndicator() {
+        const items = this.getItems();
+        const selected = items[this.selectedIndex];
+        if (selected) {
+            this.moveIndicator(selected);
+        }
+    }
+    moveIndicator(element) {
+        if (!this.indicator)
+            return;
+        this.el.nativeElement.style.setProperty('--subtab-left', element.offsetLeft + 'px');
+        this.el.nativeElement.style.setProperty('--subtab-width', element.offsetWidth + 'px');
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubTabsComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SubTabsComponent, isStandalone: true, selector: "wco-sub-tabs", inputs: { selectedIndex: "selectedIndex" }, outputs: { tabChange: "tabChange" }, host: { listeners: { "click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: ["wco-sub-tabs{display:inline-flex;position:relative;background:#e5e5e5;border-radius:8px;padding:4px}wco-sub-tabs>.wco-sub-tabs__indicator{position:absolute;top:4px;bottom:4px;left:var(--subtab-left, 0px);width:var(--subtab-width, 0px);background:#fff;border-radius:6px;box-shadow:0 1px 3px #0000001f;pointer-events:none;z-index:0;transition:left .22s cubic-bezier(.645,.045,.355,1),width .15s cubic-bezier(.645,.045,.355,1)}wco-sub-tabs>*:not(.wco-sub-tabs__indicator){position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:6px 12px;background:transparent;border:none;cursor:pointer;font-size:var(--wco-font-size-xs);font-weight:500;color:var(--wco-color-neutral-700);border-radius:6px;white-space:nowrap;line-height:1.4;transition:color .2s ease}wco-sub-tabs>*:not(.wco-sub-tabs__indicator):focus-visible{outline:2px solid var(--wco-color-primary-400);outline-offset:-2px}wco-sub-tabs>*.wco-subtab-selected{color:var(--wco-color-neutral-900);font-weight:600}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wco-sub-tabs', standalone: true, imports: [], template: `<ng-content></ng-content>`, encapsulation: ViewEncapsulation.None, styles: ["wco-sub-tabs{display:inline-flex;position:relative;background:#e5e5e5;border-radius:8px;padding:4px}wco-sub-tabs>.wco-sub-tabs__indicator{position:absolute;top:4px;bottom:4px;left:var(--subtab-left, 0px);width:var(--subtab-width, 0px);background:#fff;border-radius:6px;box-shadow:0 1px 3px #0000001f;pointer-events:none;z-index:0;transition:left .22s cubic-bezier(.645,.045,.355,1),width .15s cubic-bezier(.645,.045,.355,1)}wco-sub-tabs>*:not(.wco-sub-tabs__indicator){position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:6px 12px;background:transparent;border:none;cursor:pointer;font-size:var(--wco-font-size-xs);font-weight:500;color:var(--wco-color-neutral-700);border-radius:6px;white-space:nowrap;line-height:1.4;transition:color .2s ease}wco-sub-tabs>*:not(.wco-sub-tabs__indicator):focus-visible{outline:2px solid var(--wco-color-primary-400);outline-offset:-2px}wco-sub-tabs>*.wco-subtab-selected{color:var(--wco-color-neutral-900);font-weight:600}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { selectedIndex: [{
+                type: Input
+            }], tabChange: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
 /*
  * Public API Surface of ngx-fenixds
  */
@@ -2195,5 +2302,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { MsgBoxFeedbackComponent, PaginationComponent, PreviewFileComponent, SmartSelectComponent, SmartSelectOptionComponent, StepComponent, StepperComponent, StepperGroupComponent, TableComponent, TabsComponent, TimelineComponent, UploadComponent, UserAvatarComponent, WcoModalAlertComponent };
+export { MsgBoxFeedbackComponent, PaginationComponent, PreviewFileComponent, SmartSelectComponent, SmartSelectOptionComponent, StepComponent, StepperComponent, StepperGroupComponent, SubTabsComponent, TableComponent, TabsComponent, TimelineComponent, UploadComponent, UserAvatarComponent, WcoModalAlertComponent };
 //# sourceMappingURL=wizco-fenixds-ngx.mjs.map