@agorapulse/ui-components 20.1.7 → 20.1.8

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.
Files changed (11) hide show
  1. package/agorapulse-ui-components-20.1.8.tgz +0 -0
  2. package/fesm2022/agorapulse-ui-components-nav-selector-testing.mjs +8 -4
  3. package/fesm2022/agorapulse-ui-components-nav-selector-testing.mjs.map +1 -1
  4. package/fesm2022/agorapulse-ui-components-nav-selector.mjs +5 -5
  5. package/fesm2022/agorapulse-ui-components-nav-selector.mjs.map +1 -1
  6. package/fesm2022/agorapulse-ui-components-tabs.mjs +122 -0
  7. package/fesm2022/agorapulse-ui-components-tabs.mjs.map +1 -0
  8. package/nav-selector/testing/index.d.ts +14 -2
  9. package/package.json +5 -1
  10. package/tabs/index.d.ts +48 -0
  11. package/agorapulse-ui-components-20.1.7.tgz +0 -0
package/fesm2022/agorapulse-ui-components-tabs.mjs ADDED
@@ -0,0 +1,122 @@
1
+ import * as i0 from '@angular/core';
2
+ import { input, signal, ChangeDetectionStrategy, Component, contentChildren, viewChild, output, linkedSignal, effect } from '@angular/core';
3
+ import { ActionDropdownComponent, ActionDropdownTriggerDirective } from '@agorapulse/ui-components/action-dropdown';
4
+ import { BadgeComponent } from '@agorapulse/ui-components/badge';
5
+ import { IconButtonComponent } from '@agorapulse/ui-components/icon-button';
6
+ import { SymbolComponent, withSymbols } from '@agorapulse/ui-symbol';
7
+ import { apChevronDown, apChevronUp, apFeatureLock } from '@agorapulse/ui-symbol/icons';
8
+ import { CommonModule } from '@angular/common';
9
+
10
+ class TabComponent {
11
+ label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
12
+ badge = input(...(ngDevMode ? [undefined, { debugName: "badge" }] : []));
13
+ disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
14
+ featureLocked = input(false, ...(ngDevMode ? [{ debugName: "featureLocked" }] : []));
15
+ dropdownItems = input([], ...(ngDevMode ? [{ debugName: "dropdownItems" }] : []));
16
+ isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
17
+ tabIndex = signal(0, ...(ngDevMode ? [{ debugName: "tabIndex" }] : []));
18
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
19
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: TabComponent, isStandalone: true, selector: "ap-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, featureLocked: { classPropertyName: "featureLocked", publicName: "featureLocked", isSignal: true, isRequired: false, transformFunction: null }, dropdownItems: { classPropertyName: "dropdownItems", publicName: "dropdownItems", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isActive()) {\n <div\n role=\"tabpanel\"\n class=\"ap-tab__panel\"\n [attr.id]=\"'ap-tab-panel-' + tabIndex()\"\n [attr.aria-labelledby]=\"'ap-tab-' + tabIndex()\">\n <ng-content />\n </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
20
+ }
21
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TabComponent, decorators: [{
22
+ type: Component,
23
+ args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-tab', template: "@if (isActive()) {\n <div\n role=\"tabpanel\"\n class=\"ap-tab__panel\"\n [attr.id]=\"'ap-tab-panel-' + tabIndex()\"\n [attr.aria-labelledby]=\"'ap-tab-' + tabIndex()\">\n <ng-content />\n </div>\n}\n" }]
24
+ }] });
25
+
26
+ class TabsComponent {
27
+ tabs = contentChildren(TabComponent, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
28
+ indicator = viewChild('indicator', ...(ngDevMode ? [{ debugName: "indicator" }] : []));
29
+ tabNav = viewChild('tabNav', ...(ngDevMode ? [{ debugName: "tabNav" }] : []));
30
+ selectedIndex = input(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
31
+ disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
32
+ variant = input('fitToContent', ...(ngDevMode ? [{ debugName: "variant" }] : []));
33
+ tabChange = output();
34
+ dropdownItemClick = output();
35
+ // Unique ID per component instance to prevent DOM ID conflicts
36
+ static nextId = 0;
37
+ componentId = signal(`ap-tabs-${TabsComponent.nextId++}`, ...(ngDevMode ? [{ debugName: "componentId" }] : []));
38
+ openDropdownIndex = signal(null, ...(ngDevMode ? [{ debugName: "openDropdownIndex" }] : []));
39
+ activeTabIndex = linkedSignal(() => this.selectedIndex());
40
+ updateIndicatorPositionEffect = effect(() => {
41
+ const activeIndex = this.activeTabIndex();
42
+ const tabs = this.tabs();
43
+ tabs.forEach((tab, index) => {
44
+ tab.isActive.set(index === activeIndex);
45
+ tab.tabIndex.set(index);
46
+ });
47
+ this.updateIndicatorPosition(activeIndex);
48
+ }, ...(ngDevMode ? [{ debugName: "updateIndicatorPositionEffect" }] : []));
49
+ selectTab(index) {
50
+ if (this.disabled() || index < 0 || index >= this.tabs().length) {
51
+ return;
52
+ }
53
+ const tab = this.tabs()[index];
54
+ if (tab?.disabled()) {
55
+ return;
56
+ }
57
+ this.activeTabIndex.set(index);
58
+ this.tabChange.emit({ index, tab });
59
+ }
60
+ onKeyDown(event, index) {
61
+ switch (event.key) {
62
+ case 'Enter':
63
+ case ' ':
64
+ event.preventDefault();
65
+ this.selectTab(index);
66
+ break;
67
+ }
68
+ }
69
+ onDropdownItemClick(item, tabIndex) {
70
+ this.dropdownItemClick.emit({ item, tabIndex });
71
+ }
72
+ onDropdownOpen(tabIndex) {
73
+ this.openDropdownIndex.set(tabIndex);
74
+ }
75
+ onDropdownClose() {
76
+ this.openDropdownIndex.set(null);
77
+ }
78
+ focusTab(index) {
79
+ const tabButton = document.querySelector(`[data-tab-index="${index}"]`);
80
+ tabButton?.focus();
81
+ }
82
+ updateIndicatorPosition(activeIndex) {
83
+ const indicatorEl = this.indicator()?.nativeElement;
84
+ const tabNavEl = this.tabNav()?.nativeElement;
85
+ if (!indicatorEl || !tabNavEl) {
86
+ // If elements aren't ready, try again in the next tick
87
+ setTimeout(() => this.updateIndicatorPosition(activeIndex), 0);
88
+ return;
89
+ }
90
+ const activeTab = tabNavEl.querySelector(`[data-tab-index="${activeIndex}"]`);
91
+ if (!activeTab) {
92
+ // If tab button isn't ready, try again in the next tick
93
+ setTimeout(() => this.updateIndicatorPosition(activeIndex), 0);
94
+ return;
95
+ }
96
+ const tabRect = activeTab.getBoundingClientRect();
97
+ const navRect = tabNavEl.getBoundingClientRect();
98
+ const left = tabRect.left - navRect.left;
99
+ const width = tabRect.width;
100
+ // Check if active tab is feature locked to change indicator color
101
+ const isFeatureLocked = this.tabs()[activeIndex]?.featureLocked();
102
+ const color = isFeatureLocked
103
+ ? 'var(--comp-tabs-tab-feature-locked-indicator-color)'
104
+ : 'var(--comp-tabs-tab-active-indicator-color)';
105
+ indicatorEl.style.transform = `translateX(${left}px)`;
106
+ indicatorEl.style.width = `${width}px`;
107
+ indicatorEl.style.backgroundColor = color;
108
+ }
109
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
110
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: TabsComponent, isStandalone: true, selector: "ap-tabs", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange", dropdownItemClick: "dropdownItemClick" }, providers: [withSymbols(apChevronDown, apChevronUp, apFeatureLock)], queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, isSignal: true }, { propertyName: "tabNav", first: true, predicate: ["tabNav"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"ap-tabs\"\n [class.ap-tabs--full-width]=\"variant() === 'fullWidth'\">\n <!-- Tab Navigation -->\n <div\n #tabNav\n class=\"ap-tabs__nav\"\n role=\"tablist\">\n @for (tab of tabs(); track $index) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"ap-tabs__tab\"\n [class.ap-tabs__tab--active]=\"activeTabIndex() === $index\"\n [class.ap-tabs__tab--disabled]=\"tab.disabled()\"\n [class.ap-tabs__tab--feature-locked]=\"tab.featureLocked()\"\n [attr.aria-selected]=\"activeTabIndex() === $index\"\n [attr.aria-controls]=\"componentId() + '-panel-' + $index\"\n [attr.id]=\"componentId() + '-tab-' + $index\"\n [attr.data-tab-index]=\"$index\"\n [disabled]=\"disabled() || tab.disabled()\"\n [tabindex]=\"disabled() || tab.disabled() ? -1 : 0\"\n (click)=\"selectTab($index)\"\n (keydown)=\"onKeyDown($event, $index)\">\n <div class=\"ap-tabs__tab-content\">\n <div class=\"ap-tabs__tab-header\">\n <span class=\"ap-tabs__tab-label\">{{ tab.label() }}</span>\n @if (tab.featureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n class=\"ap-tabs__tab-feature-lock\" />\n }\n @if (tab.badge()) {\n <ap-badge color=\"blue\">{{ tab.badge() }}</ap-badge>\n }\n @if (tab.dropdownItems() && tab.dropdownItems().length > 0) {\n <div\n class=\"ap-tabs__tab-dropdown\"\n (click)=\"$event.stopPropagation()\">\n <ap-icon-button\n aria-label=\"More options\"\n [symbolId]=\"openDropdownIndex() === $index ? 'chevron-up' : 'chevron-down'\"\n [apActionDropdownTrigger]=\"dropdown\" />\n <ap-action-dropdown\n #dropdown\n [items]=\"tab.dropdownItems()\"\n (itemClick)=\"onDropdownItemClick($event, $index)\"\n (opened)=\"onDropdownOpen($index)\"\n (closed)=\"onDropdownClose()\" />\n </div>\n }\n </div>\n </div>\n </button>\n }\n <!-- Sliding indicator -->\n <div\n #indicator\n class=\"ap-tabs__indicator\"></div>\n </div>\n\n <!-- Tab Panels -->\n <div class=\"ap-tabs__content\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.ap-tabs{display:flex;flex-direction:column;width:100%}.ap-tabs__nav{display:flex;align-items:center;border-bottom:1px solid var(--comp-tabs-border-color);margin-bottom:var(--comp-tabs-content-spacing);position:relative}.ap-tabs__tab{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;font-family:var(--comp-tabs-text-font-family);text-align:center;position:relative;white-space:nowrap;padding:var(--comp-tabs-tab-padding);font-size:var(--comp-tabs-tab-font-size);line-height:var(--comp-tabs-tab-line-height);min-height:var(--comp-tabs-tab-min-height);color:var(--comp-tabs-tab-text-color-default)}.ap-tabs__tab-content{display:flex;flex-direction:column;align-items:center;gap:var(--comp-tabs-tab-content-gap)}.ap-tabs__tab-header{display:flex;align-items:center;gap:var(--comp-tabs-tab-header-gap)}.ap-tabs__tab-label{font-weight:inherit;font-size:inherit;line-height:inherit}.ap-tabs__tab-feature-lock{width:16px;height:16px;color:var(--comp-tabs-tab-feature-lock-color)}.ap-tabs__tab-dropdown{display:flex;align-items:center}.ap-tabs__tab-dropdown ap-icon-button{--comp-icon-button-width: 24px;--comp-icon-button-height: 24px;--comp-icon-button-padding: 4px}.ap-tabs__tab:hover:not(:disabled){color:var(--comp-tabs-tab-text-color-hover)}.ap-tabs__tab:focus{outline:none}.ap-tabs__tab:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--comp-tabs-tab-focus-color);border-radius:var(--comp-tabs-tab-focus-border-radius)}.ap-tabs__tab:disabled{cursor:not-allowed;opacity:.5}.ap-tabs__tab--active{color:var(--comp-tabs-tab-text-color-active);text-shadow:.5px 0 0 currentColor}.ap-tabs__tab--disabled{color:var(--comp-tabs-tab-text-color-disabled);cursor:not-allowed}.ap-tabs__tab--feature-locked:hover:not(:disabled){color:var(--comp-tabs-tab-text-color-feature-locked-hover)}.ap-tabs__tab--feature-locked:focus-visible{color:var(--comp-tabs-tab-text-color-feature-locked-focus)}.ap-tabs__tab--feature-locked.ap-tabs__tab--active{color:var(--comp-tabs-tab-text-color-feature-locked-active);text-shadow:.5px 0 0 currentColor}.ap-tabs__nav{gap:var(--comp-tabs-tab-gap)}.ap-tabs__indicator{position:absolute;bottom:-1px;height:4px;background-color:var(--comp-tabs-tab-active-indicator-color);transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1);transform-origin:left;border-radius:2px 2px 0 0}.ap-tabs--full-width .ap-tabs__nav .ap-tabs__tab{flex:1;min-width:0}.ap-tabs__content{flex:1;width:100%}.ap-tabs__panel{display:none;width:100%}.ap-tabs__panel--active{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "component", type: ActionDropdownComponent, selector: "ap-action-dropdown", inputs: ["items", "disabled", "largeModeEnabled", "showBackdrop", "customWidth", "defaultPosition"], outputs: ["itemClick", "opened", "closed"] }, { kind: "directive", type: ActionDropdownTriggerDirective, selector: "[apActionDropdownTrigger]", inputs: ["apActionDropdownTrigger"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
111
+ }
112
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TabsComponent, decorators: [{
113
+ type: Component,
114
+ args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-tabs', imports: [CommonModule, BadgeComponent, ActionDropdownComponent, ActionDropdownTriggerDirective, IconButtonComponent, SymbolComponent], providers: [withSymbols(apChevronDown, apChevronUp, apFeatureLock)], template: "<div\n class=\"ap-tabs\"\n [class.ap-tabs--full-width]=\"variant() === 'fullWidth'\">\n <!-- Tab Navigation -->\n <div\n #tabNav\n class=\"ap-tabs__nav\"\n role=\"tablist\">\n @for (tab of tabs(); track $index) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"ap-tabs__tab\"\n [class.ap-tabs__tab--active]=\"activeTabIndex() === $index\"\n [class.ap-tabs__tab--disabled]=\"tab.disabled()\"\n [class.ap-tabs__tab--feature-locked]=\"tab.featureLocked()\"\n [attr.aria-selected]=\"activeTabIndex() === $index\"\n [attr.aria-controls]=\"componentId() + '-panel-' + $index\"\n [attr.id]=\"componentId() + '-tab-' + $index\"\n [attr.data-tab-index]=\"$index\"\n [disabled]=\"disabled() || tab.disabled()\"\n [tabindex]=\"disabled() || tab.disabled() ? -1 : 0\"\n (click)=\"selectTab($index)\"\n (keydown)=\"onKeyDown($event, $index)\">\n <div class=\"ap-tabs__tab-content\">\n <div class=\"ap-tabs__tab-header\">\n <span class=\"ap-tabs__tab-label\">{{ tab.label() }}</span>\n @if (tab.featureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n class=\"ap-tabs__tab-feature-lock\" />\n }\n @if (tab.badge()) {\n <ap-badge color=\"blue\">{{ tab.badge() }}</ap-badge>\n }\n @if (tab.dropdownItems() && tab.dropdownItems().length > 0) {\n <div\n class=\"ap-tabs__tab-dropdown\"\n (click)=\"$event.stopPropagation()\">\n <ap-icon-button\n aria-label=\"More options\"\n [symbolId]=\"openDropdownIndex() === $index ? 'chevron-up' : 'chevron-down'\"\n [apActionDropdownTrigger]=\"dropdown\" />\n <ap-action-dropdown\n #dropdown\n [items]=\"tab.dropdownItems()\"\n (itemClick)=\"onDropdownItemClick($event, $index)\"\n (opened)=\"onDropdownOpen($index)\"\n (closed)=\"onDropdownClose()\" />\n </div>\n }\n </div>\n </div>\n </button>\n }\n <!-- Sliding indicator -->\n <div\n #indicator\n class=\"ap-tabs__indicator\"></div>\n </div>\n\n <!-- Tab Panels -->\n <div class=\"ap-tabs__content\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.ap-tabs{display:flex;flex-direction:column;width:100%}.ap-tabs__nav{display:flex;align-items:center;border-bottom:1px solid var(--comp-tabs-border-color);margin-bottom:var(--comp-tabs-content-spacing);position:relative}.ap-tabs__tab{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;font-family:var(--comp-tabs-text-font-family);text-align:center;position:relative;white-space:nowrap;padding:var(--comp-tabs-tab-padding);font-size:var(--comp-tabs-tab-font-size);line-height:var(--comp-tabs-tab-line-height);min-height:var(--comp-tabs-tab-min-height);color:var(--comp-tabs-tab-text-color-default)}.ap-tabs__tab-content{display:flex;flex-direction:column;align-items:center;gap:var(--comp-tabs-tab-content-gap)}.ap-tabs__tab-header{display:flex;align-items:center;gap:var(--comp-tabs-tab-header-gap)}.ap-tabs__tab-label{font-weight:inherit;font-size:inherit;line-height:inherit}.ap-tabs__tab-feature-lock{width:16px;height:16px;color:var(--comp-tabs-tab-feature-lock-color)}.ap-tabs__tab-dropdown{display:flex;align-items:center}.ap-tabs__tab-dropdown ap-icon-button{--comp-icon-button-width: 24px;--comp-icon-button-height: 24px;--comp-icon-button-padding: 4px}.ap-tabs__tab:hover:not(:disabled){color:var(--comp-tabs-tab-text-color-hover)}.ap-tabs__tab:focus{outline:none}.ap-tabs__tab:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--comp-tabs-tab-focus-color);border-radius:var(--comp-tabs-tab-focus-border-radius)}.ap-tabs__tab:disabled{cursor:not-allowed;opacity:.5}.ap-tabs__tab--active{color:var(--comp-tabs-tab-text-color-active);text-shadow:.5px 0 0 currentColor}.ap-tabs__tab--disabled{color:var(--comp-tabs-tab-text-color-disabled);cursor:not-allowed}.ap-tabs__tab--feature-locked:hover:not(:disabled){color:var(--comp-tabs-tab-text-color-feature-locked-hover)}.ap-tabs__tab--feature-locked:focus-visible{color:var(--comp-tabs-tab-text-color-feature-locked-focus)}.ap-tabs__tab--feature-locked.ap-tabs__tab--active{color:var(--comp-tabs-tab-text-color-feature-locked-active);text-shadow:.5px 0 0 currentColor}.ap-tabs__nav{gap:var(--comp-tabs-tab-gap)}.ap-tabs__indicator{position:absolute;bottom:-1px;height:4px;background-color:var(--comp-tabs-tab-active-indicator-color);transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1);transform-origin:left;border-radius:2px 2px 0 0}.ap-tabs--full-width .ap-tabs__nav .ap-tabs__tab{flex:1;min-width:0}.ap-tabs__content{flex:1;width:100%}.ap-tabs__panel{display:none;width:100%}.ap-tabs__panel--active{display:block}\n"] }]
115
+ }] });
116
+
117
+ /**
118
+ * Generated bundle index. Do not edit.
119
+ */
120
+
121
+ export { TabComponent, TabsComponent };
122
+ //# sourceMappingURL=agorapulse-ui-components-tabs.mjs.map
package/fesm2022/agorapulse-ui-components-tabs.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"agorapulse-ui-components-tabs.mjs","sources":["../../../libs/ui-components/tabs/src/tab/tab.component.ts","../../../libs/ui-components/tabs/src/tab/tab.component.html","../../../libs/ui-components/tabs/src/tabs.component.ts","../../../libs/ui-components/tabs/src/tabs.component.html","../../../libs/ui-components/tabs/src/agorapulse-ui-components-tabs.ts"],"sourcesContent":["import { ActionDropdownItem } from '@agorapulse/ui-components/action-dropdown';\nimport { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-tab',\n templateUrl: './tab.component.html',\n})\nexport class TabComponent {\n label = input.required<string>();\n badge = input<string | number>();\n disabled = input(false);\n featureLocked = input(false);\n dropdownItems = input<ActionDropdownItem[]>([]);\n\n isActive = signal(false);\n tabIndex = signal(0);\n}\n","@if (isActive()) {\n <div\n role=\"tabpanel\"\n class=\"ap-tab__panel\"\n [attr.id]=\"'ap-tab-panel-' + tabIndex()\"\n [attr.aria-labelledby]=\"'ap-tab-' + tabIndex()\">\n <ng-content />\n </div>\n}\n","import { ActionDropdownComponent, ActionDropdownItem, ActionDropdownTriggerDirective } from '@agorapulse/ui-components/action-dropdown';\nimport { BadgeComponent } from '@agorapulse/ui-components/badge';\nimport { IconButtonComponent } from '@agorapulse/ui-components/icon-button';\nimport { SymbolComponent, withSymbols } from '@agorapulse/ui-symbol';\nimport { apChevronDown, apChevronUp, apFeatureLock } from '@agorapulse/ui-symbol/icons';\nimport { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n contentChildren,\n effect,\n ElementRef,\n input,\n linkedSignal,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport { TabComponent } from './tab/tab.component';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-tabs',\n templateUrl: './tabs.component.html',\n styleUrls: ['./tabs.component.scss'],\n imports: [CommonModule, BadgeComponent, ActionDropdownComponent, ActionDropdownTriggerDirective, IconButtonComponent, SymbolComponent],\n providers: [withSymbols(apChevronDown, apChevronUp, apFeatureLock)],\n})\nexport class TabsComponent {\n tabs = contentChildren(TabComponent);\n indicator = viewChild<ElementRef<HTMLElement>>('indicator');\n tabNav = viewChild<ElementRef<HTMLElement>>('tabNav');\n\n selectedIndex = input(0);\n disabled = input(false);\n variant = input<'fullWidth' | 'fitToContent'>('fitToContent');\n\n tabChange = output<{ index: number; tab: TabComponent }>();\n dropdownItemClick = output<{ item: ActionDropdownItem; tabIndex: number }>();\n\n // Unique ID per component instance to prevent DOM ID conflicts\n private static nextId = 0;\n readonly componentId = signal(`ap-tabs-${TabsComponent.nextId++}`);\n\n readonly openDropdownIndex = signal<number | null>(null);\n\n readonly activeTabIndex = linkedSignal(() => this.selectedIndex());\n\n private readonly updateIndicatorPositionEffect = effect(() => {\n const activeIndex = this.activeTabIndex();\n const tabs = this.tabs();\n tabs.forEach((tab, index) => {\n tab.isActive.set(index === activeIndex);\n tab.tabIndex.set(index);\n });\n this.updateIndicatorPosition(activeIndex);\n });\n\n selectTab(index: number): void {\n if (this.disabled() || index < 0 || index >= this.tabs().length) {\n return;\n }\n\n const tab = this.tabs()[index];\n if (tab?.disabled()) {\n return;\n }\n\n this.activeTabIndex.set(index);\n this.tabChange.emit({ index, tab });\n }\n\n onKeyDown(event: KeyboardEvent, index: number): void {\n switch (event.key) {\n case 'Enter':\n case ' ':\n event.preventDefault();\n this.selectTab(index);\n break;\n }\n }\n\n onDropdownItemClick(item: ActionDropdownItem, tabIndex: number): void {\n this.dropdownItemClick.emit({ item, tabIndex });\n }\n\n onDropdownOpen(tabIndex: number): void {\n this.openDropdownIndex.set(tabIndex);\n }\n\n onDropdownClose(): void {\n this.openDropdownIndex.set(null);\n }\n\n private focusTab(index: number): void {\n const tabButton = document.querySelector(`[data-tab-index=\"${index}\"]`) as HTMLElement;\n tabButton?.focus();\n }\n\n private updateIndicatorPosition(activeIndex: number): void {\n const indicatorEl = this.indicator()?.nativeElement;\n const tabNavEl = this.tabNav()?.nativeElement;\n\n if (!indicatorEl || !tabNavEl) {\n // If elements aren't ready, try again in the next tick\n setTimeout(() => this.updateIndicatorPosition(activeIndex), 0);\n return;\n }\n\n const activeTab = tabNavEl.querySelector(`[data-tab-index=\"${activeIndex}\"]`) as HTMLElement;\n if (!activeTab) {\n // If tab button isn't ready, try again in the next tick\n setTimeout(() => this.updateIndicatorPosition(activeIndex), 0);\n return;\n }\n\n const tabRect = activeTab.getBoundingClientRect();\n const navRect = tabNavEl.getBoundingClientRect();\n\n const left = tabRect.left - navRect.left;\n const width = tabRect.width;\n\n // Check if active tab is feature locked to change indicator color\n const isFeatureLocked = this.tabs()[activeIndex]?.featureLocked();\n const color = isFeatureLocked\n ? 'var(--comp-tabs-tab-feature-locked-indicator-color)'\n : 'var(--comp-tabs-tab-active-indicator-color)';\n\n indicatorEl.style.transform = `translateX(${left}px)`;\n indicatorEl.style.width = `${width}px`;\n indicatorEl.style.backgroundColor = color;\n }\n}\n","<div\n class=\"ap-tabs\"\n [class.ap-tabs--full-width]=\"variant() === 'fullWidth'\">\n <!-- Tab Navigation -->\n <div\n #tabNav\n class=\"ap-tabs__nav\"\n role=\"tablist\">\n @for (tab of tabs(); track $index) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"ap-tabs__tab\"\n [class.ap-tabs__tab--active]=\"activeTabIndex() === $index\"\n [class.ap-tabs__tab--disabled]=\"tab.disabled()\"\n [class.ap-tabs__tab--feature-locked]=\"tab.featureLocked()\"\n [attr.aria-selected]=\"activeTabIndex() === $index\"\n [attr.aria-controls]=\"componentId() + '-panel-' + $index\"\n [attr.id]=\"componentId() + '-tab-' + $index\"\n [attr.data-tab-index]=\"$index\"\n [disabled]=\"disabled() || tab.disabled()\"\n [tabindex]=\"disabled() || tab.disabled() ? -1 : 0\"\n (click)=\"selectTab($index)\"\n (keydown)=\"onKeyDown($event, $index)\">\n <div class=\"ap-tabs__tab-content\">\n <div class=\"ap-tabs__tab-header\">\n <span class=\"ap-tabs__tab-label\">{{ tab.label() }}</span>\n @if (tab.featureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n class=\"ap-tabs__tab-feature-lock\" />\n }\n @if (tab.badge()) {\n <ap-badge color=\"blue\">{{ tab.badge() }}</ap-badge>\n }\n @if (tab.dropdownItems() && tab.dropdownItems().length > 0) {\n <div\n class=\"ap-tabs__tab-dropdown\"\n (click)=\"$event.stopPropagation()\">\n <ap-icon-button\n aria-label=\"More options\"\n [symbolId]=\"openDropdownIndex() === $index ? 'chevron-up' : 'chevron-down'\"\n [apActionDropdownTrigger]=\"dropdown\" />\n <ap-action-dropdown\n #dropdown\n [items]=\"tab.dropdownItems()\"\n (itemClick)=\"onDropdownItemClick($event, $index)\"\n (opened)=\"onDropdownOpen($index)\"\n (closed)=\"onDropdownClose()\" />\n </div>\n }\n </div>\n </div>\n </button>\n }\n <!-- Sliding indicator -->\n <div\n #indicator\n class=\"ap-tabs__indicator\"></div>\n </div>\n\n <!-- Tab Panels -->\n <div class=\"ap-tabs__content\">\n <ng-content />\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
package/nav-selector/testing/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import { NavSelectorLeafAction, NavSelectorLeafDetails } from '@agorapulse/ui-components/nav-selector';
2
+
1
3
  /**
2
4
  * Usage Example:
3
5
  *
@@ -30,6 +32,8 @@ declare function generateLeafElements(options: {
30
32
  disableReasonFrequency?: number;
31
33
  tokenInvalidFrequency?: number;
32
34
  featureLockedFrequency?: number;
35
+ actions?: NavSelectorLeafAction[];
36
+ details?: Partial<NavSelectorLeafDetails>[];
33
37
  }): {
34
38
  uid: string;
35
39
  counter: null;
@@ -38,8 +42,14 @@ declare function generateLeafElements(options: {
38
42
  disableReason: string | null;
39
43
  missingPermission: boolean;
40
44
  network: string;
41
- actions: never[];
42
- details: never[];
45
+ actions: NavSelectorLeafAction[];
46
+ details: {
47
+ uid: string;
48
+ counter?: number | null | undefined;
49
+ excludedCounterSum?: boolean | undefined;
50
+ name?: string | undefined;
51
+ errorReason?: string | null | undefined;
52
+ }[];
43
53
  tokenInvalid: boolean;
44
54
  featureLocked: boolean;
45
55
  type: "LEAF";
@@ -64,6 +74,8 @@ declare function generateGroupElements(options: {
64
74
  disableReasonFrequency?: number;
65
75
  tokenInvalidFrequency?: number;
66
76
  featureLockedFrequency?: number;
77
+ actions?: NavSelectorLeafAction[];
78
+ details?: Partial<NavSelectorLeafDetails>[];
67
79
  }): any;
68
80
 
69
81
  export { generateGroupElements, generateLeafElements };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@agorapulse/ui-components",
3
3
  "description": "Agorapulse UI Components Library",
4
- "version": "20.1.7",
4
+ "version": "20.1.8",
5
5
  "author": "Benoit Hediard",
6
6
  "repository": {
7
7
  "type": "git",
@@ -203,6 +203,10 @@
203
203
  "types": "./stepper/index.d.ts",
204
204
  "default": "./fesm2022/agorapulse-ui-components-stepper.mjs"
205
205
  },
206
+ "./tabs": {
207
+ "types": "./tabs/index.d.ts",
208
+ "default": "./fesm2022/agorapulse-ui-components-tabs.mjs"
209
+ },
206
210
  "./tag": {
207
211
  "types": "./tag/index.d.ts",
208
212
  "default": "./fesm2022/agorapulse-ui-components-tag.mjs"
package/tabs/index.d.ts ADDED
@@ -0,0 +1,48 @@
1
+ import * as _angular_core from '@angular/core';
2
+ import { ElementRef } from '@angular/core';
3
+ import { ActionDropdownItem } from '@agorapulse/ui-components/action-dropdown';
4
+
5
+ declare class TabComponent {
6
+ label: _angular_core.InputSignal<string>;
7
+ badge: _angular_core.InputSignal<string | number | undefined>;
8
+ disabled: _angular_core.InputSignal<boolean>;
9
+ featureLocked: _angular_core.InputSignal<boolean>;
10
+ dropdownItems: _angular_core.InputSignal<ActionDropdownItem[]>;
11
+ isActive: _angular_core.WritableSignal<boolean>;
12
+ tabIndex: _angular_core.WritableSignal<number>;
13
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabComponent, never>;
14
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabComponent, "ap-tab", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "featureLocked": { "alias": "featureLocked"; "required": false; "isSignal": true; }; "dropdownItems": { "alias": "dropdownItems"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
15
+ }
16
+
17
+ declare class TabsComponent {
18
+ tabs: _angular_core.Signal<readonly TabComponent[]>;
19
+ indicator: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
20
+ tabNav: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
21
+ selectedIndex: _angular_core.InputSignal<number>;
22
+ disabled: _angular_core.InputSignal<boolean>;
23
+ variant: _angular_core.InputSignal<"fullWidth" | "fitToContent">;
24
+ tabChange: _angular_core.OutputEmitterRef<{
25
+ index: number;
26
+ tab: TabComponent;
27
+ }>;
28
+ dropdownItemClick: _angular_core.OutputEmitterRef<{
29
+ item: ActionDropdownItem;
30
+ tabIndex: number;
31
+ }>;
32
+ private static nextId;
33
+ readonly componentId: _angular_core.WritableSignal<string>;
34
+ readonly openDropdownIndex: _angular_core.WritableSignal<number | null>;
35
+ readonly activeTabIndex: _angular_core.WritableSignal<number>;
36
+ private readonly updateIndicatorPositionEffect;
37
+ selectTab(index: number): void;
38
+ onKeyDown(event: KeyboardEvent, index: number): void;
39
+ onDropdownItemClick(item: ActionDropdownItem, tabIndex: number): void;
40
+ onDropdownOpen(tabIndex: number): void;
41
+ onDropdownClose(): void;
42
+ private focusTab;
43
+ private updateIndicatorPosition;
44
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsComponent, never>;
45
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsComponent, "ap-tabs", never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "tabChange": "tabChange"; "dropdownItemClick": "dropdownItemClick"; }, ["tabs"], ["*"], true, never>;
46
+ }
47
+
48
+ export { TabComponent, TabsComponent };
package/agorapulse-ui-components-20.1.7.tgz DELETED
Binary file