Skip to content

Commit 4fa17f1

Browse files
WurperWurper
authored
Merge pull request #10 from Neovici/update2.x-part2
Update to 2.x - part 2
2 parents 38ec0f2 + d9d2816 commit 4fa17f1

File tree

7 files changed

+164
-148
lines changed

7 files changed

+164
-148
lines changed

‎.travis.yml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ cache:
1616
directories:
1717
- node_modules
1818
- bower_components
19-
- bower_components-1.x
2019
- ".eslintcache"
2120
- "$HOME/.cache/bower"
2221
before_script:

‎bower.json‎

Lines changed: 5 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,34 +3,16 @@
33
"description": "Mimics <input type="cosmoz-datetime-input"> with brad browser support",
44
"main": "cosmoz-datetime-input.html",
55
"dependencies": {
6-
"polymer": "Polymer/polymer#1.9 - 2",
7-
"paper-input": "PolymerElements/paper-input#1 - 2"
6+
"polymer": "Polymer/polymer#^2.6.1",
7+
"paper-input": "PolymerElements/paper-input#^2.0.0"
88
},
99
"devDependencies": {
10-
"iron-component-page": "PolymerElements/iron-component-page#1 - 3",
11-
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#1 - 2",
12-
"iron-test-helpers": "PolymerElements/iron-test-helpers#1 - 2",
10+
"iron-component-page": "PolymerElements/iron-component-page#^3.0.0",
11+
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
12+
"iron-test-helpers": "PolymerElements/iron-test-helpers#^2.0.0",
1313
"web-component-tester": "^6.0.0",
1414
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
1515
},
16-
"variants": {
17-
"1.x": {
18-
"dependencies": {
19-
"polymer": "Polymer/polymer#^1.9",
20-
"paper-input": "PolymerElements/paper-input#^2.0.0"
21-
},
22-
"devDependencies": {
23-
"iron-component-page": "PolymerElements/iron-component-page#^2.0.0",
24-
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.2.5",
25-
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
26-
"web-component-tester": "^4.0.0",
27-
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
28-
},
29-
"resolutions": {
30-
"webcomponentsjs": "^0.7"
31-
}
32-
}
33-
},
3416
"resolutions": {
3517
"webcomponentsjs": "^1.0.0"
3618
}

‎cosmoz-datetime-input.html‎

Lines changed: 118 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
<link rel="import" href="../polymer/polymer.html">
1+
<link rel="import" href="../shadycss/apply-shim.html">
2+
<link rel="import" href="../polymer/polymer-element.html">
23
<link rel="import" href="../paper-input/paper-input-container.html">
34

45
<dom-module id="cosmoz-datetime-input">
@@ -27,115 +28,124 @@
2728

