@ardium-ui/ui 5.0.0-alpha.65 → 5.0.0-alpha.66
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 +8 -3
- package/fesm2022/ardium-ui-ui.mjs.map +1 -1
- package/lib/slider/range-slider/range-slider.component.d.ts +1 -1
- package/lib/tabber/tab/tab.component.d.ts +3 -1
- package/lib/tabber/tabber.defaults.d.ts +1 -0
- package/package.json +1 -1
- package/prebuilt-themes/default/tabber.css +7 -2
- package/prebuilt-themes/default/tabber.css.map +1 -1
- package/themes/default/tabber.scss +7 -2
|
@@ -16261,6 +16261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
16261
16261
|
|
|
16262
16262
|
const _tabberDefaults = {
|
|
16263
16263
|
tabDisabled: false,
|
|
16264
|
+
tabPointerEventsWhenDisabled: false,
|
|
16264
16265
|
color: ComponentColor.Primary,
|
|
16265
16266
|
stretchTabs: false,
|
|
16266
16267
|
uniformTabWidths: false,
|
|
@@ -16280,6 +16281,10 @@ class ArdiumTabComponent {
|
|
|
16280
16281
|
constructor() {
|
|
16281
16282
|
this._DEFAULTS = inject(ARD_TABBER_DEFAULTS);
|
|
16282
16283
|
this.disabled = input(this._DEFAULTS.tabDisabled, { transform: v => coerceBooleanProperty(v) });
|
|
16284
|
+
this.pointerEventsWhenDisabled = input(this._DEFAULTS.tabPointerEventsWhenDisabled, {
|
|
16285
|
+
transform: v => coerceBooleanProperty(v),
|
|
16286
|
+
});
|
|
16287
|
+
this.tabTitle = input('');
|
|
16283
16288
|
this.selected = signal(false);
|
|
16284
16289
|
this.focused = signal(false);
|
|
16285
16290
|
this._label = input(null, { alias: 'label' });
|
|
@@ -16312,7 +16317,7 @@ class ArdiumTabComponent {
|
|
|
16312
16317
|
this.selectedChangeInternal$.complete();
|
|
16313
16318
|
}
|
|
16314
16319
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16315
|
-
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 }); }
|
|
16320
|
+
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 }, pointerEventsWhenDisabled: { classPropertyName: "pointerEventsWhenDisabled", publicName: "pointerEventsWhenDisabled", isSignal: true, isRequired: false, transformFunction: null }, tabTitle: { classPropertyName: "tabTitle", publicName: "tabTitle", 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 }); }
|
|
16316
16321
|
}
|
|
16317
16322
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTabComponent, decorators: [{
|
|
16318
16323
|
type: Component,
|
|
@@ -16482,11 +16487,11 @@ class ArdiumTabberComponent {
|
|
|
16482
16487
|
this.focusedTabId.set(null);
|
|
16483
16488
|
}
|
|
16484
16489
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTabberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16485
|
-
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", 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
|
|
16490
|
+
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", 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-disabled]=\"tabObj.tab.disabled()\"\r\n [class.ard-tab-with-pointer-events-when-disabled]=\"tabObj.tab.pointerEventsWhenDisabled()\"\r\n [class.ard-tab-active]=\"tabObj.tab.tabId() === selectedTabId()\"\r\n [class.ard-tab-focused]=\"tabObj.tab.tabId() === focusedTabId()\"\r\n [title]=\"tabObj.tab.tabTitle()\"\r\n (click)=\"!tabObj.tab.selected() && selectTab(tabObj.tab)\"\r\n (focus)=\"onTabFocus(tabObj.tab)\"\r\n (blur)=\"onTabBlur(tabObj.tab)\"\r\n [tabindex]=\"tabObj.tab.disabled() ? -1 : 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 }); }
|
|
16486
16491
|
}
|
|
16487
16492
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTabberComponent, decorators: [{
|
|
16488
16493
|
type: Component,
|
|
16489
|
-
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
|
|
16494
|
+
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-disabled]=\"tabObj.tab.disabled()\"\r\n [class.ard-tab-with-pointer-events-when-disabled]=\"tabObj.tab.pointerEventsWhenDisabled()\"\r\n [class.ard-tab-active]=\"tabObj.tab.tabId() === selectedTabId()\"\r\n [class.ard-tab-focused]=\"tabObj.tab.tabId() === focusedTabId()\"\r\n [title]=\"tabObj.tab.tabTitle()\"\r\n (click)=\"!tabObj.tab.selected() && selectTab(tabObj.tab)\"\r\n (focus)=\"onTabFocus(tabObj.tab)\"\r\n (blur)=\"onTabBlur(tabObj.tab)\"\r\n [tabindex]=\"tabObj.tab.disabled() ? -1 : 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"] }]
|
|
16490
16495
|
}] });
|
|
16491
16496
|
|
|
16492
16497
|
class ArdiumTabberModule {
|