@ardium-ui/ui 5.0.0-alpha.10 → 5.0.0-alpha.101

package/lib/slider/range-slider/range-slider.types.d.ts

@@ -0,0 +1,6 @@
+export declare const ArdRangeSelectionBehavior: {
+    readonly Push: "push";
+    readonly Allow: "allow";
+    readonly Block: "block";
+};
+export type ArdRangeSelectionBehavior = typeof ArdRangeSelectionBehavior[keyof typeof ArdRangeSelectionBehavior];

package/lib/slider/slider.component.d.ts

@@ -7,17 +7,18 @@ export declare class ArdiumSliderComponent extends _AbstractSlider<number> {
     readonly componentName = "slider";
     protected readonly _DEFAULTS: ArdSliderDefaults;
     constructor(defaults: ArdSliderDefaults);
-    protected _value: number;
-    _tooltipValue: string;
-    protected _updateTooltipValue(): void;
-    getTooltipContext(): SliderTooltipContext;
+    protected readonly _value: import("@angular/core").WritableSignal<number>;
+    protected readonly _tooltipValue: import("@angular/core").Signal<string>;
+    readonly tooltipContext: import("@angular/core").Signal<SliderTooltipContext>;
     writeValue(v: any): void;
+    cleanupValueAfterMinMaxStepChange(): void;
     reset(): void;
     increment(steps?: number): void;
     decrement(steps?: number): void;
     onTrackHitboxPointerDown(event: MouseEvent | TouchEvent): void;
     onPointerMove(event: MouseEvent | TouchEvent): void;
     protected _percentValueToValue(percent: number): number;
+    protected readonly _handlePositions: import("@angular/core").Signal<[number, number]>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumSliderComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumSliderComponent, "ard-slider", never, {}, {}, never, never, false, never>;
 }

package/lib/slider/slider.types.d.ts

