@ardium-ui/ui 5.0.0-alpha.18 → 5.0.0-alpha.19
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.
|
@@ -14013,9 +14013,11 @@ class ArdiumTabComponent {
|
|
|
14013
14013
|
this._label = input(null, { alias: 'label' });
|
|
14014
14014
|
this.label = computed(() => this._label() ?? this.tabId());
|
|
14015
14015
|
this.tabId = input.required();
|
|
14016
|
-
this.focusEvent = output();
|
|
14017
|
-
this.blurEvent = output();
|
|
14016
|
+
this.focusEvent = output({ alias: 'focus' });
|
|
14017
|
+
this.blurEvent = output({ alias: 'blur' });
|
|
14018
14018
|
this.selectedChange = output();
|
|
14019
|
+
this.selectedChangeInternal$ = new Subject();
|
|
14020
|
+
this._selectedChangeSub = this.selectedChangeInternal$.subscribe(this.selectedChange.emit);
|
|
14019
14021
|
}
|
|
14020
14022
|
set _selected(v) {
|
|
14021
14023
|
this.selected.set(coerceBooleanProperty(v));
|
|
@@ -14024,24 +14026,26 @@ class ArdiumTabComponent {
|
|
|
14024
14026
|
this.selected.set(state);
|
|
14025
14027
|
this._emitChange();
|
|
14026
14028
|
}
|
|
14027
|
-
get _selectedHostAttribute() {
|
|
14028
|
-
return this.selected();
|
|
14029
|
-
}
|
|
14030
14029
|
_emitChange() {
|
|
14031
|
-
this.
|
|
14030
|
+
this.selectedChangeInternal$.next(this.selected());
|
|
14031
|
+
}
|
|
14032
|
+
ngOnDestroy() {
|
|
14033
|
+
this._selectedChangeSub.unsubscribe();
|
|
14034
|
+
this.selectedChangeInternal$.complete();
|
|
14032
14035
|
}
|
|
14033
14036
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14034
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumTabComponent, isStandalone: false, selector: "ard-tab", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, _selected: { classPropertyName: "_selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, _label: { classPropertyName: "_label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tabId: { classPropertyName: "tabId", publicName: "tabId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { focusEvent: "
|
|
14037
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumTabComponent, isStandalone: false, selector: "ard-tab", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, _selected: { classPropertyName: "_selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, _label: { classPropertyName: "_label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tabId: { classPropertyName: "tabId", publicName: "tabId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { focusEvent: "focus", blurEvent: "blur", selectedChange: "selectedChange" }, host: { attributes: { "role": "tabpanel" }, properties: { "class.ard-tab-disabled": "disabled()", "class.ard-tab-selected": "selected()" } }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
14035
14038
|
}
|
|
14036
14039
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTabComponent, decorators: [{
|
|
14037
14040
|
type: Component,
|
|
14038
|
-
args: [{ standalone: false, selector: 'ard-tab', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush,
|
|
14041
|
+
args: [{ standalone: false, selector: 'ard-tab', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
14042
|
+
role: 'tabpanel',
|
|
14043
|
+
'[class.ard-tab-disabled]': 'disabled()',
|
|
14044
|
+
'[class.ard-tab-selected]': 'selected()',
|
|
14045
|
+
}, template: "<ng-content></ng-content>\r\n" }]
|
|
14039
14046
|
}], propDecorators: { _selected: [{
|
|
14040
14047
|
type: Input,
|
|
14041
14048
|
args: ['selected']
|
|
14042
|
-
}], _selectedHostAttribute: [{
|
|
14043
|
-
type: HostBinding,
|
|
14044
|
-
args: ['class.ard-tab-selected']
|
|
14045
14049
|
}] } });
|
|
14046
14050
|
|
|
14047
14051
|
const _tabberDefaults = {
|
|
@@ -14079,12 +14083,14 @@ class ArdiumTabberComponent {
|
|
|
14079
14083
|
constructor() {
|
|
14080
14084
|
this._DEFAULTS = inject(ARD_TABBER_DEFAULTS);
|
|
14081
14085
|
this.tabs = contentChildren(ArdiumTabComponent, { descendants: true });
|
|
14082
|
-
this.
|
|
14083
|
-
this.
|
|
14086
|
+
this.selectedTabId = model(null, { alias: 'selectedTab' });
|
|
14087
|
+
this.selectedTab = computed(() => this.tabs().find(tab => tab.tabId() === this.selectedTabId()) ?? null);
|
|
14088
|
+
this.focusedTabId = signal(null);
|
|
14089
|
+
this.focusedTab = computed(() => this.tabs().find(tab => tab.tabId() === this.focusedTabId()) ?? null);
|
|
14090
|
+
this.focusedTabIdChange = output();
|
|
14084
14091
|
this.initialTab = input(undefined);
|
|
14085
14092
|
this.focusEvent = output({ alias: 'focus' });
|
|
14086
14093
|
this.blurEvent = output({ alias: 'blur' });
|
|
14087
|
-
this.changeTab = output();
|
|
14088
14094
|
//! appearance
|
|
14089
14095
|
this.color = input(this._DEFAULTS.color);
|
|
14090
14096
|
this.ngClasses = computed(() => [`ard-color-${this.color()}`].join(' '));
|
|
@@ -14111,6 +14117,23 @@ class ArdiumTabberComponent {
|
|
|
14111
14117
|
: null,
|
|
14112
14118
|
})));
|
|
14113
14119
|
}
|
|
14120
|
+
ngOnChanges(changes) {
|
|
14121
|
+
if (changes['selectedTabId']) {
|
|
14122
|
+
const newTabId = changes['selectedTabId'].currentValue;
|
|
14123
|
+
if (newTabId !== null) {
|
|
14124
|
+
const newTab = this.tabs().find(tab => tab.tabId() === newTabId);
|
|
14125
|
+
if (!newTab) {
|
|
14126
|
+
console.error(`ARD-NF6000: Trying to select a tab with id '${newTabId}' that does not exist.`);
|
|
14127
|
+
return;
|
|
14128
|
+
}
|
|
14129
|
+
const oldTabId = changes['selectedTabId'].previousValue;
|
|
14130
|
+
const oldTab = this.tabs().find(tab => tab.tabId() === oldTabId);
|
|
14131
|
+
if (oldTab)
|
|
14132
|
+
this._unselectSpecificTab(oldTab);
|
|
14133
|
+
this._selectNewTab(newTab);
|
|
14134
|
+
}
|
|
14135
|
+
}
|
|
14136
|
+
}
|
|
14114
14137
|
ngAfterContentInit() {
|
|
14115
14138
|
let selectedCmp = null;
|
|
14116
14139
|
for (const cmp of this.tabs()) {
|
|
@@ -14121,18 +14144,22 @@ class ArdiumTabberComponent {
|
|
|
14121
14144
|
}
|
|
14122
14145
|
selectedCmp = cmp;
|
|
14123
14146
|
}
|
|
14147
|
+
// subscribe to events
|
|
14124
14148
|
cmp.focusEvent.subscribe(() => {
|
|
14125
14149
|
this.focusEvent.emit(cmp.tabId());
|
|
14126
14150
|
});
|
|
14127
14151
|
cmp.blurEvent.subscribe(() => {
|
|
14128
14152
|
this.blurEvent.emit(cmp.tabId());
|
|
14129
14153
|
});
|
|
14130
|
-
cmp.
|
|
14131
|
-
if (!isSelected)
|
|
14154
|
+
cmp.selectedChangeInternal$.subscribe(isSelected => {
|
|
14155
|
+
if (!isSelected) {
|
|
14156
|
+
this.selectedTabId.set(null);
|
|
14132
14157
|
return;
|
|
14133
|
-
|
|
14158
|
+
}
|
|
14159
|
+
this.selectTab(cmp);
|
|
14134
14160
|
});
|
|
14135
14161
|
}
|
|
14162
|
+
// if no tab is selected, select the initial tab or the first tab
|
|
14136
14163
|
if (!selectedCmp) {
|
|
14137
14164
|
const initiallySelectedTab = this.tabs().find(tab => tab.tabId() === this.initialTab());
|
|
14138
14165
|
selectedCmp = initiallySelectedTab ?? this.tabs()[0] ?? null;
|
|
@@ -14140,34 +14167,46 @@ class ArdiumTabberComponent {
|
|
|
14140
14167
|
selectedCmp.selected.set(true);
|
|
14141
14168
|
}
|
|
14142
14169
|
}
|
|
14143
|
-
this.
|
|
14170
|
+
this.selectedTabId.set(selectedCmp.tabId());
|
|
14144
14171
|
}
|
|
14145
|
-
|
|
14146
|
-
|
|
14147
|
-
|
|
14148
|
-
curr.selected.set(false);
|
|
14149
|
-
curr.selectedChange.emit(false);
|
|
14172
|
+
selectTab(tab) {
|
|
14173
|
+
if (tab.tabId() === this.selectedTabId()) {
|
|
14174
|
+
return;
|
|
14150
14175
|
}
|
|
14151
|
-
this.
|
|
14176
|
+
this._unselectCurrentTab(tab);
|
|
14177
|
+
this.selectedTabId.set(tab.tabId());
|
|
14178
|
+
this._selectNewTab(tab);
|
|
14179
|
+
}
|
|
14180
|
+
_unselectSpecificTab(tab) {
|
|
14181
|
+
tab.selected.set(false);
|
|
14182
|
+
tab.selectedChange.emit(false);
|
|
14183
|
+
}
|
|
14184
|
+
_unselectCurrentTab(referenceTab) {
|
|
14185
|
+
const curr = this.selectedTab();
|
|
14186
|
+
if (curr && (!referenceTab || curr.tabId() !== referenceTab.tabId())) {
|
|
14187
|
+
this._unselectSpecificTab(curr);
|
|
14188
|
+
}
|
|
14189
|
+
}
|
|
14190
|
+
_selectNewTab(tab) {
|
|
14152
14191
|
tab.selected.set(true);
|
|
14153
14192
|
tab.selectedChange.emit(true);
|
|
14154
14193
|
}
|
|
14155
14194
|
onTabFocus(tab) {
|
|
14156
14195
|
tab.focusEvent.emit();
|
|
14157
14196
|
tab.focused.set(true);
|
|
14158
|
-
this.
|
|
14197
|
+
this.focusedTabId.set(tab.tabId());
|
|
14159
14198
|
}
|
|
14160
14199
|
onTabBlur(tab) {
|
|
14161
14200
|
tab.blurEvent.emit();
|
|
14162
14201
|
tab.focused.set(false);
|
|
14163
|
-
this.
|
|
14202
|
+
this.focusedTabId.set(null);
|
|
14164
14203
|
}
|
|
14165
14204
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTabberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14166
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumTabberComponent, isStandalone: false, selector: "ard-tabber", inputs: { initialTab: { classPropertyName: "initialTab", publicName: "initialTab", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, stretchTabs: { classPropertyName: "stretchTabs", publicName: "stretchTabs", isSignal: true, isRequired: false, transformFunction: null }, uniformTabWidths: { classPropertyName: "uniformTabWidths", publicName: "uniformTabWidths", isSignal: true, isRequired: false, transformFunction: null }, tabAlignment: { classPropertyName: "tabAlignment", publicName: "tabAlignment", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: {
|
|
14205
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumTabberComponent, isStandalone: false, selector: "ard-tabber", inputs: { selectedTabId: { classPropertyName: "selectedTabId", publicName: "selectedTab", isSignal: true, isRequired: false, transformFunction: null }, initialTab: { classPropertyName: "initialTab", publicName: "initialTab", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, stretchTabs: { classPropertyName: "stretchTabs", publicName: "stretchTabs", isSignal: true, isRequired: false, transformFunction: null }, uniformTabWidths: { classPropertyName: "uniformTabWidths", publicName: "uniformTabWidths", isSignal: true, isRequired: false, transformFunction: null }, tabAlignment: { classPropertyName: "tabAlignment", publicName: "tabAlignment", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedTabId: "selectedTabChange", focusedTabIdChange: "focusedTabIdChange", focusEvent: "focus", blurEvent: "blur" }, queries: [{ propertyName: "tabs", predicate: ArdiumTabComponent, descendants: true, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: ArdTabberLabelTemplateDirective, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"ard-tabber\"\r\n [ngClass]=\"ngClasses()\"\r\n>\r\n <div\r\n class=\"ard-tabber-tabs\"\r\n [ngClass]=\"tabContainerClasses()\"\r\n [style]=\"{ '--ard-_tabber-tabs': tabs().length }\"\r\n >\r\n @for (tabObj of tabsWithTemplates(); track tabObj) {\r\n <button\r\n #focusableElement\r\n type=\"button\"\r\n role=\"tab\"\r\n class=\"ard-tab-button\"\r\n [id]=\"tabObj.tab.tabId()\"\r\n [class.ard-tab-active]=\"tabObj.tab.tabId() === selectedTabId()\"\r\n [class.ard-tab-focused]=\"tabObj.tab.tabId() === focusedTabId()\"\r\n (click)=\"!tabObj.tab.selected() && selectTab(tabObj.tab)\"\r\n (focus)=\"onTabFocus(tabObj.tab)\"\r\n (blur)=\"onTabBlur(tabObj.tab)\"\r\n [tabindex]=\"tabIndex()\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-button-content\">\r\n <ng-template\r\n #defaultLabelTemplate\r\n let-label\r\n >\r\n {{ label }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"tabObj.template ?? labelTemplate()?.template ?? defaultLabelTemplate\"\r\n [ngTemplateOutletContext]=\"tabObj.templateContext\"\r\n />\r\n </div>\r\n </button>\r\n }\r\n </div>\r\n <div\r\n role=\"tabpanel\"\r\n class=\"ard-tabber-content\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".ard-tabber ard-tab{display:none}.ard-tabber ard-tab.ard-tab-selected{display:block}.ard-tabber .ard-tabber-tabs.ard-uniform-tab-widths{display:grid;grid-template-columns:repeat(var(--ard-_tabber-tabs),1fr);max-width:max-content}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
14167
14206
|
}
|
|
14168
14207
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTabberComponent, decorators: [{
|
|
14169
14208
|
type: Component,
|
|
14170
|
-
args: [{ standalone: false, selector: 'ard-tabber', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ard-tabber\"\r\n [ngClass]=\"ngClasses()\"\r\n>\r\n <div\r\n class=\"ard-tabber-tabs\"\r\n [ngClass]=\"tabContainerClasses()\"\r\n [style]=\"{ '--ard-_tabber-tabs': tabs().length }\"\r\n >\r\n @for (tabObj of tabsWithTemplates(); track tabObj) {\r\n <button\r\n #focusableElement\r\n type=\"button\"\r\n role=\"tab\"\r\n class=\"ard-tab-button\"\r\n [id]=\"tabObj.tab.tabId()\"\r\n [class.ard-tab-active]=\"tabObj.tab ===
|
|
14209
|
+
args: [{ standalone: false, selector: 'ard-tabber', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ard-tabber\"\r\n [ngClass]=\"ngClasses()\"\r\n>\r\n <div\r\n class=\"ard-tabber-tabs\"\r\n [ngClass]=\"tabContainerClasses()\"\r\n [style]=\"{ '--ard-_tabber-tabs': tabs().length }\"\r\n >\r\n @for (tabObj of tabsWithTemplates(); track tabObj) {\r\n <button\r\n #focusableElement\r\n type=\"button\"\r\n role=\"tab\"\r\n class=\"ard-tab-button\"\r\n [id]=\"tabObj.tab.tabId()\"\r\n [class.ard-tab-active]=\"tabObj.tab.tabId() === selectedTabId()\"\r\n [class.ard-tab-focused]=\"tabObj.tab.tabId() === focusedTabId()\"\r\n (click)=\"!tabObj.tab.selected() && selectTab(tabObj.tab)\"\r\n (focus)=\"onTabFocus(tabObj.tab)\"\r\n (blur)=\"onTabBlur(tabObj.tab)\"\r\n [tabindex]=\"tabIndex()\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-button-content\">\r\n <ng-template\r\n #defaultLabelTemplate\r\n let-label\r\n >\r\n {{ label }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"tabObj.template ?? labelTemplate()?.template ?? defaultLabelTemplate\"\r\n [ngTemplateOutletContext]=\"tabObj.templateContext\"\r\n />\r\n </div>\r\n </button>\r\n }\r\n </div>\r\n <div\r\n role=\"tabpanel\"\r\n class=\"ard-tabber-content\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".ard-tabber ard-tab{display:none}.ard-tabber ard-tab.ard-tab-selected{display:block}.ard-tabber .ard-tabber-tabs.ard-uniform-tab-widths{display:grid;grid-template-columns:repeat(var(--ard-_tabber-tabs),1fr);max-width:max-content}\n"] }]
|
|
14171
14210
|
}] });
|
|
14172
14211
|
|
|
14173
14212
|
class ArdiumTabberModule {
|