Skip to content

Commit 9b110ca

Browse files
tlouisseerikkroesgerjanvangeestMikhail Bashkirov
authored and
daKmoR
committed
feat(input-datepicker): added input-datepicker component
Co-authored-by: Erik Kroes <erik.kroes@ing.com> Co-authored-by: Gerjan van Geest <gerjan.van.geest@ing.com> Co-authored-by: Mikhail Bashkirov <mikhail.bashkirov@ing.com>
1 parent 144ebce commit 9b110ca

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1247
-0
lines changed

‎packages/input-datepicker/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { LionInputDatepicker } from './src/LionInputDatepicker.js';

‎packages/input-datepicker/lion-input-datepicker.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { LionInputDatepicker } from './src/LionInputDatepicker.js';
2+
3+
customElements.define('lion-input-datepicker', LionInputDatepicker);

‎packages/input-datepicker/package.json‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"name": "@lion/input-datepicker",
3+
"version": "0.0.0",
4+
"description": "Provide a way for users to fill in a date via a calendar overlay",
5+
"author": "ing-bank",
6+
"homepage": "https://github.com/ing-bank/lion/",
7+
"license": "MIT",
8+
"publishConfig": {
9+
"access": "public"
10+
},
11+
"repository": {
12+
"type": "git",
13+
"url": "https://github.com/ing-bank/lion.git",
14+
"directory": "packages/input-datepicker"
15+
},
16+
"scripts": {
17+
"prepublishOnly": "../../scripts/npm-prepublish.js"
18+
},
19+
"keywords": [
20+
"lion",
21+
"web-components",
22+
"input-date",
23+
"input-datepicker",
24+
"calendar",
25+
"datepicker"
26+
],
27+
"main": "index.js",
28+
"module": "index.js",
29+
"files": [
30+
"src",
31+
"stories",
32+
"test",
33+
"*.js"
34+
],
35+
"dependencies": {
36+
"@lion/core": "^0.1.3",
37+
"@lion/validate": "^0.1.3",
38+
"@lion/input-date": "^0.1.3",
39+
"@lion/overlays": "^0.1.3",
40+
"@lion/calendar": "^0.1.2",
41+
"@lion/localize": "^0.1.6"
42+
},
43+
"devDependencies": {
44+
"@open-wc/demoing-storybook": "^0.2.0",
45+
"@open-wc/testing": "^0.11.1",
46+
"@lion/button": "^0.1.3",
47+
"@polymer/iron-test-helpers": "^3.0.1"
48+
}
49+
}

