@ardium-ui/ui 5.0.0-alpha.67 → 5.0.0-alpha.68

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 (10) hide show
  1. package/fesm2022/ardium-ui-ui.mjs +66 -48
  2. package/fesm2022/ardium-ui-ui.mjs.map +1 -1
  3. package/lib/inputs/input-utils.d.ts +8 -3
  4. package/lib/inputs/number-input/number-input.component.d.ts +3 -1
  5. package/lib/inputs/number-input/number-input.defaults.d.ts +2 -0
  6. package/lib/inputs/number-input/number-input.types.d.ts +6 -0
  7. package/package.json +1 -1
  8. package/prebuilt-themes/default/inputs/number-input.css +33 -16
  9. package/prebuilt-themes/default/inputs/number-input.css.map +1 -1
  10. package/themes/default/inputs/number-input.scss +36 -18
package/lib/inputs/input-utils.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { ElementRef, Signal } from '@angular/core';
2
2
  import { Nullable } from '../types/utility.types';
3
+ import { ArdNumberInputMinMaxBehavior } from './number-input/number-input.types';
3
4
  export interface InputModelHost {
4
5
  readonly maxLength: Signal<Nullable<number>>;
5
6
  readonly textInputEl: Signal<ElementRef<HTMLInputElement> | undefined>;
@@ -32,6 +33,7 @@ export declare class AutocompleteInputModel extends InputModel {
32
33
  export interface NumberInputModelHost {
33
34
  readonly max: Signal<number>;
34
35
  readonly min: Signal<number>;
36
+ readonly minMaxBehavior: Signal<ArdNumberInputMinMaxBehavior>;
35
37
  readonly maxDecimalPlaces: Signal<number>;
36
38
  readonly fixedDecimalPlaces: Signal<boolean>;
37
39
  readonly decimalSeparator: Signal<string>;
@@ -46,13 +48,16 @@ export declare class NumberInputModel {
46
48
  readonly stringValue: Signal<string>;
47
49
  readonly numberValue: Signal<number | null>;
48
50
  setValue(v: string | number | null): void;
49
- updateFixedDecimalPlaces(): void;
51
+ updateOnBlur(adjustMinMax?: boolean): void;
52
+ private _fixDecimalPlaces;
50
53
  private _updateInputEl;
51
- writeValue(v: any): boolean;
52
- protected _writeValue(v: string | number | null): boolean;
54
+ writeValue(v: any, applyConstraints: boolean): boolean;
55
+ protected _writeValue(v: string | null, applyConstraints: boolean): boolean;
53
56
  rewriteValueAfterHostUpdate(): void;
54
57
  get caretPos(): number;
55
58
  set caretPos(pos: number);
59
+ private _applyStandardConstraints;
60
+ private _standardizeSeparator;
56
61
  private _removeDecimalPlaces;
57
62
  private _applyNumberConstraint;
58
63
  private _applyMinMaxConstraints;
package/lib/inputs/number-input/number-input.component.d.ts CHANGED
@@ -9,6 +9,7 @@ import { Nullable } from '../../types/utility.types';
9
9
  import { NumberInputModel, NumberInputModelHost } from '../input-utils';
10
10
  import { ArdNumberInputDefaults } from './number-input.defaults';
11
11
  import { ArdNumberInputPlaceholderTemplateDirective, ArdNumberInputPrefixTemplateDirective, ArdNumberInputSuffixTemplateDirective } from './number-input.directives';
12
+ import { ArdNumberInputMinMaxBehavior } from './number-input.types';
12
13
  import * as i0 from "@angular/core";
13
14
  export declare class ArdiumNumberInputComponent extends _FormFieldComponentBase implements ControlValueAccessor, NumberInputModelHost, AfterViewInit {
14
15
  protected readonly _DEFAULTS: ArdNumberInputDefaults;
@@ -44,6 +45,7 @@ export declare class ArdiumNumberInputComponent extends _FormFieldComponentBase
44
45
  }>;
45
46
  readonly min: import("@angular/core").InputSignalWithTransform<number, NumberLike>;
46
47
  readonly max: import("@angular/core").InputSignalWithTransform<number, NumberLike>;
48
+ readonly minMaxBehavior: import("@angular/core").InputSignal<ArdNumberInputMinMaxBehavior>;
47
49
  readonly maxDecimalPlaces: import("@angular/core").InputSignalWithTransform<number, NumberLike>;
48
50
  readonly fixedDecimalPlaces: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
49
51
  readonly decimalSeparator: import("@angular/core").InputSignalWithTransform<string, string>;
@@ -67,5 +69,5 @@ export declare class ArdiumNumberInputComponent extends _FormFieldComponentBase
67
69
  onCopy(event: ClipboardEvent): void;
68
70
  protected _setInputAttributes(): void;
69
71
  static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumNumberInputComponent, never>;
70
- static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumNumberInputComponent, "ard-number-input", never, { "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "alignText": { "alias": "alignText"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "inputAttrs": { "alias": "inputAttrs"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "maxDecimalPlaces": { "alias": "maxDecimalPlaces"; "required": false; "isSignal": true; }; "fixedDecimalPlaces": { "alias": "fixedDecimalPlaces"; "required": false; "isSignal": true; }; "decimalSeparator": { "alias": "decimalSeparator"; "required": false; "isSignal": true; }; "allowFloat": { "alias": "allowFloat"; "required": false; "isSignal": true; }; "noButtons": { "alias": "noButtons"; "required": false; "isSignal": true; }; "keepFocusOnQuickChangeButton": { "alias": "keepFocusOnQuickChangeButton"; "required": false; "isSignal": true; }; "stepSize": { "alias": "stepSize"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "inputEvent": "input"; "changeEvent": "change"; "clearEvent": "clear"; "quickChangeEvent": "quickChange"; }, ["placeholderTemplate", "prefixTemplate", "suffixTemplate"], never, false, never>;
72
+ static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumNumberInputComponent, "ard-number-input", never, { "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "alignText": { "alias": "alignText"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "inputAttrs": { "alias": "inputAttrs"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "minMaxBehavior": { "alias": "minMaxBehavior"; "required": false; "isSignal": true; }; "maxDecimalPlaces": { "alias": "maxDecimalPlaces"; "required": false; "isSignal": true; }; "fixedDecimalPlaces": { "alias": "fixedDecimalPlaces"; "required": false; "isSignal": true; }; "decimalSeparator": { "alias": "decimalSeparator"; "required": false; "isSignal": true; }; "allowFloat": { "alias": "allowFloat"; "required": false; "isSignal": true; }; "noButtons": { "alias": "noButtons"; "required": false; "isSignal": true; }; "keepFocusOnQuickChangeButton": { "alias": "keepFocusOnQuickChangeButton"; "required": false; "isSignal": true; }; "stepSize": { "alias": "stepSize"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "inputEvent": "input"; "changeEvent": "change"; "clearEvent": "clear"; "quickChangeEvent": "quickChange"; }, ["placeholderTemplate", "prefixTemplate", "suffixTemplate"], never, false, never>;
71
73
  }
package/lib/inputs/number-input/number-input.defaults.d.ts CHANGED
@@ -2,6 +2,7 @@ import { InjectionToken, Provider } from '@angular/core';
2
2
  import { _FormFieldComponentDefaults } from '../../_internal/form-field-component';
3
3
  import { OneAxisAlignment } from './../../types/alignment.types';
4
4
  import { FormElementAppearance, FormElementVariant } from './../../types/theming.types';
5
+ import { ArdNumberInputMinMaxBehavior } from './number-input.types';
5
6
  export interface ArdNumberInputDefaults extends _FormFieldComponentDefaults {
6
7
  appearance: FormElementAppearance;
7
8
  variant: FormElementVariant;
@@ -11,6 +12,7 @@ export interface ArdNumberInputDefaults extends _FormFieldComponentDefaults {
11
12
  inputAttrs: Record<string, any>;
12
13
  min: number;
13
14
  max: number;
15
+ minMaxBehavior: ArdNumberInputMinMaxBehavior;
14
16
  maxDecimalPlaces: number;
15
17
  fixedDecimalPlaces: boolean;
16
18
  decimalSeparator: string;
package/lib/inputs/number-input/number-input.types.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ export declare const ArdNumberInputMinMaxBehavior: {
2
+ readonly AdjustOnInput: "adjust-on-input";
3
+ readonly AdjustOnBlur: "adjust-on-blur";
4
+ readonly Noop: "noop";
5
+ };
6
+ export type ArdNumberInputMinMaxBehavior = typeof ArdNumberInputMinMaxBehavior[keyof typeof ArdNumberInputMinMaxBehavior];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ardium-ui/ui",
3
- "version": "5.0.0-alpha.67",
3
+ "version": "5.0.0-alpha.68",
4
4
  "peerDependencies": {
5
5
  "@angular/common": ">=18.0.0",
6
6
  "@angular/core": ">=18.0.0",
package/prebuilt-themes/default/inputs/number-input.css CHANGED
@@ -7,6 +7,7 @@
7
7
  --ard-number-input-line-height-compact: 1;
8
8
  --ard-number-input-font-weight: 400;
9
9
  --ard-number-input-placeholder-opacity: 60%;
10
+ --ard-number-input-disabled-opacity: 50%;
10
11
  --ard-number-input-rounded-border-radius: 8px;
11
12
  }
12
13
 
@@ -108,16 +109,32 @@ ard-number-input {
108
109
  --ard-appearance-background: transparent;
109
110
  --ard-appearance-border: none;
110
111
  }
111
- .ard-number-input .ard-input-container {
112
+ .ard-number-input .ard-number-input-wrapper {
113
+ flex-grow: 1;
114
+ text-size-adjust: 100%;
115
+ display: flex;
116
+ align-items: center;
112
117
  height: 100%;
113
- max-width: 100%;
114
- padding: var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem));
115
118
  }
116
- .ard-number-input .ard-input-container > input {
117
- width: 100%;
119
+ .ard-number-input .ard-input-container {
120
+ position: relative;
121
+ padding-left: var(--ard-number-input-padding-left, var(--ard-form-field-padding-left, 0.375rem));
122
+ padding-right: var(--ard-number-input-padding-right, var(--ard-form-field-padding-right, 0.375rem));
123
+ padding-top: var(--ard-number-input-padding-top, var(--ard-form-field-padding-top, 0));
124
+ padding-bottom: var(--ard-number-input-padding-bottom, var(--ard-form-field-padding-bottom, 0));
125
+ }
126
+ .ard-number-input .ard-number-input-prefix-container,
127
+ .ard-number-input .ard-number-input-suffix-container {
128
+ height: max-content;
129
+ max-height: 100%;
130
+ display: flex;
131
+ align-items: center;
132
+ }
133
+ .ard-number-input .ard-number-input-prefix-container {
134
+ padding-left: var(--ard-number-input-padding-left, 0.375rem);
118
135
  }
119
- .ard-number-input .ard-placeholder {
120
- padding: var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem));
136
+ .ard-number-input .ard-number-input-suffix-container {
137
+ padding-right: var(--ard-number-input-padding-right, 0.375rem);
121
138
  }
122
139
  .ard-number-input .ard-quick-change-button {
123
140
  position: relative;
@@ -152,7 +169,7 @@ ard-number-input {
152
169
  .ard-number-input.ard-variant-rounded {
153
170
  border-radius: var(--ard-number-input-rounded-border-radius, 8px);
154
171
  }
155
- .ard-number-input.ard-variant-rounded.ard-quick-change-false .ard-input-container {
172
+ .ard-number-input.ard-variant-rounded.ard-quick-change-false .ard-number-input-wrapper {
156
173
  border-radius: var(--ard-number-input-rounded-border-radius, 8px);
157
174
  }
158
175
  .ard-number-input.ard-variant-sharp {
@@ -167,10 +184,10 @@ ard-number-input {
167
184
  height: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
168
185
  margin: 0 2px;
169
186
  }
170
- .ard-number-input.ard-variant-pill.ard-quick-change-false .ard-input-container {
187
+ .ard-number-input.ard-variant-pill.ard-quick-change-false .ard-number-input-wrapper {
171
188
  border-radius: 9999px;
172
189
  }
173
- .ard-number-input.ard-variant-rounded:not(.ard-appearance-filled) .ard-input-container, .ard-number-input.ard-variant-sharp:not(.ard-appearance-filled) .ard-input-container {
190
+ .ard-number-input.ard-variant-rounded:not(.ard-appearance-filled) .ard-number-input-wrapper, .ard-number-input.ard-variant-sharp:not(.ard-appearance-filled) .ard-number-input-wrapper {
174
191
  box-sizing: border-box;
175
192
  background: var(--ard-appearance-background);
176
193
  border: var(--ard-appearance-border);
@@ -183,11 +200,11 @@ ard-number-input {
183
200
  background: var(--ard-appearance-background);
184
201
  border: var(--ard-appearance-border);
185
202
  }
186
- .ard-number-input.ard-compact .ard-input-container {
187
- padding: var(--ard-number-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
188
- }
189
- .ard-number-input.ard-compact .ard-placeholder {
190
- padding: var(--ard-number-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
203
+ .ard-number-input.ard-compact .ard-number-input-wrapper {
204
+ padding-left: var(--ard-number-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem));
205
+ padding-right: var(--ard-number-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem));
206
+ padding-top: var(--ard-number-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0));
207
+ padding-bottom: var(--ard-number-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0));
191
208
  }
192
209
  .ard-number-input.ard-compact .ard-quick-change-button {
193
210
  min-width: var(--ard-number-input-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
@@ -195,7 +212,7 @@ ard-number-input {
195
212
 
196
213
  .ard-disabled > .ard-number-input {
197
214
  pointer-events: none;
198
- opacity: 50%;
215
+ opacity: var(--ard-number-input-disabled-opacity, 50%);
199
216
  background: var(--ard-bg-filled);
200
217
  }
201
218
  .ard-disabled > .ard-number-input .ard-button .ard-focus-overlay {
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;ACIA;EAGE;EAGA;EACA;EACA;EAWA;EAGA;;;AAGF;EACE;;;AAGF;EDTE,QCWE;EDVF;EACA;EACA;EACA;EACA;EACA,KCOE;EDNF;EACA;EACA,WCKE;EDJF,aCME;EDLF,aCOE;EDNF,cCUE;EDTF,eCOE;EDNF,aCKE;EDJF,gBCME;EDLF,OCWE;EAKF;EACA;;ADfA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA,cCNF;EDOE,eCTF;EDUE,aCXF;EDYE,gBCVF;EDWE;;AAEF;EACE;EACA,SCPF;EDQE,OCTF;EDUE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE,QC7CA;ED8CA,WC3CA;ED4CA,aC1CA;ED2CA,cClCA;EDmCA,eCrCA;EDsCA,aCvCA;EDwCA,gBCtCA;;ACTF;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;;ADVF;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;;AAKA;EACE;;AAEF;EACE;;AAEF;EACE;;;AAMJ;EACE;EACA;EAMA,YE/KG;;AF2KH;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;ACIA;EAGE;EAGA;EACA;EACA;EAWA;EACA;EAEA;;;AAGF;EACE;;;AAGF;EDTE,QCWE;EDVF;EACA;EACA;EACA;EACA;EACA,KCOE;EDNF;EACA;EACA,WCKE;EDJF,aCME;EDLF,aCOE;EDNF,cCUE;EDTF,eCOE;EDNF,aCKE;EDJF,gBCME;EDLF,OCWE;EAKF;EACA;;ADfA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA,cCNF;EDOE,eCTF;EDUE,aCXF;EDYE,gBCVF;EDWE;;AAEF;EACE;EACA,SCPF;EDQE,OCTF;EDUE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE,QC7CA;ED8CA,WC3CA;ED4CA,aC1CA;ED2CA,cClCA;EDmCA,eCrCA;EDsCA,aCvCA;EDwCA,gBCtCA;;ACTF;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;;ADVF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAIF;AAAA;EAEE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAIF;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;;AAKA;EACE;EACA;EACA;EACA;;AAEF;EACE;;;AAMJ;EACE;EACA;EAMA,YEjMG;;AF6LH;EACE","file":"number-input.css"}
package/themes/default/inputs/number-input.scss CHANGED
@@ -24,7 +24,7 @@
24
24
  // --ard-number-input-color: ;
25
25
  // --ard-number-input-placeholder-color: ;
26
26
  --ard-number-input-placeholder-opacity: 60%;
27
-
27
+ --ard-number-input-disabled-opacity: 50%;
28
28
  // --ard-number-input-width: ;
29
29
  --ard-number-input-rounded-border-radius: 8px;
30
30
  }
@@ -59,19 +59,37 @@ ard-number-input {
59
59
  gap: 0;
60
60
  width: 100%;
61
61
 
62
- .ard-input-container {
62
+ .ard-number-input-wrapper {
63
+ flex-grow: 1;
64
+ text-size-adjust: 100%;
65
+ display: flex;
66
+ align-items: center;
63
67
  height: 100%;
64
- max-width: 100%;
65
- padding: var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem)); // TODO
68
+ }
69
+ .ard-input-container {
70
+ position: relative;
71
+ padding-left: var(--ard-number-input-padding-left, var(--ard-form-field-padding-left, 0.375rem));
72
+ padding-right: var(--ard-number-input-padding-right, var(--ard-form-field-padding-right, 0.375rem));
73
+ padding-top: var(--ard-number-input-padding-top, var(--ard-form-field-padding-top, 0));
74
+ padding-bottom: var(--ard-number-input-padding-bottom, var(--ard-form-field-padding-bottom, 0));
75
+ }
66
76
 
67
- & > input {
68
- width: 100%;
69
- }
77
+ //! prefix & suffix
78
+ .ard-number-input-prefix-container,
79
+ .ard-number-input-suffix-container {
80
+ height: max-content;
81
+ max-height: 100%;
82
+ display: flex;
83
+ align-items: center;
70
84
  }
71
- .ard-placeholder {
72
- padding: var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem));
85
+ .ard-number-input-prefix-container {
86
+ padding-left: var(--ard-number-input-padding-left, 0.375rem);
87
+ }
88
+ .ard-number-input-suffix-container {
89
+ padding-right: var(--ard-number-input-padding-right, 0.375rem);
73
90
  }
74
91
 
92
+ //! buttons
75
93
  .ard-quick-change-button {
76
94
  position: relative;
77
95
  min-width: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
@@ -112,7 +130,7 @@ ard-number-input {
112
130
  border-radius: var(--ard-number-input-rounded-border-radius, 8px);
113
131
 
114
132
  &.ard-quick-change-false {
115
- .ard-input-container {
133
+ .ard-number-input-wrapper {
116
134
  border-radius: var(--ard-number-input-rounded-border-radius, 8px);
117
135
  }
118
136
  }
@@ -131,7 +149,7 @@ ard-number-input {
131
149
  }
132
150
 
133
151
  &.ard-quick-change-false {
134
- .ard-input-container {
152
+ .ard-number-input-wrapper {
135
153
  border-radius: 9999px;
136
154
  }
137
155
  }
@@ -140,7 +158,7 @@ ard-number-input {
140
158
  //! variant-specific appearances
141
159
  &.ard-variant-rounded,
142
160
  &.ard-variant-sharp {
143
- &:not(.ard-appearance-filled) .ard-input-container {
161
+ &:not(.ard-appearance-filled) .ard-number-input-wrapper {
144
162
  box-sizing: border-box;
145
163
  background: var(--ard-appearance-background);
146
164
  border: var(--ard-appearance-border);
@@ -157,11 +175,11 @@ ard-number-input {
157
175
 
158
176
  //! compact
159
177
  &.ard-compact {
160
- .ard-input-container {
161
- padding: var(--ard-number-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
162
- }
163
- .ard-placeholder {
164
- padding: var(--ard-number-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
178
+ .ard-number-input-wrapper {
179
+ padding-left: var(--ard-number-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem));
180
+ padding-right: var(--ard-number-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem));
181
+ padding-top: var(--ard-number-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0));
182
+ padding-bottom: var(--ard-number-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0));
165
183
  }
166
184
  .ard-quick-change-button {
167
185
  min-width: var(--ard-number-input-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
@@ -172,7 +190,7 @@ ard-number-input {
172
190
  .ard-disabled {
173
191
  > .ard-number-input {
174
192
  pointer-events: none;
175
- opacity: 50%;
193
+ opacity: var(--ard-number-input-disabled-opacity, 50%);
176
194
 
177
195
  .ard-button .ard-focus-overlay {
178
196
  opacity: 0;