@ardium-ui/ui 5.0.0-alpha.16 → 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.
- package/fesm2022/ardium-ui-ui.mjs +69 -30
- package/fesm2022/ardium-ui-ui.mjs.map +1 -1
- package/lib/tabber/tab/tab.component.d.ts +7 -4
- package/lib/tabber/tabber.component.d.ts +13 -7
- package/package.json +1 -1
- package/prebuilt-themes/default/checkbox-list.css +17 -6
- package/prebuilt-themes/default/checkbox-list.css.map +1 -1
- package/prebuilt-themes/default/core.css +5 -1
- package/prebuilt-themes/default/core.css.map +1 -1
- package/prebuilt-themes/default/form-field-frame.css +1 -1
- package/prebuilt-themes/default/form-field.css +1 -1
- package/prebuilt-themes/default/inputs/input.css +0 -1
- package/prebuilt-themes/default/inputs/input.css.map +1 -1
- package/prebuilt-themes/default/inputs/number-input.css +34 -16
- package/prebuilt-themes/default/inputs/number-input.css.map +1 -1
- package/themes/_variables.scss +1 -1
- package/themes/default/checkbox-list.scss +16 -22
- package/themes/default/core.scss +5 -1
- package/themes/default/inputs/input.scss +0 -1
- package/themes/default/inputs/number-input.scss +34 -17
|
@@ -11211,11 +11211,11 @@ class ArdiumCheckboxListComponent extends _NgModelComponentBase {
|
|
|
11211
11211
|
};
|
|
11212
11212
|
}
|
|
11213
11213
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCheckboxListComponent, deps: [{ token: ARD_CHECKBOX_LIST_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11214
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumCheckboxListComponent, isStandalone: false, selector: "ard-checkbox-list", inputs: { valueFrom: { classPropertyName: "valueFrom", publicName: "valueFrom", isSignal: true, isRequired: false, transformFunction: null }, labelFrom: { classPropertyName: "labelFrom", publicName: "labelFrom", isSignal: true, isRequired: false, transformFunction: null }, disabledFrom: { classPropertyName: "disabledFrom", publicName: "disabledFrom", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, invertDisabled: { classPropertyName: "invertDisabled", publicName: "invertDisabled", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", changeEvent: "change" }, host: { properties: { "attr.id": "this._htmlIdHostAttribute" } }, queries: [{ propertyName: "checkboxTemplate", first: true, predicate: ArdCheckboxListCheckboxTemplateDirective, descendants: true, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: ArdCheckboxListLabelTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-checkbox-list\"\r\n [ngClass]=\"ngClasses()\"\r\n>\r\n @for (item of items; track item.index) {\r\n <div\r\n class=\"ard-checkbox-list__item\"\r\n [class.ard-item-highlighted]=\"item.highlighted()\"\r\n [class.ard-item-disabled]=\"item.disabled()\"\r\n (mouseover)=\"onItemHighlight(item)\"\r\n (mouseleave)=\"onItemBlur()\"\r\n (click)=\"toggleItem(item)\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <ard-checkbox\r\n [selected]=\"item.selected()\"\r\n [disabled]=\"item.disabled()\"\r\n [color]=\"color()\"\r\n [htmlId]=\"htmlId() + item.index\"\r\n [tabIndex]=\"tabIndex()\"\r\n (focus)=\"onFocus($event)\"\r\n (focus)=\"onItemFocus(item)\"\r\n (blur)=\"onBlur($event)\"\r\n (blur)=\"onItemBlur()\"\r\n (select)=\"selectItem(item)\"\r\n (unselect)=\"unselectItem(item)\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <ng-template _ard-tmp-repository [checkboxTmp]=\"checkboxTemplate()\" />\r\n </ard-checkbox>\r\n <label [for]=\"htmlId() + item.index\">\r\n <ng-template #defaultLabelTemplate let-labelItem>\r\n {{ labelItem.label() }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"labelTemplate()?.template || defaultLabelTemplate\"\r\n [ngTemplateOutletContext]=\"getLabelContext(item)\"\r\n />\r\n </label>\r\n </div>\r\n }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: ["color", "unselectedColor", "state"], outputs: ["stateChange"] }, { kind: "directive", type: _CheckboxTemplateRepositoryDirective, selector: "ard-checkbox > ng-template[_ard-tmp-repository]", inputs: ["checkboxTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
11214
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumCheckboxListComponent, isStandalone: false, selector: "ard-checkbox-list", inputs: { valueFrom: { classPropertyName: "valueFrom", publicName: "valueFrom", isSignal: true, isRequired: false, transformFunction: null }, labelFrom: { classPropertyName: "labelFrom", publicName: "labelFrom", isSignal: true, isRequired: false, transformFunction: null }, disabledFrom: { classPropertyName: "disabledFrom", publicName: "disabledFrom", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, invertDisabled: { classPropertyName: "invertDisabled", publicName: "invertDisabled", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", changeEvent: "change" }, host: { properties: { "attr.id": "this._htmlIdHostAttribute" } }, queries: [{ propertyName: "checkboxTemplate", first: true, predicate: ArdCheckboxListCheckboxTemplateDirective, descendants: true, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: ArdCheckboxListLabelTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-checkbox-list\"\r\n [ngClass]=\"ngClasses()\"\r\n>\r\n @for (item of items; track item.index) {\r\n <div\r\n class=\"ard-checkbox-list__item\"\r\n [class.ard-item-highlighted]=\"item.highlighted()\"\r\n [class.ard-item-disabled]=\"item.disabled()\"\r\n [class.ard-item-selected]=\"item.selected()\"\r\n (mouseover)=\"onItemHighlight(item)\"\r\n (mouseleave)=\"onItemBlur()\"\r\n (click)=\"toggleItem(item)\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <ard-checkbox\r\n [selected]=\"item.selected()\"\r\n [disabled]=\"item.disabled()\"\r\n [color]=\"color()\"\r\n [htmlId]=\"htmlId() + item.index\"\r\n [tabIndex]=\"tabIndex()\"\r\n (focus)=\"onFocus($event)\"\r\n (focus)=\"onItemFocus(item)\"\r\n (blur)=\"onBlur($event)\"\r\n (blur)=\"onItemBlur()\"\r\n (select)=\"selectItem(item)\"\r\n (unselect)=\"unselectItem(item)\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <ng-template _ard-tmp-repository [checkboxTmp]=\"checkboxTemplate()\" />\r\n </ard-checkbox>\r\n <label [for]=\"htmlId() + item.index\">\r\n <ng-template #defaultLabelTemplate let-labelItem>\r\n {{ labelItem.label() }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"labelTemplate()?.template || defaultLabelTemplate\"\r\n [ngTemplateOutletContext]=\"getLabelContext(item)\"\r\n />\r\n </label>\r\n </div>\r\n }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: ["color", "unselectedColor", "state"], outputs: ["stateChange"] }, { kind: "directive", type: _CheckboxTemplateRepositoryDirective, selector: "ard-checkbox > ng-template[_ard-tmp-repository]", inputs: ["checkboxTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
11215
11215
|
}
|
|
11216
11216
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCheckboxListComponent, decorators: [{
|
|
11217
11217
|
type: Component,
|
|
11218
|
-
args: [{ standalone: false, selector: 'ard-checkbox-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ard-checkbox-list\"\r\n [ngClass]=\"ngClasses()\"\r\n>\r\n @for (item of items; track item.index) {\r\n <div\r\n class=\"ard-checkbox-list__item\"\r\n [class.ard-item-highlighted]=\"item.highlighted()\"\r\n [class.ard-item-disabled]=\"item.disabled()\"\r\n (mouseover)=\"onItemHighlight(item)\"\r\n (mouseleave)=\"onItemBlur()\"\r\n (click)=\"toggleItem(item)\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <ard-checkbox\r\n [selected]=\"item.selected()\"\r\n [disabled]=\"item.disabled()\"\r\n [color]=\"color()\"\r\n [htmlId]=\"htmlId() + item.index\"\r\n [tabIndex]=\"tabIndex()\"\r\n (focus)=\"onFocus($event)\"\r\n (focus)=\"onItemFocus(item)\"\r\n (blur)=\"onBlur($event)\"\r\n (blur)=\"onItemBlur()\"\r\n (select)=\"selectItem(item)\"\r\n (unselect)=\"unselectItem(item)\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <ng-template _ard-tmp-repository [checkboxTmp]=\"checkboxTemplate()\" />\r\n </ard-checkbox>\r\n <label [for]=\"htmlId() + item.index\">\r\n <ng-template #defaultLabelTemplate let-labelItem>\r\n {{ labelItem.label() }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"labelTemplate()?.template || defaultLabelTemplate\"\r\n [ngTemplateOutletContext]=\"getLabelContext(item)\"\r\n />\r\n </label>\r\n </div>\r\n }\r\n</div>\r\n" }]
|
|
11218
|
+
args: [{ standalone: false, selector: 'ard-checkbox-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ard-checkbox-list\"\r\n [ngClass]=\"ngClasses()\"\r\n>\r\n @for (item of items; track item.index) {\r\n <div\r\n class=\"ard-checkbox-list__item\"\r\n [class.ard-item-highlighted]=\"item.highlighted()\"\r\n [class.ard-item-disabled]=\"item.disabled()\"\r\n [class.ard-item-selected]=\"item.selected()\"\r\n (mouseover)=\"onItemHighlight(item)\"\r\n (mouseleave)=\"onItemBlur()\"\r\n (click)=\"toggleItem(item)\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <ard-checkbox\r\n [selected]=\"item.selected()\"\r\n [disabled]=\"item.disabled()\"\r\n [color]=\"color()\"\r\n [htmlId]=\"htmlId() + item.index\"\r\n [tabIndex]=\"tabIndex()\"\r\n (focus)=\"onFocus($event)\"\r\n (focus)=\"onItemFocus(item)\"\r\n (blur)=\"onBlur($event)\"\r\n (blur)=\"onItemBlur()\"\r\n (select)=\"selectItem(item)\"\r\n (unselect)=\"unselectItem(item)\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <ng-template _ard-tmp-repository [checkboxTmp]=\"checkboxTemplate()\" />\r\n </ard-checkbox>\r\n <label [for]=\"htmlId() + item.index\">\r\n <ng-template #defaultLabelTemplate let-labelItem>\r\n {{ labelItem.label() }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"labelTemplate()?.template || defaultLabelTemplate\"\r\n [ngTemplateOutletContext]=\"getLabelContext(item)\"\r\n />\r\n </label>\r\n </div>\r\n }\r\n</div>\r\n" }]
|
|
11219
11219
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
11220
11220
|
type: Inject,
|
|
11221
11221
|
args: [ARD_CHECKBOX_LIST_DEFAULTS]
|
|
@@ -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 {
|