2829
<div class="container">
2930
<paper-input-container always-float-label>
30-
<label hidden$="[[!dateLabel]]" slot="label" aria-hidden="true" for="dateInput">[[dateLabel]]</label>
31+
<label hidden$="[[ !dateLabel ]]" slot="label" aria-hidden="true" for="dateInput">[[ dateLabel ]]</label>
3132
<input id="dateInput" type="date" slot="input"
32-
value="{{date::input}}"
33-
min$="[[_minDate]]"
34-
max$="[[_maxDate]]">
33+
value="{{ date::input }}"
34+
min$="[[ _minDate ]]"
35+
max$="[[ _maxDate ]]">
3536
</paper-input-container>
3637
<paper-input-container always-float-label>
37-
<label hidden$="[[!timeLabel]]" slot="label" aria-hidden="true" for="timeInput">[[timeLabel]]</label>
38-
<input id="timeInput" is="iron-input" type="time" slot="input"
39-
value="{{time::input}}"
40-
step="[[step]]"
41-
min$="[[_minTime]]"
42-
max$="[[_maxTime]]">
38+
<label hidden$="[[ !timeLabel ]]" slot="label" aria-hidden="true" for="timeInput">[[ timeLabel ]]</label>
39+
<input id="timeInput" type="time" slot="input"
40+
value="{{ time::input }}"
41+
step="[[ step ]]"
42+
min$="[[ _minTime ]]"
43+
max$="[[ _maxTime ]]">
4344
</paper-input-container>
4445
</div>
4546
</template>
4647
<script>
4748
/**
48-
* `cosmoz-datetime-input`
49-
* Mimics &lt;input type=&#34;cosmoz-datetime-input&#34;&gt
50-
*
51-
* @customElement
52-
* @polymer
53-
* @demo demo/index.html
54-
*/
55-
Polymer({
56-
is: 'cosmoz-datetime-input',
57-
58-
properties: {
59-
/**
60-
* The date part of the value
61-
*/
62-
date: {
63-
type: String,
64-
notify: true
65-
},
66-
/**
67-
* The date part of the value
68-
*/
69-
time: {
70-
type: String,
71-
notify: true
72-
},
73-
/**
74-
* The step of the time input
75-
*/
76-
step: {
77-
type: String,
78-
value: '1'
79-
},
80-
/**
81-
* The date or datetime input value
82-
*/
83-
value: {
84-
type: String,
85-
notify: true,
86-
observer: '_valueChanged'
87-
},
88-
/**
89-
* The label of the time input
90-
*/
91-
timeLabel: {
92-
type: String,
93-
},
94-
/**
95-
* The label of the date input
96-
*/
97-
dateLabel: {
98-
type: String,
99-
},
100-
/**
101-
* The max date/datetime of the inputs
102-
*/
103-
max: {
104-
type: String,
105-
},
106-
/**
107-
* The min date/datetime of the inputs
108-
*/
109-
min: {
110-
type: String,
111-
},
112-
_minDate: {
113-
type: String,
114-
},
115-
_maxDate: {
116-
type: String,
117-
},
118-
_minTime: {
119-
type: String
120-
},
121-
_maxTime: {
122-
type: String,
123-
},
124-
/**
125-
* The possible separators between date and time input values
126-
*/
127-
_separators: {
128-
type: Array,
129-
value() {
130-
return ['T', ' '];
49+
* `cosmoz-datetime-input`
50+
* Mimics &lt;input type=&#34;cosmoz-datetime-input&#34;&gt
51+
*
52+
* @customElement
53+
* @polymer
54+
* @demo demo/index.html
55+
*/
56+
57+
class CosmozDatetimeInput extends Polymer.Element {
58+
static get is() {
59+
return 'cosmoz-datetime-input';
60+
}
61+
static get properties() {
62+
return {
63+
/**
64+
* The date part of the value
65+
*/
66+
date: {
67+
type: String,
68+
notify: true
69+
},
70+
/**
71+
* The date part of the value
72+
*/
73+
time: {
74+
type: String,
75+
notify: true
76+
},
77+
/**
78+
* The step of the time input
79+
*/
80+
step: {
81+
type: String,
82+
value: '1'
83+
},
84+
/**
85+
* The date or datetime input value
86+
*/
87+
value: {
88+
type: String,
89+
notify: true,
90+
observer: '_valueChanged'
91+
},
92+
/**
93+
* The label of the time input
94+
*/
95+
timeLabel: {
96+
type: String,
97+
},
98+
/**
99+
* The label of the date input
100+
*/
101+
dateLabel: {
102+
type: String,
103+
},
104+
/**
105+
* The max date/datetime of the inputs
106+
*/
107+
max: {
108+
type: String,
109+
},
110+
/**
111+
* The min date/datetime of the inputs
112+
*/
113+
min: {
114+
type: String,
115+
},
116+
_minDate: {
117+
type: String,
118+
},
119+
_maxDate: {
120+
type: String,
121+
},
122+
_minTime: {
123+
type: String
124+
},
125+
_maxTime: {
126+
type: String,
127+
},
128+
/**
129+
* The possible separators between date and time input values
130+
*/
131+
_separators: {
132+
type: Array,
133+
value() {
134+
return ['T', ' '];
135+
}
131136
}
132-
}
133-
},
137+
};
138+
}
139+
static get observers() {
140+
return [
141+
'_setValue(date, time)',
142+
'_setMinMax(min, max)'
143+
];
144+
}
145+
constructor() {
146+
super();
147+
}
134148

135-
observers: [
136-
'_setValue(date, time)',
137-
'_setMinMax(min, max)'
138-
],
139149
/**
140150
* Sets the value property via a date and time string.
141151
* @param {String} date - The date string.
@@ -158,7 +168,8 @@
158168
return;
159169
}
160170
this.value = `${date}T${time}`;
161-
},
171+
}
172+
162173
/**
163174
* Sets the date and time property via a value string.
164175
* @param {String} value - The input value. Either datetime or date string.
@@ -183,8 +194,9 @@
183194
if (!isDatetime) {
184195
this.date = value;
185196
}
186-
this.fire('cosmoz-datetime-input-value-changed');
187-
},
197+
this.dispatchEvent(new CustomEvent('cosmoz-datetime-input-value-changed', { bubbles: true, composed: true }));
198+
}
199+
188200
/**
189201
* Returns a [date, time] or [date] array via a dateTime string.
190202
* @param {String} aDateTime - The datetime or date string.
@@ -206,7 +218,7 @@
206218
});
207219

208220
return parts || [aDateTime];
209-
},
221+
}
210222
/**
211223
* Sets the min/max-date/time properties via min/max-dateTime strings.
212224
* @param {String} min - The min Date/DateTime.
@@ -223,6 +235,7 @@
223235
this._maxDate = Array.isArray(maxParts) ? maxParts.shift() : null;
224236
this._maxTime = Array.isArray(maxParts) ? maxParts.shift() : null;
225237
}
226-
});
238+
}
239+
customElements.define(CosmozDatetimeInput.is, CosmozDatetimeInput);
227240
</script>
228241
</dom-module>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"scripts": {
1717
"start": "polymer serve -o",
1818
"preinstall": "rm -f package-lock.json",
19-
"postinstall": "polymer install --variants && yarn sync-npm",
19+
"postinstall": "polymer install && yarn sync-npm",
2020
"lint": "eslint --cache --cache-location .eslintcache/ --ext .js,.html . && polymer lint cosmoz-*.html",
2121
"test": "polymer test",
2222
"analyze": "polymer analyze --input cosmoz-*.html > analysis.json",

‎polymer.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"lint": {
3-
"rules": ["polymer-2-hybrid"]
3+
"rules": ["polymer-2"]
44
}
55
}

0 commit comments

Comments
 (0)