feat(design-system): add reusable Input primitive
ControlValueAccessor-based, standalone, OnPush. Sizes sm/md/lg, states default/error/success. Colors/radius/spacing/transitions consumed via existing tenant CSS vars (--border-color, --primary-color, --error-color, --success-color, etc) with fallbacks - compatible with bootstrap JSON theming and Project Editor live preview.
This commit is contained in:
16
src/app/shared/ui/input/input.component.html
Normal file
16
src/app/shared/ui/input/input.component.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<input
|
||||
class="app-input"
|
||||
[class.app-input--sm]="size() === 'sm'"
|
||||
[class.app-input--md]="size() === 'md'"
|
||||
[class.app-input--lg]="size() === 'lg'"
|
||||
[class.app-input--error]="state() === 'error'"
|
||||
[class.app-input--success]="state() === 'success'"
|
||||
[type]="type()"
|
||||
[placeholder]="placeholder()"
|
||||
[disabled]="isDisabled || disabled()"
|
||||
[attr.aria-label]="ariaLabel()"
|
||||
[attr.aria-invalid]="state() === 'error' || null"
|
||||
[value]="value"
|
||||
(input)="handleInput($event)"
|
||||
(blur)="handleBlur()"
|
||||
/>
|
||||
Reference in New Issue
Block a user