src/timepicker-select/timepicker-select.component.ts
Get started with importing the module:
import { TimePickerSelectModule } from 'carbon-components-angular';
| providers |
{
provide: NG_VALUE_ACCESSOR, useExisting: TimePickerSelect, multi: true
}
|
| selector | cds-timepicker-select, ibm-timepicker-select |
| template | |
Properties |
|
Methods |
Inputs |
Outputs |
HostBindings |
HostListeners |
Accessors |
| ariaLabel | |
Type : string
|
|
|
Inherited from
Select
|
|
|
Defined in
Select:52
|
|
| id | |
Type : string
|
|
Default value : `timepicker-select-${TimePickerSelect.selectCount++}`
|
|
|
Inherited from
Select
|
|
|
Defined in
Select:50
|
|
| label | |
Type : string
|
|
|
Inherited from
Select
|
|
|
Defined in
Select:65
|
|
| skeleton | |
Type : boolean
|
|
Default value : false
|
|
|
Inherited from
Select
|
|
|
Defined in
Select:57
|
|
|
Set to true for a loading select. |
|
| theme | |
Type : "light" | "dark"
|
|
Default value : "dark"
|
|
|
Inherited from
Select
|
|
|
Defined in
Select:63
|
|
| disabled | |
Type : boolean
|
|
Default value : false
|
|
|
Inherited from
Select
|
|
|
Defined in
Select:176
|
|
|
Set to true to disable component. |
|
| display | |
Type : "inline" | "default"
|
|
Default value : "default"
|
|
|
Inherited from
Select
|
|
|
Defined in
Select:144
|
|
|
|
|
| helperText | |
Type : string | TemplateRef<any>
|
|
|
Inherited from
Select
|
|
|
Defined in
Select:152
|
|
|
Optional helper text that appears under the label. |
|
| invalid | |
Type : boolean
|
|
Default value : false
|
|
|
Inherited from
Select
|
|
|
Defined in
Select:184
|
|
|
Set to |
|
| invalidText | |
Type : string | TemplateRef<any>
|
|
|
Inherited from
Select
|
|
|
Defined in
Select:156
|
|
|
Sets the invalid text. |
|
| size | |
Type : "sm" | "md" | "lg"
|
|
Default value : "md"
|
|
|
Inherited from
Select
|
|
|
Defined in
Select:172
|
|
|
Number input field render size |
|
| value | |
Type : any
|
|
|
Inherited from
Select
|
|
|
Defined in
Select:197
|
|
| warn | |
Type : boolean
|
|
Default value : false
|
|
|
Inherited from
Select
|
|
|
Defined in
Select:160
|
|
|
Set to |
|
| warnText | |
Type : string | TemplateRef<any>
|
|
|
Inherited from
Select
|
|
|
Defined in
Select:164
|
|
|
Sets the warning text |
|
| valueChange | |
Type : EventEmitter
|
|
|
Inherited from
Select
|
|
|
Defined in
Select:193
|
|
| class.cds--select |
Type : boolean
|
Default value : true
|
| class.cds--select--light |
Type : boolean
|
| class.cds--skeleton |
Type : boolean
|
Default value : this.skeleton
|
| class.cds--time-picker__select |
Type : boolean
|
Default value : true
|
| focusout |
focusout()
|
|
Inherited from
Select
|
|
Defined in
Select:263
|
|
Listens for the host blurring, and notifies the model |
| focusOut |
focusOut()
|
Decorators :
@HostListener('focusout')
|
|
Inherited from
Select
|
|
Defined in
Select:263
|
|
Listens for the host blurring, and notifies the model
Returns :
void
|
| Public isTemplate | ||||
isTemplate(value)
|
||||
|
Inherited from
Select
|
||||
|
Defined in
Select:267
|
||||
|
Parameters :
Returns :
boolean
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Inherited from
Select
|
|
Defined in
Select:210
|
|
Returns :
void
|
| onChange | ||||
onChange(event)
|
||||
|
Inherited from
Select
|
||||
|
Defined in
Select:253
|
||||
|
Handles the change event from the
Parameters :
Returns :
void
|
| registerOnChange | ||||||
registerOnChange(fn: any)
|
||||||
|
Inherited from
Select
|
||||||
|
Defined in
Select:231
|
||||||
|
Registers a listener that notifies the model when the control updates
Parameters :
Returns :
void
|
| registerOnTouched | ||||||
registerOnTouched(fn: any)
|
||||||
|
Inherited from
Select
|
||||||
|
Defined in
Select:238
|
||||||
|
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:245
|
||||||
|
Sets the disabled state through the model
Parameters :
Returns :
void
|
| writeValue | ||||||
writeValue(obj: any)
|
||||||
|
Inherited from
Select
|
||||||
|
Defined in
Select:224
|
||||||
|
Receives a value from the model.
Parameters :
Returns :
void
|
| timePickerSelect |
Default value : true
|
Decorators :
@HostBinding('class.cds--time-picker__select')
|
| timePickerSelectSkeleton |
Default value : this.skeleton
|
Decorators :
@HostBinding('class.cds--skeleton')
|
| timeSelect |
Default value : true
|
Decorators :
@HostBinding('class.cds--select')
|
| Protected _value |
|
Inherited from
Select
|
|
Defined in
Select:208
|
| Protected onChangeHandler |
Default value : () => {...}
|
|
Inherited from
Select
|
|
Defined in
Select:274
|
|
placeholder declarations. Replaced by the functions provided to |
| Protected onTouchedHandler |
Default value : () => {...}
|
|
Inherited from
Select
|
|
Defined in
Select:275
|
| select |
Type : ElementRef
|
Decorators :
@ViewChild('select')
|
|
Inherited from
Select
|
|
Defined in
Select:195
|
| Static selectCount |
Type : number
|
Default value : 0
|
|
Inherited from
Select
|
|
Defined in
Select:139
|
|
Tracks the total number of selects instantiated. Used to generate unique IDs |
| timePickerSelectLight |
gettimePickerSelectLight()
|
import {
Component,
Input,
Output,
EventEmitter,
HostBinding,
TemplateRef
} from "@angular/core";
import { Select } from "carbon-components-angular/select";
import { NG_VALUE_ACCESSOR } from "@angular/forms";
/**
* Get started with importing the module:
*
* ```typescript
* import { TimePickerSelectModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-time-picker-select--simple)
*/
@Component({
selector: "cds-timepicker-select, ibm-timepicker-select",
template: `
<label *ngIf="!skeleton && label" [attr.for]="id" class="cds--label cds--visually-hidden">{{label}}</label>
<div class="cds--select-input__wrapper">
<select
#select
[attr.id]="id"
[attr.aria-label]="ariaLabel"
[disabled]="disabled"
(change)="onChange($event)"
class="cds--select-input">
<ng-content></ng-content>
</select>
<svg cdsIcon="chevron--down" size="16" *ngIf="!skeleton" class="cds--select__arrow"></svg>
</div>
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: TimePickerSelect,
multi: true
}
]
})
export class TimePickerSelect extends Select {
@HostBinding("class.cds--select") timeSelect = true;
@HostBinding("class.cds--time-picker__select") timePickerSelect = true;
@Input() id = `timepicker-select-${TimePickerSelect.selectCount++}`;
@Input() ariaLabel: string;
/**
* Set to true for a loading select.
*/
@Input() skeleton = false;
/**
* @deprecated since v5 - Use `cdsLayer` directive instead
* `light` or `dark` select theme
*/
@Input() theme: "light" | "dark" = "dark";
@Input() label: string;
@HostBinding("class.cds--skeleton") timePickerSelectSkeleton = this.skeleton;
@HostBinding("class.cds--select--light") get timePickerSelectLight() {
return this.theme === "light";
}
}