@ardium-ui/ui 5.0.0-alpha.15 → 5.0.0-alpha.18

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 (21) hide show
  1. package/fesm2022/ardium-ui-ui.mjs +28 -7
  2. package/fesm2022/ardium-ui-ui.mjs.map +1 -1
  3. package/lib/checkbox-list/checkbox-list.component.d.ts +5 -3
  4. package/lib/checkbox-list/checkbox-list.directives.d.ts +7 -0
  5. package/lib/checkbox-list/checkbox-list.module.d.ts +1 -1
  6. package/package.json +1 -1
  7. package/prebuilt-themes/default/checkbox-list.css +43 -20
  8. package/prebuilt-themes/default/checkbox-list.css.map +1 -1
  9. package/prebuilt-themes/default/core.css +5 -1
  10. package/prebuilt-themes/default/core.css.map +1 -1
  11. package/prebuilt-themes/default/form-field-frame.css +1 -1
  12. package/prebuilt-themes/default/form-field.css +1 -1
  13. package/prebuilt-themes/default/inputs/input.css +0 -1
  14. package/prebuilt-themes/default/inputs/input.css.map +1 -1
  15. package/prebuilt-themes/default/inputs/number-input.css +34 -16
  16. package/prebuilt-themes/default/inputs/number-input.css.map +1 -1
  17. package/themes/_variables.scss +1 -1
  18. package/themes/default/checkbox-list.scss +46 -23
  19. package/themes/default/core.scss +5 -1
  20. package/themes/default/inputs/input.scss +0 -1
  21. package/themes/default/inputs/number-input.scss +34 -17
package/lib/checkbox-list/checkbox-list.component.d.ts CHANGED
@@ -3,10 +3,10 @@ import { BooleanLike, NumberLike } from '@ardium-ui/devkit';
3
3
  import { SimpleItemStorageHost } from '../_internal/item-storages/simple-item-storage';
4
4
  import { _NgModelComponentBase } from '../_internal/ngmodel-component';
5
5
  import { ComponentColor } from '../types/colors.types';
6
- import { ArdOptionSimple, CompareWithFn } from '../types/item-storage.types';
6
+ import { ArdOptionSimple, CompareWithFn, OptionContext } from '../types/item-storage.types';
7
7
  import { Nullable } from '../types/utility.types';
8
8
  import { ArdCheckboxListDefaults } from './checkbox-list.defaults';
9
- import { ArdCheckboxListCheckboxTemplateDirective } from './checkbox-list.directives';
9
+ import { ArdCheckboxListCheckboxTemplateDirective, ArdCheckboxListLabelTemplateDirective } from './checkbox-list.directives';
10
10
  import { CheckboxListAlignType } from './checkbox-list.types';
11
11
  import * as i0 from "@angular/core";
