Skip to content

Commit 6764819

Browse files
youda97youda97
authored
Merge branch 'master' into toggle-label
2 parents 1e9fa7a + a706af4 commit 6764819

File tree

8 files changed

+247
-49
lines changed

8 files changed

+247
-49
lines changed

‎package-lock.json‎

Lines changed: 49 additions & 49 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,6 @@ export * from "./table/table.module";
3333
export * from "./tabs/tabs.module";
3434
export * from "./tag/tag.module";
3535
export * from "./tiles/tiles.module";
36+
export * from "./timepicker/timepicker.module";
37+
export * from "./timepicker-select/timepicker-select.module";
3638
export * from "./ui-shell/ui-shell.module";

‎src/timepicker-select/timepicker-select.component.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Component, Input, ChangeDetectorRef, Output, EventEmitter, HostBinding } from "@angular/core";
2+
import { Select } from "../select/select.component";
3+
4+
@Component({
5+
selector: "ibm-timepicker-select",
6+
template: `
7+
<label *ngIf="!skeleton" [attr.for]="id" class="bx--label bx--visually-hidden">{{label}}</label>
8+
<select
9+
#select
10+
[attr.id]="id"
11+
[disabled]="disabled"
12+
(change)="onChange($event)"
13+
class="bx--select-input">
14+
<ng-content></ng-content>
15+
</select>
16+
<ibm-icon-chevron-down16 *ngIf="!skeleton" class="bx--select__arrow"></ibm-icon-chevron-down16>
17+
`
18+
})
19+
export class TimePickerSelect extends Select {
20+
@HostBinding("class.bx--select") timeSelect = true;
21+
@HostBinding("class.bx--time-picker__select") timePickerSelect = true;
22+
23+
@HostBinding("class.bx--skeleton") timePickerSelectSkeleton = this.skeleton;
24+
@HostBinding("class.bx--select--light") timePickerSelectLight = (true ? this.theme === "light" : false);
25+
26+
@Input() id = `timepicker-select-${TimePickerSelect.selectCount++}`;
27+
28+
@Output() valueChange: EventEmitter<string> = new EventEmitter();
29+
30+
onChange(event) {
31+
this.valueChange.emit(event.target.value);
32+
console.log(this.theme);
33+
}
34+
}

‎src/timepicker-select/timepicker-select.module.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { NgModule } from "@angular/core";
2+
import { CommonModule } from "@angular/common";
3+
import { TimePickerSelect } from "./timepicker-select.component";
4+
import { SelectModule } from "../select/select.module";
5+
import { ChevronDown16Module } from "@carbon/icons-angular/lib/chevron--down/16";
6+
7+
@NgModule({
8+
declarations: [
9+
TimePickerSelect
10+
],
11+
exports: [
12+
TimePickerSelect
13+
],
14+
imports: [
15+
SelectModule,
16+
CommonModule,
17+
ChevronDown16Module
18+
]
19+
})
20+
export class TimePickerSelectModule { }

‎src/timepicker-select/timepicker-select.stories.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { TimePickerSelectModule } from "./timepicker-select.module";
2+
import { storiesOf, moduleMetadata } from "@storybook/angular";
3+
import { withKnobs } from "@storybook/addon-knobs/angular";
4+
import { ExperimentalModule } from "..";
5+
6+
storiesOf("Time Picker Select", module)
7+
.addDecorator(
8+
moduleMetadata({
9+
imports: [
10+
TimePickerSelectModule,
11+
ExperimentalModule
12+
]
13+
})
14+
)
15+
.addDecorator(withKnobs)
16+
.add("Simple", () => ({
17+
template: `
18+
<div class="bx--form-item">
19+
<div class="bx--time-picker">
20+
<ibm-timepicker-select>
21+
<option selected value="AM">AM</option>
22+
<option value="PM">PM</option>
23+
</ibm-timepicker-select>
24+
<ibm-timepicker-select>
25+
<option selected value="Time Zone 1">Time Zone 1</option>
26+
<option value="Time Zone 2">Time Zone 2</option>
27+
</ibm-timepicker-select>
28+
</div>
29+
</div>
30+
`
31+
}));

