@ardium-ui/ui 5.0.0-alpha.16 → 5.0.0-alpha.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/fesm2022/ardium-ui-ui.mjs +69 -30
  2. package/fesm2022/ardium-ui-ui.mjs.map +1 -1
  3. package/lib/tabber/tab/tab.component.d.ts +7 -4
  4. package/lib/tabber/tabber.component.d.ts +13 -7
  5. package/package.json +1 -1
  6. package/prebuilt-themes/default/checkbox-list.css +17 -6
  7. package/prebuilt-themes/default/checkbox-list.css.map +1 -1
  8. package/prebuilt-themes/default/core.css +5 -1
  9. package/prebuilt-themes/default/core.css.map +1 -1
  10. package/prebuilt-themes/default/form-field-frame.css +1 -1
  11. package/prebuilt-themes/default/form-field.css +1 -1
  12. package/prebuilt-themes/default/inputs/input.css +0 -1
  13. package/prebuilt-themes/default/inputs/input.css.map +1 -1
  14. package/prebuilt-themes/default/inputs/number-input.css +34 -16
  15. package/prebuilt-themes/default/inputs/number-input.css.map +1 -1
  16. package/themes/_variables.scss +1 -1
  17. package/themes/default/checkbox-list.scss +16 -22
  18. package/themes/default/core.scss +5 -1
  19. package/themes/default/inputs/input.scss +0 -1
  20. package/themes/default/inputs/number-input.scss +34 -17
package/lib/tabber/tab/tab.component.d.ts CHANGED
@@ -1,13 +1,13 @@
1
- import { TemplateRef } from '@angular/core';
1
+ import { OnDestroy, TemplateRef } from '@angular/core';
2
2
  import { BooleanLike } from '@ardium-ui/devkit';
3
+ import { Subject } from 'rxjs';
3
4
  import * as i0 from "@angular/core";
4
- export declare class ArdiumTabComponent {
5
+ export declare class ArdiumTabComponent implements OnDestroy {
5
6
  protected readonly _DEFAULTS: import("./tab.defaults").ArdTabDefaults;
6
7
  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
7
8
  readonly selected: import("@angular/core").WritableSignal<boolean>;
8
9
  set _selected(v: any);
9
10
  setSelected(state: boolean): void;
10
- get _selectedHostAttribute(): boolean;
11
11
  private _emitChange;
12
12
  readonly focused: import("@angular/core").WritableSignal<boolean>;
13
13
  readonly _label: import("@angular/core").InputSignal<string | TemplateRef<any> | null>;
@@ -16,6 +16,9 @@ export declare class ArdiumTabComponent {
16
16
  readonly focusEvent: import("@angular/core").OutputEmitterRef<void>;
17
17
  readonly blurEvent: import("@angular/core").OutputEmitterRef<void>;
18
18
  readonly selectedChange: import("@angular/core").OutputEmitterRef<boolean>;
19
+ readonly selectedChangeInternal$: Subject<boolean>;
20
+ private _selectedChangeSub;
21
+ ngOnDestroy(): void;
19
22
  static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumTabComponent, never>;
20
- static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumTabComponent, "ard-tab", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "_selected": { "alias": "selected"; "required": false; }; "_label": { "alias": "label"; "required": false; "isSignal": true; }; "tabId": { "alias": "tabId"; "required": true; "isSignal": true; }; }, { "focusEvent": "focusEvent"; "blurEvent": "blurEvent"; "selectedChange": "selectedChange"; }, never, ["*"], false, never>;
23
+ static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumTabComponent, "ard-tab", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "_selected": { "alias": "selected"; "required": false; }; "_label": { "alias": "label"; "required": false; "isSignal": true; }; "tabId": { "alias": "tabId"; "required": true; "isSignal": true; }; }, { "focusEvent": "focus"; "blurEvent": "blur"; "selectedChange": "selectedChange"; }, never, ["*"], false, never>;
21
24
  }
