ColorComponent
Form input for a color value. Renders a hex text input alongside a native color picker swatch; both stay in sync. The value is a hex color string (e.g. #2A70AC).
Implements ControlValueAccessor so it can be used within Angular forms and Material form fields.
Example :
<mat-form-field>
<mat-label>Primary color</mat-label>
<yuv-color formControlName="primaryColor"></yuv-color>
</mat-form-field>Component Metadata
Section titled “Component Metadata”Selector: yuv-color
Standalone: Yes
Implements: ControlValueAccessor, OnInit, OnDestroy
Inputs
Section titled “Inputs”disabled
Section titled “disabled”Type: BooleanInput
placeholder
Section titled “placeholder”Type: string
required
Section titled “required”Type: BooleanInput
Properties
Section titled “Properties”colorFc
Section titled “colorFc”Type: unknown
Default Value: new FormControl<string>('#000000', \{ nonNullable: true \})
the color swatch (native <input type="color">, always a full 6-digit hex)
ngControl
Section titled “ngControl”Type: unknown
Default Value: injectNgControl(this)
propagateChange
Section titled “propagateChange”Type: unknown
Default Value: () => \{...\}
textFc
Section titled “textFc”Type: unknown
Default Value: new FormControl<string | null>(null)
the editable hex text input (source of truth for the value)
autofilled
Section titled “autofilled”Type: boolean
controlType
Section titled “controlType”Type: string
disableAutomaticLabeling
Section titled “disableAutomaticLabeling”Type: boolean
stateChanges
Section titled “stateChanges”Type: unknown
Default Value: new Subject<void>()
userAriaDescribedBy
Section titled “userAriaDescribedBy”Type: string
Methods
Section titled “Methods”registerOnChange
Section titled “registerOnChange”registerOnChange(fn: function): voidArguments
Section titled “Arguments”| Name | Type | Description |
|---|---|---|
| fn | function |
registerOnTouched
Section titled “registerOnTouched”registerOnTouched(): voidsetDisabledState
Section titled “setDisabledState”setDisabledState(isDisabled: boolean): voidArguments
Section titled “Arguments”| Name | Type | Description |
|---|---|---|
| isDisabled | boolean |
writeValue
Section titled “writeValue”writeValue(value: string): voidArguments
Section titled “Arguments”| Name | Type | Description |
|---|---|---|
| value | string |
onContainerClick
Section titled “onContainerClick”onContainerClick(event: MouseEvent): voidArguments
Section titled “Arguments”| Name | Type | Description |
|---|---|---|
| event | MouseEvent |
onFocusIn
Section titled “onFocusIn”onFocusIn(): voidonFocusout
Section titled “onFocusout”onFocusout(): voidonNgOnDestroy
Section titled “onNgOnDestroy”onNgOnDestroy(): voidsetDescribedByIds
Section titled “setDescribedByIds”setDescribedByIds(ids: string[]): voidArguments
Section titled “Arguments”| Name | Type | Description |
|---|---|---|
| ids | string[] |