@ardium-ui/ui 5.0.0-alpha.36 → 5.0.0-alpha.38

package/lib/inputs/date-input/date-input.defaults.d.ts

@@ -1,6 +1,6 @@
 import { InjectionToken, Provider } from '@angular/core';
 import { _FormFieldComponentDefaults } from '../../_internal/form-field-component';
-import { ArdCalendarFilterFn, ArdCalendarView } from '../../calendar/calendar.types';
+import { ArdCalendarFilterFn, ArdCalendarView, DateRange } from '../../calendar/calendar.types';
 import { DropdownPanelAppearance, DropdownPanelVariant } from '../../dropdown-panel';
 import { ComponentColor } from '../../types/colors.types';
 import { FormElementAppearance, FormElementVariant } from '../../types/theming.types';
@@ -9,8 +9,9 @@ import { ArdDateInputDeserializeFn, ArdDateInputMinMaxStrategy, ArdDateInputSeri
 export interface ArdDateInputDefaults extends _FormFieldComponentDefaults {
     inputAttrs: Record<string, any>;
     placeholder: string;
-    serializeFn: ArdDateInputSerializeFn;
-    deserializeFn: ArdDateInputDeserializeFn;
+    serializeFn: ArdDateInputSerializeFn<Date>;
+    rangeSerializeFn: ArdDateInputSerializeFn<DateRange>;
+    deserializeFn: ArdDateInputDeserializeFn<Date>;
     appearance: FormElementAppearance;
     variant: FormElementVariant;
     color: ComponentColor;
@@ -19,15 +20,32 @@ export interface ArdDateInputDefaults extends _FormFieldComponentDefaults {
     dropdownVariant: DropdownPanelVariant;
     minMaxStrategy: ArdDateInputMinMaxStrategy;
     startView: Nullable<ArdCalendarView>;
+    inputReadOnly: boolean;
+    calendarDisabled: boolean;
+    calendarHidden: boolean;
     activeView: ArdCalendarView;
     activeYear: number;
     activeMonth: number;
     firstWeekday: number;
     multipleYearPageChangeModifier: number;
+    numberOfCalendars: number;
     min: Date | null;
     max: Date | null;
     filter: ArdCalendarFilterFn | null;
     UTC: boolean;
+    hideFloatingMonth: boolean;
+    calendarDaysViewHeaderDateFormat: string;
+    calendarYearsViewHeaderDateFormat: string;
+    calendarMonthsViewHeaderDateFormat: string;
+    calendarWeekdayDateFormat: string;
+    calendarWeekdayTitleDateFormat: string;
+    calendarFloatingMonthDateFormat: string;
+    calendarFloatingMonthTitleDateFormat: string;
+    calendarYearDateFormat: string;
+    calendarMonthDateFormat: string;
+    calendarDayDateFormat: string;
+    acceptButtonText: string;
+    cancelButtonText: string;
 }
 export declare const ARD_DATE_INPUT_DEFAULTS: InjectionToken<ArdDateInputDefaults>;
 export declare function provideDateInputDefaults(config: Partial<ArdDateInputDefaults>): Provider;

package/lib/inputs/date-input/{date-input.directive.d.ts → date-input.directives.d.ts}

@@ -15,8 +15,8 @@ export declare class ArdDateInputSuffixTemplateDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateInputSuffixTemplateDirective, "ard-date-input > ng-template[ard-suffix-tmp]", never, {}, {}, never, never, false, never>;
 }
 export declare class ArdDateInputValueTemplateDirective {
-    template: TemplateRef<ArdDateInputValueContext>;
-    constructor(template: TemplateRef<ArdDateInputValueContext>);
+    template: TemplateRef<ArdDateInputValueContext<Date>>;
+    constructor(template: TemplateRef<ArdDateInputValueContext<Date>>);
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateInputValueTemplateDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateInputValueTemplateDirective, "ard-date-input > ng-template[ard-value-tmp]", never, {}, {}, never, never, false, never>;
 }

package/lib/inputs/date-input/date-input.module.d.ts

@@ -1,16 +1,17 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./date-input.component";
-import * as i2 from "./date-input.directive";
+import * as i2 from "./date-input.directives";
 import * as i3 from "@angular/common";
 import * as i4 from "../../form-field-frame/form-field-frame.module";
 import * as i5 from "../../dropdown-panel/dropdown-panel.module";
 import * as i6 from "@ardium-ui/devkit";
 import * as i7 from "../../calendar/calendar.module";
 import * as i8 from "../../buttons/icon-button/icon-button.module";
-import * as i9 from "../../icon/icon.module";
-import * as i10 from "../../calendar/calendar.internal-directives";
+import * as i9 from "../../buttons/button/button.module";
+import * as i10 from "../../icon/icon.module";
+import * as i11 from "../../calendar/calendar.internal-directives";
 export declare class ArdiumDateInputModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumDateInputModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumDateInputModule, [typeof i1.ArdiumDateInputComponent, typeof i2.ArdDateInputPrefixTemplateDirective, typeof i2.ArdDateInputSuffixTemplateDirective, typeof i2.ArdDateInputValueTemplateDirective, typeof i2.ArdDateInputCalendarIconTemplateDirective, typeof i2.ArdDateInputAcceptButtonsTemplateDirective, typeof i2.ArdDateInputDaysViewHeaderTemplateDirective, typeof i2.ArdDateInputDayTemplateDirective, typeof i2.ArdDateInputFloatingMonthTemplateDirective, typeof i2.ArdDateInputMonthsViewHeaderTemplateDirective, typeof i2.ArdDateInputMonthTemplateDirective, typeof i2.ArdDateInputWeekdayTemplateDirective, typeof i2.ArdDateInputYearsViewHeaderTemplateDirective, typeof i2.ArdDateInputYearTemplateDirective], [typeof i3.CommonModule, typeof i4.ArdiumFormFieldFrameModule, typeof i5.ArdiumDropdownPanelModule, typeof i6.ArdiumClickOutsideModule, typeof i7.ArdiumCalendarModule, typeof i8.ArdiumIconButtonModule, typeof i9.ArdiumIconModule, typeof i10._CalendarTemplateRepositoryDirective], [typeof i1.ArdiumDateInputComponent, typeof i2.ArdDateInputPrefixTemplateDirective, typeof i2.ArdDateInputSuffixTemplateDirective, typeof i2.ArdDateInputValueTemplateDirective, typeof i2.ArdDateInputCalendarIconTemplateDirective, typeof i2.ArdDateInputAcceptButtonsTemplateDirective, typeof i2.ArdDateInputDaysViewHeaderTemplateDirective, typeof i2.ArdDateInputDayTemplateDirective, typeof i2.ArdDateInputFloatingMonthTemplateDirective, typeof i2.ArdDateInputMonthsViewHeaderTemplateDirective, typeof i2.ArdDateInputMonthTemplateDirective, typeof i2.ArdDateInputWeekdayTemplateDirective, typeof i2.ArdDateInputYearsViewHeaderTemplateDirective, typeof i2.ArdDateInputYearTemplateDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumDateInputModule, [typeof i1.ArdiumDateInputComponent, typeof i2.ArdDateInputPrefixTemplateDirective, typeof i2.ArdDateInputSuffixTemplateDirective, typeof i2.ArdDateInputValueTemplateDirective, typeof i2.ArdDateInputCalendarIconTemplateDirective, typeof i2.ArdDateInputAcceptButtonsTemplateDirective, typeof i2.ArdDateInputDaysViewHeaderTemplateDirective, typeof i2.ArdDateInputDayTemplateDirective, typeof i2.ArdDateInputFloatingMonthTemplateDirective, typeof i2.ArdDateInputMonthsViewHeaderTemplateDirective, typeof i2.ArdDateInputMonthTemplateDirective, typeof i2.ArdDateInputWeekdayTemplateDirective, typeof i2.ArdDateInputYearsViewHeaderTemplateDirective, typeof i2.ArdDateInputYearTemplateDirective], [typeof i3.CommonModule, typeof i4.ArdiumFormFieldFrameModule, typeof i5.ArdiumDropdownPanelModule, typeof i6.ArdiumClickOutsideModule, typeof i7.ArdiumCalendarModule, typeof i8.ArdiumIconButtonModule, typeof i9.ArdiumButtonModule, typeof i10.ArdiumIconModule, typeof i11._CalendarTemplateRepositoryDirective], [typeof i1.ArdiumDateInputComponent, typeof i2.ArdDateInputPrefixTemplateDirective, typeof i2.ArdDateInputSuffixTemplateDirective, typeof i2.ArdDateInputValueTemplateDirective, typeof i2.ArdDateInputCalendarIconTemplateDirective, typeof i2.ArdDateInputAcceptButtonsTemplateDirective, typeof i2.ArdDateInputDaysViewHeaderTemplateDirective, typeof i2.ArdDateInputDayTemplateDirective, typeof i2.ArdDateInputFloatingMonthTemplateDirective, typeof i2.ArdDateInputMonthsViewHeaderTemplateDirective, typeof i2.ArdDateInputMonthTemplateDirective, typeof i2.ArdDateInputWeekdayTemplateDirective, typeof i2.ArdDateInputYearsViewHeaderTemplateDirective, typeof i2.ArdDateInputYearTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumDateInputModule>;
 }

package/lib/inputs/date-input/date-input.serializers.d.ts

@@ -1,3 +1,5 @@
+import { DateRange } from '../../calendar';
 import { ArdDateInputDeserializeFn, ArdDateInputSerializeFn } from './date-input.types';
-export declare const DEFAULT_DATE_INPUT_SERIALIZE_FN: ArdDateInputSerializeFn;
-export declare const DEFAULT_DATE_INPUT_DESERIALIZE_FN: ArdDateInputDeserializeFn;
+export declare const DEFAULT_DATE_INPUT_SERIALIZE_FN: ArdDateInputSerializeFn<Date>;
+export declare const DEFAULT_DATE_RANGE_INPUT_SERIALIZE_FN: ArdDateInputSerializeFn<DateRange>;
+export declare const DEFAULT_DATE_INPUT_DESERIALIZE_FN: ArdDateInputDeserializeFn<Date>;

package/lib/inputs/date-input/date-input.types.d.ts

@@ -1,7 +1,8 @@
-export type ArdDateInputSerializeFn = (date: Date | null) => string;
-export type ArdDateInputDeserializeFn = (date: string, prevValue: Date | null) => Date | null;
-export interface ArdDateInputValueContext {
-    $implicit: Date | null;
+export type ArdDateInputSerializeFn<T> = (date: T | null) => string;
+export type ArdDateInputDeserializeFn<T> = (date: string, prevValue: T | null) => T | null;
+export interface ArdDateInputValueContext<T> {
+    $implicit: string;
+    rawValue: T | null;
 }
 export interface ArdDateInputAcceptButtonsContext {
     $implicit: () => void;

package/lib/inputs/date-input/date-range-input.component.d.ts

@@ -0,0 +1,29 @@
+import { DateRange } from '../../calendar';
+import { _AbstractDateInput } from './abstract-date-input';
+import { ArdDateInputDefaults } from './date-input.defaults';
+import { ArdDateInputSerializeFn } from './date-input.types';
+import { ArdDateRangeInputDaysViewHeaderTemplateDirective, ArdDateRangeInputDayTemplateDirective, ArdDateRangeInputFloatingMonthTemplateDirective, ArdDateRangeInputMonthsViewHeaderTemplateDirective, ArdDateRangeInputMonthTemplateDirective, ArdDateRangeInputWeekdayTemplateDirective, ArdDateRangeInputYearsViewHeaderTemplateDirective, ArdDateRangeInputYearTemplateDirective } from './date-range-input.directives';
+import * as i0 from "@angular/core";
+export declare class ArdiumDateRangeInputComponent extends _AbstractDateInput<DateRange> {
+    readonly componentId = "009";
+    readonly componentName = "date-range-input";
+    readonly isRangeSelector = true;
+    protected readonly _DEFAULTS: ArdDateInputDefaults;
+    constructor(defaults: ArdDateInputDefaults);
+    readonly serializeFn: import("@angular/core").InputSignal<ArdDateInputSerializeFn<DateRange>>;
+    writeValue(v: any): void;
+    protected _isFullValue(value: DateRange | null): boolean;
+    readonly shouldDisplayPlaceholder: import("@angular/core").Signal<boolean>;
+    readonly shouldDisplayValue: import("@angular/core").Signal<boolean>;
+    readonly shouldDisplayDateInput: import("@angular/core").Signal<boolean>;
+    readonly calendarDaysViewHeaderTemplate: import("@angular/core").Signal<ArdDateRangeInputDaysViewHeaderTemplateDirective | undefined>;
+    readonly calendarYearsViewHeaderTemplate: import("@angular/core").Signal<ArdDateRangeInputYearsViewHeaderTemplateDirective | undefined>;
+    readonly calendarMonthsViewHeaderTemplate: import("@angular/core").Signal<ArdDateRangeInputMonthsViewHeaderTemplateDirective | undefined>;
+    readonly calendarWeekdayTemplate: import("@angular/core").Signal<ArdDateRangeInputWeekdayTemplateDirective | undefined>;
+    readonly calendarFloatingMonthTemplate: import("@angular/core").Signal<ArdDateRangeInputFloatingMonthTemplateDirective | undefined>;
+    readonly calendarYearTemplate: import("@angular/core").Signal<ArdDateRangeInputYearTemplateDirective | undefined>;
+    readonly calendarMonthTemplate: import("@angular/core").Signal<ArdDateRangeInputMonthTemplateDirective | undefined>;
+    readonly calendarDayTemplate: import("@angular/core").Signal<ArdDateRangeInputDayTemplateDirective | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumDateRangeInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumDateRangeInputComponent, "ard-date-range-input", never, { "serializeFn": { "alias": "serializeFn"; "required": false; "isSignal": true; }; }, {}, ["calendarDaysViewHeaderTemplate", "calendarYearsViewHeaderTemplate", "calendarMonthsViewHeaderTemplate", "calendarWeekdayTemplate", "calendarFloatingMonthTemplate", "calendarYearTemplate", "calendarMonthTemplate", "calendarDayTemplate"], never, false, never>;
+}

package/lib/inputs/date-input/date-range-input.directives.d.ts

@@ -0,0 +1,82 @@
+import { TemplateRef } from '@angular/core';
+import { CalendarDayContext, CalendarDaysViewHeaderContext, CalendarFloatingMonthContext, CalendarMonthContext, CalendarMonthsViewHeaderContext, CalendarWeekdayContext, CalendarYearContext, CalendarYearsViewHeaderContext } from '../../calendar';
+import { ArdDateInputAcceptButtonsContext, ArdDateInputValueContext } from './date-input.types';
+import * as i0 from "@angular/core";
+export declare class ArdDateRangeInputPrefixTemplateDirective {
+    template: TemplateRef<undefined>;
+    constructor(template: TemplateRef<undefined>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputPrefixTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputPrefixTemplateDirective, "ard-date-range-input > ng-template[ard-prefix-tmp]", never, {}, {}, never, never, false, never>;
+}
+export declare class ArdDateRangeInputSuffixTemplateDirective {
+    template: TemplateRef<undefined>;
+    constructor(template: TemplateRef<undefined>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputSuffixTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputSuffixTemplateDirective, "ard-date-range-input > ng-template[ard-suffix-tmp]", never, {}, {}, never, never, false, never>;
+}
+export declare class ArdDateRangeInputValueTemplateDirective {
+    template: TemplateRef<ArdDateInputValueContext<Date>>;
+    constructor(template: TemplateRef<ArdDateInputValueContext<Date>>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputValueTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputValueTemplateDirective, "ard-date-range-input > ng-template[ard-value-tmp]", never, {}, {}, never, never, false, never>;
+}
+export declare class ArdDateRangeInputCalendarIconTemplateDirective {
+    template: TemplateRef<undefined>;
+    constructor(template: TemplateRef<undefined>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputCalendarIconTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputCalendarIconTemplateDirective, "ard-date-range-input > ng-template[ard-date-input-icon-tmp]", never, {}, {}, never, never, false, never>;
+}
+export declare class ArdDateRangeInputAcceptButtonsTemplateDirective {
+    template: TemplateRef<ArdDateInputAcceptButtonsContext>;
+    constructor(template: TemplateRef<ArdDateInputAcceptButtonsContext>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputAcceptButtonsTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputAcceptButtonsTemplateDirective, "ard-date-range-input > ng-template[ard-accept-buttons-tmp]", never, {}, {}, never, never, false, never>;
+}
+export declare class ArdDateRangeInputDaysViewHeaderTemplateDirective {
+    template: TemplateRef<CalendarDaysViewHeaderContext>;
+    constructor(template: TemplateRef<CalendarDaysViewHeaderContext>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputDaysViewHeaderTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputDaysViewHeaderTemplateDirective, "ard-date-range-input > ng-template[ard-header-tmp]", never, {}, {}, never, never, false, never>;
+}
+export declare class ArdDateRangeInputYearsViewHeaderTemplateDirective {
+    template: TemplateRef<CalendarYearsViewHeaderContext>;
+    constructor(template: TemplateRef<CalendarYearsViewHeaderContext>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputYearsViewHeaderTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputYearsViewHeaderTemplateDirective, "ard-date-range-input > ng-template[ard-year-picker-header-tmp]", never, {}, {}, never, never, false, never>;
+}
+export declare class ArdDateRangeInputMonthsViewHeaderTemplateDirective {
+    template: TemplateRef<CalendarMonthsViewHeaderContext>;
+    constructor(template: TemplateRef<CalendarMonthsViewHeaderContext>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputMonthsViewHeaderTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputMonthsViewHeaderTemplateDirective, "ard-date-range-input > ng-template[ard-month-picker-header-tmp]", never, {}, {}, never, never, false, never>;
+}
+export declare class ArdDateRangeInputWeekdayTemplateDirective {
+    template: TemplateRef<CalendarWeekdayContext>;
+    constructor(template: TemplateRef<CalendarWeekdayContext>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputWeekdayTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputWeekdayTemplateDirective, "ard-date-range-input > ng-template[ard-weekday-tmp]", never, {}, {}, never, never, false, never>;
+}
+export declare class ArdDateRangeInputFloatingMonthTemplateDirective {
+    template: TemplateRef<CalendarFloatingMonthContext>;
+    constructor(template: TemplateRef<CalendarFloatingMonthContext>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputFloatingMonthTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputFloatingMonthTemplateDirective, "ard-date-range-input > ng-template[ard-floating-month-tmp]", never, {}, {}, never, never, false, never>;
+}
+export declare class ArdDateRangeInputYearTemplateDirective {
+    template: TemplateRef<CalendarYearContext>;
+    constructor(template: TemplateRef<CalendarYearContext>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputYearTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputYearTemplateDirective, "ard-date-range-input > ng-template[ard-year-tmp]", never, {}, {}, never, never, false, never>;
+}
+export declare class ArdDateRangeInputMonthTemplateDirective {
+    template: TemplateRef<CalendarMonthContext>;
+    constructor(template: TemplateRef<CalendarMonthContext>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputMonthTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputMonthTemplateDirective, "ard-date-range-input > ng-template[ard-month-tmp]", never, {}, {}, never, never, false, never>;
+}
+export declare class ArdDateRangeInputDayTemplateDirective {
+    template: TemplateRef<CalendarDayContext>;
+    constructor(template: TemplateRef<CalendarDayContext>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputDayTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputDayTemplateDirective, "ard-date-range-input > ng-template[ard-day-tmp]", never, {}, {}, never, never, false, never>;
+}

package/lib/inputs/date-input/date-range-input.module.d.ts

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./date-range-input.component";
+import * as i2 from "./date-range-input.directives";
+import * as i3 from "@angular/common";
+import * as i4 from "../../form-field-frame/form-field-frame.module";
+import * as i5 from "../../dropdown-panel/dropdown-panel.module";
+import * as i6 from "@ardium-ui/devkit";
+import * as i7 from "../../calendar/range-calendar.module";
+import * as i8 from "../../buttons/icon-button/icon-button.module";
+import * as i9 from "../../buttons/button/button.module";
+import * as i10 from "../../icon/icon.module";
+import * as i11 from "../../calendar/calendar.internal-directives";
+export declare class ArdiumDateRangeInputModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumDateRangeInputModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumDateRangeInputModule, [typeof i1.ArdiumDateRangeInputComponent, typeof i2.ArdDateRangeInputPrefixTemplateDirective, typeof i2.ArdDateRangeInputSuffixTemplateDirective, typeof i2.ArdDateRangeInputValueTemplateDirective, typeof i2.ArdDateRangeInputCalendarIconTemplateDirective, typeof i2.ArdDateRangeInputAcceptButtonsTemplateDirective, typeof i2.ArdDateRangeInputDaysViewHeaderTemplateDirective, typeof i2.ArdDateRangeInputDayTemplateDirective, typeof i2.ArdDateRangeInputFloatingMonthTemplateDirective, typeof i2.ArdDateRangeInputMonthsViewHeaderTemplateDirective, typeof i2.ArdDateRangeInputMonthTemplateDirective, typeof i2.ArdDateRangeInputWeekdayTemplateDirective, typeof i2.ArdDateRangeInputYearsViewHeaderTemplateDirective, typeof i2.ArdDateRangeInputYearTemplateDirective], [typeof i3.CommonModule, typeof i4.ArdiumFormFieldFrameModule, typeof i5.ArdiumDropdownPanelModule, typeof i6.ArdiumClickOutsideModule, typeof i7.ArdiumRangeCalendarModule, typeof i8.ArdiumIconButtonModule, typeof i9.ArdiumButtonModule, typeof i10.ArdiumIconModule, typeof i11._CalendarTemplateRepositoryDirective], [typeof i1.ArdiumDateRangeInputComponent, typeof i2.ArdDateRangeInputPrefixTemplateDirective, typeof i2.ArdDateRangeInputSuffixTemplateDirective, typeof i2.ArdDateRangeInputValueTemplateDirective, typeof i2.ArdDateRangeInputCalendarIconTemplateDirective, typeof i2.ArdDateRangeInputAcceptButtonsTemplateDirective, typeof i2.ArdDateRangeInputDaysViewHeaderTemplateDirective, typeof i2.ArdDateRangeInputDayTemplateDirective, typeof i2.ArdDateRangeInputFloatingMonthTemplateDirective, typeof i2.ArdDateRangeInputMonthsViewHeaderTemplateDirective, typeof i2.ArdDateRangeInputMonthTemplateDirective, typeof i2.ArdDateRangeInputWeekdayTemplateDirective, typeof i2.ArdDateRangeInputYearsViewHeaderTemplateDirective, typeof i2.ArdDateRangeInputYearTemplateDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumDateRangeInputModule>;
+}

package/lib/inputs/date-input/index.d.ts

@@ -1,5 +1,11 @@
 export * from './date-input.component';
 export * from './date-input.defaults';
-export * from './date-input.directive';
+export * from './date-input.directives';
 export * from './date-input.module';
 export * from './date-input.types';
+export * from './date-range-input.component';
+export * from './date-range-input.directives';
+export * from './date-range-input.module';
+export * from './multipage-date-range-input.component';
+export * from './multipage-date-range-input.directives';
+export * from './multipage-date-range-input.module';

package/lib/inputs/date-input/multipage-date-range-input.component.d.ts

@@ -0,0 +1,44 @@
+import { NumberLike } from '@ardium-ui/devkit';
+import { ArdMultiCalendarLocation, DateRange } from '../../calendar';
+import { _AbstractDateInput } from './abstract-date-input';
+import { ArdDateInputDefaults } from './date-input.defaults';
+import { ArdDateInputSerializeFn } from './date-input.types';
+import { ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective, ArdMultipageDateRangeInputDayTemplateDirective, ArdMultipageDateRangeInputFloatingMonthTemplateDirective, ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective, ArdMultipageDateRangeInputMonthTemplateDirective, ArdMultipageDateRangeInputWeekdayTemplateDirective, ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective, ArdMultipageDateRangeInputYearTemplateDirective } from './multipage-date-range-input.directives';
+import * as i0 from "@angular/core";
+type CalendarDataItem = {
+    location: ArdMultiCalendarLocation;
+    activeDate: Date;
+    highlightedDay: number | null;
+};
+export declare class ArdiumMultipageDateRangeInputComponent extends _AbstractDateInput<DateRange> {
+    readonly componentId = "012";
+    readonly componentName = "multipage-date-range-input";
+    readonly isRangeSelector = true;
+    protected readonly _DEFAULTS: ArdDateInputDefaults;
+    constructor(defaults: ArdDateInputDefaults);
+    readonly serializeFn: import("@angular/core").InputSignal<ArdDateInputSerializeFn<DateRange>>;
+    readonly highlightedDate: import("@angular/core").WritableSignal<Date | null>;
+    readonly numberOfCalendars: import("@angular/core").InputSignalWithTransform<number, NumberLike>;
+    readonly calendarDataArray: import("@angular/core").Signal<CalendarDataItem[]>;
+    onActivePageChange(newPage: {
+        year: number;
+        month: number;
+    }, index: number): void;
+    onHighlightDate(date: Date | null): void;
+    writeValue(v: any): void;
+    protected _isFullValue(value: DateRange | null): boolean;
+    readonly shouldDisplayPlaceholder: import("@angular/core").Signal<boolean>;
+    readonly shouldDisplayValue: import("@angular/core").Signal<boolean>;
+    readonly shouldDisplayDateInput: import("@angular/core").Signal<boolean>;
+    readonly calendarDaysViewHeaderTemplate: import("@angular/core").Signal<ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective | undefined>;
+    readonly calendarYearsViewHeaderTemplate: import("@angular/core").Signal<ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective | undefined>;
+    readonly calendarMonthsViewHeaderTemplate: import("@angular/core").Signal<ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective | undefined>;
+    readonly calendarWeekdayTemplate: import("@angular/core").Signal<ArdMultipageDateRangeInputWeekdayTemplateDirective | undefined>;
+    readonly calendarFloatingMonthTemplate: import("@angular/core").Signal<ArdMultipageDateRangeInputFloatingMonthTemplateDirective | undefined>;
+    readonly calendarYearTemplate: import("@angular/core").Signal<ArdMultipageDateRangeInputYearTemplateDirective | undefined>;
+    readonly calendarMonthTemplate: import("@angular/core").Signal<ArdMultipageDateRangeInputMonthTemplateDirective | undefined>;
+    readonly calendarDayTemplate: import("@angular/core").Signal<ArdMultipageDateRangeInputDayTemplateDirective | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumMultipageDateRangeInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumMultipageDateRangeInputComponent, "ard-multipage-date-range-input", never, { "serializeFn": { "alias": "serializeFn"; "required": false; "isSignal": true; }; "numberOfCalendars": { "alias": "numberOfCalendars"; "required": false; "isSignal": true; }; }, {}, ["calendarDaysViewHeaderTemplate", "calendarYearsViewHeaderTemplate", "calendarMonthsViewHeaderTemplate", "calendarWeekdayTemplate", "calendarFloatingMonthTemplate", "calendarYearTemplate", "calendarMonthTemplate", "calendarDayTemplate"], never, false, never>;
+}
+export {};

package/lib/inputs/date-input/multipage-date-range-input.directives.d.ts

@@ -0,0 +1,82 @@
+import { TemplateRef } from '@angular/core';
+import { CalendarDayContext, CalendarDaysViewHeaderContext, CalendarFloatingMonthContext, CalendarMonthContext, CalendarMonthsViewHeaderContext, CalendarWeekdayContext, CalendarYearContext, CalendarYearsViewHeaderContext } from '../../calendar';
+import { ArdDateInputAcceptButtonsContext, ArdDateInputValueContext } from './date-input.types';
+import * as i0 from "@angular/core";
+export declare class ArdMultipageDateRangeInputPrefixTemplateDirective {
+    template: TemplateRef<undefined>;
+    constructor(template: TemplateRef<undefined>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputPrefixTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputPrefixTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-prefix-tmp]", never, {}, {}, never, never, false, never>;
+}
+export declare class ArdMultipageDateRangeInputSuffixTemplateDirective {
+    template: TemplateRef<undefined>;
+    constructor(template: TemplateRef<undefined>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputSuffixTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputSuffixTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-suffix-tmp]", never, {}, {}, never, never, false, never>;
+}
+export declare class ArdMultipageDateRangeInputValueTemplateDirective {
+    template: TemplateRef<ArdDateInputValueContext<Date>>;
+    constructor(template: TemplateRef<ArdDateInputValueContext<Date>>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputValueTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputValueTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-value-tmp]", never, {}, {}, never, never, false, never>;
+}
+export declare class ArdMultipageDateRangeInputCalendarIconTemplateDirective {
+    template: TemplateRef<undefined>;
+    constructor(template: TemplateRef<undefined>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputCalendarIconTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputCalendarIconTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-date-input-icon-tmp]", never, {}, {}, never, never, false, never>;
+}
+export declare class ArdMultipageDateRangeInputAcceptButtonsTemplateDirective {
+    template: TemplateRef<ArdDateInputAcceptButtonsContext>;
+    constructor(template: TemplateRef<ArdDateInputAcceptButtonsContext>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputAcceptButtonsTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputAcceptButtonsTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-accept-buttons-tmp]", never, {}, {}, never, never, false, never>;
+}
+export declare class ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective {
+    template: TemplateRef<CalendarDaysViewHeaderContext>;
+    constructor(template: TemplateRef<CalendarDaysViewHeaderContext>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-header-tmp]", never, {}, {}, never, never, false, never>;
+}
+export declare class ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective {
+    template: TemplateRef<CalendarYearsViewHeaderContext>;
+    constructor(template: TemplateRef<CalendarYearsViewHeaderContext>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-year-picker-header-tmp]", never, {}, {}, never, never, false, never>;
+}
+export declare class ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective {
+    template: TemplateRef<CalendarMonthsViewHeaderContext>;
+    constructor(template: TemplateRef<CalendarMonthsViewHeaderContext>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-month-picker-header-tmp]", never, {}, {}, never, never, false, never>;
+}
+export declare class ArdMultipageDateRangeInputWeekdayTemplateDirective {
+    template: TemplateRef<CalendarWeekdayContext>;
+    constructor(template: TemplateRef<CalendarWeekdayContext>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputWeekdayTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputWeekdayTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-weekday-tmp]", never, {}, {}, never, never, false, never>;
+}
+export declare class ArdMultipageDateRangeInputFloatingMonthTemplateDirective {
+    template: TemplateRef<CalendarFloatingMonthContext>;
+    constructor(template: TemplateRef<CalendarFloatingMonthContext>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputFloatingMonthTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputFloatingMonthTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-floating-month-tmp]", never, {}, {}, never, never, false, never>;
+}
+export declare class ArdMultipageDateRangeInputYearTemplateDirective {
+    template: TemplateRef<CalendarYearContext>;
+    constructor(template: TemplateRef<CalendarYearContext>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputYearTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputYearTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-year-tmp]", never, {}, {}, never, never, false, never>;
+}
+export declare class ArdMultipageDateRangeInputMonthTemplateDirective {
+    template: TemplateRef<CalendarMonthContext>;
+    constructor(template: TemplateRef<CalendarMonthContext>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputMonthTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputMonthTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-month-tmp]", never, {}, {}, never, never, false, never>;
+}
+export declare class ArdMultipageDateRangeInputDayTemplateDirective {
+    template: TemplateRef<CalendarDayContext>;
+    constructor(template: TemplateRef<CalendarDayContext>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputDayTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputDayTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-day-tmp]", never, {}, {}, never, never, false, never>;
+}

package/lib/inputs/date-input/multipage-date-range-input.module.d.ts

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./multipage-date-range-input.component";
+import * as i2 from "./multipage-date-range-input.directives";
+import * as i3 from "@angular/common";
+import * as i4 from "../../form-field-frame/form-field-frame.module";
+import * as i5 from "../../dropdown-panel/dropdown-panel.module";
+import * as i6 from "@ardium-ui/devkit";
+import * as i7 from "../../calendar/range-calendar.module";
+import * as i8 from "../../buttons/icon-button/icon-button.module";
+import * as i9 from "../../buttons/button/button.module";
+import * as i10 from "../../icon/icon.module";
+import * as i11 from "../../calendar/calendar.internal-directives";
+export declare class ArdiumMultipageDateRangeInputModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumMultipageDateRangeInputModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumMultipageDateRangeInputModule, [typeof i1.ArdiumMultipageDateRangeInputComponent, typeof i2.ArdMultipageDateRangeInputPrefixTemplateDirective, typeof i2.ArdMultipageDateRangeInputSuffixTemplateDirective, typeof i2.ArdMultipageDateRangeInputValueTemplateDirective, typeof i2.ArdMultipageDateRangeInputCalendarIconTemplateDirective, typeof i2.ArdMultipageDateRangeInputAcceptButtonsTemplateDirective, typeof i2.ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective, typeof i2.ArdMultipageDateRangeInputDayTemplateDirective, typeof i2.ArdMultipageDateRangeInputFloatingMonthTemplateDirective, typeof i2.ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective, typeof i2.ArdMultipageDateRangeInputMonthTemplateDirective, typeof i2.ArdMultipageDateRangeInputWeekdayTemplateDirective, typeof i2.ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective, typeof i2.ArdMultipageDateRangeInputYearTemplateDirective], [typeof i3.CommonModule, typeof i4.ArdiumFormFieldFrameModule, typeof i5.ArdiumDropdownPanelModule, typeof i6.ArdiumClickOutsideModule, typeof i7.ArdiumRangeCalendarModule, typeof i8.ArdiumIconButtonModule, typeof i9.ArdiumButtonModule, typeof i10.ArdiumIconModule, typeof i11._CalendarTemplateRepositoryDirective], [typeof i1.ArdiumMultipageDateRangeInputComponent, typeof i2.ArdMultipageDateRangeInputPrefixTemplateDirective, typeof i2.ArdMultipageDateRangeInputSuffixTemplateDirective, typeof i2.ArdMultipageDateRangeInputValueTemplateDirective, typeof i2.ArdMultipageDateRangeInputCalendarIconTemplateDirective, typeof i2.ArdMultipageDateRangeInputAcceptButtonsTemplateDirective, typeof i2.ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective, typeof i2.ArdMultipageDateRangeInputDayTemplateDirective, typeof i2.ArdMultipageDateRangeInputFloatingMonthTemplateDirective, typeof i2.ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective, typeof i2.ArdMultipageDateRangeInputMonthTemplateDirective, typeof i2.ArdMultipageDateRangeInputWeekdayTemplateDirective, typeof i2.ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective, typeof i2.ArdMultipageDateRangeInputYearTemplateDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumMultipageDateRangeInputModule>;
+}

package/lib/inputs/number-input/number-input.component.d.ts

@@ -48,9 +48,10 @@ export declare class ArdiumNumberInputComponent extends _FormFieldComponentBase
     readonly stepSize: import("@angular/core").InputSignalWithTransform<number, NumberLike>;
     onQuickChangeButtonClick(direction: 1 | -1, event?: MouseEvent): void;
     private _focusInputIfCantQuickChange;
+    private _isQuickChangeButtonFocused;
     onQuickChangeButtonMouseup(event: MouseEvent): void;
-    canIncrement(): boolean;
-    canDecrement(): boolean;
+    readonly canIncrement: import("@angular/core").Signal<boolean>;
+    readonly canDecrement: import("@angular/core").Signal<boolean>;
     onInput(newVal: string): void;
     protected _emitInput(): void;
     onFocusMaster(event: FocusEvent): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ardium-ui/ui",
-  "version": "5.0.0-alpha.36",
+  "version": "5.0.0-alpha.38",
   "peerDependencies": {
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",

package/prebuilt-themes/default/buttons/button.css

@@ -6,6 +6,7 @@
   --ard-button-padding-compact: 0 0.9em;
   --ard-button-padding-vertical: 0.3em 1em;
   --ard-button-padding-vertical-compact: 0.2em 0.8em;
+  --ard-button-gap: 0.375rem;
   --ard-button-font-size: 0.875rem;
   --ard-button-font-size-compact: 0.75rem;
   --ard-button-font-weight: 500;
@@ -37,16 +38,17 @@ ard-button {
   cursor: pointer;
   outline: none;
   background: transparent;
-  gap: 0.375rem;
+  gap: var(--ard-button-gap, 0.375rem);
   font-size: var(--ard-button-font-size, 0.875rem);
   height: var(--ard-button-height, 2.5em);
   padding: var(--ard-button-padding, 0 1.2em);
-  letter-spacing: 0.5px;
-  width: 100%;
+  width: max-content;
   min-width: max-content;
+  letter-spacing: 0.5px;
   justify-content: center;
   margin: 0;
   user-select: none;
+  text-decoration: none;
 }
 .ard-button.ard-color-none {
   --ard-cmpcl--bg: var(--ard-bg);
@@ -181,33 +183,29 @@ ard-button {
   --ard-cmpcl--overlay-colored: currentColor;
   --ard-cmpcl--overlay-colored-light: currentColor;
 }
-.ard-button .ard-button-icon {
-  font-family: "Material Symbols Outlined";
-  font-size: 1.5em;
-  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 48;
-}
-.ard-button .ard-focus-overlay {
+.ard-button::before {
+  content: "";
   position: absolute;
-  top: -0;
-  bottom: -0;
-  left: -0;
-  right: -0;
+  top: calc(-1 * 0);
+  bottom: calc(-1 * 0);
+  left: calc(-1 * 0);
+  right: calc(-1 * 0);
   opacity: 0;
   border-radius: inherit;
   pointer-events: none;
   transition: opacity 0.2s ease;
   background-color: var(--ard-cmpcl--overlay);
 }
-.ard-button:hover .ard-focus-overlay {
+.ard-button:hover::before {
   opacity: var(--ard-button-overlay-hover-opacity, 0.04);
 }
-.ard-button:focus .ard-focus-overlay {
+.ard-button:focus::before {
   opacity: var(--ard-button-overlay-focus-opacity, 0.12);
 }
-.ard-button.ard-active .ard-focus-overlay, .ard-button:active .ard-focus-overlay {
+.ard-button.ard-active::before, .ard-button:active::before {
   opacity: var(--ard-button-overlay-active-opacity, 0.18);
 }
-.ard-button:focus-visible .ard-focus-overlay {
+.ard-button:focus-visible::before {
   opacity: var(--ard-button-overlay-focus-visible-opacity, 0.24);
 }
 .ard-button.ard-appearance-transparent, .ard-button.ard-appearance-raised {
@@ -215,7 +213,7 @@ ard-button {
   color: var(--ard-cmpcl--content);
   border: none;
 }
-.ard-button.ard-appearance-transparent .ard-focus-overlay, .ard-button.ard-appearance-raised .ard-focus-overlay {
+.ard-button.ard-appearance-transparent::before, .ard-button.ard-appearance-raised::before {
   background: var(--ard-cmpcl--overlay-colored);
 }
 .ard-button.ard-appearance-raised, .ard-button.ard-appearance-raised-strong {
@@ -234,7 +232,7 @@ ard-button {
   color: var(--ard-cmpcl--content);
   border: 1px solid var(--ard-border-light);
 }
-.ard-button.ard-appearance-outlined .ard-focus-overlay {
+.ard-button.ard-appearance-outlined::before {
   background: var(--ard-cmpcl--overlay-colored);
 }
 .ard-button.ard-appearance-outlined-strong {
@@ -243,7 +241,7 @@ ard-button {
   border: 1px solid var(--ard-border-light);
   transition: background-color 0.2s ease, color 0.2s ease;
 }
-.ard-button.ard-appearance-outlined-strong .ard-focus-overlay {
+.ard-button.ard-appearance-outlined-strong::before {
   display: none;
 }
 .ard-button.ard-appearance-outlined-strong:hover, .ard-button.ard-appearance-outlined-strong:focus-visible {
@@ -255,7 +253,7 @@ ard-button {
   color: var(--ard-cmpcl--on-bg-colored);
   border: 1px solid var(--ard-cmpcl--bg-colored);
 }
-.ard-button.ard-appearance-flat .ard-focus-overlay, .ard-button.ard-appearance-raised-strong .ard-focus-overlay {
+.ard-button.ard-appearance-flat::before, .ard-button.ard-appearance-raised-strong::before {
   background: var(--ard-cmpcl--on-bg);
 }
 .ard-button.ard-appearance-flat:focus-visible, .ard-button.ard-appearance-raised-strong:focus-visible {
@@ -264,14 +262,9 @@ ard-button {
 .ard-button.ard-appearance-transparent.ard-light-coloring {
   color: var(--ard-cmpcl--content-light);
 }
-.ard-button.ard-appearance-transparent.ard-light-coloring .ard-focus-overlay {
+.ard-button.ard-appearance-transparent.ard-light-coloring::before {
   background: var(--ard-cmpcl--overlay-colored-light);
 }
-.ard-button .ard-button-content {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-}
 .ard-button.ard-align-left {
   flex-direction: row;
 }
@@ -303,27 +296,23 @@ ard-button {
   padding: var(--ard-button-padding-vertical-compact, 0.2em 0.8em);
   gap: 0;
 }
-
-ard-button.ard-disabled > .ard-button {
+.ard-button.ard-disabled {
   pointer-events: none;
   opacity: var(--ard-button-disabled-opacity, 0.6);
   cursor: not-allowed;
 }
-ard-button.ard-disabled > .ard-button .ard-focus-overlay {
+.ard-button.ard-disabled::before {
   opacity: var(--ard-button-overlay-disabled-opacity, 0.2);
   transform: scale(1);
 }
-ard-button.ard-disabled > .ard-button.ard-color-none .ard-button-icon,
-ard-button.ard-disabled > .ard-button.ard-color-none .ard-button-content {
+.ard-button.ard-disabled.ard-color-none .ard-button-icon,
+.ard-button.ard-disabled.ard-color-none .ard-button-content {
   opacity: var(--ard-button-disabled-opacity, 0.6);
 }
-ard-button.ard-disabled > .ard-button.ard-color-none .ard-focus-overlay {
+.ard-button.ard-disabled.ard-color-none::before {
   background: var(--ard-cmpcl--overlay);
 }
-ard-button.ard-disabled.ard-button-with-pointer-events-when-disabled {
-  pointer-events: all;
-}
-ard-button.ard-disabled.ard-button-with-pointer-events-when-disabled > .ard-button {
+.ard-button.ard-disabled.ard-button-with-pointer-events-when-disabled {
   pointer-events: all;
 }
 

package/prebuilt-themes/default/buttons/button.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/buttons/button.scss","../../../../../projects/ui/src/themes/default/buttons/_button-mixins.scss","../../../../../projects/ui/src/themes/default/_coloring.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;ECbE;EACA,QDcE;ECbF,SDcE;ECbF;EACA,aDcE;ECbF,WDYE;ECXF;EACA;EACA;EACA;EACA;EDcA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AE9CA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AD1GF;EEzBA;EACA;EACA,yBACE;;AF0BF;EEnBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFYE;;AAGA;EACE,SDJF;;ACQA;EACE,SDRF;;ACaA;EACE,SDbF;;ACiBA;EACE,SDjBF;;ACqBF;EAEE;EACA;EACA;;AAEA;EACE;;AAGJ;EAEE,YGtEC;EHuED;EACA,YGtCY;;AHwCZ;EAEE,YGzCW;;AH2Cb;EACE,YG3CW;;AH8Cf;EACE,YGnFC;EHoFD;EACA;;AAEA;EACE;;AAGJ;EACE,YG5FC;EH6FD;EACA;EAMA;;AAJA;EACE;;AAIF;EAEE;EACA;;AAGJ;EAEE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAIJ;EACE;;AAEA;EACE;;AD1EJ;EACE;EACA;EACA;;AAIF;EACE;;AAEF;EACE;;AAIF;EACE;EACA;EACA;EACA;;AAEF;EAEE;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAMJ;ECkCA;EACA,SDlCkC;ECmClC;;AAEA;EACE,SDtCyE;ECuCzE;;AAKA;AAAA;EAEE,SD9C8B;;ACgDhC;EACE;;AD/CJ;EACE;;AAEA;EACE","file":"button.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/buttons/button.scss","../../../../../projects/ui/src/themes/default/buttons/_button-mixins.scss","../../../../../projects/ui/src/themes/default/_coloring.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;ECdE;EACA,QDeE;ECdF,SDeE;ECdF;EACA,aDeE;ECdF,WDaE;ECZF;EACA;EACA;EACA;EACA;EDeA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AEhDA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AD1GF;EACE;EEhBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFSE;;AAGA;EACE;;AAIF;EACE,SDJF;;ACSA;EACE,SDTF;;ACaA;EACE,SDbF;;ACiBF;EAEE;EACA;EACA;;AAEA;EACE;;AAGJ;EAEE,YGnEC;EHoED;EACA,YGnCY;;AHqCZ;EAEE,YGtCW;;AHwCb;EACE,YGxCW;;AH2Cf;EACE,YGhFC;EHiFD;EACA;;AAEA;EACE;;AAGJ;EACE,YGzFC;EH0FD;EACA;EAMA;;AAJA;EACE;;AAIF;EAEE;EACA;;AAGJ;EAEE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAIJ;EACE;;AAEA;EACE;;ADpEJ;EACE;;AAEF;EACE;;AAIF;EACE;EACA;EACA;EACA;;AAEF;EAEE;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;ECqCA;EACA,SDrCkC;ECsClC;;AAEA;EACE,SDzCyE;EC0CzE;;AAKA;AAAA;EAEE,SDjD8B;;ACmDhC;EACE;;ADlDF;EACE","file":"button.css"}