src/timepicker-select/timepicker-select.component.ts
| providers |
{
provide: NG_VALUE_ACCESSOR, useExisting: TimePickerSelect, multi: true
}
|
| selector | ibm-timepicker-select |
| template | |
Properties |
|
Methods |
Inputs |
Outputs |
HostBindings |
HostListeners |
id
|
Default value : |
label
|
Type : |
skeleton
|
Set to true for a loading select.
Default value : |
theme
|
Type :
Default value : |
disabled
|
Set to true to disable component.
Default value : |
|
Inherited from
Select
|
|
|
Defined in Select:129
|
|
display
|
Type :
Default value : |
|
Inherited from
Select
|
|
|
Defined in Select:109
|
|
helperText
|
Optional helper text that appears under the label.
Type : |
|
Inherited from
Select
|
|
|
Defined in Select:117
|
|
id
|
Sets the unique ID. Defaults to
Default value : |
|
Inherited from
Select
|
|
|
Defined in Select:125
|
|
invalid
|
Set to
Default value : |
|
Inherited from
Select
|
|
|
Defined in Select:137
|
|
invalidText
|
Sets the invalid text.
Type : |
|
Inherited from
Select
|
|
|
Defined in Select:121
|
|
label
|
Label for the select. Appears above the input.
Type : |
|
Inherited from
Select
|
|
|
Defined in Select:113
|
|
skeleton
|
Set to true for a loading select.
Default value : |
|
Inherited from
Select
|
|
|
Defined in Select:133
|
|
theme
|
Type :
Default value : |
|
Inherited from
Select
|
|
|
Defined in Select:142
|
|
selected
|
emits the selected options $event Type: EventEmitter
|
|
Inherited from
Select
|
|
|
Defined in Select:147
|
|
valueChange
|
$event Type: EventEmitter
|
|
Inherited from
Select
|
|
|
Defined in Select:149
|
|
| class.bx--select |
class.bx--select:
|
Default value : true
|
| class.bx--select--light |
class.bx--select--light:
|
| class.bx--skeleton |
class.bx--skeleton:
|
Default value : this.skeleton
|
| class.bx--time-picker__select |
class.bx--time-picker__select:
|
Default value : true
|
| blur |
blur()
|
|
Inherited from
Select
|
|
Defined in Select:203
|
|
Listens for the host blurring, and notifies the model |
| Public isTemplate | ||||
isTemplate(value)
|
||||
|
Inherited from
Select
|
||||
|
Defined in Select:207
|
||||
|
Parameters :
Returns :
boolean
|
| onChange | ||||
onChange(event)
|
||||
|
Inherited from
Select
|
||||
|
Defined in Select:193
|
||||
|
Handles the change event from the
Parameters :
Returns :
void
|
| registerOnChange | ||||||
registerOnChange(fn: any)
|
||||||
|
Inherited from
Select
|
||||||
|
Defined in Select:171
|
||||||
|
Registers a listener that notifies the model when the control updates
Parameters :
Returns :
void
|
| registerOnTouched | ||||||
registerOnTouched(fn: any)
|
||||||
|
Inherited from
Select
|
||||||
|
Defined in Select:178
|
||||||
|
Registers a listener that notifies the model when the control is blurred
Parameters :
Returns :
void
|
| setDisabledState | ||||||
setDisabledState(isDisabled: boolean)
|
||||||
|
Inherited from
Select
|
||||||
|
Defined in Select:185
|
||||||
|
Sets the disabled state through the model
Parameters :
Returns :
void
|
| writeValue | ||||||
writeValue(obj: any)
|
||||||
|
Inherited from
Select
|
||||||
|
Defined in Select:164
|
||||||
|
Receives a value from the model.
Parameters :
Returns :
void
|
| Protected onChangeHandler |
onChangeHandler:
|
Default value : (_: any) => { }
|
|
Inherited from
Select
|
|
Defined in Select:214
|
|
placeholder declarations. Replaced by the functions provided to |
| Protected onTouchedHandler |
onTouchedHandler:
|
Default value : () => { }
|
|
Inherited from
Select
|
|
Defined in Select:215
|
| select |
select:
|
Type : ElementRef
|
Decorators :
@ViewChild('select')
|
|
Inherited from
Select
|
|
Defined in Select:151
|
| Static selectCount |
selectCount:
|
Type : number
|
Default value : 0
|
|
Inherited from
Select
|
|
Defined in Select:104
|
|
Tracks the total number of selects instantiated. Used to generate unique IDs |
import {
Component,
Input,
Output,
EventEmitter,
HostBinding,
TemplateRef
} from "@angular/core";
import { Select } from "../select/select.component";
import { NG_VALUE_ACCESSOR } from "@angular/forms";
/**
* [See demo](../../?path=/story/time-picker-select--simple)
*
* <example-url>../../iframe.html?id=time-picker-select--simple</example-url>
*/
@Component({
selector: "ibm-timepicker-select",
template: `
<label *ngIf="!skeleton && label" [attr.for]="id" class="bx--label bx--visually-hidden">{{label}}</label>
<div class="bx--select-input__wrapper">
<select
#select
[attr.id]="id"
[disabled]="disabled"
(change)="onChange($event)"
class="bx--select-input">
<ng-content></ng-content>
</select>
<svg ibmIconChevronDown16 *ngIf="!skeleton" class="bx--select__arrow"></svg>
</div>
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: TimePickerSelect,
multi: true
}
]
})
export class TimePickerSelect extends Select {
@HostBinding("class.bx--select") timeSelect = true;
@HostBinding("class.bx--time-picker__select") timePickerSelect = true;
@Input() id = `timepicker-select-${TimePickerSelect.selectCount++}`;
/**
* Set to true for a loading select.
*/
@Input() skeleton = false;
/**
* `light` or `dark` select theme
*/
@Input() theme: "light" | "dark" = "dark";
@Input() label: string;
@HostBinding("class.bx--skeleton") timePickerSelectSkeleton = this.skeleton;
@HostBinding("class.bx--select--light") get timePickerSelectLight() {
return this.theme === "light";
}
}