scb-wc-test 0.1.108 → 0.1.109
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,48 +1,54 @@
|
|
|
1
|
-
import{a as g,r as h,n as p,i as w,x as i,t as m}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"../../vendor/vendor-material.js";import"../scb-divider/scb-divider.js";import"../../vendor/preload-helper.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(a,c,
|
|
1
|
+
import{a as g,r as h,n as p,i as w,x as i,t as m}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"../../vendor/vendor-material.js";import"../scb-divider/scb-divider.js";import"../../vendor/preload-helper.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(a,c,r){try{customElements.get(a)||t(a,c,r)}catch(s){var o=String(s||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw s}}}}catch{}})();var v=Object.defineProperty,_=Object.getOwnPropertyDescriptor,l=(e,t,a,c)=>{for(var r=c>1?void 0:c?_(t,a):t,o=e.length-1,s;o>=0;o--)(s=e[o])&&(r=(c?s(t,a,r):s(r))||r);return c&&r&&v(t,a,r),r};let d=class extends w{constructor(){super(...arguments),this._currentDate=new Date,this._selectedDate=null,this._showMonthDropdown=!1,this._showYearDropdown=!1,this.variant="static",this.lang="sv",this.selectedValue="",this.open=!0,this._outsideClickHandler=e=>{this.variant!=="static"&&this.open&&(e.composedPath().includes(this)||this._close())},this._monthNames=[this.lang=="sv"?"Januari":"January",this.lang=="sv"?"Februari":"February",this.lang=="sv"?"Mars":"March",(this.lang=="sv","April"),this.lang=="sv"?"Maj":"May",this.lang=="sv"?"Juni":"June",this.lang=="sv"?"Juli":"July",this.lang=="sv"?"Augusti":"August",(this.lang=="sv","September"),this.lang=="sv"?"Oktober":"October",(this.lang=="sv","November"),(this.lang=="sv","December")],this._prevYear=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();this._currentDate=new Date(e-1,t,1)},this._nextYear=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();this._currentDate=new Date(e+1,t,1)},this._prevMonth=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();this._currentDate=new Date(e,t-1,1)},this._nextMonth=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();this._currentDate=new Date(e,t+1,1)},this._close=()=>{this.open=!1,this.dispatchEvent(new CustomEvent("datepicker-closed",{bubbles:!0,composed:!0})),window.removeEventListener("mousedown",this._outsideClickHandler)}}updated(e){if(super.updated(e),this.variant!=="static"&&this.open?window.addEventListener("mousedown",this._outsideClickHandler):window.removeEventListener("mousedown",this._outsideClickHandler),e.has("selectedValue")&&this.selectedValue){const t=new Date(this.selectedValue);isNaN(t.getTime())||(this._selectedDate=t,this._currentDate=new Date(t.getFullYear(),t.getMonth(),1))}}_getMonthDays(e,t){const a=new Date(e,t,1),c=new Date(e,t+1,0),r=[];let o=[],s=(a.getDay()+6)%7;for(let n=0;n<s;n++)o.push(null);for(let n=1;n<=c.getDate();n++){const u=new Date(e,t,n);o.push(u),o.length===7&&(r.push(o),o=[])}if(o.length){for(;o.length<7;)o.push(null);r.push(o)}return r}render(){if(!this.open)return i``;const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth(),a=new Date,c=this._getMonthDays(e,t),r=Array.from({length:101},(o,s)=>a.getFullYear()-50+s);return i`
|
|
2
2
|
<div class="datepicker-popup ${this.variant==="popup"?"popup":"static"}">
|
|
3
3
|
<div class="header">
|
|
4
4
|
<div class="month-selector ${this._showMonthDropdown?"open":""} ${this._showYearDropdown?"disable":""}">
|
|
5
5
|
<scb-icon-button icon="chevron_left" @click=${this._prevMonth} aria-label=${this.lang=="sv"?"Föregående månad":"Previous month"}></scb-icon-button>
|
|
6
6
|
<div class="custom-dropdown month-dropdown">
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
<div
|
|
8
|
+
tabindex=${this._showYearDropdown?-1:0}
|
|
9
|
+
class="dropdown-selected"
|
|
10
|
+
@click=${()=>this._toggleMonthDropdown()}
|
|
11
|
+
@keydown=${o=>{(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),this._toggleMonthDropdown())}}
|
|
12
|
+
>
|
|
10
13
|
${this._monthNames[t].slice(0,3)}
|
|
11
14
|
<md-icon>arrow_drop_down</md-icon>
|
|
12
15
|
<md-focus-ring></md-focus-ring>
|
|
13
16
|
<md-ripple></md-ripple>
|
|
14
|
-
|
|
17
|
+
</div>
|
|
15
18
|
</div>
|
|
16
19
|
<scb-icon-button icon="chevron_right" @click=${this._nextMonth} aria-label=${this.lang=="sv"?"Nästa månad":"Next month"}></scb-icon-button>
|
|
17
20
|
</div>
|
|
18
21
|
<div class="year-selector ${this._showMonthDropdown?"disable":""} ${this._showYearDropdown?"open":""}">
|
|
19
22
|
<scb-icon-button icon="chevron_left" @click=${this._prevYear} aria-label=${this.lang=="sv"?"Föregående år":"Previous year"}></scb-icon-button>
|
|
20
23
|
<div class="custom-dropdown year-dropdown">
|
|
21
|
-
<div
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
24
|
+
<div
|
|
25
|
+
tabindex=${this._showMonthDropdown?-1:0}
|
|
26
|
+
class="dropdown-selected"
|
|
27
|
+
@click=${()=>this._toggleYearDropdown()}
|
|
28
|
+
@keydown=${o=>{(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),this._toggleYearDropdown())}}
|
|
29
|
+
>
|
|
30
|
+
${e}
|
|
31
|
+
<md-icon>arrow_drop_down</md-icon>
|
|
32
|
+
<md-focus-ring></md-focus-ring>
|
|
33
|
+
<md-ripple></md-ripple>
|
|
28
34
|
</div>
|
|
29
35
|
</div>
|
|
30
36
|
<scb-icon-button icon="chevron_right" @click=${this._nextYear} aria-label=${this.lang=="sv"?"Nästa år":"Next year"}></scb-icon-button>
|
|
31
37
|
</div>
|
|
32
38
|
</div>
|
|
33
|
-
|
|
39
|
+
${this._showMonthDropdown||this._showYearDropdown?i`<scb-divider></scb-divider>`:""}
|
|
34
40
|
<div class="datepicker-content" style="position:relative;">
|
|
35
41
|
${this._showMonthDropdown?i`
|
|
36
42
|
<div class="dropdown-list">
|
|
37
|
-
${this._monthNames.map((o,
|
|
43
|
+
${this._monthNames.map((o,s)=>i`
|
|
38
44
|
<div
|
|
39
|
-
@keydown=${
|
|
45
|
+
@keydown=${n=>{(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),this._onMonthChangeCustom(s))}}
|
|
40
46
|
tabindex="0"
|
|
41
|
-
class="dropdown-item${
|
|
42
|
-
@click=${()=>this._onMonthChangeCustom(
|
|
43
|
-
id=${
|
|
47
|
+
class="dropdown-item${s===t?" selected":""}"
|
|
48
|
+
@click=${()=>this._onMonthChangeCustom(s)}
|
|
49
|
+
id=${s===t?"selected-month":""}
|
|
44
50
|
>
|
|
45
|
-
${
|
|
51
|
+
${s===t?i`<md-icon>check</md-icon>`:""}
|
|
46
52
|
${o}
|
|
47
53
|
<md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
|
|
48
54
|
</div>
|
|
@@ -51,9 +57,9 @@ import{a as g,r as h,n as p,i as w,x as i,t as m}from"../../vendor/vendor.js";im
|
|
|
51
57
|
`:""}
|
|
52
58
|
${this._showYearDropdown?i`
|
|
53
59
|
<div class="dropdown-list">
|
|
54
|
-
${
|
|
60
|
+
${r.map(o=>i`
|
|
55
61
|
<div
|
|
56
|
-
@keydown=${
|
|
62
|
+
@keydown=${s=>{(s.key==="Enter"||s.key===" ")&&(s.preventDefault(),this._onYearChangeCustom(o))}}
|
|
57
63
|
tabindex="0"
|
|
58
64
|
class="dropdown-item${o===e?" selected":""}"
|
|
59
65
|
@click=${()=>this._onYearChangeCustom(o)}
|
|
@@ -77,15 +83,15 @@ import{a as g,r as h,n as p,i as w,x as i,t as m}from"../../vendor/vendor.js";im
|
|
|
77
83
|
<tbody>
|
|
78
84
|
${c.map(o=>i`
|
|
79
85
|
<tr>
|
|
80
|
-
${o.map(
|
|
86
|
+
${o.map(s=>s?i`
|
|
81
87
|
<td>
|
|
82
88
|
<div
|
|
83
|
-
@keydown=${
|
|
89
|
+
@keydown=${n=>{(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),this._selectDate(s))}}
|
|
84
90
|
role="button"
|
|
85
91
|
tabindex="0"
|
|
86
|
-
class="day${this._isToday(
|
|
87
|
-
@click=${()=>this._selectDate(
|
|
88
|
-
>${
|
|
92
|
+
class="day${this._isToday(s,a)?" today":""}${this._isSelected(s)?" selected":""}"
|
|
93
|
+
@click=${()=>this._selectDate(s)}
|
|
94
|
+
>${s.getDate()}<md-ripple></md-ripple><md-focus-ring></md-focus-ring></div>
|
|
89
95
|
</td>
|
|
90
96
|
`:i`<td></td>`)}
|
|
91
97
|
</tr>
|
|
@@ -96,7 +102,7 @@ import{a as g,r as h,n as p,i as w,x as i,t as m}from"../../vendor/vendor.js";im
|
|
|
96
102
|
`:""}
|
|
97
103
|
</div>
|
|
98
104
|
<div class="datepicker-footer">
|
|
99
|
-
${!this._showMonthDropdown&&!this._showYearDropdown?i`
|
|
105
|
+
${!this._showMonthDropdown&&!this._showYearDropdown&&this.variant=="popup"?i`
|
|
100
106
|
<scb-button variant="text" label=${this.lang=="sv"?"Stäng":"Close"} @click=${this._close}></scb-button>
|
|
101
107
|
`:""}
|
|
102
108
|
</div>
|
|
@@ -104,9 +110,10 @@ import{a as g,r as h,n as p,i as w,x as i,t as m}from"../../vendor/vendor.js";im
|
|
|
104
110
|
`}_toggleMonthDropdown(){this._showMonthDropdown=!this._showMonthDropdown,this._showMonthDropdown&&(this._showYearDropdown=!1,setTimeout(()=>{const e=this.renderRoot.querySelector("#selected-month");e&&e.scrollIntoView({block:"center"})},0))}_toggleYearDropdown(){this._showYearDropdown=!this._showYearDropdown,this._showYearDropdown&&(this._showMonthDropdown=!1,setTimeout(()=>{const e=this.renderRoot.querySelector("#selected-year");e&&e.scrollIntoView({block:"center"})},0))}_onMonthChangeCustom(e){const t=this._currentDate.getFullYear();this._currentDate=new Date(t,e,1),this._showMonthDropdown=!1}_onYearChangeCustom(e){const t=this._currentDate.getMonth();this._currentDate=new Date(e,t,1),this._showYearDropdown=!1}_isToday(e,t){return e.getDate()===t.getDate()&&e.getMonth()===t.getMonth()&&e.getFullYear()===t.getFullYear()}_isSelected(e){return this._selectedDate&&e.getDate()===this._selectedDate.getDate()&&e.getMonth()===this._selectedDate.getMonth()&&e.getFullYear()===this._selectedDate.getFullYear()}_selectDate(e){this._selectedDate=e;const t=e.toISOString().slice(0,10);this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:t},bubbles:!0,composed:!0}))}};d.styles=[g`
|
|
105
111
|
:host {
|
|
106
112
|
--scb-datepicker-width: 380px;
|
|
107
|
-
width: var(--scb-datepicker-width);
|
|
113
|
+
max-width: var(--scb-datepicker-width);
|
|
108
114
|
font-family: var(--brand-font);
|
|
109
115
|
color: var(--md-sys-color-on-surface);
|
|
116
|
+
display: block;
|
|
110
117
|
}
|
|
111
118
|
.month-selector, .year-selector {
|
|
112
119
|
display: flex;
|
|
@@ -178,9 +185,24 @@ import{a as g,r as h,n as p,i as w,x as i,t as m}from"../../vendor/vendor.js";im
|
|
|
178
185
|
font-family: var(--brand-font);
|
|
179
186
|
}
|
|
180
187
|
.datepicker-content{
|
|
181
|
-
|
|
182
|
-
|
|
188
|
+
overflow-y: auto;
|
|
189
|
+
max-height: 290px;
|
|
183
190
|
}
|
|
191
|
+
.datepicker-content::-webkit-scrollbar {
|
|
192
|
+
width: 12px;
|
|
193
|
+
background: var(--md-sys-color-surface);
|
|
194
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
195
|
+
}
|
|
196
|
+
.datepicker-content::-webkit-scrollbar-thumb {
|
|
197
|
+
background: var(--md-sys-color-outline);
|
|
198
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
199
|
+
border: 4px solid var(--md-sys-color-surface);
|
|
200
|
+
|
|
201
|
+
}
|
|
202
|
+
.datepicker-content::-webkit-scrollbar-track {
|
|
203
|
+
background: var(--md-sys-color-surface);
|
|
204
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
205
|
+
}
|
|
184
206
|
.popup {
|
|
185
207
|
position:absolute;
|
|
186
208
|
top:110%;
|
|
@@ -191,8 +213,8 @@ import{a as g,r as h,n as p,i as w,x as i,t as m}from"../../vendor/vendor.js";im
|
|
|
191
213
|
display: flex;
|
|
192
214
|
align-items: center;
|
|
193
215
|
justify-content: space-between;
|
|
194
|
-
margin-bottom:
|
|
195
|
-
padding: 16px
|
|
216
|
+
margin-bottom: 30px;
|
|
217
|
+
padding: 20px 16px 0px 16px;
|
|
196
218
|
flex-wrap: wrap;
|
|
197
219
|
}
|
|
198
220
|
.datepicker-footer{
|
|
@@ -214,7 +236,7 @@ import{a as g,r as h,n as p,i as w,x as i,t as m}from"../../vendor/vendor.js";im
|
|
|
214
236
|
color: var(--md-sys-color-on-surface-variant, #757575);
|
|
215
237
|
font-size: 16px;
|
|
216
238
|
font-weight: 600;
|
|
217
|
-
padding:
|
|
239
|
+
padding-bottom: 20px;
|
|
218
240
|
}
|
|
219
241
|
td {
|
|
220
242
|
text-align: center;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.109",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -341,5 +341,5 @@
|
|
|
341
341
|
},
|
|
342
342
|
"./mvc/*": "./mvc/*"
|
|
343
343
|
},
|
|
344
|
-
"buildHash": "
|
|
344
|
+
"buildHash": "FE1F2C82B9DDE76C0E2956F57BC7B6E22824F0F60304C6FD2E9DC7DCF2FA71B7"
|
|
345
345
|
}
|
|
@@ -11,6 +11,7 @@ export declare class ScbDatepicker extends LitElement {
|
|
|
11
11
|
static styles: import('lit').CSSResult[];
|
|
12
12
|
updated(changed: PropertyValues): void;
|
|
13
13
|
private _getMonthDays;
|
|
14
|
+
private _outsideClickHandler;
|
|
14
15
|
private _monthNames;
|
|
15
16
|
render(): TemplateResult;
|
|
16
17
|
private _toggleMonthDropdown;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { css as
|
|
1
|
+
import { css as m, LitElement as g, html as n } from "lit";
|
|
2
2
|
import { state as h, property as p, customElement as w } from "lit/decorators.js";
|
|
3
3
|
import "../scb-icon-button/scb-icon-button.js";
|
|
4
4
|
import "../scb-button/scb-button.js";
|
|
@@ -6,14 +6,16 @@ import "@material/web/icon/icon.js";
|
|
|
6
6
|
import "@material/web/ripple/ripple.js";
|
|
7
7
|
import "@material/web/focus/md-focus-ring.js";
|
|
8
8
|
import "../scb-divider/scb-divider.js";
|
|
9
|
-
var v = Object.defineProperty,
|
|
10
|
-
for (var i = l > 1 ? void 0 : l ?
|
|
9
|
+
var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, d = (e, t, c, l) => {
|
|
10
|
+
for (var i = l > 1 ? void 0 : l ? b(t, c) : t, o = e.length - 1, s; o >= 0; o--)
|
|
11
11
|
(s = e[o]) && (i = (l ? s(t, c, i) : s(i)) || i);
|
|
12
12
|
return l && i && v(t, c, i), i;
|
|
13
13
|
};
|
|
14
|
-
let a = class extends
|
|
14
|
+
let a = class extends g {
|
|
15
15
|
constructor() {
|
|
16
|
-
super(...arguments), this._currentDate = /* @__PURE__ */ new Date(), this._selectedDate = null, this._showMonthDropdown = !1, this._showYearDropdown = !1, this.variant = "static", this.lang = "sv", this.selectedValue = "", this.open = !0, this.
|
|
16
|
+
super(...arguments), this._currentDate = /* @__PURE__ */ new Date(), this._selectedDate = null, this._showMonthDropdown = !1, this._showYearDropdown = !1, this.variant = "static", this.lang = "sv", this.selectedValue = "", this.open = !0, this._outsideClickHandler = (e) => {
|
|
17
|
+
this.variant !== "static" && this.open && (e.composedPath().includes(this) || this._close());
|
|
18
|
+
}, this._monthNames = [
|
|
17
19
|
this.lang == "sv" ? "Januari" : "January",
|
|
18
20
|
this.lang == "sv" ? "Februari" : "February",
|
|
19
21
|
this.lang == "sv" ? "Mars" : "March",
|
|
@@ -42,11 +44,11 @@ let a = class extends m {
|
|
|
42
44
|
this.open = !1, this.dispatchEvent(new CustomEvent("datepicker-closed", {
|
|
43
45
|
bubbles: !0,
|
|
44
46
|
composed: !0
|
|
45
|
-
}));
|
|
47
|
+
})), window.removeEventListener("mousedown", this._outsideClickHandler);
|
|
46
48
|
};
|
|
47
49
|
}
|
|
48
50
|
updated(e) {
|
|
49
|
-
if (super.updated(e), e.has("selectedValue") && this.selectedValue) {
|
|
51
|
+
if (super.updated(e), this.variant !== "static" && this.open ? window.addEventListener("mousedown", this._outsideClickHandler) : window.removeEventListener("mousedown", this._outsideClickHandler), e.has("selectedValue") && this.selectedValue) {
|
|
50
52
|
const t = new Date(this.selectedValue);
|
|
51
53
|
isNaN(t.getTime()) || (this._selectedDate = t, this._currentDate = new Date(t.getFullYear(), t.getMonth(), 1));
|
|
52
54
|
}
|
|
@@ -74,37 +76,43 @@ let a = class extends m {
|
|
|
74
76
|
<div class="month-selector ${this._showMonthDropdown ? "open" : ""} ${this._showYearDropdown ? "disable" : ""}">
|
|
75
77
|
<scb-icon-button icon="chevron_left" @click=${this._prevMonth} aria-label=${this.lang == "sv" ? "Föregående månad" : "Previous month"}></scb-icon-button>
|
|
76
78
|
<div class="custom-dropdown month-dropdown">
|
|
77
|
-
|
|
78
|
-
|
|
79
|
+
<div
|
|
80
|
+
tabindex=${this._showYearDropdown ? -1 : 0}
|
|
81
|
+
class="dropdown-selected"
|
|
82
|
+
@click=${() => this._toggleMonthDropdown()}
|
|
83
|
+
@keydown=${(o) => {
|
|
79
84
|
(o.key === "Enter" || o.key === " ") && (o.preventDefault(), this._toggleMonthDropdown());
|
|
80
85
|
}}
|
|
81
|
-
|
|
86
|
+
>
|
|
82
87
|
${this._monthNames[t].slice(0, 3)}
|
|
83
88
|
<md-icon>arrow_drop_down</md-icon>
|
|
84
89
|
<md-focus-ring></md-focus-ring>
|
|
85
90
|
<md-ripple></md-ripple>
|
|
86
|
-
|
|
91
|
+
</div>
|
|
87
92
|
</div>
|
|
88
93
|
<scb-icon-button icon="chevron_right" @click=${this._nextMonth} aria-label=${this.lang == "sv" ? "Nästa månad" : "Next month"}></scb-icon-button>
|
|
89
94
|
</div>
|
|
90
95
|
<div class="year-selector ${this._showMonthDropdown ? "disable" : ""} ${this._showYearDropdown ? "open" : ""}">
|
|
91
96
|
<scb-icon-button icon="chevron_left" @click=${this._prevYear} aria-label=${this.lang == "sv" ? "Föregående år" : "Previous year"}></scb-icon-button>
|
|
92
97
|
<div class="custom-dropdown year-dropdown">
|
|
93
|
-
<div
|
|
94
|
-
|
|
98
|
+
<div
|
|
99
|
+
tabindex=${this._showMonthDropdown ? -1 : 0}
|
|
100
|
+
class="dropdown-selected"
|
|
101
|
+
@click=${() => this._toggleYearDropdown()}
|
|
102
|
+
@keydown=${(o) => {
|
|
95
103
|
(o.key === "Enter" || o.key === " ") && (o.preventDefault(), this._toggleYearDropdown());
|
|
96
104
|
}}
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
105
|
+
>
|
|
106
|
+
${e}
|
|
107
|
+
<md-icon>arrow_drop_down</md-icon>
|
|
108
|
+
<md-focus-ring></md-focus-ring>
|
|
109
|
+
<md-ripple></md-ripple>
|
|
102
110
|
</div>
|
|
103
111
|
</div>
|
|
104
112
|
<scb-icon-button icon="chevron_right" @click=${this._nextYear} aria-label=${this.lang == "sv" ? "Nästa år" : "Next year"}></scb-icon-button>
|
|
105
113
|
</div>
|
|
106
114
|
</div>
|
|
107
|
-
|
|
115
|
+
${this._showMonthDropdown || this._showYearDropdown ? n`<scb-divider></scb-divider>` : ""}
|
|
108
116
|
<div class="datepicker-content" style="position:relative;">
|
|
109
117
|
${this._showMonthDropdown ? n`
|
|
110
118
|
<div class="dropdown-list">
|
|
@@ -176,7 +184,7 @@ let a = class extends m {
|
|
|
176
184
|
` : ""}
|
|
177
185
|
</div>
|
|
178
186
|
<div class="datepicker-footer">
|
|
179
|
-
${!this._showMonthDropdown && !this._showYearDropdown ? n`
|
|
187
|
+
${!this._showMonthDropdown && !this._showYearDropdown && this.variant == "popup" ? n`
|
|
180
188
|
<scb-button variant="text" label=${this.lang == "sv" ? "Stäng" : "Close"} @click=${this._close}></scb-button>
|
|
181
189
|
` : ""}
|
|
182
190
|
</div>
|
|
@@ -220,12 +228,13 @@ let a = class extends m {
|
|
|
220
228
|
}
|
|
221
229
|
};
|
|
222
230
|
a.styles = [
|
|
223
|
-
|
|
231
|
+
m`
|
|
224
232
|
:host {
|
|
225
233
|
--scb-datepicker-width: 380px;
|
|
226
|
-
width: var(--scb-datepicker-width);
|
|
234
|
+
max-width: var(--scb-datepicker-width);
|
|
227
235
|
font-family: var(--brand-font);
|
|
228
236
|
color: var(--md-sys-color-on-surface);
|
|
237
|
+
display: block;
|
|
229
238
|
}
|
|
230
239
|
.month-selector, .year-selector {
|
|
231
240
|
display: flex;
|
|
@@ -297,9 +306,24 @@ a.styles = [
|
|
|
297
306
|
font-family: var(--brand-font);
|
|
298
307
|
}
|
|
299
308
|
.datepicker-content{
|
|
300
|
-
|
|
301
|
-
|
|
309
|
+
overflow-y: auto;
|
|
310
|
+
max-height: 290px;
|
|
302
311
|
}
|
|
312
|
+
.datepicker-content::-webkit-scrollbar {
|
|
313
|
+
width: 12px;
|
|
314
|
+
background: var(--md-sys-color-surface);
|
|
315
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
316
|
+
}
|
|
317
|
+
.datepicker-content::-webkit-scrollbar-thumb {
|
|
318
|
+
background: var(--md-sys-color-outline);
|
|
319
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
320
|
+
border: 4px solid var(--md-sys-color-surface);
|
|
321
|
+
|
|
322
|
+
}
|
|
323
|
+
.datepicker-content::-webkit-scrollbar-track {
|
|
324
|
+
background: var(--md-sys-color-surface);
|
|
325
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
326
|
+
}
|
|
303
327
|
.popup {
|
|
304
328
|
position:absolute;
|
|
305
329
|
top:110%;
|
|
@@ -310,8 +334,8 @@ a.styles = [
|
|
|
310
334
|
display: flex;
|
|
311
335
|
align-items: center;
|
|
312
336
|
justify-content: space-between;
|
|
313
|
-
margin-bottom:
|
|
314
|
-
padding: 16px
|
|
337
|
+
margin-bottom: 30px;
|
|
338
|
+
padding: 20px 16px 0px 16px;
|
|
315
339
|
flex-wrap: wrap;
|
|
316
340
|
}
|
|
317
341
|
.datepicker-footer{
|
|
@@ -333,7 +357,7 @@ a.styles = [
|
|
|
333
357
|
color: var(--md-sys-color-on-surface-variant, #757575);
|
|
334
358
|
font-size: 16px;
|
|
335
359
|
font-weight: 600;
|
|
336
|
-
padding:
|
|
360
|
+
padding-bottom: 20px;
|
|
337
361
|
}
|
|
338
362
|
td {
|
|
339
363
|
text-align: center;
|
package/scb-wc-test.bundle.js
CHANGED
|
@@ -3872,39 +3872,45 @@ var ScbWcTest=function(a){"use strict";var wl;function d(o,e,t,i){var r=argument
|
|
|
3872
3872
|
:host([overlay][direction='vertical'][anchor='start']) {
|
|
3873
3873
|
left: calc(var(--scb-divider-gap) / -2);
|
|
3874
3874
|
}
|
|
3875
|
-
`,$t([n({type:String,reflect:!0})],a.ScbDivider.prototype,"variant",2),$t([n({type:String,reflect:!0})],a.ScbDivider.prototype,"direction",2),$t([n({type:String,reflect:!0})],a.ScbDivider.prototype,"inset",2),$t([n({type:Boolean,reflect:!0})],a.ScbDivider.prototype,"overlay",2),$t([n({type:String,reflect:!0})],a.ScbDivider.prototype,"anchor",2),$t([n({type:String,reflect:!0})],a.ScbDivider.prototype,"spacing",2),a.ScbDivider=$t([g("scb-divider")],a.ScbDivider);var kp=Object.defineProperty,$p=Object.getOwnPropertyDescriptor,We=(o,e,t,i)=>{for(var r=i>1?void 0:i?$p(e,t):e,s=o.length-1,l;s>=0;s--)(l=o[s])&&(r=(i?l(e,t,r):l(r))||r);return i&&r&&kp(e,t,r),r};a.ScbDatepicker=class extends y{constructor(){super(...arguments),this._currentDate=new Date,this._selectedDate=null,this._showMonthDropdown=!1,this._showYearDropdown=!1,this.variant="static",this.lang="sv",this.selectedValue="",this.open=!0,this._monthNames=[this.lang=="sv"?"Januari":"January",this.lang=="sv"?"Februari":"February",this.lang=="sv"?"Mars":"March",(this.lang=="sv","April"),this.lang=="sv"?"Maj":"May",this.lang=="sv"?"Juni":"June",this.lang=="sv"?"Juli":"July",this.lang=="sv"?"Augusti":"August",(this.lang=="sv","September"),this.lang=="sv"?"Oktober":"October",(this.lang=="sv","November"),(this.lang=="sv","December")],this._prevYear=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();this._currentDate=new Date(e-1,t,1)},this._nextYear=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();this._currentDate=new Date(e+1,t,1)},this._prevMonth=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();this._currentDate=new Date(e,t-1,1)},this._nextMonth=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();this._currentDate=new Date(e,t+1,1)},this._close=()=>{this.open=!1,this.dispatchEvent(new CustomEvent("datepicker-closed",{bubbles:!0,composed:!0}))}}updated(e){if(super.updated(e),e.has("selectedValue")&&this.selectedValue){const t=new Date(this.selectedValue);isNaN(t.getTime())||(this._selectedDate=t,this._currentDate=new Date(t.getFullYear(),t.getMonth(),1))}}_getMonthDays(e,t){const i=new Date(e,t,1),r=new Date(e,t+1,0),s=[];let l=[],h=(i.getDay()+6)%7;for(let p=0;p<h;p++)l.push(null);for(let p=1;p<=r.getDate();p++){const v=new Date(e,t,p);l.push(v),l.length===7&&(s.push(l),l=[])}if(l.length){for(;l.length<7;)l.push(null);s.push(l)}return s}render(){if(!this.open)return c``;const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth(),i=new Date,r=this._getMonthDays(e,t),s=Array.from({length:101},(l,h)=>i.getFullYear()-50+h);return c`
|
|
3875
|
+
`,$t([n({type:String,reflect:!0})],a.ScbDivider.prototype,"variant",2),$t([n({type:String,reflect:!0})],a.ScbDivider.prototype,"direction",2),$t([n({type:String,reflect:!0})],a.ScbDivider.prototype,"inset",2),$t([n({type:Boolean,reflect:!0})],a.ScbDivider.prototype,"overlay",2),$t([n({type:String,reflect:!0})],a.ScbDivider.prototype,"anchor",2),$t([n({type:String,reflect:!0})],a.ScbDivider.prototype,"spacing",2),a.ScbDivider=$t([g("scb-divider")],a.ScbDivider);var kp=Object.defineProperty,$p=Object.getOwnPropertyDescriptor,We=(o,e,t,i)=>{for(var r=i>1?void 0:i?$p(e,t):e,s=o.length-1,l;s>=0;s--)(l=o[s])&&(r=(i?l(e,t,r):l(r))||r);return i&&r&&kp(e,t,r),r};a.ScbDatepicker=class extends y{constructor(){super(...arguments),this._currentDate=new Date,this._selectedDate=null,this._showMonthDropdown=!1,this._showYearDropdown=!1,this.variant="static",this.lang="sv",this.selectedValue="",this.open=!0,this._outsideClickHandler=e=>{this.variant!=="static"&&this.open&&(e.composedPath().includes(this)||this._close())},this._monthNames=[this.lang=="sv"?"Januari":"January",this.lang=="sv"?"Februari":"February",this.lang=="sv"?"Mars":"March",(this.lang=="sv","April"),this.lang=="sv"?"Maj":"May",this.lang=="sv"?"Juni":"June",this.lang=="sv"?"Juli":"July",this.lang=="sv"?"Augusti":"August",(this.lang=="sv","September"),this.lang=="sv"?"Oktober":"October",(this.lang=="sv","November"),(this.lang=="sv","December")],this._prevYear=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();this._currentDate=new Date(e-1,t,1)},this._nextYear=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();this._currentDate=new Date(e+1,t,1)},this._prevMonth=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();this._currentDate=new Date(e,t-1,1)},this._nextMonth=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();this._currentDate=new Date(e,t+1,1)},this._close=()=>{this.open=!1,this.dispatchEvent(new CustomEvent("datepicker-closed",{bubbles:!0,composed:!0})),window.removeEventListener("mousedown",this._outsideClickHandler)}}updated(e){if(super.updated(e),this.variant!=="static"&&this.open?window.addEventListener("mousedown",this._outsideClickHandler):window.removeEventListener("mousedown",this._outsideClickHandler),e.has("selectedValue")&&this.selectedValue){const t=new Date(this.selectedValue);isNaN(t.getTime())||(this._selectedDate=t,this._currentDate=new Date(t.getFullYear(),t.getMonth(),1))}}_getMonthDays(e,t){const i=new Date(e,t,1),r=new Date(e,t+1,0),s=[];let l=[],h=(i.getDay()+6)%7;for(let p=0;p<h;p++)l.push(null);for(let p=1;p<=r.getDate();p++){const v=new Date(e,t,p);l.push(v),l.length===7&&(s.push(l),l=[])}if(l.length){for(;l.length<7;)l.push(null);s.push(l)}return s}render(){if(!this.open)return c``;const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth(),i=new Date,r=this._getMonthDays(e,t),s=Array.from({length:101},(l,h)=>i.getFullYear()-50+h);return c`
|
|
3876
3876
|
<div class="datepicker-popup ${this.variant==="popup"?"popup":"static"}">
|
|
3877
3877
|
<div class="header">
|
|
3878
3878
|
<div class="month-selector ${this._showMonthDropdown?"open":""} ${this._showYearDropdown?"disable":""}">
|
|
3879
3879
|
<scb-icon-button icon="chevron_left" @click=${this._prevMonth} aria-label=${this.lang=="sv"?"Föregående månad":"Previous month"}></scb-icon-button>
|
|
3880
3880
|
<div class="custom-dropdown month-dropdown">
|
|
3881
|
-
|
|
3882
|
-
|
|
3883
|
-
|
|
3881
|
+
<div
|
|
3882
|
+
tabindex=${this._showYearDropdown?-1:0}
|
|
3883
|
+
class="dropdown-selected"
|
|
3884
|
+
@click=${()=>this._toggleMonthDropdown()}
|
|
3885
|
+
@keydown=${l=>{(l.key==="Enter"||l.key===" ")&&(l.preventDefault(),this._toggleMonthDropdown())}}
|
|
3886
|
+
>
|
|
3884
3887
|
${this._monthNames[t].slice(0,3)}
|
|
3885
3888
|
<md-icon>arrow_drop_down</md-icon>
|
|
3886
3889
|
<md-focus-ring></md-focus-ring>
|
|
3887
3890
|
<md-ripple></md-ripple>
|
|
3888
|
-
|
|
3891
|
+
</div>
|
|
3889
3892
|
</div>
|
|
3890
3893
|
<scb-icon-button icon="chevron_right" @click=${this._nextMonth} aria-label=${this.lang=="sv"?"Nästa månad":"Next month"}></scb-icon-button>
|
|
3891
3894
|
</div>
|
|
3892
3895
|
<div class="year-selector ${this._showMonthDropdown?"disable":""} ${this._showYearDropdown?"open":""}">
|
|
3893
3896
|
<scb-icon-button icon="chevron_left" @click=${this._prevYear} aria-label=${this.lang=="sv"?"Föregående år":"Previous year"}></scb-icon-button>
|
|
3894
3897
|
<div class="custom-dropdown year-dropdown">
|
|
3895
|
-
<div
|
|
3896
|
-
|
|
3897
|
-
|
|
3898
|
-
|
|
3899
|
-
|
|
3900
|
-
|
|
3901
|
-
|
|
3898
|
+
<div
|
|
3899
|
+
tabindex=${this._showMonthDropdown?-1:0}
|
|
3900
|
+
class="dropdown-selected"
|
|
3901
|
+
@click=${()=>this._toggleYearDropdown()}
|
|
3902
|
+
@keydown=${l=>{(l.key==="Enter"||l.key===" ")&&(l.preventDefault(),this._toggleYearDropdown())}}
|
|
3903
|
+
>
|
|
3904
|
+
${e}
|
|
3905
|
+
<md-icon>arrow_drop_down</md-icon>
|
|
3906
|
+
<md-focus-ring></md-focus-ring>
|
|
3907
|
+
<md-ripple></md-ripple>
|
|
3902
3908
|
</div>
|
|
3903
3909
|
</div>
|
|
3904
3910
|
<scb-icon-button icon="chevron_right" @click=${this._nextYear} aria-label=${this.lang=="sv"?"Nästa år":"Next year"}></scb-icon-button>
|
|
3905
3911
|
</div>
|
|
3906
3912
|
</div>
|
|
3907
|
-
|
|
3913
|
+
${this._showMonthDropdown||this._showYearDropdown?c`<scb-divider></scb-divider>`:""}
|
|
3908
3914
|
<div class="datepicker-content" style="position:relative;">
|
|
3909
3915
|
${this._showMonthDropdown?c`
|
|
3910
3916
|
<div class="dropdown-list">
|
|
@@ -3970,7 +3976,7 @@ var ScbWcTest=function(a){"use strict";var wl;function d(o,e,t,i){var r=argument
|
|
|
3970
3976
|
`:""}
|
|
3971
3977
|
</div>
|
|
3972
3978
|
<div class="datepicker-footer">
|
|
3973
|
-
${!this._showMonthDropdown&&!this._showYearDropdown?c`
|
|
3979
|
+
${!this._showMonthDropdown&&!this._showYearDropdown&&this.variant=="popup"?c`
|
|
3974
3980
|
<scb-button variant="text" label=${this.lang=="sv"?"Stäng":"Close"} @click=${this._close}></scb-button>
|
|
3975
3981
|
`:""}
|
|
3976
3982
|
</div>
|
|
@@ -3978,9 +3984,10 @@ var ScbWcTest=function(a){"use strict";var wl;function d(o,e,t,i){var r=argument
|
|
|
3978
3984
|
`}_toggleMonthDropdown(){this._showMonthDropdown=!this._showMonthDropdown,this._showMonthDropdown&&(this._showYearDropdown=!1,setTimeout(()=>{const e=this.renderRoot.querySelector("#selected-month");e&&e.scrollIntoView({block:"center"})},0))}_toggleYearDropdown(){this._showYearDropdown=!this._showYearDropdown,this._showYearDropdown&&(this._showMonthDropdown=!1,setTimeout(()=>{const e=this.renderRoot.querySelector("#selected-year");e&&e.scrollIntoView({block:"center"})},0))}_onMonthChangeCustom(e){const t=this._currentDate.getFullYear();this._currentDate=new Date(t,e,1),this._showMonthDropdown=!1}_onYearChangeCustom(e){const t=this._currentDate.getMonth();this._currentDate=new Date(e,t,1),this._showYearDropdown=!1}_isToday(e,t){return e.getDate()===t.getDate()&&e.getMonth()===t.getMonth()&&e.getFullYear()===t.getFullYear()}_isSelected(e){return this._selectedDate&&e.getDate()===this._selectedDate.getDate()&&e.getMonth()===this._selectedDate.getMonth()&&e.getFullYear()===this._selectedDate.getFullYear()}_selectDate(e){this._selectedDate=e;const t=e.toISOString().slice(0,10);this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:t},bubbles:!0,composed:!0}))}},a.ScbDatepicker.styles=[m`
|
|
3979
3985
|
:host {
|
|
3980
3986
|
--scb-datepicker-width: 380px;
|
|
3981
|
-
width: var(--scb-datepicker-width);
|
|
3987
|
+
max-width: var(--scb-datepicker-width);
|
|
3982
3988
|
font-family: var(--brand-font);
|
|
3983
3989
|
color: var(--md-sys-color-on-surface);
|
|
3990
|
+
display: block;
|
|
3984
3991
|
}
|
|
3985
3992
|
.month-selector, .year-selector {
|
|
3986
3993
|
display: flex;
|
|
@@ -4052,9 +4059,24 @@ var ScbWcTest=function(a){"use strict";var wl;function d(o,e,t,i){var r=argument
|
|
|
4052
4059
|
font-family: var(--brand-font);
|
|
4053
4060
|
}
|
|
4054
4061
|
.datepicker-content{
|
|
4055
|
-
|
|
4056
|
-
|
|
4062
|
+
overflow-y: auto;
|
|
4063
|
+
max-height: 290px;
|
|
4057
4064
|
}
|
|
4065
|
+
.datepicker-content::-webkit-scrollbar {
|
|
4066
|
+
width: 12px;
|
|
4067
|
+
background: var(--md-sys-color-surface);
|
|
4068
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
4069
|
+
}
|
|
4070
|
+
.datepicker-content::-webkit-scrollbar-thumb {
|
|
4071
|
+
background: var(--md-sys-color-outline);
|
|
4072
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
4073
|
+
border: 4px solid var(--md-sys-color-surface);
|
|
4074
|
+
|
|
4075
|
+
}
|
|
4076
|
+
.datepicker-content::-webkit-scrollbar-track {
|
|
4077
|
+
background: var(--md-sys-color-surface);
|
|
4078
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
4079
|
+
}
|
|
4058
4080
|
.popup {
|
|
4059
4081
|
position:absolute;
|
|
4060
4082
|
top:110%;
|
|
@@ -4065,8 +4087,8 @@ var ScbWcTest=function(a){"use strict";var wl;function d(o,e,t,i){var r=argument
|
|
|
4065
4087
|
display: flex;
|
|
4066
4088
|
align-items: center;
|
|
4067
4089
|
justify-content: space-between;
|
|
4068
|
-
margin-bottom:
|
|
4069
|
-
padding: 16px
|
|
4090
|
+
margin-bottom: 30px;
|
|
4091
|
+
padding: 20px 16px 0px 16px;
|
|
4070
4092
|
flex-wrap: wrap;
|
|
4071
4093
|
}
|
|
4072
4094
|
.datepicker-footer{
|
|
@@ -4088,7 +4110,7 @@ var ScbWcTest=function(a){"use strict";var wl;function d(o,e,t,i){var r=argument
|
|
|
4088
4110
|
color: var(--md-sys-color-on-surface-variant, #757575);
|
|
4089
4111
|
font-size: 16px;
|
|
4090
4112
|
font-weight: 600;
|
|
4091
|
-
padding:
|
|
4113
|
+
padding-bottom: 20px;
|
|
4092
4114
|
}
|
|
4093
4115
|
td {
|
|
4094
4116
|
text-align: center;
|