‎packages/input-datepicker/src/LionCalendarOverlayFrame.js‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
import { html, css, LitElement, DomHelpersMixin } from '@lion/core';
2+
import { LocalizeMixin } from '@lion/localize';
3+
4+
export class LionCalendarOverlayFrame extends LocalizeMixin(DomHelpersMixin(LitElement)) {
5+
static get styles() {
6+
return [
7+
css`
8+
:host {
9+
display: inline-block;
10+
background: white;
11+
position: relative;
12+
}
13+
14+
.calendar-overlay__header {
15+
display: flex;
16+
}
17+
18+
.calendar-overlay__heading {
19+
padding: 16px 16px 8px;
20+
flex: 1;
21+
}
22+
23+
.calendar-overlay__heading > .calendar-overlay__close-button {
24+
flex: none;
25+
}
26+
27+
.calendar-overlay__close-button {
28+
min-width: 40px;
29+
min-height: 32px;
30+
border-width: 0;
31+
padding: 0;
32+
font-size: 24px;
33+
}
34+
`,
35+
];
36+
}
37+
38+
static get localizeNamespaces() {
39+
return [
40+
{
41+
/* FIXME: This awful switch statement is used to make sure it works with polymer build.. */
42+
'lion-calendar-overlay-frame': locale => {
43+
switch (locale) {
44+
case 'bg-BG':
45+
return import('@lion/overlays/translations/bg-BG.js');
46+
case 'bg':
47+
return import('@lion/overlays/translations/bg.js');
48+
case 'cs-CZ':
49+
return import('@lion/overlays/translations/cs-CZ.js');
50+
case 'cs':
51+
return import('@lion/overlays/translations/cs.js');
52+
case 'de-DE':
53+
return import('@lion/overlays/translations/de-DE.js');
54+
case 'de':
55+
return import('@lion/overlays/translations/de.js');
56+
case 'en-AU':
57+
return import('@lion/overlays/translations/en-AU.js');
58+
case 'en-GB':
59+
return import('@lion/overlays/translations/en-GB.js');
60+
case 'en-US':
61+
return import('@lion/overlays/translations/en-US.js');
62+
case 'en':
63+
return import('@lion/overlays/translations/en.js');
64+
case 'es-ES':
65+
return import('@lion/overlays/translations/es-ES.js');
66+
case 'es':
67+
return import('@lion/overlays/translations/es.js');
68+
case 'fr-FR':
69+
return import('@lion/overlays/translations/fr-FR.js');
70+
case 'fr-BE':
71+
return import('@lion/overlays/translations/fr-BE.js');
72+
case 'fr':
73+
return import('@lion/overlays/translations/fr.js');
74+
case 'hu-HU':
75+
return import('@lion/overlays/translations/hu-HU.js');
76+
case 'hu':
77+
return import('@lion/overlays/translations/hu.js');
78+
case 'it-IT':
79+
return import('@lion/overlays/translations/it-IT.js');
80+
case 'it':
81+
return import('@lion/overlays/translations/it.js');
82+
case 'nl-BE':
83+
return import('@lion/overlays/translations/nl-BE.js');
84+
case 'nl-NL':
85+
return import('@lion/overlays/translations/nl-NL.js');
86+
case 'nl':
87+
return import('@lion/overlays/translations/nl.js');
88+
case 'pl-PL':
89+
return import('@lion/overlays/translations/pl-PL.js');
90+
case 'pl':
91+
return import('@lion/overlays/translations/pl.js');
92+
case 'ro-RO':
93+
return import('@lion/overlays/translations/ro-RO.js');
94+
case 'ro':
95+
return import('@lion/overlays/translations/ro.js');
96+
case 'ru-RU':
97+
return import('@lion/overlays/translations/ru-RU.js');
98+
case 'ru':
99+
return import('@lion/overlays/translations/ru.js');
100+
case 'sk-SK':
101+
return import('@lion/overlays/translations/sk-SK.js');
102+
case 'sk':
103+
return import('@lion/overlays/translations/sk.js');
104+
case 'uk-UA':
105+
return import('@lion/overlays/translations/uk-UA.js');
106+
case 'uk':
107+
return import('@lion/overlays/translations/uk.js');
108+
default:
109+
throw new Error(`Unknown locale: ${locale}`);
110+
}
111+
},
112+
},
113+
...super.localizeNamespaces,
114+
];
115+
}
116+
117+
constructor() {
118+
super();
119+
this.__dispatchCloseEvent = this.__dispatchCloseEvent.bind(this);
120+
}
121+
122+
__dispatchCloseEvent() {
123+
// Designed to work in conjunction with ModalDialogController
124+
this.dispatchEvent(new CustomEvent('dialog-close'), { bubbles: true, composed: true });
125+
}
126+
127+
render() {
128+
// eslint-disable-line class-methods-use-this
129+
return html`
130+
<div class="calendar-overlay">
131+
<div class="calendar-overlay__header">
132+
<h1 class="calendar-overlay__heading">
133+
<slot name="heading"></slot>
134+
</h1>
135+
<button
136+
@click="${this.__dispatchCloseEvent}"
137+
id="close-button"
138+
title="${this.msgLit('lion-calendar-overlay-frame:close')}"
139+
aria-label="${this.msgLit('lion-calendar-overlay-frame:close')}"
140+
class="calendar-overlay__close-button"
141+
>
142+
<slot name="close-icon">&times;</slot>
143+
</button>
144+
</div>
145+
<slot></slot>
146+
</div>
147+
`;
148+
}
149+
}

0 commit comments

Comments
 (0)