@ardium-ui/ui 5.0.0-alpha.35 → 5.0.0-alpha.37

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.
Files changed (31) hide show
  1. package/fesm2022/ardium-ui-ui.mjs +172 -84
  2. package/fesm2022/ardium-ui-ui.mjs.map +1 -1
  3. package/lib/_internal/ngmodel-component.d.ts +1 -0
  4. package/lib/buttons/_button-base.d.ts +9 -6
  5. package/lib/buttons/_button-base.defaults.d.ts +3 -2
  6. package/lib/buttons/button/button.component.d.ts +3 -4
  7. package/lib/buttons/button/button.defaults.d.ts +0 -2
  8. package/lib/buttons/button/button.directive.d.ts +17 -0
  9. package/lib/buttons/button/button.module.d.ts +3 -2
  10. package/lib/buttons/button/index.d.ts +1 -0
  11. package/lib/buttons/fab/fab.component.d.ts +3 -1
  12. package/lib/buttons/icon-button/icon-button.component.d.ts +2 -1
  13. package/lib/buttons/icon-button/icon-button.defaults.d.ts +2 -1
  14. package/lib/file-inputs/file-input-base.d.ts +0 -1
  15. package/lib/inputs/number-input/number-input.component.d.ts +3 -3
  16. package/lib/slider/abstract-slider.d.ts +7 -8
  17. package/lib/slider/range-slider/range-slider.component.d.ts +4 -4
  18. package/package.json +1 -1
  19. package/prebuilt-themes/default/buttons/button.css +22 -33
  20. package/prebuilt-themes/default/buttons/button.css.map +1 -1
  21. package/prebuilt-themes/default/buttons/fab.css +23 -29
  22. package/prebuilt-themes/default/buttons/fab.css.map +1 -1
  23. package/prebuilt-themes/default/buttons/icon-button.css +19 -26
  24. package/prebuilt-themes/default/buttons/icon-button.css.map +1 -1
  25. package/prebuilt-themes/default/slider.css +5 -4
  26. package/prebuilt-themes/default/slider.css.map +1 -1
  27. package/themes/default/buttons/_button-mixins.scss +13 -16
  28. package/themes/default/buttons/button.scss +8 -17
  29. package/themes/default/buttons/fab.scss +12 -17
  30. package/themes/default/buttons/icon-button.scss +7 -12
  31. package/themes/default/slider.scss +5 -4
@@ -45,6 +45,7 @@ export declare abstract class _NgModelComponentBase extends _FocusableComponentB
45
45
  onFocus(event: FocusEvent): void;
46
46
  protected _shouldEmitTouched: boolean;
47
47
  onBlur(event: FocusEvent): void;
48
+ protected _emitTouched(): void;
48
49
  protected readonly _injector: Injector;
49
50
  private _statusChangesSub?;
50
51
  ngOnInit(): void;
@@ -1,22 +1,25 @@
1
1
  import { Signal } from '@angular/core';
2
- import { BooleanLike } from '@ardium-ui/devkit';
3
- import { _FocusableComponentBase } from '../_internal/focusable-component';
2
+ import { BooleanLike, NumberLike } from '@ardium-ui/devkit';
4
3
  import { ButtonType } from '../types/button.types';
5
4
  import { ComponentColor } from '../types/colors.types';
6
5
  import { _ButtonBaseDefaults } from './_button-base.defaults';
7
6
  import { ButtonAppearance } from './general-button.types';
8
7
  import * as i0 from "@angular/core";
