Skip to content

Commit 6e239f5

Browse files
cal-smithcal-smith
authored
Merge branch 'master' into dropdown
2 parents 4a88cb3 + a93e3ad commit 6e239f5

19 files changed

+846
-186
lines changed

‎package-lock.json‎

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

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,5 +145,9 @@
145145
"webpack-node-externals": "1.6.0",
146146
"whatwg-fetch": "2.0.3",
147147
"zone.js": "0.8.26"
148+
},
149+
"dependencies": {
150+
"flatpickr": "4.5.2",
151+
"ng2-flatpickr": "7.0.1"
148152
}
149153
}

‎src/common/tab.service.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,13 @@ export let tabbableSelector = "a[href], area[href], input:not([disabled]):not([t
33
"textarea:not([disabled]):not([tabindex=\'-1\']), " +
44
"iframe, object, embed, *[tabindex]:not([tabindex=\'-1\']), *[contenteditable=true]";
55

6-
export function getFocusElementList(element) {
7-
let elements = element.querySelectorAll(tabbableSelector);
6+
export let tabbableSelectorIgnoreTabIndex = "a[href], area[href], input:not([disabled]), " +
7+
"button:not([disabled]),select:not([disabled]), " +
8+
"textarea:not([disabled]), " +
9+
"iframe, object, embed, *[tabindex], *[contenteditable=true]";
10+
11+
export function getFocusElementList(element, selector = tabbableSelector) {
12+
let elements = element.querySelectorAll(selector);
813
return elements ? Array.prototype.filter.call(elements, el => isVisible(el)) : elements;
914
}
1015

‎src/datepicker-input/datepicker-input.component.ts‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { Component, Input } from "@angular/core";
2+
3+
@Component({
4+
selector: "ibm-date-picker-input",
5+
template: `
6+
<div class="bx--form-item">
7+
<div class="bx--date-picker"
8+
[ngClass]= "'bx--date-picker--' + type">
9+
<div class="bx--date-picker-container">
10+
<label [for]="id" class="bx--label">
11+
{{label}}
12+
</label>
13+
<svg *ngIf="type == 'single'"
14+
data-date-picker-icon
15+
class="bx--date-picker__icon"
16+
width="14" height="16"
17+
viewBox="0 0 14 16"
18+
data-open>
19+
<path d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5
20+
1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0
21+
.5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"
22+
fill-rule="nonzero"/>
23+
</svg>
24+
<input
25+
autocomplete="off"
26+
type="text"
27+
class="bx--date-picker__input"
28+
[pattern]="pattern"
29+
[placeholder]="placeholder"
30+
data-date-picker-input
31+
[attr.data-input] = "type == 'single' || type == 'range' ? '' : null"
32+
[id]= "id"/>
33+
</div>
34+
35+
<svg *ngIf= "type == 'range' && hasIcon"
36+
data-date-picker-icon
37+
class="bx--date-picker__icon"
38+
width="14" height="16"
39+
viewBox="0 0 14 16"
40+
data-open>
41+
<path d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5
42+
1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"
43+
fill-rule="nonzero"/>
44+
</svg>
45+
</div>
46+
</div>
47+
`
48+
})
49+
export class DatePickerInput {
50+
private static datePickerCount = 0;
51+
52+
/**
53+
* Select a calendar type for the `model`.
54+
* Internal purposes only.
55+
*
56+
* @type {("simple" | "single" | "range")}
57+
* @memberof Datepicker
58+
*/
59+
@Input() type: "simple" | "single" | "range" = "simple";
60+
61+
@Input() id = `datepicker-${DatePickerInput.datePickerCount++}`;
62+
63+
@Input() hasIcon = false;
64+
65+
@Input() label: string;
66+
67+
@Input() placeholder = "mm/dd/yyyy";
68+
69+
@Input() pattern = "\d{1,2}/\d{1,2}/\d{4}";
70+
}

‎src/datepicker-input/datepicker-input.module.ts‎

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

‎src/datepicker-input/datepicker-input.stories.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { DatePickerInputModule } from "./datepicker-input.module";
2+
import { storiesOf, moduleMetadata } from "@storybook/angular";
3+
import { withKnobs } from "@storybook/addon-knobs/angular";
4+
import { ExperimentalComponenent } from "../../.storybook/experimental.component";
5+
import { ExperimentalModule } from "..";
6+
7+
storiesOf("DatePickerInput", module)
8+
.addDecorator(
9+
moduleMetadata({
10+
declarations: [ExperimentalComponenent],
11+
imports: [
12+
DatePickerInputModule,
13+
ExperimentalModule
14+
]
15+
})
16+
)
17+
.addDecorator(withKnobs)
18+
.add("Simple", () => ({
19+
template: `
20+
<app-experimental-component></app-experimental-component>
21+
<ibm-date-picker-input label="Date Picker Label"></ibm-date-picker-input>
22+
`
23+
}));

0 commit comments

Comments
 (0)