@agorapulse/ui-components 20.1.12 → 20.2.0
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.
- package/agorapulse-ui-components-20.2.0.tgz +0 -0
- package/fesm2022/agorapulse-ui-components-action-dropdown.mjs +0 -1
- package/fesm2022/agorapulse-ui-components-action-dropdown.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-labels-selector.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-labels-selector.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-select.mjs +10 -6
- package/fesm2022/agorapulse-ui-components-select.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-selection-dropdown.mjs +398 -0
- package/fesm2022/agorapulse-ui-components-selection-dropdown.mjs.map +1 -0
- package/fesm2022/agorapulse-ui-components-tabs.mjs +7 -21
- package/fesm2022/agorapulse-ui-components-tabs.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components.mjs +2 -0
- package/fesm2022/agorapulse-ui-components.mjs.map +1 -1
- package/index.d.ts +2 -0
- package/package.json +9 -5
- package/select/index.d.ts +4 -2
- package/selection-dropdown/index.d.ts +140 -0
- package/tabs/index.d.ts +4 -14
- package/agorapulse-ui-components-20.1.12.tgz +0 -0
|
@@ -1,22 +1,20 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { input, signal, ChangeDetectionStrategy, Component, contentChildren, viewChild, output, linkedSignal, effect } from '@angular/core';
|
|
3
|
-
import {
|
|
4
|
-
import { BadgeComponent } from '@agorapulse/ui-components/badge';
|
|
5
|
-
import { IconButtonComponent } from '@agorapulse/ui-components/icon-button';
|
|
3
|
+
import { CounterComponent } from '@agorapulse/ui-components/counter';
|
|
6
4
|
import { SymbolComponent, withSymbols } from '@agorapulse/ui-symbol';
|
|
7
|
-
import {
|
|
5
|
+
import { apFeatureLock } from '@agorapulse/ui-symbol/icons';
|
|
8
6
|
import { CommonModule } from '@angular/common';
|
|
9
7
|
|
|
10
8
|
class TabComponent {
|
|
11
9
|
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
12
|
-
|
|
10
|
+
counter = input(...(ngDevMode ? [undefined, { debugName: "counter" }] : []));
|
|
13
11
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
14
12
|
featureLocked = input(false, ...(ngDevMode ? [{ debugName: "featureLocked" }] : []));
|
|
15
|
-
|
|
13
|
+
symbolId = input(...(ngDevMode ? [undefined, { debugName: "symbolId" }] : []));
|
|
16
14
|
isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
|
|
17
15
|
tabIndex = signal(0, ...(ngDevMode ? [{ debugName: "tabIndex" }] : []));
|
|
18
16
|
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 },
|
|
17
|
+
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 }, counter: { classPropertyName: "counter", publicName: "counter", 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 }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", 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
18
|
}
|
|
21
19
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TabComponent, decorators: [{
|
|
22
20
|
type: Component,
|
|
@@ -29,13 +27,10 @@ class TabsComponent {
|
|
|
29
27
|
tabNav = viewChild('tabNav', ...(ngDevMode ? [{ debugName: "tabNav" }] : []));
|
|
30
28
|
selectedIndex = input(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
|
|
31
29
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
32
|
-
variant = input('fitToContent', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
33
30
|
tabChange = output();
|
|
34
|
-
dropdownItemClick = output();
|
|
35
31
|
// Unique ID per component instance to prevent DOM ID conflicts
|
|
36
32
|
static nextId = 0;
|
|
37
33
|
componentId = signal(`ap-tabs-${TabsComponent.nextId++}`, ...(ngDevMode ? [{ debugName: "componentId" }] : []));
|
|
38
|
-
openDropdownIndex = signal(null, ...(ngDevMode ? [{ debugName: "openDropdownIndex" }] : []));
|
|
39
34
|
activeTabIndex = linkedSignal(() => this.selectedIndex());
|
|
40
35
|
updateIndicatorPositionEffect = effect(() => {
|
|
41
36
|
const activeIndex = this.activeTabIndex();
|
|
@@ -66,15 +61,6 @@ class TabsComponent {
|
|
|
66
61
|
break;
|
|
67
62
|
}
|
|
68
63
|
}
|
|
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
64
|
focusTab(index) {
|
|
79
65
|
const tabButton = document.querySelector(`[data-tab-index="${index}"]`);
|
|
80
66
|
tabButton?.focus();
|
|
@@ -107,11 +93,11 @@ class TabsComponent {
|
|
|
107
93
|
indicatorEl.style.backgroundColor = color;
|
|
108
94
|
}
|
|
109
95
|
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 }
|
|
96
|
+
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 } }, outputs: { tabChange: "tabChange" }, providers: [withSymbols(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 class=\"ap-tabs\">\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 @if (tab.symbolId()) {\n <ap-symbol\n class=\"ap-tabs__tab-icon\"\n size=\"sm\"\n [symbolId]=\"tab.symbolId()\"\n [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'purple' : 'blue') : 'basic-grey'\" />\n }\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.counter() && !tab.featureLocked()) {\n <ap-counter [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'blue' : 'blue') : 'grey'\">\n {{ tab.counter() }}\n </ap-counter>\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:hover:not(:disabled):not(.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-hover-background-color)}.ap-tabs__tab:focus{outline:none}.ap-tabs__tab:focus-visible:not(.ap-tabs__tab--active){outline:none;box-shadow:inset 0 0 0 2px var(--comp-tabs-tab-focus-color);border-radius:var(--comp-tabs-tab-focus-border-radius);background-color:var(--comp-tabs-tab-focus-background-color)}.ap-tabs__tab:active:not(:disabled):not(.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-active-background-color)}.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--active: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{color:var(--comp-tabs-tab-text-color-disabled);cursor:not-allowed}.ap-tabs__tab--feature-locked:hover:not(:disabled):not(.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-feature-locked-hover-background-color)}.ap-tabs__tab--feature-locked:focus-visible:not(.ap-tabs__tab--active){color:var(--comp-tabs-tab-text-color-feature-locked-focus);background-color:var(--comp-tabs-tab-feature-locked-focus-background-color)}.ap-tabs__tab--feature-locked:active:not(:disabled):not(.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-feature-locked-active-background-color)}.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__tab--feature-locked.ap-tabs__tab--active: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__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}.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: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "notif", "background", "role"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
111
97
|
}
|
|
112
98
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TabsComponent, decorators: [{
|
|
113
99
|
type: Component,
|
|
114
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-tabs', imports: [CommonModule,
|
|
100
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-tabs', imports: [CommonModule, CounterComponent, SymbolComponent], providers: [withSymbols(apFeatureLock)], template: "<div class=\"ap-tabs\">\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 @if (tab.symbolId()) {\n <ap-symbol\n class=\"ap-tabs__tab-icon\"\n size=\"sm\"\n [symbolId]=\"tab.symbolId()\"\n [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'purple' : 'blue') : 'basic-grey'\" />\n }\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.counter() && !tab.featureLocked()) {\n <ap-counter [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'blue' : 'blue') : 'grey'\">\n {{ tab.counter() }}\n </ap-counter>\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:hover:not(:disabled):not(.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-hover-background-color)}.ap-tabs__tab:focus{outline:none}.ap-tabs__tab:focus-visible:not(.ap-tabs__tab--active){outline:none;box-shadow:inset 0 0 0 2px var(--comp-tabs-tab-focus-color);border-radius:var(--comp-tabs-tab-focus-border-radius);background-color:var(--comp-tabs-tab-focus-background-color)}.ap-tabs__tab:active:not(:disabled):not(.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-active-background-color)}.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--active: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{color:var(--comp-tabs-tab-text-color-disabled);cursor:not-allowed}.ap-tabs__tab--feature-locked:hover:not(:disabled):not(.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-feature-locked-hover-background-color)}.ap-tabs__tab--feature-locked:focus-visible:not(.ap-tabs__tab--active){color:var(--comp-tabs-tab-text-color-feature-locked-focus);background-color:var(--comp-tabs-tab-feature-locked-focus-background-color)}.ap-tabs__tab--feature-locked:active:not(:disabled):not(.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-feature-locked-active-background-color)}.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__tab--feature-locked.ap-tabs__tab--active: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__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}.ap-tabs__content{flex:1;width:100%}.ap-tabs__panel{display:none;width:100%}.ap-tabs__panel--active{display:block}\n"] }]
|
|
115
101
|
}] });
|
|
116
102
|
|
|
117
103
|
/**
|
|
@@ -1 +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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"}
|
|
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 { agorapulseSymbol } from '@agorapulse/ui-symbol';\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 counter = input<number>();\n disabled = input(false);\n featureLocked = input(false);\n symbolId = input<agorapulseSymbol>();\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 { CounterComponent } from '@agorapulse/ui-components/counter';\nimport { SymbolComponent, withSymbols } from '@agorapulse/ui-symbol';\nimport { 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, CounterComponent, SymbolComponent],\n providers: [withSymbols(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\n tabChange = output<{ index: number; tab: TabComponent }>();\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 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 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 class=\"ap-tabs\">\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 @if (tab.symbolId()) {\n <ap-symbol\n class=\"ap-tabs__tab-icon\"\n size=\"sm\"\n [symbolId]=\"tab.symbolId()\"\n [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'purple' : 'blue') : 'basic-grey'\" />\n }\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.counter() && !tab.featureLocked()) {\n <ap-counter [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'blue' : 'blue') : 'grey'\">\n {{ tab.counter() }}\n </ap-counter>\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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"}
|
|
@@ -41,6 +41,7 @@ export { TooltipDirective } from '@agorapulse/ui-components/tooltip';
|
|
|
41
41
|
import * as i0 from '@angular/core';
|
|
42
42
|
import { NgModule } from '@angular/core';
|
|
43
43
|
import { MAT_TABS_CONFIG } from '@angular/material/tabs';
|
|
44
|
+
export { ActionDropdownComponent, ActionDropdownTriggerDirective } from '@agorapulse/ui-components/action-dropdown';
|
|
44
45
|
export { AutocompleteComponent } from '@agorapulse/ui-components/autocomplete';
|
|
45
46
|
export { BadgeComponent } from '@agorapulse/ui-components/badge';
|
|
46
47
|
export { ButtonComponent } from '@agorapulse/ui-components/button';
|
|
@@ -52,6 +53,7 @@ export { SelectComponent } from '@agorapulse/ui-components/legacy/select';
|
|
|
52
53
|
export { TextareaComponent } from '@agorapulse/ui-components/legacy/textarea';
|
|
53
54
|
export { NavSelectorComponent } from '@agorapulse/ui-components/nav-selector';
|
|
54
55
|
export { RadioComponent } from '@agorapulse/ui-components/radio';
|
|
56
|
+
export { SelectionDropdownComponent, SelectionDropdownTriggerDirective } from '@agorapulse/ui-components/selection-dropdown';
|
|
55
57
|
export { SocialButtonComponent } from '@agorapulse/ui-components/social-button';
|
|
56
58
|
export { StatusComponent } from '@agorapulse/ui-components/status';
|
|
57
59
|
export { StatusCardComponent } from '@agorapulse/ui-components/status-card';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components.mjs","sources":["../../../libs/ui-components/src/lib/agorapulse-ui-components.module.ts","../../../libs/ui-components/index.ts","../../../libs/ui-components/agorapulse-ui-components.ts"],"sourcesContent":["// Modules\nimport { AddCommentComponent } from '@agorapulse/ui-components/add-comment';\nimport { AvatarComponent } from '@agorapulse/ui-components/avatar';\nimport { ConfirmModalComponent } from '@agorapulse/ui-components/confirm-modal';\nimport { DatepickerComponent } from '@agorapulse/ui-components/datepicker';\nimport {\n AutosizeTextareaDirective,\n DefaultImageDirective,\n EllipsisDirective,\n EqualValidatorDirective,\n FrozenGifDirective,\n MultiStyleTextDirective,\n} from '@agorapulse/ui-components/directives';\nimport { DotStepperComponent } from '@agorapulse/ui-components/dot-stepper';\nimport { InfoboxComponent } from '@agorapulse/ui-components/infobox';\nimport { LabelComponent, LabelListComponent } from '@agorapulse/ui-components/labels';\nimport { LabelsSelectorComponent } from '@agorapulse/ui-components/labels-selector';\nimport { MediaDisplayOverlayDialogComponent } from '@agorapulse/ui-components/media-display-overlay';\nimport { ModalComponent } from '@agorapulse/ui-components/modal';\nimport { DayDisabledPipe, NeoDatepickerComponent } from '@agorapulse/ui-components/neo-datepicker';\nimport { NotificationComponent } from '@agorapulse/ui-components/notification';\nimport { PaginatorButtonComponent, PaginatorComponent } from '@agorapulse/ui-components/paginator';\nimport { PasswordInputComponent } from '@agorapulse/ui-components/password-input';\nimport { PopmenuModule } from '@agorapulse/ui-components/popmenu';\nimport { SlideToggleComponent } from '@agorapulse/ui-components/slide-toggle';\nimport { SnackbarsThreadComponent } from '@agorapulse/ui-components/snackbars-thread';\nimport { StepperComponent } from '@agorapulse/ui-components/stepper';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { NgModule } from '@angular/core';\nimport { MAT_TABS_CONFIG } from '@angular/material/tabs';\n\n/**\n * @deprecated for better tree-shaking, use standalone component import instead\n */\n@NgModule({\n declarations: [],\n imports: [\n // Components\n AvatarComponent,\n StepperComponent,\n ConfirmModalComponent,\n DatepickerComponent,\n DotStepperComponent,\n EllipsisDirective,\n InfoboxComponent,\n LabelListComponent,\n LabelsSelectorComponent,\n NeoDatepickerComponent,\n MediaDisplayOverlayDialogComponent,\n ModalComponent,\n PasswordInputComponent,\n LabelComponent,\n NotificationComponent,\n PaginatorComponent,\n PaginatorButtonComponent,\n SlideToggleComponent,\n SnackbarsThreadComponent,\n // Directives\n DefaultImageDirective,\n FrozenGifDirective,\n EqualValidatorDirective,\n MultiStyleTextDirective,\n TooltipDirective,\n AddCommentComponent,\n AutosizeTextareaDirective,\n // Pipes\n DayDisabledPipe,\n ],\n exports: [\n // Components\n AddCommentComponent,\n AvatarComponent,\n StepperComponent,\n ConfirmModalComponent,\n DatepickerComponent,\n NeoDatepickerComponent,\n DotStepperComponent,\n EllipsisDirective,\n InfoboxComponent,\n LabelComponent,\n LabelListComponent,\n MediaDisplayOverlayDialogComponent,\n ModalComponent,\n PasswordInputComponent,\n LabelsSelectorComponent,\n NotificationComponent,\n PaginatorComponent,\n PaginatorButtonComponent,\n SlideToggleComponent,\n SnackbarsThreadComponent,\n // Pipes\n DayDisabledPipe,\n // Directives\n AutosizeTextareaDirective,\n DefaultImageDirective,\n FrozenGifDirective,\n EqualValidatorDirective,\n MultiStyleTextDirective,\n TooltipDirective,\n // Modules\n PopmenuModule,\n ],\n providers: [\n // Disable ripple effect\n // {provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: {disabled: true}},\n // Disable tabs animation\n { provide: MAT_TABS_CONFIG, useValue: { animationDuration: '0ms' } },\n ],\n})\nexport class AgorapulseUiComponentsModule {}\n","/*\n * Public API Surface of ui\n */\n\n// Module\nexport { PopmenuModule } from '@agorapulse/ui-components/popmenu';\nexport { AgorapulseUiComponentsModule } from './src/lib/agorapulse-ui-components.module';\n\n// Directive\nexport {\n AutosizeTextareaDirective,\n CheckboxDirective,\n DefaultImageDirective,\n EllipsisDirective,\n EqualValidatorDirective,\n FrozenGifDirective,\n MultiStyleTextDirective,\n} from '@agorapulse/ui-components/directives';\nexport { PopmenuDirective } from '@agorapulse/ui-components/popmenu';\nexport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\n\n// Component\nexport { AddCommentComponent } from '@agorapulse/ui-components/add-comment';\nexport { AutocompleteComponent } from '@agorapulse/ui-components/autocomplete';\nexport { AvatarComponent } from '@agorapulse/ui-components/avatar';\nexport { BadgeComponent } from '@agorapulse/ui-components/badge';\nexport { ButtonComponent } from '@agorapulse/ui-components/button';\nexport { CheckboxComponent } from '@agorapulse/ui-components/checkbox';\nexport { ConfirmModalComponent } from '@agorapulse/ui-components/confirm-modal';\nexport { CounterComponent } from '@agorapulse/ui-components/counter';\nexport { DatepickerComponent, DatepickerMode, I18nDatePicker, Period } from '@agorapulse/ui-components/datepicker';\nexport { DotStepperComponent } from '@agorapulse/ui-components/dot-stepper';\nexport { IconButtonComponent } from '@agorapulse/ui-components/icon-button';\nexport { InfoboxComponent } from '@agorapulse/ui-components/infobox';\nexport { LabelComponent, LabelListComponent } from '@agorapulse/ui-components/labels';\nexport { LabelsSelectorComponent } from '@agorapulse/ui-components/labels-selector';\nexport { InputComponent } from '@agorapulse/ui-components/legacy/input';\nexport { SelectComponent } from '@agorapulse/ui-components/legacy/select';\nexport { TextareaComponent } from '@agorapulse/ui-components/legacy/textarea';\nexport { MediaDisplayOverlayDialogComponent } from '@agorapulse/ui-components/media-display-overlay';\nexport { ModalComponent, ModalConfig } from '@agorapulse/ui-components/modal';\nexport { NavSelectorComponent } from '@agorapulse/ui-components/nav-selector';\nexport {\n DayDisabledPipe,\n NeoDatePickerLocale,\n NeoDatePickerMode,\n NeoDatePickerStartsOn,\n NeoDatepickerComponent,\n} from '@agorapulse/ui-components/neo-datepicker';\nexport { NotificationComponent } from '@agorapulse/ui-components/notification';\nexport { PaginatorButtonComponent, PaginatorComponent } from '@agorapulse/ui-components/paginator';\nexport { PasswordInputComponent } from '@agorapulse/ui-components/password-input';\nexport { PopmenuComponent } from '@agorapulse/ui-components/popmenu';\nexport { RadioComponent } from '@agorapulse/ui-components/radio';\nexport { SlideToggleComponent } from '@agorapulse/ui-components/slide-toggle';\nexport { SnackbarsThreadComponent } from '@agorapulse/ui-components/snackbars-thread';\nexport { SocialButtonComponent } from '@agorapulse/ui-components/social-button';\nexport { StatusComponent } from '@agorapulse/ui-components/status';\nexport { StatusCardActor, StatusCardComponent } from '@agorapulse/ui-components/status-card';\nexport { StepperComponent } from '@agorapulse/ui-components/stepper';\nexport { TagComponent } from '@agorapulse/ui-components/tag';\nexport { ToggleComponent } from '@agorapulse/ui-components/toggle';\n\n// Service\nexport { SnackbarsThreadService } from '@agorapulse/ui-components/snackbars-thread';\n\n// Model\nexport { ConfirmModalTexts } from '@agorapulse/ui-components/confirm-modal';\nexport {\n CodeStatus,\n SnackbarTypeValues,\n SnackbarsThreadBase,\n externalSnackbarTypeAllowed,\n generateCodeStatus,\n} from '@agorapulse/ui-components/snackbars-thread';\nexport { Step } from '@agorapulse/ui-components/stepper';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AA+BA;;AAEG;MA4EU,4BAA4B,CAAA;uGAA5B,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;wGAA5B,4BAA4B,EAAA,OAAA,EAAA;;YAvEjC,eAAe;YACf,gBAAgB;YAChB,qBAAqB;YACrB,mBAAmB;YACnB,mBAAmB;YACnB,iBAAiB;YACjB,gBAAgB;YAChB,kBAAkB;YAClB,uBAAuB;YACvB,sBAAsB;YACtB,kCAAkC;YAClC,cAAc;YACd,sBAAsB;YACtB,cAAc;YACd,qBAAqB;YACrB,kBAAkB;YAClB,wBAAwB;YACxB,oBAAoB;YACpB,wBAAwB;;YAExB,qBAAqB;YACrB,kBAAkB;YAClB,uBAAuB;YACvB,uBAAuB;YACvB,gBAAgB;YAChB,mBAAmB;YACnB,yBAAyB;;YAEzB,eAAe,CAAA,EAAA,OAAA,EAAA;;YAIf,mBAAmB;YACnB,eAAe;YACf,gBAAgB;YAChB,qBAAqB;YACrB,mBAAmB;YACnB,sBAAsB;YACtB,mBAAmB;YACnB,iBAAiB;YACjB,gBAAgB;YAChB,cAAc;YACd,kBAAkB;YAClB,kCAAkC;YAClC,cAAc;YACd,sBAAsB;YACtB,uBAAuB;YACvB,qBAAqB;YACrB,kBAAkB;YAClB,wBAAwB;YACxB,oBAAoB;YACpB,wBAAwB;;YAExB,eAAe;;YAEf,yBAAyB;YACzB,qBAAqB;YACrB,kBAAkB;YAClB,uBAAuB;YACvB,uBAAuB;YACvB,gBAAgB;;YAEhB,aAAa,CAAA,EAAA,CAAA;AASR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,4BAA4B,EAAA,SAAA,EAP1B;;;;YAIP,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,EAAE,iBAAiB,EAAE,KAAK,EAAE,EAAE;AACvE,SAAA,EAAA,OAAA,EAAA;;YArEG,eAAe;YACf,gBAAgB;YAChB,qBAAqB;YACrB,mBAAmB;YACnB,mBAAmB;YAEnB,gBAAgB;YAChB,kBAAkB;YAClB,uBAAuB;YACvB,sBAAsB;YACtB,kCAAkC;YAClC,cAAc;YACd,sBAAsB;YACtB,cAAc;YACd,qBAAqB;YACrB,kBAAkB;YAClB,wBAAwB;YACxB,oBAAoB;YACpB,wBAAwB;YAOxB,mBAAmB;;YAqCnB,aAAa,CAAA,EAAA,CAAA;;2FASR,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBA3ExC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,YAAY,EAAE,EAAE;AAChB,oBAAA,OAAO,EAAE;;wBAEL,eAAe;wBACf,gBAAgB;wBAChB,qBAAqB;wBACrB,mBAAmB;wBACnB,mBAAmB;wBACnB,iBAAiB;wBACjB,gBAAgB;wBAChB,kBAAkB;wBAClB,uBAAuB;wBACvB,sBAAsB;wBACtB,kCAAkC;wBAClC,cAAc;wBACd,sBAAsB;wBACtB,cAAc;wBACd,qBAAqB;wBACrB,kBAAkB;wBAClB,wBAAwB;wBACxB,oBAAoB;wBACpB,wBAAwB;;wBAExB,qBAAqB;wBACrB,kBAAkB;wBAClB,uBAAuB;wBACvB,uBAAuB;wBACvB,gBAAgB;wBAChB,mBAAmB;wBACnB,yBAAyB;;wBAEzB,eAAe;AAClB,qBAAA;AACD,oBAAA,OAAO,EAAE;;wBAEL,mBAAmB;wBACnB,eAAe;wBACf,gBAAgB;wBAChB,qBAAqB;wBACrB,mBAAmB;wBACnB,sBAAsB;wBACtB,mBAAmB;wBACnB,iBAAiB;wBACjB,gBAAgB;wBAChB,cAAc;wBACd,kBAAkB;wBAClB,kCAAkC;wBAClC,cAAc;wBACd,sBAAsB;wBACtB,uBAAuB;wBACvB,qBAAqB;wBACrB,kBAAkB;wBAClB,wBAAwB;wBACxB,oBAAoB;wBACpB,wBAAwB;;wBAExB,eAAe;;wBAEf,yBAAyB;wBACzB,qBAAqB;wBACrB,kBAAkB;wBAClB,uBAAuB;wBACvB,uBAAuB;wBACvB,gBAAgB;;wBAEhB,aAAa;AAChB,qBAAA;AACD,oBAAA,SAAS,EAAE;;;;wBAIP,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,EAAE,iBAAiB,EAAE,KAAK,EAAE,EAAE;AACvE,qBAAA;AACJ,iBAAA;;;AC5GD;;AAEG;AAEH;;ACJA;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components.mjs","sources":["../../../libs/ui-components/src/lib/agorapulse-ui-components.module.ts","../../../libs/ui-components/index.ts","../../../libs/ui-components/agorapulse-ui-components.ts"],"sourcesContent":["// Modules\nimport { AddCommentComponent } from '@agorapulse/ui-components/add-comment';\nimport { AvatarComponent } from '@agorapulse/ui-components/avatar';\nimport { ConfirmModalComponent } from '@agorapulse/ui-components/confirm-modal';\nimport { DatepickerComponent } from '@agorapulse/ui-components/datepicker';\nimport {\n AutosizeTextareaDirective,\n DefaultImageDirective,\n EllipsisDirective,\n EqualValidatorDirective,\n FrozenGifDirective,\n MultiStyleTextDirective,\n} from '@agorapulse/ui-components/directives';\nimport { DotStepperComponent } from '@agorapulse/ui-components/dot-stepper';\nimport { InfoboxComponent } from '@agorapulse/ui-components/infobox';\nimport { LabelComponent, LabelListComponent } from '@agorapulse/ui-components/labels';\nimport { LabelsSelectorComponent } from '@agorapulse/ui-components/labels-selector';\nimport { MediaDisplayOverlayDialogComponent } from '@agorapulse/ui-components/media-display-overlay';\nimport { ModalComponent } from '@agorapulse/ui-components/modal';\nimport { DayDisabledPipe, NeoDatepickerComponent } from '@agorapulse/ui-components/neo-datepicker';\nimport { NotificationComponent } from '@agorapulse/ui-components/notification';\nimport { PaginatorButtonComponent, PaginatorComponent } from '@agorapulse/ui-components/paginator';\nimport { PasswordInputComponent } from '@agorapulse/ui-components/password-input';\nimport { PopmenuModule } from '@agorapulse/ui-components/popmenu';\nimport { SlideToggleComponent } from '@agorapulse/ui-components/slide-toggle';\nimport { SnackbarsThreadComponent } from '@agorapulse/ui-components/snackbars-thread';\nimport { StepperComponent } from '@agorapulse/ui-components/stepper';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { NgModule } from '@angular/core';\nimport { MAT_TABS_CONFIG } from '@angular/material/tabs';\n\n/**\n * @deprecated for better tree-shaking, use standalone component import instead\n */\n@NgModule({\n declarations: [],\n imports: [\n // Components\n AvatarComponent,\n StepperComponent,\n ConfirmModalComponent,\n DatepickerComponent,\n DotStepperComponent,\n EllipsisDirective,\n InfoboxComponent,\n LabelListComponent,\n LabelsSelectorComponent,\n NeoDatepickerComponent,\n MediaDisplayOverlayDialogComponent,\n ModalComponent,\n PasswordInputComponent,\n LabelComponent,\n NotificationComponent,\n PaginatorComponent,\n PaginatorButtonComponent,\n SlideToggleComponent,\n SnackbarsThreadComponent,\n // Directives\n DefaultImageDirective,\n FrozenGifDirective,\n EqualValidatorDirective,\n MultiStyleTextDirective,\n TooltipDirective,\n AddCommentComponent,\n AutosizeTextareaDirective,\n // Pipes\n DayDisabledPipe,\n ],\n exports: [\n // Components\n AddCommentComponent,\n AvatarComponent,\n StepperComponent,\n ConfirmModalComponent,\n DatepickerComponent,\n NeoDatepickerComponent,\n DotStepperComponent,\n EllipsisDirective,\n InfoboxComponent,\n LabelComponent,\n LabelListComponent,\n MediaDisplayOverlayDialogComponent,\n ModalComponent,\n PasswordInputComponent,\n LabelsSelectorComponent,\n NotificationComponent,\n PaginatorComponent,\n PaginatorButtonComponent,\n SlideToggleComponent,\n SnackbarsThreadComponent,\n // Pipes\n DayDisabledPipe,\n // Directives\n AutosizeTextareaDirective,\n DefaultImageDirective,\n FrozenGifDirective,\n EqualValidatorDirective,\n MultiStyleTextDirective,\n TooltipDirective,\n // Modules\n PopmenuModule,\n ],\n providers: [\n // Disable ripple effect\n // {provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: {disabled: true}},\n // Disable tabs animation\n { provide: MAT_TABS_CONFIG, useValue: { animationDuration: '0ms' } },\n ],\n})\nexport class AgorapulseUiComponentsModule {}\n","/*\n * Public API Surface of ui\n */\n\n// Module\nexport { PopmenuModule } from '@agorapulse/ui-components/popmenu';\nexport { AgorapulseUiComponentsModule } from './src/lib/agorapulse-ui-components.module';\n\n// Directive\nexport {\n AutosizeTextareaDirective,\n CheckboxDirective,\n DefaultImageDirective,\n EllipsisDirective,\n EqualValidatorDirective,\n FrozenGifDirective,\n MultiStyleTextDirective,\n} from '@agorapulse/ui-components/directives';\nexport { PopmenuDirective } from '@agorapulse/ui-components/popmenu';\nexport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\n\n// Component\nexport { ActionDropdownComponent, ActionDropdownItem, ActionDropdownTriggerDirective } from '@agorapulse/ui-components/action-dropdown';\nexport { AddCommentComponent } from '@agorapulse/ui-components/add-comment';\nexport { AutocompleteComponent } from '@agorapulse/ui-components/autocomplete';\nexport { AvatarComponent } from '@agorapulse/ui-components/avatar';\nexport { BadgeComponent } from '@agorapulse/ui-components/badge';\nexport { ButtonComponent } from '@agorapulse/ui-components/button';\nexport { CheckboxComponent } from '@agorapulse/ui-components/checkbox';\nexport { ConfirmModalComponent } from '@agorapulse/ui-components/confirm-modal';\nexport { CounterComponent } from '@agorapulse/ui-components/counter';\nexport { DatepickerComponent, DatepickerMode, I18nDatePicker, Period } from '@agorapulse/ui-components/datepicker';\nexport { DotStepperComponent } from '@agorapulse/ui-components/dot-stepper';\nexport { IconButtonComponent } from '@agorapulse/ui-components/icon-button';\nexport { InfoboxComponent } from '@agorapulse/ui-components/infobox';\nexport { LabelComponent, LabelListComponent } from '@agorapulse/ui-components/labels';\nexport { LabelsSelectorComponent } from '@agorapulse/ui-components/labels-selector';\nexport { InputComponent } from '@agorapulse/ui-components/legacy/input';\nexport { SelectComponent } from '@agorapulse/ui-components/legacy/select';\nexport { TextareaComponent } from '@agorapulse/ui-components/legacy/textarea';\nexport { MediaDisplayOverlayDialogComponent } from '@agorapulse/ui-components/media-display-overlay';\nexport { ModalComponent, ModalConfig } from '@agorapulse/ui-components/modal';\nexport { NavSelectorComponent } from '@agorapulse/ui-components/nav-selector';\nexport {\n DayDisabledPipe,\n NeoDatePickerLocale,\n NeoDatePickerMode,\n NeoDatePickerStartsOn,\n NeoDatepickerComponent,\n} from '@agorapulse/ui-components/neo-datepicker';\nexport { NotificationComponent } from '@agorapulse/ui-components/notification';\nexport { PaginatorButtonComponent, PaginatorComponent } from '@agorapulse/ui-components/paginator';\nexport { PasswordInputComponent } from '@agorapulse/ui-components/password-input';\nexport { PopmenuComponent } from '@agorapulse/ui-components/popmenu';\nexport { RadioComponent } from '@agorapulse/ui-components/radio';\nexport {\n SelectionDropdownComponent,\n SelectionDropdownItem,\n SelectionDropdownTriggerDirective,\n} from '@agorapulse/ui-components/selection-dropdown';\nexport { SlideToggleComponent } from '@agorapulse/ui-components/slide-toggle';\nexport { SnackbarsThreadComponent } from '@agorapulse/ui-components/snackbars-thread';\nexport { SocialButtonComponent } from '@agorapulse/ui-components/social-button';\nexport { StatusComponent } from '@agorapulse/ui-components/status';\nexport { StatusCardActor, StatusCardComponent } from '@agorapulse/ui-components/status-card';\nexport { StepperComponent } from '@agorapulse/ui-components/stepper';\nexport { TagComponent } from '@agorapulse/ui-components/tag';\nexport { ToggleComponent } from '@agorapulse/ui-components/toggle';\n\n// Service\nexport { SnackbarsThreadService } from '@agorapulse/ui-components/snackbars-thread';\n\n// Model\nexport { ConfirmModalTexts } from '@agorapulse/ui-components/confirm-modal';\nexport {\n CodeStatus,\n SnackbarTypeValues,\n SnackbarsThreadBase,\n externalSnackbarTypeAllowed,\n generateCodeStatus,\n} from '@agorapulse/ui-components/snackbars-thread';\nexport { Step } from '@agorapulse/ui-components/stepper';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/index.d.ts
CHANGED
|
@@ -39,6 +39,7 @@ import * as i18 from '@agorapulse/ui-components/tooltip';
|
|
|
39
39
|
export { TooltipDirective } from '@agorapulse/ui-components/tooltip';
|
|
40
40
|
import * as i19 from '@agorapulse/ui-components/add-comment';
|
|
41
41
|
export { AddCommentComponent } from '@agorapulse/ui-components/add-comment';
|
|
42
|
+
export { ActionDropdownComponent, ActionDropdownItem, ActionDropdownTriggerDirective } from '@agorapulse/ui-components/action-dropdown';
|
|
42
43
|
export { AutocompleteComponent } from '@agorapulse/ui-components/autocomplete';
|
|
43
44
|
export { BadgeComponent } from '@agorapulse/ui-components/badge';
|
|
44
45
|
export { ButtonComponent } from '@agorapulse/ui-components/button';
|
|
@@ -50,6 +51,7 @@ export { SelectComponent } from '@agorapulse/ui-components/legacy/select';
|
|
|
50
51
|
export { TextareaComponent } from '@agorapulse/ui-components/legacy/textarea';
|
|
51
52
|
export { NavSelectorComponent } from '@agorapulse/ui-components/nav-selector';
|
|
52
53
|
export { RadioComponent } from '@agorapulse/ui-components/radio';
|
|
54
|
+
export { SelectionDropdownComponent, SelectionDropdownItem, SelectionDropdownTriggerDirective } from '@agorapulse/ui-components/selection-dropdown';
|
|
53
55
|
export { SocialButtonComponent } from '@agorapulse/ui-components/social-button';
|
|
54
56
|
export { StatusComponent } from '@agorapulse/ui-components/status';
|
|
55
57
|
export { StatusCardActor, StatusCardComponent } from '@agorapulse/ui-components/status-card';
|
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.
|
|
4
|
+
"version": "20.2.0",
|
|
5
5
|
"author": "Benoit Hediard",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -36,14 +36,14 @@
|
|
|
36
36
|
"types": "./index.d.ts",
|
|
37
37
|
"default": "./fesm2022/agorapulse-ui-components.mjs"
|
|
38
38
|
},
|
|
39
|
-
"./action-dropdown": {
|
|
40
|
-
"types": "./action-dropdown/index.d.ts",
|
|
41
|
-
"default": "./fesm2022/agorapulse-ui-components-action-dropdown.mjs"
|
|
42
|
-
},
|
|
43
39
|
"./add-comment": {
|
|
44
40
|
"types": "./add-comment/index.d.ts",
|
|
45
41
|
"default": "./fesm2022/agorapulse-ui-components-add-comment.mjs"
|
|
46
42
|
},
|
|
43
|
+
"./action-dropdown": {
|
|
44
|
+
"types": "./action-dropdown/index.d.ts",
|
|
45
|
+
"default": "./fesm2022/agorapulse-ui-components-action-dropdown.mjs"
|
|
46
|
+
},
|
|
47
47
|
"./autocomplete": {
|
|
48
48
|
"types": "./autocomplete/index.d.ts",
|
|
49
49
|
"default": "./fesm2022/agorapulse-ui-components-autocomplete.mjs"
|
|
@@ -176,6 +176,10 @@
|
|
|
176
176
|
"types": "./select/index.d.ts",
|
|
177
177
|
"default": "./fesm2022/agorapulse-ui-components-select.mjs"
|
|
178
178
|
},
|
|
179
|
+
"./selection-dropdown": {
|
|
180
|
+
"types": "./selection-dropdown/index.d.ts",
|
|
181
|
+
"default": "./fesm2022/agorapulse-ui-components-selection-dropdown.mjs"
|
|
182
|
+
},
|
|
179
183
|
"./slide-toggle": {
|
|
180
184
|
"types": "./slide-toggle/index.d.ts",
|
|
181
185
|
"default": "./fesm2022/agorapulse-ui-components-slide-toggle.mjs"
|
package/select/index.d.ts
CHANGED
|
@@ -95,13 +95,15 @@ declare class DropdownItemMultipleOneLineComponent {
|
|
|
95
95
|
network: _angular_core.InputSignal<"meta" | "bluesky" | "facebook" | "instagram" | "linkedin" | "twitter" | "youtube" | "google" | "pinterest" | "threads" | "tiktok" | "webBlog" | "webNews" | "X" | "xPlus" | "reddit" | undefined>;
|
|
96
96
|
symbolColor: _angular_core.InputSignal<string | undefined>;
|
|
97
97
|
symbolTooltipText: _angular_core.InputSignal<string | undefined>;
|
|
98
|
-
selectOnly:
|
|
98
|
+
selectOnly: _angular_core.OutputEmitterRef<void>;
|
|
99
|
+
selectionChange: _angular_core.OutputEmitterRef<boolean>;
|
|
99
100
|
lockedFeatureClicked: _angular_core.OutputEmitterRef<void>;
|
|
100
101
|
checkbox: CheckboxComponent;
|
|
101
102
|
onClick($event: MouseEvent): void;
|
|
102
103
|
onSelectOnly(): void;
|
|
104
|
+
onCheckboxChange(checked: boolean): void;
|
|
103
105
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownItemMultipleOneLineComponent, never>;
|
|
104
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownItemMultipleOneLineComponent, "ap-dropdown-item-multiple-one-line", never, { "text": { "alias": "text"; "required": true; }; "selected": { "alias": "selected"; "required": true; }; "htmlId": { "alias": "htmlId"; "required": true; }; "disabled": { "alias": "disabled"; "required": false; }; "avatarUrl": { "alias": "avatarUrl"; "required": false; }; "symbolId": { "alias": "symbolId"; "required": false; }; "disabledTooltip": { "alias": "disabledTooltip"; "required": false; }; "badgeText": { "alias": "badgeText"; "required": false; }; "dividerEnabled": { "alias": "dividerEnabled"; "required": false; }; "onlyEnabled": { "alias": "onlyEnabled"; "required": false; }; "onlyText": { "alias": "onlyText"; "required": false; }; "isFeatureLocked": { "alias": "isFeatureLocked"; "required": false; "isSignal": true; }; "roundedAvatar": { "alias": "roundedAvatar"; "required": false; "isSignal": true; }; "network": { "alias": "network"; "required": false; "isSignal": true; }; "symbolColor": { "alias": "symbolColor"; "required": false; "isSignal": true; }; "symbolTooltipText": { "alias": "symbolTooltipText"; "required": false; "isSignal": true; }; }, { "selectOnly": "selectOnly"; "lockedFeatureClicked": "lockedFeatureClicked"; }, never, never, true, never>;
|
|
106
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownItemMultipleOneLineComponent, "ap-dropdown-item-multiple-one-line", never, { "text": { "alias": "text"; "required": true; }; "selected": { "alias": "selected"; "required": true; }; "htmlId": { "alias": "htmlId"; "required": true; }; "disabled": { "alias": "disabled"; "required": false; }; "avatarUrl": { "alias": "avatarUrl"; "required": false; }; "symbolId": { "alias": "symbolId"; "required": false; }; "disabledTooltip": { "alias": "disabledTooltip"; "required": false; }; "badgeText": { "alias": "badgeText"; "required": false; }; "dividerEnabled": { "alias": "dividerEnabled"; "required": false; }; "onlyEnabled": { "alias": "onlyEnabled"; "required": false; }; "onlyText": { "alias": "onlyText"; "required": false; }; "isFeatureLocked": { "alias": "isFeatureLocked"; "required": false; "isSignal": true; }; "roundedAvatar": { "alias": "roundedAvatar"; "required": false; "isSignal": true; }; "network": { "alias": "network"; "required": false; "isSignal": true; }; "symbolColor": { "alias": "symbolColor"; "required": false; "isSignal": true; }; "symbolTooltipText": { "alias": "symbolTooltipText"; "required": false; "isSignal": true; }; }, { "selectOnly": "selectOnly"; "selectionChange": "selectionChange"; "lockedFeatureClicked": "lockedFeatureClicked"; }, never, never, true, never>;
|
|
105
107
|
}
|
|
106
108
|
|
|
107
109
|
declare class DropdownItemMultipleTwoLinesComponent {
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { OnDestroy, TemplateRef } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
interface SelectionDropdownItem {
|
|
5
|
+
/** Unique HTML ID for the item */
|
|
6
|
+
htmlId: string;
|
|
7
|
+
/** Display text for the item */
|
|
8
|
+
text: string;
|
|
9
|
+
/** Whether the item is selected */
|
|
10
|
+
selected: boolean;
|
|
11
|
+
/** Whether the item is disabled and non-interactive */
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
/** Avatar URL to display */
|
|
14
|
+
avatarUrl?: string;
|
|
15
|
+
/** Symbol ID to display */
|
|
16
|
+
symbolId?: string;
|
|
17
|
+
/** Tooltip text displayed when item is disabled */
|
|
18
|
+
disabledTooltip?: string;
|
|
19
|
+
/** Text displayed in a badge next to the item */
|
|
20
|
+
badgeText?: string;
|
|
21
|
+
/** Whether the feature is locked */
|
|
22
|
+
isFeatureLocked?: boolean;
|
|
23
|
+
/** Whether avatar should be rounded */
|
|
24
|
+
roundedAvatar?: boolean;
|
|
25
|
+
/** Avatar network type */
|
|
26
|
+
network?: any;
|
|
27
|
+
/** Symbol color */
|
|
28
|
+
symbolColor?: string;
|
|
29
|
+
/** Symbol tooltip text */
|
|
30
|
+
symbolTooltipText?: string;
|
|
31
|
+
/** Group label - items with the same groupLabel will be grouped together */
|
|
32
|
+
groupLabel?: string;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* A dropdown component that displays a list of selectable items with checkboxes,
|
|
36
|
+
* badges, tooltips, and keyboard navigation.
|
|
37
|
+
*/
|
|
38
|
+
declare class SelectionDropdownComponent implements OnDestroy {
|
|
39
|
+
private readonly elementRef;
|
|
40
|
+
private readonly overlay;
|
|
41
|
+
private readonly positionBuilder;
|
|
42
|
+
private readonly symbolRegistry;
|
|
43
|
+
private readonly viewContainerRef;
|
|
44
|
+
selectionDropdownTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
|
|
45
|
+
trigger: _angular_core.Signal<TemplateRef<unknown> | undefined>;
|
|
46
|
+
/** Array of items to display in the dropdown menu */
|
|
47
|
+
items: _angular_core.InputSignal<SelectionDropdownItem[]>;
|
|
48
|
+
/** Whether the dropdown is disabled and cannot be opened */
|
|
49
|
+
disabled: _angular_core.InputSignal<boolean>;
|
|
50
|
+
/** Whether to show a backdrop that closes the dropdown when clicked */
|
|
51
|
+
showBackdrop: _angular_core.InputSignal<boolean>;
|
|
52
|
+
/** Default position for the dropdown relative to the trigger element */
|
|
53
|
+
defaultPosition: _angular_core.InputSignal<"right" | "left">;
|
|
54
|
+
/** Title to display in the header */
|
|
55
|
+
title: _angular_core.InputSignal<string | undefined>;
|
|
56
|
+
/** Text for the footer button */
|
|
57
|
+
footerButtonText: _angular_core.InputSignal<string | undefined>;
|
|
58
|
+
/** Symbol ID for the footer button */
|
|
59
|
+
footerButtonSymbolId: _angular_core.InputSignal<string | undefined>;
|
|
60
|
+
/** Text for the header button */
|
|
61
|
+
headerButtonText: _angular_core.InputSignal<string | undefined>;
|
|
62
|
+
/** Symbol ID for the header button */
|
|
63
|
+
headerButtonSymbolId: _angular_core.InputSignal<string | undefined>;
|
|
64
|
+
/** Placeholder text for the search input */
|
|
65
|
+
searchPlaceholderText: _angular_core.InputSignal<string>;
|
|
66
|
+
/** Text to display when no search results are found */
|
|
67
|
+
noSearchResultsText: _angular_core.InputSignal<string>;
|
|
68
|
+
/** Emits when a dropdown item selection changes */
|
|
69
|
+
selectionChange: _angular_core.OutputEmitterRef<SelectionDropdownItem[]>;
|
|
70
|
+
/** Emits when the dropdown menu is opened */
|
|
71
|
+
opened: _angular_core.OutputEmitterRef<void>;
|
|
72
|
+
/** Emits when the dropdown menu is closed */
|
|
73
|
+
closed: _angular_core.OutputEmitterRef<void>;
|
|
74
|
+
/** Emits when the footer button is clicked */
|
|
75
|
+
footerButtonClick: _angular_core.OutputEmitterRef<void>;
|
|
76
|
+
/** Emits when the header button is clicked */
|
|
77
|
+
headerButtonClick: _angular_core.OutputEmitterRef<void>;
|
|
78
|
+
private overlayRef;
|
|
79
|
+
private portal;
|
|
80
|
+
private readonly destroy$;
|
|
81
|
+
private readonly searchTermSubject;
|
|
82
|
+
private readonly internalItems;
|
|
83
|
+
protected readonly isOpen: _angular_core.WritableSignal<boolean>;
|
|
84
|
+
protected searchTerm: string;
|
|
85
|
+
protected readonly filteredItems: _angular_core.WritableSignal<SelectionDropdownItem[]>;
|
|
86
|
+
protected readonly initiallySelectedItems: _angular_core.WritableSignal<SelectionDropdownItem[]>;
|
|
87
|
+
protected readonly selectedItems: _angular_core.Signal<SelectionDropdownItem[]>;
|
|
88
|
+
protected readonly unselectedItems: _angular_core.Signal<SelectionDropdownItem[]>;
|
|
89
|
+
protected readonly groupLabels: _angular_core.Signal<string[]>;
|
|
90
|
+
protected readonly ungroupedItems: _angular_core.Signal<SelectionDropdownItem[]>;
|
|
91
|
+
protected readonly groupSelectionStates: _angular_core.Signal<Record<string, "selected" | "partial" | "unselected">>;
|
|
92
|
+
protected readonly groupItemsMap: _angular_core.Signal<Record<string, SelectionDropdownItem[]>>;
|
|
93
|
+
constructor();
|
|
94
|
+
ngOnDestroy(): void;
|
|
95
|
+
/** Opens the dropdown menu at the specified trigger element or component's element */
|
|
96
|
+
open(triggerElement?: HTMLElement): void;
|
|
97
|
+
/** Closes the dropdown menu and cleans up overlay resources */
|
|
98
|
+
close(): void;
|
|
99
|
+
/** Toggles the dropdown menu open or closed state */
|
|
100
|
+
toggle(triggerElement?: HTMLElement): void;
|
|
101
|
+
/** Handles item toggle events, updating selection and emitting changes */
|
|
102
|
+
onItemToggle(item: SelectionDropdownItem, checked: boolean): void;
|
|
103
|
+
/** Handles footer button clicks */
|
|
104
|
+
onFooterButtonClick(): void;
|
|
105
|
+
/** Handles footer button keyboard events */
|
|
106
|
+
onFooterButtonKeydown(event: KeyboardEvent): void;
|
|
107
|
+
/** Handles header button clicks */
|
|
108
|
+
onHeaderButtonClick(): void;
|
|
109
|
+
/** Handles header button keyboard events */
|
|
110
|
+
onHeaderButtonKeydown(event: KeyboardEvent): void;
|
|
111
|
+
/** Handles search input changes */
|
|
112
|
+
onSearchTermChange(): void;
|
|
113
|
+
/** Handles group toggle events, selecting/deselecting all items within the group */
|
|
114
|
+
onGroupToggle(groupLabel: string, checked: boolean): void;
|
|
115
|
+
/** Updates the filtered items based on search term */
|
|
116
|
+
private updateFilteredItems;
|
|
117
|
+
/** Creates positioning strategy for the overlay based on trigger element and default position */
|
|
118
|
+
private createPositionStrategy;
|
|
119
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectionDropdownComponent, never>;
|
|
120
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectionDropdownComponent, "ap-selection-dropdown", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "defaultPosition": { "alias": "defaultPosition"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "footerButtonText": { "alias": "footerButtonText"; "required": false; "isSignal": true; }; "footerButtonSymbolId": { "alias": "footerButtonSymbolId"; "required": false; "isSignal": true; }; "headerButtonText": { "alias": "headerButtonText"; "required": false; "isSignal": true; }; "headerButtonSymbolId": { "alias": "headerButtonSymbolId"; "required": false; "isSignal": true; }; "searchPlaceholderText": { "alias": "searchPlaceholderText"; "required": false; "isSignal": true; }; "noSearchResultsText": { "alias": "noSearchResultsText"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "opened": "opened"; "closed": "closed"; "footerButtonClick": "footerButtonClick"; "headerButtonClick": "headerButtonClick"; }, ["trigger"], never, true, never>;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
/**
|
|
124
|
+
* Directive that turns any element into a trigger for a SelectionDropdown component.
|
|
125
|
+
* Handles click and keyboard interactions to open/close the dropdown.
|
|
126
|
+
*/
|
|
127
|
+
declare class SelectionDropdownTriggerDirective {
|
|
128
|
+
private readonly elementRef;
|
|
129
|
+
/** Reference to the SelectionDropdown component that this trigger controls */
|
|
130
|
+
apSelectionDropdownTrigger: _angular_core.InputSignal<SelectionDropdownComponent>;
|
|
131
|
+
/** Handles click events to toggle the dropdown */
|
|
132
|
+
onClick(event: MouseEvent): void;
|
|
133
|
+
/** Handles keyboard events for accessibility (Enter, Space, Arrow Down, Escape) */
|
|
134
|
+
onKeyDown(event: KeyboardEvent): void;
|
|
135
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectionDropdownTriggerDirective, never>;
|
|
136
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SelectionDropdownTriggerDirective, "[apSelectionDropdownTrigger]", never, { "apSelectionDropdownTrigger": { "alias": "apSelectionDropdownTrigger"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
export { SelectionDropdownComponent, SelectionDropdownTriggerDirective };
|
|
140
|
+
export type { SelectionDropdownItem };
|
package/tabs/index.d.ts
CHANGED
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
2
|
import { ElementRef } from '@angular/core';
|
|
3
|
-
import { ActionDropdownItem } from '@agorapulse/ui-components/action-dropdown';
|
|
4
3
|
|
|
5
4
|
declare class TabComponent {
|
|
6
5
|
label: _angular_core.InputSignal<string>;
|
|
7
|
-
|
|
6
|
+
counter: _angular_core.InputSignal<number | undefined>;
|
|
8
7
|
disabled: _angular_core.InputSignal<boolean>;
|
|
9
8
|
featureLocked: _angular_core.InputSignal<boolean>;
|
|
10
|
-
|
|
9
|
+
symbolId: _angular_core.InputSignal<string | undefined>;
|
|
11
10
|
isActive: _angular_core.WritableSignal<boolean>;
|
|
12
11
|
tabIndex: _angular_core.WritableSignal<number>;
|
|
13
12
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabComponent, never>;
|
|
14
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabComponent, "ap-tab", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "
|
|
13
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabComponent, "ap-tab", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "counter": { "alias": "counter"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "featureLocked": { "alias": "featureLocked"; "required": false; "isSignal": true; }; "symbolId": { "alias": "symbolId"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
15
14
|
}
|
|
16
15
|
|
|
17
16
|
declare class TabsComponent {
|
|
@@ -20,29 +19,20 @@ declare class TabsComponent {
|
|
|
20
19
|
tabNav: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
|
|
21
20
|
selectedIndex: _angular_core.InputSignal<number>;
|
|
22
21
|
disabled: _angular_core.InputSignal<boolean>;
|
|
23
|
-
variant: _angular_core.InputSignal<"fullWidth" | "fitToContent">;
|
|
24
22
|
tabChange: _angular_core.OutputEmitterRef<{
|
|
25
23
|
index: number;
|
|
26
24
|
tab: TabComponent;
|
|
27
25
|
}>;
|
|
28
|
-
dropdownItemClick: _angular_core.OutputEmitterRef<{
|
|
29
|
-
item: ActionDropdownItem;
|
|
30
|
-
tabIndex: number;
|
|
31
|
-
}>;
|
|
32
26
|
private static nextId;
|
|
33
27
|
readonly componentId: _angular_core.WritableSignal<string>;
|
|
34
|
-
readonly openDropdownIndex: _angular_core.WritableSignal<number | null>;
|
|
35
28
|
readonly activeTabIndex: _angular_core.WritableSignal<number>;
|
|
36
29
|
private readonly updateIndicatorPositionEffect;
|
|
37
30
|
selectTab(index: number): void;
|
|
38
31
|
onKeyDown(event: KeyboardEvent, index: number): void;
|
|
39
|
-
onDropdownItemClick(item: ActionDropdownItem, tabIndex: number): void;
|
|
40
|
-
onDropdownOpen(tabIndex: number): void;
|
|
41
|
-
onDropdownClose(): void;
|
|
42
32
|
private focusTab;
|
|
43
33
|
private updateIndicatorPosition;
|
|
44
34
|
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; };
|
|
35
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsComponent, "ap-tabs", never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "tabChange": "tabChange"; }, ["tabs"], ["*"], true, never>;
|
|
46
36
|
}
|
|
47
37
|
|
|
48
38
|
export { TabComponent, TabsComponent };
|
|
Binary file
|