12
12
  export declare class ArdiumCheckboxListComponent extends _NgModelComponentBase implements SimpleItemStorageHost, AfterViewInit {
@@ -47,6 +47,8 @@ export declare class ArdiumCheckboxListComponent extends _NgModelComponentBase i
47
47
  unselectItem(v: ArdOptionSimple): void;
48
48
  toggleItem(v: ArdOptionSimple): void;
49
49
  readonly checkboxTemplate: import("@angular/core").Signal<ArdCheckboxListCheckboxTemplateDirective | undefined>;
50
+ readonly labelTemplate: import("@angular/core").Signal<ArdCheckboxListLabelTemplateDirective | undefined>;
51
+ getLabelContext(item: ArdOptionSimple): OptionContext<ArdOptionSimple>;
50
52
  static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumCheckboxListComponent, never>;
51
- static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumCheckboxListComponent, "ard-checkbox-list", never, { "valueFrom": { "alias": "valueFrom"; "required": false; "isSignal": true; }; "labelFrom": { "alias": "labelFrom"; "required": false; "isSignal": true; }; "disabledFrom": { "alias": "disabledFrom"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "invertDisabled": { "alias": "invertDisabled"; "required": false; "isSignal": true; }; "maxSelectedItems": { "alias": "maxSelectedItems"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; "changeEvent": "change"; }, ["checkboxTemplate"], never, false, never>;
53
+ static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumCheckboxListComponent, "ard-checkbox-list", never, { "valueFrom": { "alias": "valueFrom"; "required": false; "isSignal": true; }; "labelFrom": { "alias": "labelFrom"; "required": false; "isSignal": true; }; "disabledFrom": { "alias": "disabledFrom"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "invertDisabled": { "alias": "invertDisabled"; "required": false; "isSignal": true; }; "maxSelectedItems": { "alias": "maxSelectedItems"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; "changeEvent": "change"; }, ["checkboxTemplate", "labelTemplate"], never, false, never>;
52
54
  }
package/lib/checkbox-list/checkbox-list.directives.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { TemplateRef } from '@angular/core';
2
2
  import { CheckboxTemplateContext } from '../checkbox/checkbox.types';
3
+ import { ArdOptionSimple, OptionContext } from '../types/item-storage.types';
3
4
  import * as i0 from "@angular/core";
4
5
  export declare class ArdCheckboxListCheckboxTemplateDirective {
5
6
  template: TemplateRef<CheckboxTemplateContext>;
@@ -7,3 +8,9 @@ export declare class ArdCheckboxListCheckboxTemplateDirective {
7
8
  static ɵfac: i0.ɵɵFactoryDeclaration<ArdCheckboxListCheckboxTemplateDirective, never>;
8
9
  static ɵdir: i0.ɵɵDirectiveDeclaration<ArdCheckboxListCheckboxTemplateDirective, "ard-checkbox-list > ng-template[ard-checkbox-tmp]", never, {}, {}, never, never, false, never>;
9
10
  }
11
+ export declare class ArdCheckboxListLabelTemplateDirective {
12
+ template: TemplateRef<OptionContext<ArdOptionSimple>>;
13
+ constructor(template: TemplateRef<OptionContext<ArdOptionSimple>>);
14
+ static ɵfac: i0.ɵɵFactoryDeclaration<ArdCheckboxListLabelTemplateDirective, never>;
15
+ static ɵdir: i0.ɵɵDirectiveDeclaration<ArdCheckboxListLabelTemplateDirective, "ard-checkbox-list > ng-template[ard-label-tmp]", never, {}, {}, never, never, false, never>;
16
+ }
package/lib/checkbox-list/checkbox-list.module.d.ts CHANGED
@@ -6,6 +6,6 @@ import * as i4 from "../checkbox/checkbox.module";
6
6
  import * as i5 from "../checkbox/checkbox.internal-directives";
7
7
  export declare class ArdiumCheckboxListModule {
8
8
  static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumCheckboxListModule, never>;
9
- static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumCheckboxListModule, [typeof i1.ArdiumCheckboxListComponent, typeof i2.ArdCheckboxListCheckboxTemplateDirective], [typeof i3.CommonModule, typeof i4.ArdiumCheckboxModule, typeof i5._CheckboxTemplateRepositoryDirective], [typeof i1.ArdiumCheckboxListComponent, typeof i2.ArdCheckboxListCheckboxTemplateDirective]>;
9
+ static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumCheckboxListModule, [typeof i1.ArdiumCheckboxListComponent, typeof i2.ArdCheckboxListCheckboxTemplateDirective, typeof i2.ArdCheckboxListLabelTemplateDirective], [typeof i3.CommonModule, typeof i4.ArdiumCheckboxModule, typeof i5._CheckboxTemplateRepositoryDirective], [typeof i1.ArdiumCheckboxListComponent, typeof i2.ArdCheckboxListCheckboxTemplateDirective, typeof i2.ArdCheckboxListLabelTemplateDirective]>;
10
10
  static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumCheckboxListModule>;
11
11
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ardium-ui/ui",
3
- "version": "5.0.0-alpha.15",
3
+ "version": "5.0.0-alpha.18",
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,21 +1,44 @@
1
+ :root {
2
+ --ard-checkbox-list-padding: 0.375rem 0;
3
+ --ard-checkbox-list-item-hover-opacity: 5%;
4
+ --ard-checkbox-list-item-active-opacity: 15%;
5
+ --ard-checkbox-list-item-height: 3rem;
6
+ --ard-checkbox-list-item-height-compact: 2rem;
7
+ --ard-checkbox-list-checkbox-min-width: 1.25rem;
8
+ --ard-checkbox-list-checkbox-padding: 0.625rem;
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%;
15
+ }
16
+
1
17
  .ard-checkbox-list {
2
18
  display: flex;
3
19
  flex-direction: column;
4
- padding-top: 0.375rem;
20
+ padding: var(--ard-checkbox-list-padding, 0.375rem 0);
21
+ gap: var(--ard-checkbox-list-gap, 0);
5
22
  }
6
23
  .ard-checkbox-list .ard-checkbox-list__item {
7
24
  display: flex;
8
25
  align-items: center;
9
- padding: 0;
26
+ justify-content: stretch;
27
+ gap: var(--ard-checkbox-list-item-gap, 0.5rem);
28
+ padding: var(--ard-checkbox-list-item-padding, 0 0.5rem 0 0);
10
29
  position: relative;
11
30
  cursor: pointer;
12
31
  height: max-content;
13
- min-height: 3rem;
32
+ min-height: var(--ard-checkbox-list-item-height, 3rem);
14
33
  }
15
34
  .ard-checkbox-list .ard-checkbox-list__item > label {
16
35
  pointer-events: none;
17
36
  user-select: none;
18
- padding: 0 0.5rem;
37
+ flex-grow: 1;
38
+ padding: 0;
39
+ min-height: var(--ard-checkbox-list-item-height, 3rem);
40
+ display: flex;
41
+ align-items: center;
19
42
  }
20
43
  .ard-checkbox-list .ard-checkbox-list__item > .ard-focus-overlay {
21
44
  position: absolute;
@@ -30,14 +53,14 @@
30
53
  background: var(--ard-overlay);
31
54
  }
32
55
  .ard-checkbox-list .ard-checkbox-list__item.ard-item-highlighted > .ard-focus-overlay {
33
- opacity: 5%;
56
+ opacity: var(--ard-checkbox-list-item-hover-opacity, 5%);
34
57
  }
35
58
  .ard-checkbox-list .ard-checkbox-list__item:active > .ard-focus-overlay {
36
- opacity: 15%;
59
+ opacity: var(--ard-checkbox-list-item-active-opacity, 15%);
37
60
  }
38
61
  .ard-checkbox-list .ard-checkbox-list__item ard-checkbox {
39
- padding: 0.625rem;
40
- min-width: 1.25rem;
62
+ padding: var(--ard-checkbox-list-checkbox-padding, 0.625rem);
63
+ min-width: var(--ard-checkbox-list-checkbox-min-width, 1.25rem);
41
64
  }
42
65
  .ard-checkbox-list .ard-checkbox-list__item ard-checkbox .ard-checkbox .ard-focus-overlay {
43
66
  display: none;
@@ -46,23 +69,23 @@
46
69
  pointer-events: none;
47
70
  }
48
71
  .ard-checkbox-list .ard-checkbox-list__item.ard-item-disabled > label {
49
- opacity: 50%;
72
+ opacity: var(--ard-checkbox-list-disabled-opacity, 50%);
50
73
  }
51
- .ard-checkbox-list.ard-compact .ard-checkbox-list__item {
52
- gap: 0.325rem;
53
- height: 2rem;
54
- }
55
- .ard-checkbox-list.ard-align-left-clumped .ard-checkbox-list__item, .ard-checkbox-list.ard-align-left-split .ard-checkbox-list__item {
56
- flex-direction: row;
74
+ .ard-checkbox-list.ard-compact {
75
+ gap: var(--ard-checkbox-list-gap-compact, 0);
57
76
  }
58
- .ard-checkbox-list.ard-align-right-clumped .ard-checkbox-list__item, .ard-checkbox-list.ard-align-right-split .ard-checkbox-list__item {
59
- flex-direction: row-reverse;
77
+ .ard-checkbox-list.ard-compact .ard-checkbox-list__item {
78
+ gap: var(--ard-checkbox-list-item-gap-compact, 0.325rem);
79
+ height: var(--ard-checkbox-list-item-height-compact, 2rem);
60
80
  }
61
- .ard-checkbox-list.ard-align-left-clumped .ard-checkbox-list__item, .ard-checkbox-list.ard-align-right-clumped .ard-checkbox-list__item {
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 {
62
82
  justify-content: flex-start;
63
83
  }
64
- .ard-checkbox-list.ard-align-left-split .ard-checkbox-list__item, .ard-checkbox-list.ard-align-right-split .ard-checkbox-list__item {
65
- justify-content: space-between;
84
+ .ard-checkbox-list.ard-align-left-split .ard-checkbox-list__item label, .ard-checkbox-list.ard-align-right-clumped .ard-checkbox-list__item label {
85
+ justify-content: flex-end;
86
+ }
87
+ .ard-checkbox-list.ard-align-right-split .ard-checkbox-list__item, .ard-checkbox-list.ard-align-right-clumped .ard-checkbox-list__item {
88
+ flex-direction: row-reverse;
66
89
  }
67
90
 
68
91
  /*# sourceMappingURL=checkbox-list.css.map */
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;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;ECTF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EDEI,YEtBI;;AFyBJ;EACE;;AAIF;EACE;;AAGJ;EACE;EACA;;AAGE;EACE;;AAIN;EACE;;AAEA;EACE;;AAKJ;EACE;EACA;;AAMF;EACE;;AAKF;EACE;;AAKF;EACE;;AAKF;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
@@ -1,24 +1,47 @@
1
1
  @use './mixins' as CM;
2
2
  @use '../variables' as ARD;
3
3
 
4
+ :root {
5
+ --ard-checkbox-list-padding: 0.375rem 0;
6
+ --ard-checkbox-list-item-hover-opacity: 5%;
7
+ --ard-checkbox-list-item-active-opacity: 15%;
8
+ --ard-checkbox-list-item-height: 3rem;
9
+ --ard-checkbox-list-item-height-compact: 2rem;
10
+ --ard-checkbox-list-checkbox-min-width: 1.25rem;
11
+ --ard-checkbox-list-checkbox-padding: 0.625rem;
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%;
18
+ }
19
+
4
20
  .ard-checkbox-list {
5
21
  display: flex;
6
22
  flex-direction: column;
7
- padding-top: 0.375rem;
23
+ padding: var(--ard-checkbox-list-padding, 0.375rem 0);
24
+ gap: var(--ard-checkbox-list-gap, 0);
8
25
 
9
26
  .ard-checkbox-list__item {
10
27
  display: flex;
11
28
  align-items: center;
12
- padding: 0;
29
+ justify-content: stretch;
30
+ gap: var(--ard-checkbox-list-item-gap, 0.5rem);
31
+ padding: var(--ard-checkbox-list-item-padding, 0 0.5rem 0 0);
13
32
  position: relative;
14
33
  cursor: pointer;
15
34
  height: max-content;
16
- min-height: 3rem;
35
+ min-height: var(--ard-checkbox-list-item-height, 3rem);
17
36
 
18
37
  > label {
19
38
  pointer-events: none;
20
39
  user-select: none;
21
- padding: 0 0.5rem;
40
+ flex-grow: 1;
41
+ padding: 0;
42
+ min-height: var(--ard-checkbox-list-item-height, 3rem);
43
+ display: flex;
44
+ align-items: center;
22
45
  }
23
46
  > .ard-focus-overlay {
24
47
  @include CM.focus-overlay();
@@ -26,17 +49,17 @@
26
49
  }
27
50
  &.ard-item-highlighted {
28
51
  > .ard-focus-overlay {
29
- opacity: 5%;
52
+ opacity: var(--ard-checkbox-list-item-hover-opacity, 5%);
30
53
  }
31
54
  }
32
55
  &:active {
33
56
  > .ard-focus-overlay {
34
- opacity: 15%;
57
+ opacity: var(--ard-checkbox-list-item-active-opacity, 15%);
35
58
  }
36
59
  }
37
60
  ard-checkbox {
38
- padding: 0.625rem;
39
- min-width: 1.25rem;
61
+ padding: var(--ard-checkbox-list-checkbox-padding, 0.625rem);
62
+ min-width: var(--ard-checkbox-list-checkbox-min-width, 1.25rem);
40
63
 
41
64
  .ard-checkbox {
42
65
  .ard-focus-overlay {
@@ -48,39 +71,39 @@
48
71
  pointer-events: none;
49
72
 
50
73
  > label {
51
- opacity: 50%;
74
+ opacity: var(--ard-checkbox-list-disabled-opacity, 50%);
52
75
  }
53
76
  }
54
77
  }
55
78
  &.ard-compact {
79
+ gap: var(--ard-checkbox-list-gap-compact, 0);
80
+
56
81
  .ard-checkbox-list__item {
57
- gap: 0.325rem;
58
- height: 2rem;
82
+ gap: var(--ard-checkbox-list-item-gap-compact, 0.325rem);
83
+ height: var(--ard-checkbox-list-item-height-compact, 2rem);
59
84
  }
60
85
  }
61
86
  //! ALIGN TYPES
62
87
  &.ard-align-left-clumped,
63
- &.ard-align-left-split {
64
- .ard-checkbox-list__item {
65
- flex-direction: row;
66
- }
67
- }
68
- &.ard-align-right-clumped,
69
88
  &.ard-align-right-split {
70
89
  .ard-checkbox-list__item {
71
- flex-direction: row-reverse;
90
+ label {
91
+ justify-content: flex-start;
92
+ }
72
93
  }
73
94
  }
74
- &.ard-align-left-clumped,
95
+ &.ard-align-left-split,
75
96
  &.ard-align-right-clumped {
76
97
  .ard-checkbox-list__item {
77
- justify-content: flex-start;
98
+ label {
99
+ justify-content: flex-end;
100
+ }
78
101
  }
79
102
  }
80
- &.ard-align-left-split,
81
- &.ard-align-right-split {
103
+ &.ard-align-right-split,
104
+ &.ard-align-right-clumped {
82
105
  .ard-checkbox-list__item {
83
- justify-content: space-between;
106
+ flex-direction: row-reverse;
84
107
  }
85
108
  }
86
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
  }