NumberRangeComponent
Creates form input for ranges of numeric values.
Implements ControlValueAccessor so it can be used within Angular forms.
Example :
<yuv-number-range [scale]="2"></yuv-number-range>Component Metadata
Section titled “Component Metadata”Selector: yuv-number-range
Standalone: Yes
Implements: ControlValueAccessor, OnInit, OnDestroy
Inputs
Section titled “Inputs”classifications
Section titled “classifications”Type: string[]
Default Value: []
classification property adds some semantics to the value of this component. If you provide a value of filesize numbers typed into the control will be handled like file sizes (calculates differnt units)
grouping
Section titled “grouping”Type: boolean
Default Value: false
Set to true to group number by pattern
maxValue
Section titled “maxValue”Type: number
set maximum input value
minValue
Section titled “minValue”Type: number
set minimum input value
pattern
Section titled “pattern”Type: string
The pattern to group number value by
precision
Section titled “precision”Type: number
Overall amount of digits allowed (including decimal places)
readonly
Section titled “readonly”Type: boolean
Default Value: false
Will prevent the input from being changed (default: false)
Type: number
Number of decimal places
situation
Section titled “situation”Type: string | null
Default Value: Situation.EDIT
disabled
Section titled “disabled”Type: BooleanInput
placeholder
Section titled “placeholder”Type: string
required
Section titled “required”Type: BooleanInput
Properties
Section titled “Properties”availableSearchOptions
Section titled “availableSearchOptions”Type: []
Default Value: [ { label: OperatorLabel.EQUAL, value: Operator.EQUAL }, { label: OperatorLabel.GREATER_OR_EQUAL, value: Operator.GREATER_OR_EQUAL }, { label: OperatorLabel.LESS_OR_EQUAL, value: Operator.LESS_OR_EQUAL }, { label: OperatorLabel.INTERVAL_INCLUDE_BOTH, value: Operator.INTERVAL_INCLUDE_BOTH } ]
ngControl
Section titled “ngControl”Type: unknown
Default Value: injectNgControl(this)
propagateChange
Section titled “propagateChange”Type: unknown
Default Value: () => {...}
rangeForm
Section titled “rangeForm”Type: unknown
Default Value: new FormGroup({ numberValue: new FormControl<number | undefined>(undefined, { nonNullable: true, validators: [Validators.required] }), operator: new FormControl<Operator>(this.availableSearchOptions[1].value, { nonNullable: true }), numberValueFrom: new FormControl<number | undefined>(undefined, { nonNullable: true }) })
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: any): voidArguments
Section titled “Arguments”| Name | Type | Description |
|---|---|---|
| fn | any |
registerOnTouched
Section titled “registerOnTouched”registerOnTouched(fn: any): voidArguments
Section titled “Arguments”| Name | Type | Description |
|---|---|---|
| fn | any |
validate
Section titled “validate”validate(): anywriteValue
Section titled “writeValue”writeValue(value: RangeValue): voidArguments
Section titled “Arguments”| Name | Type | Description |
|---|---|---|
| value | RangeValue |
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[] |