@@ -15,14 +15,14 @@ export declare const SliderDecorationPosition: {
 export type SliderDecorationPosition = (typeof SliderDecorationPosition)[keyof typeof SliderDecorationPosition];
 export interface SliderLabelObject {
     label: string | number;
-    for: number;
+    value: number;
 }
 export interface _InternalSliderLabelObject {
     label: string;
     positionPercent: string;
 }
 export interface SliderRange<T = number> {
-    low: T;
-    high: T;
+    from: T;
+    to: T;
 }
 export type SliderTooltipFormatFn = (value: number) => string | number;

package/lib/snackbar/snackbar-ref.d.ts

@@ -1,9 +1,9 @@
+import { OverlayRef } from '@angular/cdk/overlay';
 import { ComponentType } from '@angular/cdk/portal';
 import { InjectionToken } from '@angular/core';
 import { BehaviorSubject, Subject } from 'rxjs';
-import { ArdSnackbarData, ArdSnackbarOptions, ArdSnackbarType } from './snackbar.types';
-import { OverlayRef } from '@angular/cdk/overlay';
 import { ComponentColor } from '../types/colors.types';
+import { ArdSnackbarData, ArdSnackbarOptions, ArdSnackbarType } from './snackbar.types';
 export declare const ARD_SNACKBAR_DATA: InjectionToken<ArdSnackbarData>;
 export declare const ARD_SNACKBAR_COLOR: InjectionToken<ComponentColor>;
 export declare const ARD_SNACKBAR_TYPE: InjectionToken<ArdSnackbarType>;
@@ -17,20 +17,53 @@ export declare class _ArdSnackbarRefInternal<T> {
     private readonly _onOpen;
     private readonly _onCloseStart;
     markAsOpened(): void;
-    markAsStartingToClose(): void;
+    markAsStartingToClose(withAction?: boolean): void;
 }
+/**
+ * Reference to an opened snackbar.
+ * Provides methods for closing the snackbar programmatically, and observables for subscribing to open, close, and action events.
+ */
 export declare class ArdSnackbarRef<T = unknown> {
     private readonly dismiss;
     private readonly _onOpen;
     private readonly _onCloseStart;
     constructor(dismiss: (withAction?: boolean) => void, _onOpen: Subject<void>, _onCloseStart: BehaviorSubject<boolean>);
     private readonly _onClose;
+    private readonly _onAction;
+    /**
+     * Observable that emits when the snackbar is opened. Completes after emitting the first value.
+     */
     readonly onOpen: import("rxjs").Observable<void>;
+    /**
+     * Observable that emits when the snackbar is closed and all animations have finished. Emits a boolean value indicating whether the snackbar was closed as a result of the user clicking the action button (true) or not (false). Completes after emitting the first value.
+     */
     readonly onClose: import("rxjs").Observable<boolean>;
+    /**
+     * Observable that emits when the snackbar action is triggered, before the snackbar starts closing. Completes when the snackbar is closed, regardless of whether any value was emitted.
+     */
+    readonly onAction: import("rxjs").Observable<void>;
+    /**
+     * Observable that emits when the snackbar starts the closing process. Emits a boolean value indicating whether the closing was triggered by the user clicking the action button (true) or not (false). Completes after emitting the first value.
+     */
     readonly onCloseStart: import("rxjs").Observable<boolean>;
-    instance: T;
+    /**
+     * The instance of the component rendered inside the snackbar.
+     */
+    readonly instance: T;
+    /**
+     * Closes the snackbar, optionally indicating that the action was triggered.
+     * @param withAction A boolean value indicating whether the snackbar is being closed as a result of the user clicking the action button (true) or not (false).
+     */
     close(withAction?: boolean): void;
+    /**
+     * Marks the snackbar as closed after the closing animation has finished.
+     * @param withAction
+     * @returns
+     */
     markAsClosed(withAction?: boolean): void;
     private _isClosed;
+    /**
+     * Indicates whether the snackbar has been closed and the closing animation has finished.
+     */
     get isClosed(): boolean;
 }

package/lib/snackbar/snackbar.service.d.ts

@@ -4,6 +4,9 @@ import { ArdSnackbarRef } from './snackbar-ref';
 import { _ArdSimpleSnackbarComponent } from './snackbar.component';
 import { ArdSnackbarOptions } from './snackbar.types';
 import * as i0 from "@angular/core";
+/**
+ * Service for opening snackbars. Provides methods for opening snackbars with either a simple message and action, or with a custom component. Manages a queue of snackbars to be displayed, and handles the display and dismissal of snackbars according to the specified options. Also provides methods for retrieving and clearing the snackbar queue.
+ */
 export declare class ArdiumSnackbarService implements OnDestroy {
     private readonly _snackbarQueue;
     private _openedSnackbar?;
@@ -11,14 +14,38 @@ export declare class ArdiumSnackbarService implements OnDestroy {
     private readonly _animationLength;
     private readonly _overlay;
     private readonly _injector;
+    /**
+     * Opens a snackbar with the given message, action and options.
+     * @param message The message to display in the snackbar.
+     * @param action The label for the snackbar action. If provided, the snackbar will have an action button with this label.
+     *               When the action button is clicked, the snackbar will emit a close event with `withAction` set to `true`.
+     * @param options Additional options for configuring the snackbar.
+     * @returns A reference to the opened snackbar.
+     */
     open(message: string, action?: string, options?: ArdSnackbarOptions): ArdSnackbarRef<_ArdSimpleSnackbarComponent>;
+    /**
+     * Opens a snackbar with a custom component, passing the given options.
+     * @param component The component to display inside the snackbar. This component will be instantiated and inserted into the snackbar overlay.
+     * @param options Additional options for configuring the snackbar, such as data to pass to the component, placement, styling, etc.
+     * @returns A reference to the opened snackbar, with the generic type of the component instance. You can use this reference to subscribe to open/close events, and to close the snackbar programmatically.
+     */
     openFromComponent<T>(component: ComponentType<T>, options: ArdSnackbarOptions): ArdSnackbarRef<T>;
     private _handleQueue;
     private _mergeOptions;
     private _openNext;
     private _createOverlay;
+    /**
+     * Dismisses the currently opened snackbar, if any. If `withAction` is true, it indicates that the snackbar is being dismissed as a result of the user clicking the action button (if it has one). This will cause the snackbar to emit a close event with `withAction` set to true, allowing you to differentiate between automatic dismissal and user-initiated dismissal via the action button.
+     * @param withAction Optional boolean indicating whether the dismissal is due to the user clicking the action button. Defaults to false. If true, the snackbar's close event will emit with `withAction` set to true, allowing you to handle this case differently if needed.
+     */
     dismissCurrent(withAction?: boolean): void;
+    /**
+     * Returns an array of references to the snackbars currently in the queue, in the order they will be opened. Note that this does not include the currently opened snackbar, if any.
+     */
     getQueue(): ArdSnackbarRef<unknown>[];
+    /**
+     * Clears all pending snackbars from the queue. Does not affect the currently opened snackbar, if any. Use with caution, as this will remove all pending snackbars that have not yet been displayed, and they will not be shown at all.
+     */
     clearQueue(): void;
     /**
      * @deprecated Internal implementation detail, do not use directly.

package/lib/snackbar/snackbar.types.d.ts

@@ -33,16 +33,52 @@ export interface ArdSnackbarData {
     message: string;
     action?: string;
 }
+/**
+ * Options for configuring the behavior and appearance of a snackbar.
+ */
 export interface ArdSnackbarOptions {
+    /**
+     * Message and action text data to be passed to the snackbar component
+     */
     data?: ArdSnackbarData;
+    /**
+     * Placement options for the snackbar. If not provided, the snackbar will be centered at the bottom of the screen.
+     */
     placement?: {
+        /**
+         * The alignment of the snackbar in relation to the origin element. If not provided, it will default to 'bottom-center'.
+         */
         align?: ArdSnackbarAlignment;
+        /**
+         * The origin element to which the snackbar is attached. If not provided, it will default to 'document.body'.
+         */
         origin?: ArdSnackbarOrigin;
+        /**
+         * The relation of the snackbar to the origin element. If not provided, it will default to 'outside'.
+         */
         originRelation?: ArdSnackbarOriginRelation;
     };
+    /**
+     * Duration in milliseconds for which the snackbar should be visible. If not provided, it will default to 3000ms. Set to `Infinity` for a persistent snackbar that must be dismissed manually.
+     */
     duration?: number;
+    /**
+     * Color of the snackbar. This will apply a corresponding color class to the snackbar element, which can be used to style the snackbar based on the chosen color. If not provided, it will default to 'primary'.
+     */
     color?: ComponentColor;
+    /**
+     * Type of the snackbar, which can be used to apply specific styles or icons based on the type. If not provided, it will default to 'none'.
+     */
     type?: ArdSnackbarType;
+    /**
+     * Defines how the snackbar should behave when there are multiple snackbars in the queue. If not provided, it will default to 'default'.
+     * - 'default': New snackbars will be added to the end of the queue and displayed after the currently opened snackbar is dismissed.
+     * - 'skip': The new snackbar will be added to the start of the queue and displayed after the current snackbar is dismissed.
+     * - 'overwrite': If there is already an opened snackbar, it will be immediately dismissed and replaced with the new snackbar.
+     */
     queueHandling?: ArdSnackbarQueueHandling;
+    /**
+     * Additional CSS class or classes to apply to the snackbar panel.
+     */
     panelClass?: string | string[];
 }

package/lib/stack/index.d.ts

@@ -0,0 +1,3 @@
+export * from './stack.component';
+export * from './stack.defaults';
+export * from './stack.module';

package/lib/stack/stack.component.d.ts

@@ -0,0 +1,26 @@
+import { ArdBreakpointsConfig } from '../breakpoints/breakpoints';
+import { ArdGridAlign, ArdGridDirection, ArdGridJustify, ArdGridWrap } from '../grid';
+import * as i0 from "@angular/core";
+export declare class ArdiumStackComponent {
+    private readonly _componentId;
+    protected readonly _DEFAULTS: import("./stack.defaults").ArdStackDefaults;
+    private readonly _breakpointService;
+    readonly direction: import("@angular/core").InputSignalWithTransform<Required<ArdBreakpointsConfig<ArdGridDirection>>, string | ArdBreakpointsConfig<ArdGridDirection>>;
+    readonly justifyContent: import("@angular/core").InputSignalWithTransform<Required<ArdBreakpointsConfig<ArdGridJustify>>, string | ArdBreakpointsConfig<ArdGridJustify>>;
+    readonly alignItems: import("@angular/core").InputSignalWithTransform<Required<ArdBreakpointsConfig<ArdGridAlign>>, string | ArdBreakpointsConfig<ArdGridAlign>>;
+    readonly spacing: import("@angular/core").InputSignalWithTransform<Required<ArdBreakpointsConfig<string | number>>, string | number | ArdBreakpointsConfig<string | number>>;
+    readonly columnSpacing: import("@angular/core").InputSignalWithTransform<ArdBreakpointsConfig<string | number> | null, string | number | ArdBreakpointsConfig<string | number> | null>;
+    readonly rowSpacing: import("@angular/core").InputSignalWithTransform<ArdBreakpointsConfig<string | number> | null, string | number | ArdBreakpointsConfig<string | number> | null>;
+    readonly wrap: import("@angular/core").InputSignalWithTransform<Required<ArdBreakpointsConfig<ArdGridWrap>>, string | ArdBreakpointsConfig<ArdGridWrap>>;
+    readonly finalColumnSpacing: import("@angular/core").Signal<ArdBreakpointsConfig<string | number>>;
+    readonly finalRowSpacing: import("@angular/core").Signal<ArdBreakpointsConfig<string | number>>;
+    readonly currentDirection: import("@angular/core").Signal<ArdGridDirection | undefined>;
+    readonly currentJustifyContent: import("@angular/core").Signal<ArdGridJustify | undefined>;
+    readonly currentAlignItems: import("@angular/core").Signal<ArdGridAlign | undefined>;
+    readonly currentColumnSpacing: import("@angular/core").Signal<string | number | undefined>;
+    readonly currentRowSpacing: import("@angular/core").Signal<string | number | undefined>;
+    readonly currentWrap: import("@angular/core").Signal<ArdGridWrap | undefined>;
+    readonly currentStyle: import("@angular/core").Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumStackComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumStackComponent, "ard-stack", never, { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "justifyContent": { "alias": "justifyContent"; "required": false; "isSignal": true; }; "alignItems": { "alias": "alignItems"; "required": false; "isSignal": true; }; "spacing": { "alias": "spacing"; "required": false; "isSignal": true; }; "columnSpacing": { "alias": "columnSpacing"; "required": false; "isSignal": true; }; "rowSpacing": { "alias": "rowSpacing"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; }, {}, never, ["*"], false, never>;
+}

package/lib/stack/stack.defaults.d.ts

@@ -0,0 +1,14 @@
+import { InjectionToken, Provider } from '@angular/core';
+import { ArdBreakpointsConfig } from '../breakpoints';
+import { ArdGridAlign, ArdGridDirection, ArdGridJustify, ArdGridWrap } from '../grid';
+export interface ArdStackDefaults {
+    direction: ArdGridDirection | ArdBreakpointsConfig<ArdGridDirection>;
+    justifyContent: ArdGridJustify | ArdBreakpointsConfig<ArdGridJustify>;
+    alignItems: ArdGridAlign | ArdBreakpointsConfig<ArdGridAlign>;
+    spacing: number | string | ArdBreakpointsConfig<number | string>;
+    columnSpacing: null | number | string | ArdBreakpointsConfig<number | string>;
+    rowSpacing: null | number | string | ArdBreakpointsConfig<number | string>;
+    wrap: ArdGridWrap | ArdBreakpointsConfig<ArdGridWrap>;
+}
+export declare const ARD_STACK_DEFAULTS: InjectionToken<ArdStackDefaults>;
+export declare function provideStackDefaults(config: Partial<ArdStackDefaults>): Provider;

package/lib/stack/stack.module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./stack.component";
+export declare class ArdiumStackModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumStackModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumStackModule, [typeof i1.ArdiumStackComponent], never, [typeof i1.ArdiumStackComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumStackModule>;
+}

package/lib/star/rating-input/rating-input.component.d.ts

@@ -1,13 +1,14 @@
 import { ControlValueAccessor } from '@angular/forms';
 import { NumberLike } from '@ardium-ui/devkit';
-import { _NgModelComponentBase } from '../../_internal/ngmodel-component';
+import { _FormFieldComponentBase } from '../../_internal/form-field-component';
+import { ArdFormFieldControl } from '../../form-field';
 import { ArdiumStarButtonComponent } from '../star-button/star-button.component';
 import { StarColor } from '../star.types';
 import { ArdRatingInputDefaults } from './rating-input.defaults';
 import { ArdRatingInputStarButtonTemplateDirective } from './rating-input.directives';
 import { ArdRatingInputStarButtonTemplateContext } from './rating-input.types';
 import * as i0 from "@angular/core";
-export declare class ArdiumRatingInputComponent extends _NgModelComponentBase implements ControlValueAccessor {
+export declare class ArdiumRatingInputComponent extends _FormFieldComponentBase implements ControlValueAccessor, ArdFormFieldControl {
     readonly wrapperClasses: import("@angular/core").InputSignal<string>;
     protected readonly _DEFAULTS: ArdRatingInputDefaults;
     readonly color: import("@angular/core").InputSignal<StarColor>;

package/lib/star/rating-input/rating-input.defaults.d.ts

@@ -1,7 +1,7 @@
 import { InjectionToken, Provider } from '@angular/core';
-import { _NgModelComponentDefaults } from '../../_internal/ngmodel-component';
+import { _FormFieldComponentDefaults } from '../../_internal/form-field-component';
 import { StarColor } from '../star.types';
-export interface ArdRatingInputDefaults extends _NgModelComponentDefaults {
+export interface ArdRatingInputDefaults extends _FormFieldComponentDefaults {
     color: StarColor;
     max: number;
 }

package/lib/star/star-button/star-button.component.d.ts

@@ -8,13 +8,16 @@ import { ArdStarButtonStarTemplateDirective } from './star-button.directives';
 import { ArdStarButtonStarTemplateContext } from './star-button.types';
 import * as i0 from "@angular/core";
 export declare class ArdiumStarButtonComponent extends _BooleanComponentBase implements ControlValueAccessor {
-    readonly wrapperClasses: import("@angular/core").InputSignal<string>;
     protected readonly _DEFAULTS: ArdStarButtonDefaults;
     constructor(defaults: ArdStarButtonDefaults);
+    protected readonly _componentId = "107";
+    protected readonly _componentName = "start-button";
+    readonly wrapperClasses: import("@angular/core").InputSignal<string>;
     readonly clickStrategy: import("@angular/core").InputSignal<ClickStrategy>;
     readonly color: import("@angular/core").InputSignal<StarColor>;
     readonly ngClasses: import("@angular/core").Signal<string>;
     readonly starFillState: import("@angular/core").Signal<StarFillMode>;
+    readonly starFillInternal: import("@angular/core").Signal<StarFillMode>;
     onClick(): void;
     readonly starTemplate: import("@angular/core").Signal<ArdStarButtonStarTemplateDirective | undefined>;
     readonly starTemplateContext: import("@angular/core").Signal<ArdStarButtonStarTemplateContext>;

package/lib/star/star-button/star-button.types.d.ts

@@ -2,5 +2,6 @@ import { StarColor, StarFillMode } from '../star.types';
 export interface ArdStarButtonStarTemplateContext {
     $implicit: StarFillMode;
     fillMode: StarFillMode;
+    fillModeInternal: StarFillMode;
     color: StarColor;
 }

package/lib/tabber/index.d.ts

@@ -1,5 +1,6 @@
 export * from './tab/tab.component';
-export * from './tab/tab.defaults';
 export * from './tabber.component';
 export * from './tabber.defaults';
+export * from './tabber.directives';
 export * from './tabber.module';
+export * from './tabber.types';

package/lib/tabber/tab/tab.component.d.ts

@@ -1,20 +1,27 @@
+import { OnDestroy, TemplateRef } from '@angular/core';
 import { BooleanLike } from '@ardium-ui/devkit';
+import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
-export declare class ArdiumTabComponent {
-    protected readonly _DEFAULTS: import("./tab.defaults").ArdTabDefaults;
+export declare class ArdiumTabComponent implements OnDestroy {
+    protected readonly _DEFAULTS: import("../tabber.defaults").ArdTabberDefaults;
     readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly pointerEventsWhenDisabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly tabTitle: import("@angular/core").InputSignal<string>;
     readonly selected: import("@angular/core").WritableSignal<boolean>;
     set _selected(v: any);
     setSelected(state: boolean): void;
-    get _selectedHostAttribute(): boolean;
     private _emitChange;
     readonly focused: import("@angular/core").WritableSignal<boolean>;
-    readonly _label: import("@angular/core").InputSignal<string | null>;
-    readonly label: import("@angular/core").Signal<string>;
-    readonly tabId: import("@angular/core").InputSignal<string>;
+    readonly _label: import("@angular/core").InputSignal<string | TemplateRef<any> | null>;
+    readonly label: import("@angular/core").Signal<string | TemplateRef<any>>;
+    _isTabIdInitialized: boolean;
+    readonly tabId: import("@angular/core").InputSignalWithTransform<string, string>;
     readonly focusEvent: import("@angular/core").OutputEmitterRef<void>;
     readonly blurEvent: import("@angular/core").OutputEmitterRef<void>;
     readonly selectedChange: import("@angular/core").OutputEmitterRef<boolean>;
+    readonly selectedChangeInternal$: Subject<boolean>;
+    private _selectedChangeSub;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumTabComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumTabComponent, "ard-tab", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "_selected": { "alias": "selected"; "required": false; }; "_label": { "alias": "label"; "required": false; "isSignal": true; }; "tabId": { "alias": "tabId"; "required": true; "isSignal": true; }; }, { "focusEvent": "focusEvent"; "blurEvent": "blurEvent"; "selectedChange": "selectedChange"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumTabComponent, "ard-tab", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "pointerEventsWhenDisabled": { "alias": "pointerEventsWhenDisabled"; "required": false; "isSignal": true; }; "tabTitle": { "alias": "tabTitle"; "required": false; "isSignal": true; }; "_selected": { "alias": "selected"; "required": false; }; "_label": { "alias": "label"; "required": false; "isSignal": true; }; "tabId": { "alias": "tabId"; "required": true; "isSignal": true; }; }, { "focusEvent": "focus"; "blurEvent": "blur"; "selectedChange": "selectedChange"; }, never, ["*"], false, never>;
 }

package/lib/tabber/tabber.component.d.ts

@@ -1,22 +1,31 @@
-import { AfterContentInit } from '@angular/core';
+import { AfterContentInit, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
 import { BooleanLike } from '@ardium-ui/devkit';
 import { OneAxisAlignment } from '../types/alignment.types';
 import { ComponentColor } from '../types/colors.types';
 import { ArdiumTabComponent } from './tab/tab.component';
+import { ArdTabberLabelTemplateDirective } from './tabber.directives';
+import { TabberLabelContext } from './tabber.types';
 import * as i0 from "@angular/core";
-export declare class ArdiumTabberComponent implements AfterContentInit {
+export declare class ArdiumTabberComponent implements AfterContentInit, OnChanges {
     protected readonly _DEFAULTS: import("./tabber.defaults").ArdTabberDefaults;
     readonly tabs: import("@angular/core").Signal<readonly ArdiumTabComponent[]>;
-    readonly currentTab: import("@angular/core").WritableSignal<ArdiumTabComponent | null>;
-    readonly currentFocusedTab: import("@angular/core").WritableSignal<ArdiumTabComponent | null>;
+    readonly selectedTabId: import("@angular/core").ModelSignal<string | null>;
+    readonly selectedTab: import("@angular/core").Signal<ArdiumTabComponent | null>;
+    readonly focusedTabId: import("@angular/core").WritableSignal<string | null>;
+    readonly focusedTab: import("@angular/core").Signal<ArdiumTabComponent | null>;
+    private _selectedTabIdToCheck;
+    ngOnChanges(changes: SimpleChanges): void;
+    private _validateSelectedTabId;
     readonly initialTab: import("@angular/core").InputSignal<string | undefined>;
     ngAfterContentInit(): void;
-    onTabClick(tab: ArdiumTabComponent): void;
+    selectTab(tab: ArdiumTabComponent): void;
+    private _unselectSpecificTab;
+    private _unselectCurrentTab;
+    private _selectNewTab;
     onTabFocus(tab: ArdiumTabComponent): void;
     onTabBlur(tab: ArdiumTabComponent): void;
     readonly focusEvent: import("@angular/core").OutputEmitterRef<string>;
     readonly blurEvent: import("@angular/core").OutputEmitterRef<string>;
-    readonly changeTab: import("@angular/core").OutputEmitterRef<string>;
     readonly color: import("@angular/core").InputSignal<ComponentColor>;
     readonly ngClasses: import("@angular/core").Signal<string>;
     readonly stretchTabs: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
@@ -24,6 +33,12 @@ export declare class ArdiumTabberComponent implements AfterContentInit {
     readonly tabAlignment: import("@angular/core").InputSignal<OneAxisAlignment>;
     readonly tabContainerClasses: import("@angular/core").Signal<string>;
     readonly tabIndex: import("@angular/core").InputSignal<string | number>;
+    readonly labelTemplate: import("@angular/core").Signal<ArdTabberLabelTemplateDirective | undefined>;
+    readonly tabsWithTemplates: import("@angular/core").Signal<{
+        tab: ArdiumTabComponent;
+        template: TemplateRef<any> | null;
+        templateContext: TabberLabelContext | null;
+    }[]>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumTabberComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumTabberComponent, "ard-tabber", never, { "initialTab": { "alias": "initialTab"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "stretchTabs": { "alias": "stretchTabs"; "required": false; "isSignal": true; }; "uniformTabWidths": { "alias": "uniformTabWidths"; "required": false; "isSignal": true; }; "tabAlignment": { "alias": "tabAlignment"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; }, { "focusEvent": "focus"; "blurEvent": "blur"; "changeTab": "changeTab"; }, ["tabs"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumTabberComponent, "ard-tabber", never, { "selectedTabId": { "alias": "selectedTab"; "required": false; "isSignal": true; }; "initialTab": { "alias": "initialTab"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "stretchTabs": { "alias": "stretchTabs"; "required": false; "isSignal": true; }; "uniformTabWidths": { "alias": "uniformTabWidths"; "required": false; "isSignal": true; }; "tabAlignment": { "alias": "tabAlignment"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; }, { "selectedTabId": "selectedTabChange"; "focusEvent": "focus"; "blurEvent": "blur"; }, ["tabs", "labelTemplate"], ["*"], false, never>;
 }

package/lib/tabber/tabber.defaults.d.ts

@@ -2,6 +2,8 @@ import { InjectionToken, Provider } from '@angular/core';
 import { OneAxisAlignment } from './../types/alignment.types';
 import { ComponentColor } from './../types/colors.types';
 export interface ArdTabberDefaults {
+    tabDisabled: boolean;
+    tabPointerEventsWhenDisabled: boolean;
     color: ComponentColor;
     stretchTabs: boolean;
     uniformTabWidths: boolean;

package/lib/tabber/tabber.directives.d.ts

@@ -0,0 +1,9 @@
+import { TemplateRef } from '@angular/core';
+import { TabberLabelContext } from './tabber.types';
+import * as i0 from "@angular/core";
+export declare class ArdTabberLabelTemplateDirective {
+    template: TemplateRef<TabberLabelContext>;
+    constructor(template: TemplateRef<TabberLabelContext>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdTabberLabelTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdTabberLabelTemplateDirective, "ng-template[ard-tabber-label-tmp]", never, {}, {}, never, never, false, never>;
+}

package/lib/tabber/tabber.module.d.ts

@@ -1,9 +1,10 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./tabber.component";
 import * as i2 from "./tab/tab.component";
-import * as i3 from "@angular/common";
+import * as i3 from "./tabber.directives";
+import * as i4 from "@angular/common";
 export declare class ArdiumTabberModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumTabberModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumTabberModule, [typeof i1.ArdiumTabberComponent, typeof i2.ArdiumTabComponent], [typeof i3.CommonModule], [typeof i1.ArdiumTabberComponent, typeof i2.ArdiumTabComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumTabberModule, [typeof i1.ArdiumTabberComponent, typeof i2.ArdiumTabComponent, typeof i3.ArdTabberLabelTemplateDirective], [typeof i4.CommonModule], [typeof i1.ArdiumTabberComponent, typeof i2.ArdiumTabComponent, typeof i3.ArdTabberLabelTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumTabberModule>;
 }

package/lib/tabber/tabber.types.d.ts

@@ -0,0 +1,5 @@
+export interface TabberLabelContext {
+    $implicit: string;
+    label: string;
+    tabId: string;
+}

package/lib/types/alignment.types.d.ts

@@ -5,7 +5,13 @@ export declare const SimpleOneAxisAlignment: {
 export type SimpleOneAxisAlignment = (typeof SimpleOneAxisAlignment)[keyof typeof SimpleOneAxisAlignment];
 export declare const OneAxisAlignment: {
     readonly Left: "left";
-    readonly Middle: "middle";
+    readonly Center: "center";
     readonly Right: "right";
 };
 export type OneAxisAlignment = (typeof OneAxisAlignment)[keyof typeof OneAxisAlignment];
+export declare const OneAxisAlignmentOrientational: {
+    readonly Start: "start";
+    readonly Center: "center";
+    readonly End: "end";
+};
+export type OneAxisAlignmentOrientational = (typeof OneAxisAlignmentOrientational)[keyof typeof OneAxisAlignmentOrientational];

package/lib/types/item-storage.types.d.ts

@@ -1,31 +1,30 @@
-import { WritableSignal } from '@angular/core';
-import { Nullable } from './utility.types';
-export interface OptionContext<T extends ArdSimplestStorageItem> {
+export type OptionContext<T extends ArdSimplestStorageItem> = {
     $implicit: T;
     item: T;
-    itemData: any;
-}
+} & {
+    [K in keyof Omit<T, 'filtered'>]: T[K];
+};
 export interface ArdSimplestStorageItem {
-    readonly itemData: WritableSignal<any>;
+    readonly itemData: object;
     readonly index: number;
-    readonly value: WritableSignal<any>;
-    readonly label: WritableSignal<string>;
-    readonly selected: WritableSignal<Nullable<boolean>>;
-    readonly highlighted: WritableSignal<Nullable<boolean>>;
+    readonly value: any;
+    readonly label: string;
+    readonly selected: boolean;
+    readonly highlighted: boolean;
 }
 export interface ArdOptionSimple extends ArdSimplestStorageItem {
-    readonly disabled: WritableSignal<Nullable<boolean>>;
+    readonly disabled: boolean;
 }
 export interface ArdOption extends ArdOptionSimple {
+    readonly filtered: boolean;
+    readonly isExactMatch: boolean;
     readonly group: unknown;
-    readonly highlighted_recently: WritableSignal<Nullable<boolean>>;
+    readonly highlighted_recently: boolean;
 }
 export interface ArdOptionGroup {
-    readonly label: WritableSignal<string>;
-    readonly disabled: WritableSignal<Nullable<boolean>>;
-    readonly highlighted: WritableSignal<Nullable<boolean>>;
-    readonly selected: WritableSignal<Nullable<boolean>>;
-    readonly children: WritableSignal<ArdOption[]>;
+    readonly label: string;
+    readonly disabled: boolean;
+    readonly children: ArdOption[];
 }
 export declare const ArdPanelPosition: {
     readonly Top: "top";
@@ -34,6 +33,18 @@ export declare const ArdPanelPosition: {
 };
 export type ArdPanelPosition = (typeof ArdPanelPosition)[keyof typeof ArdPanelPosition];
 export type ArdItemGroupMap = Map<any, ArdOptionGroup>;
+/**
+ * Function used to determine the group label for an item, based on the item's data.
+ */
 export type GroupByFn = (item: any) => any;
-export type SearchFn = (searchTerm: string, item: ArdOption) => boolean;
+/**
+ * Function used to search for items based on a search term.
+ *
+ * Should return a tuple where the first value is a boolean indicating if the item matches the search term,
+ * and the second value is a boolean indicating if the match is an exact match (used for auto-highlighting).
+ */
+export type SearchFn = (searchTerm: string, item: ArdOption) => [boolean, boolean];
+/**
+ * Function used to compare a value with an option's value to determine if they are considered equal.
+ */
 export type CompareWithFn = (value: any, optionValue: any) => boolean;

package/lib/types/theming.types.d.ts

@@ -31,6 +31,7 @@ export declare const DecorationElementAppearance: {
     readonly Outlined: "outlined";
     readonly OutlinedStrong: "outlined-strong";
     readonly Filled: "filled";
+    readonly FilledStrong: "filled-strong";
 };
 export type DecorationElementAppearance = (typeof DecorationElementAppearance)[keyof typeof DecorationElementAppearance];
 export declare const PanelVariant: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ardium-ui/ui",
-  "version": "5.0.0-alpha.10",
+  "version": "5.0.0-alpha.101",
   "peerDependencies": {
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",
@@ -12,7 +12,8 @@
     "first-last": "^1.1.1",
     "more-rounding": "^4.2.2",
     "resolve-object-path": "^2.0.0",
-    "@ardium-ui/devkit": "^7.7.1",
+    "lodash": "^4.17.23",
+    "@ardium-ui/devkit": "8.1.0",
     "simple-bool": "^3.0.1",
     "take-chance": "^4.3.2",
     "color": "^4.2.3"