9
- export declare abstract class _ButtonBase extends _FocusableComponentBase {
10
- readonly wrapperClasses: import("@angular/core").InputSignal<string>;
8
+ export declare abstract class _ButtonBase {
11
9
  protected readonly _DEFAULTS: _ButtonBaseDefaults;
12
- constructor(defaults: _ButtonBaseDefaults);
10
+ readonly wrapperClasses: import("@angular/core").InputSignal<string>;
11
+ constructor(_DEFAULTS: _ButtonBaseDefaults);
13
12
  readonly type: import("@angular/core").InputSignal<ButtonType>;
13
+ readonly ariaLabel: import("@angular/core").InputSignal<string>;
14
14
  readonly appearance: import("@angular/core").InputSignal<ButtonAppearance>;
15
15
  readonly color: import("@angular/core").InputSignal<ComponentColor>;
16
16
  readonly lightColoring: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
17
17
  readonly compact: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
18
+ readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
19
+ readonly tabIndex: Signal<number>;
20
+ readonly _tabIndex: import("@angular/core").InputSignalWithTransform<number, NumberLike>;
18
21
  readonly pointerEventsWhenDisabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
19
22
  abstract readonly ngClasses: Signal<string>;
20
23
  static ɵfac: i0.ɵɵFactoryDeclaration<_ButtonBase, never>;
21
- static ɵdir: i0.ɵɵDirectiveDeclaration<_ButtonBase, never, never, { "wrapperClasses": { "alias": "wrapperClasses"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "lightColoring": { "alias": "lightColoring"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "pointerEventsWhenDisabled": { "alias": "pointerEventsWhenDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
24
+ static ɵdir: i0.ɵɵDirectiveDeclaration<_ButtonBase, never, never, { "wrapperClasses": { "alias": "wrapperClasses"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "lightColoring": { "alias": "lightColoring"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "_tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "pointerEventsWhenDisabled": { "alias": "pointerEventsWhenDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
22
25
  }
@@ -1,8 +1,9 @@
1
- import { _FocusableComponentDefaults } from '../_internal/focusable-component';
2
1
  import { ButtonType } from '../types/button.types';
3
2
  import { ComponentColor } from './../types/colors.types';
4
3
  import { ButtonAppearance } from './general-button.types';
5
- export interface _SimpleButtonDefaults extends _FocusableComponentDefaults {
4
+ export interface _SimpleButtonDefaults {
5
+ disabled: boolean;
6
+ tabIndex: number;
6
7
  color: ComponentColor;
7
8
  lightColoring: boolean;
8
9
  compact: boolean;
@@ -1,17 +1,16 @@
1
1
  import { BooleanLike } from '@ardium-ui/devkit';
2
- import { SimpleOneAxisAlignment } from '../../types/alignment.types';
3
2
  import { _ButtonBase } from '../_button-base';
4
3
  import { ButtonVariant } from '../general-button.types';
5
4
  import { ArdButtonDefaults } from './button.defaults';
6
5
  import * as i0 from "@angular/core";
7
6
  export declare class ArdiumButtonComponent extends _ButtonBase {
8
7
  protected readonly _DEFAULTS: ArdButtonDefaults;
9
- readonly icon: import("@angular/core").InputSignal<string>;
10
8
  constructor(defaults: ArdButtonDefaults);
9
+ readonly focusEvent: import("@angular/core").OutputEmitterRef<FocusEvent>;
10
+ readonly blurEvent: import("@angular/core").OutputEmitterRef<FocusEvent>;
11
11
  readonly variant: import("@angular/core").InputSignal<ButtonVariant>;
12
- readonly alignIcon: import("@angular/core").InputSignal<SimpleOneAxisAlignment>;
13
12
  readonly vertical: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
14
13
  readonly ngClasses: import("@angular/core").Signal<string>;
15
14
  static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumButtonComponent, never>;
16
- static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumButtonComponent, "ard-button", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "alignIcon": { "alias": "alignIcon"; "required": false; "isSignal": true; }; "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; }, {}, never, ["*"], false, never>;
15
+ static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumButtonComponent, "ard-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; }, { "focusEvent": "focus"; "blurEvent": "blur"; }, never, ["*"], false, never>;
17
16
  }
@@ -1,10 +1,8 @@
1
1
  import { InjectionToken, Provider } from '@angular/core';
2
2
  import { _ButtonBaseDefaults } from '../_button-base.defaults';
3
3
  import { ButtonVariant } from '../general-button.types';
4
- import { SimpleOneAxisAlignment } from './../../types/alignment.types';
5
4
  export interface ArdButtonDefaults extends _ButtonBaseDefaults {
6
5
  variant: ButtonVariant;
7
- alignIcon: SimpleOneAxisAlignment;
8
6
  vertical: boolean;
9
7
  }
10
8
  export declare const ARD_BUTTON_DEFAULTS: InjectionToken<ArdButtonDefaults>;
@@ -0,0 +1,17 @@
1
+ import { BooleanLike } from '@ardium-ui/devkit';
2
+ import { _ButtonBase } from '../_button-base';
3
+ import { ButtonVariant } from '../general-button.types';
4
+ import { ArdButtonDefaults } from './button.defaults';
5
+ import * as i0 from "@angular/core";
6
+ export declare class ArdiumButtonDirective extends _ButtonBase {
7
+ protected readonly _DEFAULTS: ArdButtonDefaults;
8
+ constructor(defaults: ArdButtonDefaults);
9
+ private readonly _hostEl;
10
+ private readonly _renderer;
11
+ handleClick(event: Event): void;
12
+ readonly variant: import("@angular/core").InputSignal<ButtonVariant>;
13
+ readonly vertical: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
14
+ readonly ngClasses: import("@angular/core").Signal<string>;
15
+ static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumButtonDirective, never>;
16
+ static ɵdir: i0.ɵɵDirectiveDeclaration<ArdiumButtonDirective, "button[ard-button], a[ard-button]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; }, {}, never, never, false, never>;
17
+ }
@@ -1,8 +1,9 @@
1
1
  import * as i0 from "@angular/core";
2
2
  import * as i1 from "./button.component";
3
- import * as i2 from "@angular/common";
3
+ import * as i2 from "./button.directive";
4
+ import * as i3 from "@angular/common";
4
5
  export declare class ArdiumButtonModule {
5
6
  static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumButtonModule, never>;
6
- static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumButtonModule, [typeof i1.ArdiumButtonComponent], [typeof i2.CommonModule], [typeof i1.ArdiumButtonComponent]>;
7
+ static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumButtonModule, [typeof i1.ArdiumButtonComponent, typeof i2.ArdiumButtonDirective], [typeof i3.CommonModule], [typeof i1.ArdiumButtonComponent, typeof i2.ArdiumButtonDirective]>;
7
8
  static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumButtonModule>;
8
9
  }
@@ -1,3 +1,4 @@
1
1
  export * from './button.component';
2
2
  export * from './button.defaults';
3
+ export * from './button.directive';
3
4
  export * from './button.module';
@@ -4,8 +4,10 @@ import { ArdFabDefaults } from './fab.defaults';
4
4
  import * as i0 from "@angular/core";
5
5
  export declare class ArdiumFabComponent extends _ButtonBase {
6
6
  constructor(defaults: ArdFabDefaults);
7
+ readonly focusEvent: import("@angular/core").OutputEmitterRef<FocusEvent>;
8
+ readonly blurEvent: import("@angular/core").OutputEmitterRef<FocusEvent>;
7
9
  readonly size: import("@angular/core").InputSignal<FabSize>;
8
10
  readonly ngClasses: import("@angular/core").Signal<string>;
9
11
  static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumFabComponent, never>;
10
- static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumFabComponent, "ard-fab", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], false, never>;
12
+ static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumFabComponent, "ard-fab", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "focusEvent": "focus"; "blurEvent": "blur"; }, never, ["*"], false, never>;
11
13
  }
@@ -9,11 +9,12 @@ export declare class ArdiumIconButtonComponent extends _FocusableComponentBase {
9
9
  constructor(defaults: ArdIconButtonDefaults);
10
10
  readonly wrapperClasses: import("@angular/core").InputSignal<string>;
11
11
  readonly type: import("@angular/core").InputSignal<ButtonType>;
12
+ readonly ariaLabel: import("@angular/core").InputSignal<string>;
12
13
  readonly color: import("@angular/core").InputSignal<ComponentColor>;
13
14
  readonly lightColoring: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
14
15
  readonly compact: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
15
16
  readonly pointerEventsWhenDisabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
16
17
  readonly ngClasses: import("@angular/core").Signal<string>;
17
18
  static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumIconButtonComponent, never>;
18
- static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumIconButtonComponent, "ard-icon-button", never, { "wrapperClasses": { "alias": "wrapperClasses"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "lightColoring": { "alias": "lightColoring"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "pointerEventsWhenDisabled": { "alias": "pointerEventsWhenDisabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], false, never>;
19
+ static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumIconButtonComponent, "ard-icon-button", never, { "wrapperClasses": { "alias": "wrapperClasses"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "lightColoring": { "alias": "lightColoring"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "pointerEventsWhenDisabled": { "alias": "pointerEventsWhenDisabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], false, never>;
19
20
  }
@@ -1,6 +1,7 @@
1
1
  import { InjectionToken, Provider } from '@angular/core';
2
+ import { _FocusableComponentDefaults } from '../../_internal/focusable-component';
2
3
  import { _SimpleButtonDefaults } from '../_button-base.defaults';
3
- export interface ArdIconButtonDefaults extends _SimpleButtonDefaults {
4
+ export interface ArdIconButtonDefaults extends _SimpleButtonDefaults, _FocusableComponentDefaults {
4
5
  }
5
6
  export declare const ARD_ICON_BUTTON_DEFAULTS: InjectionToken<ArdIconButtonDefaults>;
6
7
  export declare function provideIconButtonDefaults(config: Partial<ArdIconButtonDefaults>): Provider;
@@ -50,7 +50,6 @@ export declare abstract class _FileInputComponentBase extends _FormFieldComponen
50
50
  onFileInputChange(): void;
51
51
  private _writeFilesToValue;
52
52
  private _isFilePickerOpen;
53
- private _emitTouched;
54
53
  onFocus(event: FocusEvent): void;
55
54
  onBlur(event: FocusEvent): void;
56
55
  private _filterFilesBasedOnSizeAndCount;
@@ -48,14 +48,14 @@ export declare class ArdiumNumberInputComponent extends _FormFieldComponentBase
48
48
  readonly stepSize: import("@angular/core").InputSignalWithTransform<number, NumberLike>;
49
49
  onQuickChangeButtonClick(direction: 1 | -1, event?: MouseEvent): void;
50
50
  private _focusInputIfCantQuickChange;
51
+ private _isQuickChangeButtonFocused;
51
52
  onQuickChangeButtonMouseup(event: MouseEvent): void;
52
- canIncrement(): boolean;
53
- canDecrement(): boolean;
53
+ readonly canIncrement: import("@angular/core").Signal<boolean>;
54
+ readonly canDecrement: import("@angular/core").Signal<boolean>;
54
55
  onInput(newVal: string): void;
55
56
  protected _emitInput(): void;
56
57
  onFocusMaster(event: FocusEvent): void;
57
58
  onBlurMaster(event: FocusEvent): void;
58
- private _emitTouched;
59
59
  onChange(event: Event): void;
60
60
  protected _emitChange(): void;
61
61
  onMouseup(): void;
@@ -3,7 +3,6 @@ import { ElementRef, Renderer2, Signal, ViewContainerRef, WritableSignal } from
3
3
  import { BooleanLike, NumberLike } from '@ardium-ui/devkit';
4
4
  import { _NgModelComponentBase, _NgModelComponentDefaults } from '../_internal/ngmodel-component';
5
5
  import { SimpleComponentColor } from '../types/colors.types';
6
- import { Nullable } from '../types/utility.types';
7
6
  import { ArdRangeSelectionBehavior } from './range-slider/range-slider.types';
8
7
  import { ArdSliderTooltipDirective } from './slider.directive';
9
8
  import { SliderDecorationPosition, SliderLabelObject, SliderTooltipBehavior, SliderTooltipFormatFn, _InternalSliderLabelObject } from './slider.types';
@@ -11,7 +10,7 @@ import * as i0 from "@angular/core";
11
10
  export interface _AsbtractSliderDefaults extends _NgModelComponentDefaults {
12
11
  noTooltip: boolean;
13
12
  showValueTicks: boolean;
14
- formatTooltipFn: Nullable<SliderTooltipFormatFn>;
13
+ formatTooltipFn: SliderTooltipFormatFn;
15
14
  min: number;
16
15
  max: number;
17
16
  step: number;
@@ -23,7 +22,7 @@ export interface _AsbtractSliderDefaults extends _NgModelComponentDefaults {
23
22
  tooltipPosition: SliderDecorationPosition;
24
23
  tooltipBehavior: SliderTooltipBehavior;
25
24
  selectionBehavior: ArdRangeSelectionBehavior;
26
- allowEqualValues: boolean;
25
+ minimumDistance: number;
27
26
  }
28
27
  export declare const _asbtractSliderDefaults: _AsbtractSliderDefaults;
29
28
  export declare abstract class _AbstractSlider<T> extends _NgModelComponentBase {
@@ -36,8 +35,6 @@ export declare abstract class _AbstractSlider<T> extends _NgModelComponentBase {
36
35
  protected readonly overlay: Overlay;
37
36
  protected readonly scrollStrategyOpts: ScrollStrategyOptions;
38
37
  protected readonly viewContainerRef: ViewContainerRef;
39
- readonly noTooltip: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
40
- readonly tooltipFormatFn: import("@angular/core").InputSignal<Nullable<SliderTooltipFormatFn>>;
41
38
  readonly min: import("@angular/core").InputSignalWithTransform<number, NumberLike>;
42
39
  readonly max: import("@angular/core").InputSignalWithTransform<number, NumberLike>;
43
40
  readonly step: import("@angular/core").InputSignalWithTransform<number, NumberLike>;
@@ -67,6 +64,8 @@ export declare abstract class _AbstractSlider<T> extends _NgModelComponentBase {
67
64
  protected _clampValue(v: number): number;
68
65
  protected _valueToPercent(v: number): number;
69
66
  protected _emitChange(): void;
67
+ readonly noTooltip: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
68
+ readonly tooltipFormatFn: import("@angular/core").InputSignal<SliderTooltipFormatFn>;
70
69
  readonly tooltipTemplate: Signal<ArdSliderTooltipDirective | undefined>;
71
70
  readonly tooltipPosition: import("@angular/core").InputSignal<SliderDecorationPosition>;
72
71
  readonly tooltipBehavior: import("@angular/core").InputSignal<SliderTooltipBehavior>;
@@ -88,8 +87,8 @@ export declare abstract class _AbstractSlider<T> extends _NgModelComponentBase {
88
87
  protected _clampPercentValue(percent: number): number;
89
88
  protected _getPercentValueFromEvent(event: MouseEvent | TouchEvent): number;
90
89
  onKeyPress(event: KeyboardEvent): void;
91
- protected _decrement(event: KeyboardEvent, steps?: number): void;
92
- protected _increment(event: KeyboardEvent, steps?: number): void;
90
+ protected _decrement(event: KeyboardEvent, forceShift?: boolean): void;
91
+ protected _increment(event: KeyboardEvent, forceShift?: boolean): void;
93
92
  static ɵfac: i0.ɵɵFactoryDeclaration<_AbstractSlider<any>, never>;
94
- static ɵdir: i0.ɵɵDirectiveDeclaration<_AbstractSlider<any>, never, never, { "noTooltip": { "alias": "noTooltip"; "required": false; "isSignal": true; }; "tooltipFormatFn": { "alias": "tooltipFormatFn"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "shiftMultiplier": { "alias": "shiftMultiplier"; "required": false; "isSignal": true; }; "showValueTicks": { "alias": "showValueTicks"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; "tooltipBehavior": { "alias": "tooltipBehavior"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, ["tooltipTemplate"], never, true, never>;
93
+ static ɵdir: i0.ɵɵDirectiveDeclaration<_AbstractSlider<any>, never, never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "shiftMultiplier": { "alias": "shiftMultiplier"; "required": false; "isSignal": true; }; "showValueTicks": { "alias": "showValueTicks"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; "noTooltip": { "alias": "noTooltip"; "required": false; "isSignal": true; }; "tooltipFormatFn": { "alias": "tooltipFormatFn"; "required": false; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; "tooltipBehavior": { "alias": "tooltipBehavior"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, ["tooltipTemplate"], never, true, never>;
95
94
  }
@@ -1,5 +1,5 @@
1
1
  import { OnInit } from '@angular/core';
2
- import { BooleanLike } from '@ardium-ui/devkit';
2
+ import { NumberLike } from '@ardium-ui/devkit';
3
3
  import { _AbstractSlider } from '../abstract-slider';
4
4
  import { ArdSliderDefaults } from '../slider.defaults';
5
5
  import { SliderRange, SliderTooltipContext } from '../slider.types';
@@ -19,7 +19,7 @@ export declare class ArdiumRangeSliderComponent extends _AbstractSlider<SliderRa
19
19
  set value(v: any);
20
20
  cleanupValueAfterMinMaxStepChange(): void;
21
21
  readonly selectionBehavior: import("@angular/core").InputSignal<ArdRangeSelectionBehavior>;
22
- readonly allowEqualValues: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
22
+ readonly minimumDistance: import("@angular/core").InputSignalWithTransform<number, NumberLike>;
23
23
  protected readonly _tooltipValue: import("@angular/core").Signal<SliderRange<string>>;
24
24
  readonly tooltipContexts: import("@angular/core").Signal<SliderRange<SliderTooltipContext>>;
25
25
  reset(): void;
@@ -29,9 +29,9 @@ export declare class ArdiumRangeSliderComponent extends _AbstractSlider<SliderRa
29
29
  onPointerMove(event: MouseEvent | TouchEvent): void;
30
30
  protected _percentValueToValue(percent: number, handleId: number): SliderRange;
31
31
  protected readonly _handlePositions: import("@angular/core").Signal<[number, number]>;
32
- readonly currentHandle: import("@angular/core").WritableSignal<2 | 1 | null>;
32
+ readonly currentHandle: import("@angular/core").WritableSignal<1 | 2 | null>;
33
33
  onHandleFocus(event: FocusEvent, handleId: 1 | 2): void;
34
34
  onBlur(event: FocusEvent): void;
35
35
  static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumRangeSliderComponent, never>;
36
- static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumRangeSliderComponent, "ard-range-slider", never, { "selectionBehavior": { "alias": "selectionBehavior"; "required": false; "isSignal": true; }; "allowEqualValues": { "alias": "allowEqualValues"; "required": false; "isSignal": true; }; }, {}, never, never, false, never>;
36
+ static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumRangeSliderComponent, "ard-range-slider", never, { "selectionBehavior": { "alias": "selectionBehavior"; "required": false; "isSignal": true; }; "minimumDistance": { "alias": "minimumDistance"; "required": false; "isSignal": true; }; }, {}, never, never, false, never>;
37
37
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ardium-ui/ui",
3
- "version": "5.0.0-alpha.35",
3
+ "version": "5.0.0-alpha.37",
4
4
  "peerDependencies": {
5
5
  "@angular/common": ">=18.0.0",
6
6
  "@angular/core": ">=18.0.0",
@@ -6,6 +6,7 @@
6
6
  --ard-button-padding-compact: 0 0.9em;
7
7
  --ard-button-padding-vertical: 0.3em 1em;
8
8
  --ard-button-padding-vertical-compact: 0.2em 0.8em;
9
+ --ard-button-gap: 0.375rem;
9
10
  --ard-button-font-size: 0.875rem;
10
11
  --ard-button-font-size-compact: 0.75rem;
11
12
  --ard-button-font-weight: 500;
@@ -37,16 +38,17 @@ ard-button {
37
38
  cursor: pointer;
38
39
  outline: none;
39
40
  background: transparent;
40
- gap: 0.375rem;
41
+ gap: var(--ard-button-gap, 0.375rem);
41
42
  font-size: var(--ard-button-font-size, 0.875rem);
42
43
  height: var(--ard-button-height, 2.5em);
43
44
  padding: var(--ard-button-padding, 0 1.2em);
44
- letter-spacing: 0.5px;
45
- width: 100%;
45
+ width: max-content;
46
46
  min-width: max-content;
47
+ letter-spacing: 0.5px;
47
48
  justify-content: center;
48
49
  margin: 0;
49
50
  user-select: none;
51
+ text-decoration: none;
50
52
  }
51
53
  .ard-button.ard-color-none {
52
54
  --ard-cmpcl--bg: var(--ard-bg);
@@ -181,12 +183,8 @@ ard-button {
181
183
  --ard-cmpcl--overlay-colored: currentColor;
182
184
  --ard-cmpcl--overlay-colored-light: currentColor;
183
185
  }
184
- .ard-button .ard-button-icon {
185
- font-family: "Material Symbols Outlined";
186
- font-size: 1.5em;
187
- font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 48;
188
- }
189
- .ard-button .ard-focus-overlay {
186
+ .ard-button::before {
187
+ content: "";
190
188
  position: absolute;
191
189
  top: -0;
192
190
  bottom: -0;
@@ -198,16 +196,16 @@ ard-button {
198
196
  transition: opacity 0.2s ease;
199
197
  background-color: var(--ard-cmpcl--overlay);
200
198
  }
201
- .ard-button:hover .ard-focus-overlay {
199
+ .ard-button:hover::before {
202
200
  opacity: var(--ard-button-overlay-hover-opacity, 0.04);
203
201
  }
204
- .ard-button:focus .ard-focus-overlay {
202
+ .ard-button:focus::before {
205
203
  opacity: var(--ard-button-overlay-focus-opacity, 0.12);
206
204
  }
207
- .ard-button.ard-active .ard-focus-overlay, .ard-button:active .ard-focus-overlay {
205
+ .ard-button.ard-active::before, .ard-button:active::before {
208
206
  opacity: var(--ard-button-overlay-active-opacity, 0.18);
209
207
  }
210
- .ard-button:focus-visible .ard-focus-overlay {
208
+ .ard-button:focus-visible::before {
211
209
  opacity: var(--ard-button-overlay-focus-visible-opacity, 0.24);
212
210
  }
213
211
  .ard-button.ard-appearance-transparent, .ard-button.ard-appearance-raised {
@@ -215,7 +213,7 @@ ard-button {
215
213
  color: var(--ard-cmpcl--content);
216
214
  border: none;
217
215
  }
218
- .ard-button.ard-appearance-transparent .ard-focus-overlay, .ard-button.ard-appearance-raised .ard-focus-overlay {
216
+ .ard-button.ard-appearance-transparent::before, .ard-button.ard-appearance-raised::before {
219
217
  background: var(--ard-cmpcl--overlay-colored);
220
218
  }
221
219
  .ard-button.ard-appearance-raised, .ard-button.ard-appearance-raised-strong {
@@ -234,7 +232,7 @@ ard-button {
234
232
  color: var(--ard-cmpcl--content);
235
233
  border: 1px solid var(--ard-border-light);
236
234
  }
237
- .ard-button.ard-appearance-outlined .ard-focus-overlay {
235
+ .ard-button.ard-appearance-outlined::before {
238
236
  background: var(--ard-cmpcl--overlay-colored);
239
237
  }
240
238
  .ard-button.ard-appearance-outlined-strong {
@@ -243,7 +241,7 @@ ard-button {
243
241
  border: 1px solid var(--ard-border-light);
244
242
  transition: background-color 0.2s ease, color 0.2s ease;
245
243
  }
246
- .ard-button.ard-appearance-outlined-strong .ard-focus-overlay {
244
+ .ard-button.ard-appearance-outlined-strong::before {
247
245
  display: none;
248
246
  }
249
247
  .ard-button.ard-appearance-outlined-strong:hover, .ard-button.ard-appearance-outlined-strong:focus-visible {
@@ -255,7 +253,7 @@ ard-button {
255
253
  color: var(--ard-cmpcl--on-bg-colored);
256
254
  border: 1px solid var(--ard-cmpcl--bg-colored);
257
255
  }
258
- .ard-button.ard-appearance-flat .ard-focus-overlay, .ard-button.ard-appearance-raised-strong .ard-focus-overlay {
256
+ .ard-button.ard-appearance-flat::before, .ard-button.ard-appearance-raised-strong::before {
259
257
  background: var(--ard-cmpcl--on-bg);
260
258
  }
261
259
  .ard-button.ard-appearance-flat:focus-visible, .ard-button.ard-appearance-raised-strong:focus-visible {
@@ -264,14 +262,9 @@ ard-button {
264
262
  .ard-button.ard-appearance-transparent.ard-light-coloring {
265
263
  color: var(--ard-cmpcl--content-light);
266
264
  }
267
- .ard-button.ard-appearance-transparent.ard-light-coloring .ard-focus-overlay {
265
+ .ard-button.ard-appearance-transparent.ard-light-coloring::before {
268
266
  background: var(--ard-cmpcl--overlay-colored-light);
269
267
  }
270
- .ard-button .ard-button-content {
271
- display: flex;
272
- align-items: center;
273
- gap: 0.375rem;
274
- }
275
268
  .ard-button.ard-align-left {
276
269
  flex-direction: row;
277
270
  }
@@ -303,27 +296,23 @@ ard-button {
303
296
  padding: var(--ard-button-padding-vertical-compact, 0.2em 0.8em);
304
297
  gap: 0;
305
298
  }
306
-
307
- ard-button.ard-disabled > .ard-button {
299
+ .ard-button.ard-disabled {
308
300
  pointer-events: none;
309
301
  opacity: var(--ard-button-disabled-opacity, 0.6);
310
302
  cursor: not-allowed;
311
303
  }
312
- ard-button.ard-disabled > .ard-button .ard-focus-overlay {
304
+ .ard-button.ard-disabled::before {
313
305
  opacity: var(--ard-button-overlay-disabled-opacity, 0.2);
314
306
  transform: scale(1);
315
307
  }
316
- ard-button.ard-disabled > .ard-button.ard-color-none .ard-button-icon,
317
- ard-button.ard-disabled > .ard-button.ard-color-none .ard-button-content {
308
+ .ard-button.ard-disabled.ard-color-none .ard-button-icon,
309
+ .ard-button.ard-disabled.ard-color-none .ard-button-content {
318
310
  opacity: var(--ard-button-disabled-opacity, 0.6);
319
311
  }
320
- ard-button.ard-disabled > .ard-button.ard-color-none .ard-focus-overlay {
312
+ .ard-button.ard-disabled.ard-color-none::before {
321
313
  background: var(--ard-cmpcl--overlay);
322
314
  }
323
- ard-button.ard-disabled.ard-button-with-pointer-events-when-disabled {
324
- pointer-events: all;
325
- }
326
- ard-button.ard-disabled.ard-button-with-pointer-events-when-disabled > .ard-button {
315
+ .ard-button.ard-disabled.ard-button-with-pointer-events-when-disabled {
327
316
  pointer-events: all;
328
317
  }
329
318
 
@@ -1 +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"}
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;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"}
@@ -5,6 +5,7 @@
5
5
  --ard-fab-size-standard-font-size: 1.75rem;
6
6
  --ard-fab-size-small-font-size: 1.375rem;
7
7
  --ard-fab-font-weight: 900;
8
+ --ard-fab-extended-gap: 0.75em;
8
9
  --ard-fab-overlay-hover-opacity: 0.04;
9
10
  --ard-fab-overlay-focus-opacity: 0.12;
10
11
  --ard-fab-overlay-active-opacity: 0.18;
@@ -35,10 +36,17 @@ ard-fab {
35
36
  outline: none;
36
37
  height: var(--ard-_fab-size);
37
38
  width: var(--ard-_fab-size);
39
+ max-height: var(--ard-_fab-size);
40
+ max-width: var(--ard-_fab-size);
41
+ min-height: var(--ard-_fab-size);
42
+ min-width: var(--ard-_fab-size);
38
43
  user-select: none;
39
44
  border-radius: 9999px;
40
45
  justify-content: center;
41
46
  margin: 0;
47
+ font-weight: 500;
48
+ overflow: hidden;
49
+ transition: max-width 0.5s ease;
42
50
  }
43
51
  .ard-fab.ard-color-none {
44
52
  --ard-cmpcl--bg: var(--ard-bg);
@@ -173,12 +181,8 @@ ard-fab {
173
181
  --ard-cmpcl--overlay-colored: currentColor;
174
182
  --ard-cmpcl--overlay-colored-light: currentColor;
175
183
  }
176
- .ard-fab .ard-button-icon {
177
- font-family: "Material Symbols Outlined";
178
- font-size: 1.5em;
179
- font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 48;
180
- }
181
- .ard-fab .ard-focus-overlay {
184
+ .ard-fab::before {
185
+ content: "";
182
186
  position: absolute;
183
187
  top: -0;
184
188
  bottom: -0;
@@ -190,16 +194,16 @@ ard-fab {
190
194
  transition: opacity 0.2s ease;
191
195
  background-color: var(--ard-cmpcl--overlay);
192
196
  }
193
- .ard-fab:hover .ard-focus-overlay {
197
+ .ard-fab:hover::before {
194
198
  opacity: var(--ard-fab-overlay-hover-opacity, var(--ard-button-overlay-hover-opacity, 0.04));
195
199
  }
196
- .ard-fab:focus .ard-focus-overlay {
200
+ .ard-fab:focus::before {
197
201
  opacity: var(--ard-fab-overlay-focus-opacity, var(--ard-button-overlay-focus-opacity, 0.12));
198
202
  }
199
- .ard-fab.ard-active .ard-focus-overlay, .ard-fab:active .ard-focus-overlay {
203
+ .ard-fab.ard-active::before, .ard-fab:active::before {
200
204
  opacity: var(--ard-fab-overlay-active-opacity, var(--ard-button-overlay-active-opacity, 0.18));
201
205
  }
202
- .ard-fab:focus-visible .ard-focus-overlay {
206
+ .ard-fab:focus-visible::before {
203
207
  opacity: var(--ard-fab-overlay-focus-visible-opacity, var(--ard-button-overlay-focus-visible-opacity, 0.24));
204
208
  }
205
209
  .ard-fab.ard-appearance-transparent, .ard-fab.ard-appearance-raised {
@@ -207,7 +211,7 @@ ard-fab {
207
211
  color: var(--ard-cmpcl--content);
208
212
  border: none;
209
213
  }
210
- .ard-fab.ard-appearance-transparent .ard-focus-overlay, .ard-fab.ard-appearance-raised .ard-focus-overlay {
214
+ .ard-fab.ard-appearance-transparent::before, .ard-fab.ard-appearance-raised::before {
211
215
  background: var(--ard-cmpcl--overlay-colored);
212
216
  }
213
217
  .ard-fab.ard-appearance-raised, .ard-fab.ard-appearance-raised-strong {
@@ -226,7 +230,7 @@ ard-fab {
226
230
  color: var(--ard-cmpcl--content);
227
231
  border: 1px solid var(--ard-border-light);
228
232
  }
229
- .ard-fab.ard-appearance-outlined .ard-focus-overlay {
233
+ .ard-fab.ard-appearance-outlined::before {
230
234
  background: var(--ard-cmpcl--overlay-colored);
231
235
  }
232
236
  .ard-fab.ard-appearance-outlined-strong {
@@ -235,7 +239,7 @@ ard-fab {
235
239
  border: 1px solid var(--ard-border-light);
236
240
  transition: background-color 0.2s ease, color 0.2s ease;
237
241
  }
238
- .ard-fab.ard-appearance-outlined-strong .ard-focus-overlay {
242
+ .ard-fab.ard-appearance-outlined-strong::before {
239
243
  display: none;
240
244
  }
241
245
  .ard-fab.ard-appearance-outlined-strong:hover, .ard-fab.ard-appearance-outlined-strong:focus-visible {
@@ -247,7 +251,7 @@ ard-fab {
247
251
  color: var(--ard-cmpcl--on-bg-colored);
248
252
  border: 1px solid var(--ard-cmpcl--bg-colored);
249
253
  }
250
- .ard-fab.ard-appearance-flat .ard-focus-overlay, .ard-fab.ard-appearance-raised-strong .ard-focus-overlay {
254
+ .ard-fab.ard-appearance-flat::before, .ard-fab.ard-appearance-raised-strong::before {
251
255
  background: var(--ard-cmpcl--on-bg);
252
256
  }
253
257
  .ard-fab.ard-appearance-flat:focus-visible, .ard-fab.ard-appearance-raised-strong:focus-visible {
@@ -256,7 +260,7 @@ ard-fab {
256
260
  .ard-fab.ard-appearance-transparent.ard-light-coloring {
257
261
  color: var(--ard-cmpcl--content-light);
258
262
  }
259
- .ard-fab.ard-appearance-transparent.ard-light-coloring .ard-focus-overlay {
263
+ .ard-fab.ard-appearance-transparent.ard-light-coloring::before {
260
264
  background: var(--ard-cmpcl--overlay-colored-light);
261
265
  }
262
266
  .ard-fab.ard-fab-size-standard {
@@ -271,20 +275,10 @@ ard-fab {
271
275
  min-width: var(--ard-_fab-size);
272
276
  width: max-content;
273
277
  font-weight: unset;
274
- }
275
- .ard-fab.ard-fab-extended .ard-button-content {
276
- gap: 0.75em;
278
+ gap: var(--ard-fab-extended-gap, 1em);
277
279
  max-width: 10em;
278
280
  }
279
- .ard-fab .ard-button-content {
280
- gap: 1em;
281
- font-weight: 500;
282
- justify-content: flex-start !important;
283
- max-width: 1.5em;
284
- overflow: hidden;
285
- transition: max-width 0.5s ease;
286
- }
287
- .ard-fab .ard-button-content ard-icon {
281
+ .ard-fab ard-icon {
288
282
  font-size: 1em;
289
283
  }
290
284
  .ard-fab.ard-appearance-transparent > .ard-focus-overlay {
@@ -300,7 +294,7 @@ ard-fab.ard-disabled > .ard-fab {
300
294
  opacity: var(--ard-fab-overlay-disabled-opacity, var(--ard-button-overlay-disabled-opacity, 0.2));
301
295
  cursor: not-allowed;
302
296
  }
303
- ard-fab.ard-disabled > .ard-fab .ard-focus-overlay {
297
+ ard-fab.ard-disabled > .ard-fab::before {
304
298
  opacity: var(--ard-fab-disabled-opacity, var(--ard-button-disabled-opacity, 0.6));
305
299
  transform: scale(1);
306
300
  }
@@ -308,7 +302,7 @@ ard-fab.ard-disabled > .ard-fab.ard-color-none .ard-button-icon,
308
302
  ard-fab.ard-disabled > .ard-fab.ard-color-none .ard-button-content {
309
303
  opacity: var(--ard-fab-overlay-disabled-opacity, var(--ard-button-overlay-disabled-opacity, 0.2));
310
304
  }
311
- ard-fab.ard-disabled > .ard-fab.ard-color-none .ard-focus-overlay {
305
+ ard-fab.ard-disabled > .ard-fab.ard-color-none::before {
312
306
  background: var(--ard-cmpcl--overlay);
313
307
  }
314
308
  ard-fab.ard-disabled.ard-button-with-pointer-events-when-disabled {
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/buttons/fab.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":"AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;ECXE;EACA,QDYE;ECXF,SDYE;ECXF;EACA,aDYE;ECXF,WDUE;ECTF;EACA;EACA;EACA;EACA;EDYA;EACA;EACA;EACA;EACA;EACA;;AEvCA;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,SDNF;;ACUA;EACE,SDVF;;ACeA;EACE,SDfF;;ACmBA;EACE,SDnBF;;ACuBF;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;;ADjFJ;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AG/CJ;EACE;EAEA,YACE;;AAMF;EACE;;;AH8CJ;ECkDA;EACA,SDjDI;ECkDJ;;AAEA;EACE,SDpDE;ECqDF;;AAKA;AAAA;EAEE,SD7DA;;AC+DF;EACE;;AD5DJ;EACE;;AAEA;EACE;;;AAKN;EACE;IACE;;EAEF;IACE;;EAEF;IACE","file":"fab.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/buttons/fab.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":"AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;ECZE;EACA,QDaE;ECZF,SDaE;ECZF;EACA,aDaE;ECZF,WDWE;ECVF;EACA;EACA;EACA;EACA;EDaA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AE/CA;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,SDFF;;ACMA;EACE,SDNF;;ACWA;EACE,SDXF;;ACeA;EACE,SDfF;;ACmBF;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;;ADtEJ;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AG5CF;EACE;EAEA,YACE;;AAMF;EACE;;;AHyCJ;ECoDA;EACA,SDnDI;ECoDJ;;AAEA;EACE,SDtDE;ECuDF;;AAKA;AAAA;EAEE,SD/DA;;ACiEF;EACE;;AD9DJ;EACE;;AAEA;EACE;;;AAKN;EACE;IACE;;EAEF;IACE;;EAEF;IACE","file":"fab.css"}