package/lib/tabber/tabber.component.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { AfterContentInit, TemplateRef } from '@angular/core';
1
+ import { AfterContentInit, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
2
2
  import { BooleanLike } from '@ardium-ui/devkit';
3
3
  import { OneAxisAlignment } from '../types/alignment.types';
4
4
  import { ComponentColor } from '../types/colors.types';
@@ -6,19 +6,25 @@ import { ArdiumTabComponent } from './tab/tab.component';
6
6
  import { ArdTabberLabelTemplateDirective } from './tabber.directives';
7
7
  import { TabberLabelContext } from './tabber.types';
8
8
  import * as i0 from "@angular/core";
9
- export declare class ArdiumTabberComponent implements AfterContentInit {
9
+ export declare class ArdiumTabberComponent implements AfterContentInit, OnChanges {
10
10
  protected readonly _DEFAULTS: import("./tabber.defaults").ArdTabberDefaults;
11
11
  readonly tabs: import("@angular/core").Signal<readonly ArdiumTabComponent[]>;
12
- readonly currentTab: import("@angular/core").WritableSignal<ArdiumTabComponent | null>;
13
- readonly currentFocusedTab: import("@angular/core").WritableSignal<ArdiumTabComponent | null>;
12
+ readonly selectedTabId: import("@angular/core").ModelSignal<string | null>;
13
+ readonly selectedTab: import("@angular/core").Signal<ArdiumTabComponent | null>;
14
+ readonly focusedTabId: import("@angular/core").WritableSignal<string | null>;
15
+ readonly focusedTab: import("@angular/core").Signal<ArdiumTabComponent | null>;
16
+ readonly focusedTabIdChange: import("@angular/core").OutputEmitterRef<string>;
17
+ ngOnChanges(changes: SimpleChanges): void;
14
18
  readonly initialTab: import("@angular/core").InputSignal<string | undefined>;
15
19
  ngAfterContentInit(): void;
16
- onTabClick(tab: ArdiumTabComponent): void;
20
+ selectTab(tab: ArdiumTabComponent): void;
21
+ private _unselectSpecificTab;
22
+ private _unselectCurrentTab;
23
+ private _selectNewTab;
17
24
  onTabFocus(tab: ArdiumTabComponent): void;
18
25
  onTabBlur(tab: ArdiumTabComponent): void;
19
26
  readonly focusEvent: import("@angular/core").OutputEmitterRef<string>;
20
27
  readonly blurEvent: import("@angular/core").OutputEmitterRef<string>;
21
- readonly changeTab: import("@angular/core").OutputEmitterRef<string>;
22
28
  readonly color: import("@angular/core").InputSignal<ComponentColor>;
23
29
  readonly ngClasses: import("@angular/core").Signal<string>;
24
30
  readonly stretchTabs: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
@@ -33,5 +39,5 @@ export declare class ArdiumTabberComponent implements AfterContentInit {
33
39
  templateContext: TabberLabelContext | null;
34
40
  }[]>;
35
41
  static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumTabberComponent, never>;
36
- static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumTabberComponent, "ard-tabber", never, { "initialTab": { "alias": "initialTab"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "stretchTabs": { "alias": "stretchTabs"; "required": false; "isSignal": true; }; "uniformTabWidths": { "alias": "uniformTabWidths"; "required": false; "isSignal": true; }; "tabAlignment": { "alias": "tabAlignment"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; }, { "focusEvent": "focus"; "blurEvent": "blur"; "changeTab": "changeTab"; }, ["tabs", "labelTemplate"], ["*"], false, never>;
42
+ static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumTabberComponent, "ard-tabber", never, { "selectedTabId": { "alias": "selectedTab"; "required": false; "isSignal": true; }; "initialTab": { "alias": "initialTab"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "stretchTabs": { "alias": "stretchTabs"; "required": false; "isSignal": true; }; "uniformTabWidths": { "alias": "uniformTabWidths"; "required": false; "isSignal": true; }; "tabAlignment": { "alias": "tabAlignment"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; }, { "selectedTabId": "selectedTabChange"; "focusedTabIdChange": "focusedTabIdChange"; "focusEvent": "focus"; "blurEvent": "blur"; }, ["tabs", "labelTemplate"], ["*"], false, never>;
37
43
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ardium-ui/ui",
3
- "version": "5.0.0-alpha.16",
3
+ "version": "5.0.0-alpha.19",
4
4
  "peerDependencies": {
5
5
  "@angular/common": ">=18.0.0",
6
6
  "@angular/core": ">=18.0.0",
package/prebuilt-themes/default/checkbox-list.css CHANGED
@@ -1,23 +1,31 @@
1
1
  :root {
2
+ --ard-checkbox-list-padding: 0.375rem 0;
2
3
  --ard-checkbox-list-item-hover-opacity: 5%;
3
4
  --ard-checkbox-list-item-active-opacity: 15%;
4
5
  --ard-checkbox-list-item-height: 3rem;
5
6
  --ard-checkbox-list-item-height-compact: 2rem;
6
7
  --ard-checkbox-list-checkbox-min-width: 1.25rem;
7
8
  --ard-checkbox-list-checkbox-padding: 0.625rem;
8
- --ard-checkbox-list-label-padding: 0 0.5rem;
9
+ --ard-checkbox-list-item-padding: 0 0.5rem 0 0;
10
+ --ard-checkbox-list-gap: 0;
11
+ --ard-checkbox-list-gap-compact: 0;
12
+ --ard-checkbox-list-item-gap: 0.5rem;
13
+ --ard-checkbox-list-item-gap-compact: 0.325rem;
14
+ --ard-checkbox-list-disabled-opacity: 50%;
9
15
  }
10
16
 
11
17
  .ard-checkbox-list {
12
18
  display: flex;
13
19
  flex-direction: column;
14
- padding-top: 0.375rem;
20
+ padding: var(--ard-checkbox-list-padding, 0.375rem 0);
21
+ gap: var(--ard-checkbox-list-gap, 0);
15
22
  }
16
23
  .ard-checkbox-list .ard-checkbox-list__item {
17
24
  display: flex;
18
25
  align-items: center;
19
26
  justify-content: stretch;
20
- padding: 0;
27
+ gap: var(--ard-checkbox-list-item-gap, 0.5rem);
28
+ padding: var(--ard-checkbox-list-item-padding, 0 0.5rem 0 0);
21
29
  position: relative;
22
30
  cursor: pointer;
23
31
  height: max-content;
@@ -27,7 +35,7 @@
27
35
  pointer-events: none;
28
36
  user-select: none;
29
37
  flex-grow: 1;
30
- padding: var(--ard-checkbox-list-label-padding, 0 0.5rem);
38
+ padding: 0;
31
39
  min-height: var(--ard-checkbox-list-item-height, 3rem);
32
40
  display: flex;
33
41
  align-items: center;
@@ -61,10 +69,13 @@
61
69
  pointer-events: none;
62
70
  }
63
71
  .ard-checkbox-list .ard-checkbox-list__item.ard-item-disabled > label {
64
- opacity: 50%;
72
+ opacity: var(--ard-checkbox-list-disabled-opacity, 50%);
73
+ }
74
+ .ard-checkbox-list.ard-compact {
75
+ gap: var(--ard-checkbox-list-gap-compact, 0);
65
76
  }
66
77
  .ard-checkbox-list.ard-compact .ard-checkbox-list__item {
67
- gap: 0.325rem;
78
+ gap: var(--ard-checkbox-list-item-gap-compact, 0.325rem);
68
79
  height: var(--ard-checkbox-list-item-height-compact, 2rem);
69
80
  }
70
81
  .ard-checkbox-list.ard-align-left-clumped .ard-checkbox-list__item label, .ard-checkbox-list.ard-align-right-split .ard-checkbox-list__item label {
package/prebuilt-themes/default/checkbox-list.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/checkbox-list.scss","../../../../projects/ui/src/themes/default/_mixins.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;ECxBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EDiBI,YErCI;;AFwCJ;EACE;;AAIF;EACE;;AAGJ;EACE;EACA;;AAGE;EACE;;AAIN;EACE;;AAEA;EACE;;AAKJ;EACE;EACA;;AAOA;EACE;;AAOF;EACE;;AAMJ;EACE","file":"checkbox-list.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/checkbox-list.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;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EChCF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EDyBI,YE7CI;;AFgDJ;EACE;;AAIF;EACE;;AAGJ;EACE;EACA;;AAGE;EACE;;AAIN;EACE;;AAEA;EACE;;AAIN;EACE;;AAEA;EACE;EACA;;AAOA;EACE;;AAOF;EACE;;AAMJ;EACE","file":"checkbox-list.css"}
package/prebuilt-themes/default/core.css CHANGED
@@ -34,7 +34,11 @@
34
34
  --ard-clear-button-size: 0.9rem;
35
35
  --ard-dropdown-button-size: 0.4rem;
36
36
  --ard-form-field-height: 2.3125rem;
37
- --ard-form-field-compact-height: 1.6875rem;
37
+ --ard-form-field-height-compact: 1.6875rem;
38
+ --ard-form-field-font-size: 1rem;
39
+ --ard-form-field-font-size-compact: 1rem;
40
+ --ard-form-field-padding: 0 0.375rem;
41
+ --ard-form-field-padding-compact: 0 0.375rem;
38
42
  --ard-primary-50: 234, 235, 243;
39
43
  --ard-primary-100: 159, 167, 228;
40
44
  --ard-primary-300: 78, 99, 219;
package/prebuilt-themes/default/core.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/core.scss"],"names":[],"mappings":"AAEQ;AACA;AAER;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;AAAA;EAEA;AAAA;EAEA;AAAA;EAGA;EAEA;EACA;;;AAGF;EACE","file":"core.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/core.scss"],"names":[],"mappings":"AAEQ;AACA;AAER;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;AAAA;EAEA;AAAA;EAEA;AAAA;EAGA;EAEA;EACA;;;AAGF;EACE","file":"core.css"}
package/prebuilt-themes/default/form-field-frame.css CHANGED
@@ -36,7 +36,7 @@
36
36
  padding-right: 0.375em;
37
37
  }
38
38
  .ard-form-field-frame.ard-compact {
39
- min-height: var(--ard-form-field-compact-height);
39
+ min-height: var(--ard-form-field-height-compact);
40
40
  font-size: 0.85rem;
41
41
  line-height: 1;
42
42
  }
package/prebuilt-themes/default/form-field.css CHANGED
@@ -114,7 +114,7 @@ ard-horizontal-form-field {
114
114
  flex-grow: 1;
115
115
  }
116
116
  .ard-horizontal-form-field:has(.ard-form-field__input .ard-compact) .ard-form-field__label-container {
117
- height: var(--ard-form-field-compact-height);
117
+ height: var(--ard-form-field-height-compact);
118
118
  }
119
119
 
120
120
  ard-label {
package/prebuilt-themes/default/inputs/input.css CHANGED
@@ -13,7 +13,6 @@
13
13
  font-size: 1rem;
14
14
  line-height: 1.25em;
15
15
  padding: 0 0.375rem;
16
- min-width: 10rem;
17
16
  max-width: 100%;
18
17
  }
19
18
  .ard-input .ard-input-container {
package/prebuilt-themes/default/inputs/input.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/input.scss","../../../../../projects/ui/src/themes/default/_clear-button.scss","../../../../../projects/ui/src/themes/_variables.scss","../../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACEA;EDEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECTA;EACA;EACA;;ADSA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AE3CF;EACE,QCkCgB;EDjChB,OCiCgB;EDhChB;;AAGF;EACE;EACA;EACA,OCGK;EDFL,OCyBgB;EDxBhB,QCwBgB;EDvBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EEvBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFgBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EE7CN;EACA;EACA,yBACE;EF4CI;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE","file":"input.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/input.scss","../../../../../projects/ui/src/themes/default/_clear-button.scss","../../../../../projects/ui/src/themes/_variables.scss","../../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACEA;EDEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECTA;EACA;;ADUA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AE3CF;EACE,QCkCgB;EDjChB,OCiCgB;EDhChB;;AAGF;EACE;EACA;EACA,OCGK;EDFL,OCyBgB;EDxBhB,QCwBgB;EDvBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EEvBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFgBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EE7CN;EACA;EACA,yBACE;EF4CI;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE","file":"input.css"}
package/prebuilt-themes/default/inputs/number-input.css CHANGED
@@ -1,11 +1,19 @@
1
1
  /**
2
2
  * Should be applied to the first element in the component's template.
3
3
  */
4
- ard-number-input {
5
- width: 9.5rem;
4
+ :root {
5
+ --ard-number-input-width: 9.5rem;
6
+ --ard-number-input-height: var(--ard-form-field-height);
7
+ --ard-number-input-height-compact: var(--ard-form-field-height-compact);
8
+ --ard-number-input-font-size: var(--ard-form-field-font-size);
9
+ --ard-number-input-font-size-compact: var(--ard-form-field-font-size-compact);
10
+ --ard-number-input-padding: var(--ard-form-field-padding);
11
+ --ard-number-input-padding-compact: var(--ard-form-field-padding-compact);
12
+ --ard-number-input-rounded-border-radius: 8px;
6
13
  }
7
- ard-number-input:not(:has(.ard-quick-change-button)) {
8
- width: 6rem;
14
+
15
+ ard-number-input {
16
+ width: var(--ard-number-input-width, 9.5rem);
9
17
  }
10
18
 
11
19
  .ard-number-input {
@@ -19,10 +27,11 @@ ard-number-input:not(:has(.ard-quick-change-button)) {
19
27
  box-sizing: border-box;
20
28
  font-size: 1rem;
21
29
  line-height: 1.25em;
22
- min-height: 2.1875rem;
23
- height: 2.1875rem;
30
+ min-height: var(--ard-form-field-height, var(--ard-number-input-height, 2.3125rem));
31
+ height: var(--ard-form-field-height, var(--ard-number-input-height, 2.3125rem));
24
32
  gap: 0;
25
33
  width: 100%;
34
+ font-size: var(--ard-number-input-font-size, var(--ard-form-field-font-size, 1rem));
26
35
  }
27
36
  .ard-number-input .ard-input-container {
28
37
  flex-grow: 1;
@@ -85,14 +94,17 @@ ard-number-input:not(:has(.ard-quick-change-button)) {
85
94
  .ard-number-input .ard-input-container {
86
95
  height: 100%;
87
96
  max-width: 100%;
97
+ padding: var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem));
88
98
  }
89
99
  .ard-number-input .ard-input-container > input {
90
100
  width: 100%;
91
- padding: 0 0.5rem;
101
+ }
102
+ .ard-number-input .ard-placeholder {
103
+ padding: var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem));
92
104
  }
93
105
  .ard-number-input .ard-quick-change-button {
94
106
  position: relative;
95
- min-width: 2.1875rem;
107
+ min-width: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
96
108
  }
97
109
  .ard-number-input .ard-quick-change-button .ard-button {
98
110
  height: 100%;
@@ -121,10 +133,10 @@ ard-number-input:not(:has(.ard-quick-change-button)) {
121
133
  border-bottom-left-radius: 0;
122
134
  }
123
135
  .ard-number-input.ard-variant-rounded {
124
- border-radius: 8px;
136
+ border-radius: var(--ard-number-input-rounded-border-radius, 8px);
125
137
  }
126
138
  .ard-number-input.ard-variant-rounded.ard-quick-change-false .ard-input-container {
127
- border-radius: 8px;
139
+ border-radius: var(--ard-number-input-rounded-border-radius, 8px);
128
140
  }
129
141
  .ard-number-input.ard-variant-sharp {
130
142
  border-radius: 0;
@@ -134,8 +146,8 @@ ard-number-input:not(:has(.ard-quick-change-button)) {
134
146
  }
135
147
  .ard-number-input.ard-variant-pill .ard-button {
136
148
  border-radius: 9999px !important;
137
- height: 30px;
138
- width: 30px;
149
+ width: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
150
+ height: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
139
151
  margin: 0 2px;
140
152
  }
141
153
  .ard-number-input.ard-variant-pill.ard-quick-change-false .ard-input-container {
@@ -155,12 +167,18 @@ ard-number-input:not(:has(.ard-quick-change-button)) {
155
167
  border: var(--ard-appearance-border);
156
168
  }
157
169
  .ard-number-input.ard-compact {
158
- min-height: 1.6875rem;
159
- height: 1.6875rem;
160
- font-size: 0.925rem;
170
+ min-height: var(--ard-form-field-height-compact, var(--ard-number-input-height-compact, 1.6875rem));
171
+ height: var(--ard-form-field-height-compact, var(--ard-number-input-height-compact, 1.6875rem));
172
+ font-size: var(--ard-number-input-font-size-compact, var(--ard-form-field-font-size-compact, 0.9375rem));
173
+ }
174
+ .ard-number-input.ard-compact .ard-input-container {
175
+ padding: var(--ard-number-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
176
+ }
177
+ .ard-number-input.ard-compact .ard-placeholder {
178
+ padding: var(--ard-number-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
161
179
  }
162
180
  .ard-number-input.ard-compact .ard-quick-change-button {
163
- min-width: 1.6875rem;
181
+ min-width: var(--ard-form-field-height-compact, var(--ard-number-input-height-compact, 1.6875rem));
164
182
  }
165
183
 
166
184
  .ard-disabled > .ard-number-input {
package/prebuilt-themes/default/inputs/number-input.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/number-input.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACEA;EACE;;AAEA;EACE;;;AAIJ;EDNE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECAA;EACA;EACA;EACA;;ADDA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AELF;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;;ADnDF;EACE;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAGF;EACE;;AAEA;EACE;EACA;;AAGJ;EACE;;AAEA;EACE;EACA;;AAMN;EACE;;AAGE;EACE;;AAIN;EACE;;AAEF;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAIA;EACE;;AAQJ;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;;AAMJ;EACE;EACA;EAMA,YEjIG;;AF6HH;EACE","file":"number-input.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/number-input.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EDbE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECOA;EACA;EACA;EACA;EACA;;ADTA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AELF;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;;AD3CF;EACE;EACA;EACA;;AAEA;EACE;;AAGJ;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAGF;EACE;;AAEA;EACE;EACA;;AAGJ;EACE;;AAEA;EACE;EACA;;AAMN;EACE;;AAGE;EACE;;AAIN;EACE;;AAEF;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAIA;EACE;;AAQJ;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;;;AAMJ;EACE;EACA;EAMA,YElJG;;AF8IH;EACE","file":"number-input.css"}
package/themes/_variables.scss CHANGED
@@ -40,7 +40,7 @@ $timing-fn: cubic-bezier(0.4, 0, 0.2, 1);
40
40
  $clear-button-size: var(--ard-clear-button-size);
41
41
  $dropdown-button-size: var(--ard-dropdown-button-size);
42
42
  $form-field-height: var(--ard-form-field-height);
43
- $form-field-compact-height: var(--ard-form-field-compact-height);
43
+ $form-field-compact-height: var(--ard-form-field-height-compact);
44
44
 
45
45
  $gold: var(--ard-gold);
46
46
 
package/themes/default/checkbox-list.scss CHANGED
@@ -2,25 +2,33 @@
2
2
  @use '../variables' as ARD;
3
3
 
4
4
  :root {
5
+ --ard-checkbox-list-padding: 0.375rem 0;
5
6
  --ard-checkbox-list-item-hover-opacity: 5%;
6
7
  --ard-checkbox-list-item-active-opacity: 15%;
7
8
  --ard-checkbox-list-item-height: 3rem;
8
9
  --ard-checkbox-list-item-height-compact: 2rem;
9
10
  --ard-checkbox-list-checkbox-min-width: 1.25rem;
10
11
  --ard-checkbox-list-checkbox-padding: 0.625rem;
11
- --ard-checkbox-list-label-padding: 0 0.5rem;
12
+ --ard-checkbox-list-item-padding: 0 0.5rem 0 0;
13
+ --ard-checkbox-list-gap: 0;
14
+ --ard-checkbox-list-gap-compact: 0;
15
+ --ard-checkbox-list-item-gap: 0.5rem;
16
+ --ard-checkbox-list-item-gap-compact: 0.325rem;
17
+ --ard-checkbox-list-disabled-opacity: 50%;
12
18
  }
13
19
 
14
20
  .ard-checkbox-list {
15
21
  display: flex;
16
22
  flex-direction: column;
17
- padding-top: 0.375rem;
23
+ padding: var(--ard-checkbox-list-padding, 0.375rem 0);
24
+ gap: var(--ard-checkbox-list-gap, 0);
18
25
 
19
26
  .ard-checkbox-list__item {
20
27
  display: flex;
21
28
  align-items: center;
22
29
  justify-content: stretch;
23
- padding: 0;
30
+ gap: var(--ard-checkbox-list-item-gap, 0.5rem);
31
+ padding: var(--ard-checkbox-list-item-padding, 0 0.5rem 0 0);
24
32
  position: relative;
25
33
  cursor: pointer;
26
34
  height: max-content;
@@ -30,7 +38,7 @@
30
38
  pointer-events: none;
31
39
  user-select: none;
32
40
  flex-grow: 1;
33
- padding: var(--ard-checkbox-list-label-padding, 0 0.5rem);
41
+ padding: 0;
34
42
  min-height: var(--ard-checkbox-list-item-height, 3rem);
35
43
  display: flex;
36
44
  align-items: center;
@@ -63,13 +71,15 @@
63
71
  pointer-events: none;
64
72
 
65
73
  > label {
66
- opacity: 50%;
74
+ opacity: var(--ard-checkbox-list-disabled-opacity, 50%);
67
75
  }
68
76
  }
69
77
  }
70
78
  &.ard-compact {
79
+ gap: var(--ard-checkbox-list-gap-compact, 0);
80
+
71
81
  .ard-checkbox-list__item {
72
- gap: 0.325rem;
82
+ gap: var(--ard-checkbox-list-item-gap-compact, 0.325rem);
73
83
  height: var(--ard-checkbox-list-item-height-compact, 2rem);
74
84
  }
75
85
  }
@@ -96,20 +106,4 @@
96
106
  flex-direction: row-reverse;
97
107
  }
98
108
  }
99
- // &.ard-align-left-clumped,
100
- // &.ard-align-right-clumped {
101
- // .ard-checkbox-list__item {
102
- // label {
103
- // justify-content: flex-start;
104
- // }
105
- // }
106
- // }
107
- // &.ard-align-left-split,
108
- // &.ard-align-right-split {
109
- // .ard-checkbox-list__item {
110
- // label {
111
- // justify-content: space-between;
112
- // }
113
- // }
114
- // }
115
109
  }
package/themes/default/core.scss CHANGED
@@ -39,7 +39,11 @@
39
39
  --ard-clear-button-size: 0.9rem;
40
40
  --ard-dropdown-button-size: 0.4rem;
41
41
  --ard-form-field-height: 2.3125rem;
42
- --ard-form-field-compact-height: 1.6875rem;
42
+ --ard-form-field-height-compact: 1.6875rem;
43
+ --ard-form-field-font-size: 1rem;
44
+ --ard-form-field-font-size-compact: 1rem;
45
+ --ard-form-field-padding: 0 0.375rem;
46
+ --ard-form-field-padding-compact: 0 0.375rem;
43
47
 
44
48
  --ard-primary-50: 234, 235, 243;
45
49
  --ard-primary-100: 159, 167, 228;
package/themes/default/inputs/input.scss CHANGED
@@ -5,7 +5,6 @@
5
5
  .ard-input {
6
6
  @include inputMixin.genericInput();
7
7
  padding: 0 0.375rem;
8
- min-width: 10rem;
9
8
  max-width: 100%;
10
9
 
11
10
  @include CB.clearButton();
package/themes/default/inputs/number-input.scss CHANGED
@@ -2,35 +2,46 @@
2
2
  @use '../mixins' as defaultMixins;
3
3
  @use '../../variables' as ARD;
4
4
 
5
- ard-number-input {
6
- width: 9.5rem;
5
+ :root {
6
+ --ard-number-input-width: 9.5rem;
7
+ --ard-number-input-height: var(--ard-form-field-height);
8
+ --ard-number-input-height-compact: var(--ard-form-field-height-compact);
9
+ --ard-number-input-font-size: var(--ard-form-field-font-size);
10
+ --ard-number-input-font-size-compact: var(--ard-form-field-font-size-compact);
11
+ --ard-number-input-padding: var(--ard-form-field-padding);
12
+ --ard-number-input-padding-compact: var(--ard-form-field-padding-compact);
13
+ --ard-number-input-rounded-border-radius: 8px;
14
+ }
7
15
 
8
- &:not(:has(.ard-quick-change-button)) {
9
- width: 6rem;
10
- }
16
+ ard-number-input {
17
+ width: var(--ard-number-input-width, 9.5rem);
11
18
  }
12
19
 
13
20
  .ard-number-input {
14
21
  @include inputMixin.genericInput();
15
22
  @include defaultMixins.formAppearances();
16
- min-height: 2.1875rem;
17
- height: 2.1875rem;
23
+ min-height: var(--ard-form-field-height, var(--ard-number-input-height, 2.3125rem));
24
+ height: var(--ard-form-field-height, var(--ard-number-input-height, 2.3125rem));
18
25
  gap: 0;
19
26
  width: 100%;
27
+ font-size: var(--ard-number-input-font-size, var(--ard-form-field-font-size, 1rem));
20
28
 
21
29
  .ard-input-container {
22
30
  height: 100%;
23
31
  max-width: 100%;
32
+ padding: var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem));
24
33
 
25
34
  & > input {
26
35
  width: 100%;
27
- padding: 0 0.5rem;
28
36
  }
29
37
  }
38
+ .ard-placeholder {
39
+ padding: var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem));
40
+ }
30
41
 
31
42
  .ard-quick-change-button {
32
43
  position: relative;
33
- min-width: 2.1875rem;
44
+ min-width: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
34
45
 
35
46
  .ard-button {
36
47
  height: 100%;
@@ -65,11 +76,11 @@ ard-number-input {
65
76
 
66
77
  //! variants
67
78
  &.ard-variant-rounded {
68
- border-radius: 8px;
79
+ border-radius: var(--ard-number-input-rounded-border-radius, 8px);
69
80
 
70
81
  &.ard-quick-change-false {
71
82
  .ard-input-container {
72
- border-radius: 8px;
83
+ border-radius: var(--ard-number-input-rounded-border-radius, 8px);
73
84
  }
74
85
  }
75
86
  }
@@ -81,8 +92,8 @@ ard-number-input {
81
92
 
82
93
  .ard-button {
83
94
  border-radius: 9999px !important;
84
- height: 30px;
85
- width: 30px;
95
+ width: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
96
+ height: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
86
97
  margin: 0 2px;
87
98
  }
88
99
 
@@ -113,12 +124,18 @@ ard-number-input {
113
124
 
114
125
  //! compact
115
126
  &.ard-compact {
116
- min-height: 1.6875rem;
117
- height: 1.6875rem;
118
- font-size: 0.925rem;
127
+ min-height: var(--ard-form-field-height-compact, var(--ard-number-input-height-compact, 1.6875rem));
128
+ height: var(--ard-form-field-height-compact, var(--ard-number-input-height-compact, 1.6875rem));
129
+ font-size: var(--ard-number-input-font-size-compact, var(--ard-form-field-font-size-compact, 0.9375rem));
119
130
 
131
+ .ard-input-container {
132
+ padding: var(--ard-number-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
133
+ }
134
+ .ard-placeholder {
135
+ padding: var(--ard-number-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
136
+ }
120
137
  .ard-quick-change-button {
121
- min-width: 1.6875rem;
138
+ min-width: var(--ard-form-field-height-compact, var(--ard-number-input-height-compact, 1.6875rem));
122
139
  }
123
140
  }
124
141
  }