‎src/timepicker/timepicker.component.ts‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import {
2+
Component,
3+
Input,
4+
Output,
5+
EventEmitter,
6+
HostBinding
7+
} from "@angular/core";
8+
9+
@Component({
10+
selector: "ibm-timepicker",
11+
template: `
12+
<div
13+
[ngClass]="{
14+
'bx--select--light': theme === 'light',
15+
'bx--skeleton': skeleton
16+
}"
17+
class="bx--time-picker__input">
18+
<label *ngIf="!skeleton" [attr.for]="id" class="bx--label">{{label}}</label>
19+
<input
20+
[value]="value"
21+
[placeholder]="placeholder"
22+
[pattern]="pattern"
23+
[attr.id]="id"
24+
[disabled]="disabled"
25+
maxlength="5"
26+
(change)="onChange($event)"
27+
type="text"
28+
class="bx--time-picker__input-field bx--text-input">
29+
</div>
30+
<ng-content></ng-content>
31+
`
32+
})
33+
export class TimePicker {
34+
/**
35+
* Tracks the total number of selects instantiated. Used to generate unique IDs
36+
*/
37+
static timePickerCount = 0;
38+
39+
@HostBinding("class.bx--time-picker") timePicker = true;
40+
41+
@Input() label;
42+
@Input() placeholder = "hh:mm";
43+
@Input() pattern = "(1[012]|[0-9]):[0-5][0-9]";
44+
@Input() id = `timepicker-${TimePicker.timePickerCount++}`;
45+
@Input() disabled = false;
46+
@Input() value: string;
47+
48+
@Output() valueChange: EventEmitter<string> = new EventEmitter();
49+
50+
onChange(event) {
51+
this.valueChange.emit(event.target.value);
52+
}
53+
}

‎src/timepicker/timepicker.module.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { NgModule } from "@angular/core";
2+
import { CommonModule } from "@angular/common";
3+
import { TimePicker } from "./timepicker.component";
4+
import { TimePickerSelectModule } from "../timepicker-select/timepicker-select.module";
5+
6+
@NgModule({
7+
declarations: [
8+
TimePicker
9+
],
10+
exports: [
11+
TimePicker
12+
],
13+
imports: [
14+
TimePickerSelectModule,
15+
CommonModule
16+
]
17+
})
18+
export class TimePickerModule { }

‎src/timepicker/timepicker.stories.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { action } from "@storybook/addon-actions";
2+
import { TimePickerSelectModule } from "../timepicker-select/timepicker-select.module";
3+
import { TimePickerModule } from "./timepicker.module";
4+
import { storiesOf, moduleMetadata } from "@storybook/angular";
5+
import { withKnobs, boolean, text } from "@storybook/addon-knobs/angular";
6+
import { ExperimentalModule } from "..";
7+
8+
storiesOf("Time Picker", module)
9+
.addDecorator(
10+
moduleMetadata({
11+
imports: [
12+
TimePickerModule,
13+
ExperimentalModule,
14+
TimePickerSelectModule
15+
]
16+
})
17+
)
18+
.addDecorator(withKnobs)
19+
.add("Simple", () => ({
20+
template: `
21+
<ibm-timepicker (valueChange)="timePickerChange($event)" [value]="value" [disabled]="disableTime" label="Select a time">
22+
<ibm-timepicker-select (valueChange)="timePickerSelectChange($event)" [disabled]="disabledSelect" display="inline">
23+
<option selected value="AM">AM</option>
24+
<option value="PM">PM</option>
25+
</ibm-timepicker-select>
26+
<ibm-timepicker-select (valueChange)="timePickerSelectChange($event)" [disabled]="disabledSelect" display="inline">
27+
<option selected value="Time Zone 1">Time Zone 1</option>
28+
<option value="Time Zone 2">Time Zone 2</option>
29+
</ibm-timepicker-select>
30+
</ibm-timepicker>
31+
32+
`,
33+
props: {
34+
timePickerChange : action("Time picker change fired"),
35+
timePickerSelectChange: action("Time picker select change fired"),
36+
value: text("Time in 12hr format", "12:12"),
37+
disableTime: boolean("disabled time", false),
38+
disabledSelect: boolean("disabled selects", false)
39+
}
40+
}));

0 commit comments

Comments
 (0)