carbon-components-angular
Version:
Next generation components
247 lines (242 loc) • 9.18 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, TemplateRef, Component, Input, Output, HostBinding, HostListener, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { TimePickerSelectModule } from 'carbon-components-angular/timepicker-select';
/**
* Get started with importing the module:
*
* ```typescript
* import { TimePickerModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-time-picker--simple)
*/
class TimePicker {
constructor() {
this.invalid = false;
this.hideLabel = false;
this.placeholder = "hh:mm";
this.pattern = "(1[012]|[0-9]):[0-5][0-9]";
this.id = `timepicker-${TimePicker.timePickerCount++}`;
this.disabled = false;
this.maxLength = 5;
/**
* Set to true for a loading select.
*/
this.skeleton = false;
/**
* @deprecated since v5 - Use `cdsLayer` directive instead
*/
this.theme = "dark";
/**
* `sm`, `md` (default), or `lg` select size
*/
this.size = "md";
this.valueChange = new EventEmitter();
/**
* Ensures component is properly styled when used standalone.
*/
this.timepickerClass = true;
this.onChangeHandler = (_) => { };
this.onTouchedHandler = () => { };
}
writeValue(value) {
this.value = value;
}
registerOnChange(callback) {
this.onChangeHandler = callback;
}
registerOnTouched(callback) {
this.onTouchedHandler = callback;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
onChange(event) {
this.onChangeHandler(event.target.value);
this.valueChange.emit(event.target.value);
}
focusOut() {
this.onTouchedHandler();
}
isTemplate(value) {
return value instanceof TemplateRef;
}
}
/**
* Tracks the total number of selects instantiated. Used to generate unique IDs
*/
TimePicker.timePickerCount = 0;
TimePicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
TimePicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TimePicker, selector: "cds-timepicker, ibm-timepicker", inputs: { invalid: "invalid", invalidText: "invalidText", label: "label", hideLabel: "hideLabel", placeholder: "placeholder", pattern: "pattern", id: "id", disabled: "disabled", value: "value", maxLength: "maxLength", skeleton: "skeleton", theme: "theme", size: "size" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "focusout": "focusOut()" }, properties: { "class.cds--form-item": "this.timepickerClass" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: TimePicker,
multi: true
}
], ngImport: i0, template: `
<label
*ngIf="!skeleton && label"
[for]="id"
class="cds--label"
[ngClass]="{
'cds--label--disabled': disabled,
'cds--visually-hidden': hideLabel
}">
<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
</label>
<div
class="cds--time-picker"
[ngClass]="{
'cds--time-picker--invalid' : invalid,
'cds--time-picker--sm': size === 'sm',
'cds--time-picker--md': size === 'md',
'cds--time-picker--lg': size === 'lg',
'cds--time-picker--light': theme === 'light'
}">
<div class="cds--time-picker__input">
<input
[ngClass]="{
'cds--text-input--light': theme === 'light',
'cds--skeleton': skeleton
}"
[value]="value"
[placeholder]="placeholder"
[attr.data-invalid]="invalid ? true : undefined"
[pattern]="pattern"
[attr.id]="id"
[disabled]="disabled"
[attr.maxlength]="maxLength"
(change)="onChange($event)"
type="text"
class="cds--time-picker__input-field cds--text-input">
</div>
<ng-content></ng-content>
</div>
<div *ngIf="invalid" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TimePicker, decorators: [{
type: Component,
args: [{
selector: "cds-timepicker, ibm-timepicker",
template: `
<label
*ngIf="!skeleton && label"
[for]="id"
class="cds--label"
[ngClass]="{
'cds--label--disabled': disabled,
'cds--visually-hidden': hideLabel
}">
<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
</label>
<div
class="cds--time-picker"
[ngClass]="{
'cds--time-picker--invalid' : invalid,
'cds--time-picker--sm': size === 'sm',
'cds--time-picker--md': size === 'md',
'cds--time-picker--lg': size === 'lg',
'cds--time-picker--light': theme === 'light'
}">
<div class="cds--time-picker__input">
<input
[ngClass]="{
'cds--text-input--light': theme === 'light',
'cds--skeleton': skeleton
}"
[value]="value"
[placeholder]="placeholder"
[attr.data-invalid]="invalid ? true : undefined"
[pattern]="pattern"
[attr.id]="id"
[disabled]="disabled"
[attr.maxlength]="maxLength"
(change)="onChange($event)"
type="text"
class="cds--time-picker__input-field cds--text-input">
</div>
<ng-content></ng-content>
</div>
<div *ngIf="invalid" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
</div>
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: TimePicker,
multi: true
}
]
}]
}], propDecorators: { invalid: [{
type: Input
}], invalidText: [{
type: Input
}], label: [{
type: Input
}], hideLabel: [{
type: Input
}], placeholder: [{
type: Input
}], pattern: [{
type: Input
}], id: [{
type: Input
}], disabled: [{
type: Input
}], value: [{
type: Input
}], maxLength: [{
type: Input
}], skeleton: [{
type: Input
}], theme: [{
type: Input
}], size: [{
type: Input
}], valueChange: [{
type: Output
}], timepickerClass: [{
type: HostBinding,
args: ["class.cds--form-item"]
}], focusOut: [{
type: HostListener,
args: ["focusout"]
}] } });
class TimePickerModule {
}
TimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
TimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: TimePickerModule, declarations: [TimePicker], imports: [TimePickerSelectModule,
CommonModule], exports: [TimePicker] });
TimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TimePickerModule, imports: [TimePickerSelectModule,
CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TimePickerModule, decorators: [{
type: NgModule,
args: [{
declarations: [
TimePicker
],
exports: [
TimePicker
],
imports: [
TimePickerSelectModule,
CommonModule
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TimePicker, TimePickerModule };
//# sourceMappingURL=carbon-components-angular-timepicker.mjs.map