scb-wc-test 0.1.247 → 0.1.249
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.
- package/mvc/components/scb-datepicker/scb-datepicker.js +42 -30
- package/mvc/components/scb-dialog/scb-dialog.js +6 -2
- package/package.json +2 -2
- package/scb-datepicker/scb-datepicker.d.ts +5 -0
- package/scb-datepicker/scb-datepicker.js +123 -94
- package/scb-dialog/scb-dialog.js +61 -57
- package/scb-wc-test.bundle.js +22 -6
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as v,r as h,n as w,i as _,x as c,t as b}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(s,a,r){try{customElements.get(s)||t(s,a,r)}catch(o){var i=String(o||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var f=Object.defineProperty,y=Object.getOwnPropertyDescriptor,p=(e,t,s,a)=>{for(var r=a>1?void 0:a?y(t,s):t,i=e.length-1,o;i>=0;i--)(o=e[i])&&(r=(a?o(t,s,r):o(r))||r);return a&&r&&f(t,s,r),r};let l=class extends _{constructor(){super(...arguments),this._currentDate=new Date,this._selectedDate=null,this._showMonthDropdown=!1,this._showYearDropdown=!1,this.variant="date",this.lang="sv",this.selectedValue="",this.open=!0,this._selectedHour=0,this._selectedMinute=0,this._viewportMargin=8,this._popupOffset=4,this._onWindowReposition=()=>{this._positionPopupWithinViewport()},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._outsideClickHandler=e=>{this.open&&(e.composedPath().includes(this)||this._close())},this._prevMonth=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();t===0?this._currentDate=new Date(e-1,11,1):this._currentDate=new Date(e,t-1,1)},this._prevYear=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();this._currentDate=new Date(e-1,t,1)},this._nextMonth=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();t===11?this._currentDate=new Date(e+1,0,1):this._currentDate=new Date(e,t+1,1)},this._nextYear=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();this._currentDate=new Date(e+1,t,1)},this._onTimeChange=e=>{const t=e.target.value,[s,a]=t.split(":"),r=parseInt(s,10),i=parseInt(a,10);this._selectedHour=isNaN(r)?0:Math.max(0,Math.min(23,r)),this._selectedMinute=isNaN(i)?0:Math.max(0,Math.min(59,i)),this._fireDateTimeChange()},this._close=()=>{this.open=!1,this.dispatchEvent(new CustomEvent("datepicker-closed",{bubbles:!0,composed:!0}))}}_positionPopupWithinViewport(){if(!this.open)return;const e=this.parentElement?.getBoundingClientRect(),t=this.renderRoot.querySelector(".datepicker-popup");if(!e||!t)return;const s=window.innerWidth,a=window.innerHeight,r=Math.max(220,s-this._viewportMargin*2),i=Math.min(t.offsetWidth||380,r),o=t.offsetHeight||420,d=Math.min(Math.max(e.left,this._viewportMargin),s-this._viewportMargin-i)-e.left,u=a-e.bottom-this._viewportMargin,m=e.top-this._viewportMargin,g=u<o+this._popupOffset&&m>u;this.style.setProperty("--scb-datepicker-computed-width",`${i}px`),this.style.setProperty("--scb-datepicker-translate-x",`${d}px`),g?(this.style.setProperty("--scb-datepicker-top","auto"),this.style.setProperty("--scb-datepicker-bottom",`calc(100% + ${this._popupOffset}px)`),this.style.setProperty("--scb-datepicker-max-height",`${Math.max(0,m-this._popupOffset)}px`)):(this.style.setProperty("--scb-datepicker-top",`calc(100% + ${this._popupOffset}px)`),this.style.setProperty("--scb-datepicker-bottom","auto"),this.style.setProperty("--scb-datepicker-max-height",`${Math.max(0,u-this._popupOffset)}px`))}updated(e){if(super.updated(e),this.open?(window.addEventListener("mousedown",this._outsideClickHandler),window.addEventListener("resize",this._onWindowReposition,{passive:!0}),window.addEventListener("scroll",this._onWindowReposition,{passive:!0,capture:!0}),requestAnimationFrame(()=>this._positionPopupWithinViewport())):(window.removeEventListener("mousedown",this._outsideClickHandler),window.removeEventListener("resize",this._onWindowReposition),window.removeEventListener("scroll",this._onWindowReposition,!0)),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),this.variant==="datetime-local"&&(this._selectedHour=t.getHours(),this._selectedMinute=t.getMinutes()))}this.open&&requestAnimationFrame(()=>this._positionPopupWithinViewport())}disconnectedCallback(){window.removeEventListener("mousedown",this._outsideClickHandler),window.removeEventListener("resize",this._onWindowReposition),window.removeEventListener("scroll",this._onWindowReposition,!0),super.disconnectedCallback()}render(){if(!this.open)return c``;const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth(),s=new Date,a=this._getMonthDays(e,t),r=Array.from({length:101},(o,n)=>s.getFullYear()-50+n),i=this.variant==="datetime-local"&&!this._showMonthDropdown&&!this._showYearDropdown;return c`
|
|
2
2
|
<div class="datepicker-popup popup">
|
|
3
3
|
<div class="header">
|
|
4
4
|
<div class="month-selector ${this._showMonthDropdown?"open":""} ${this._showYearDropdown?"disable":""}">
|
|
@@ -36,43 +36,43 @@ import{a as m,r as p,n as u,i as w,x as d,t as _}from"../../vendor/vendor.js";im
|
|
|
36
36
|
<scb-icon-button icon="chevron_right" @click=${this._nextYear} aria-label=${this.lang=="sv"?"Nästa år":"Next year"}></scb-icon-button>
|
|
37
37
|
</div>
|
|
38
38
|
</div>
|
|
39
|
-
${this._showMonthDropdown||this._showYearDropdown?
|
|
39
|
+
${this._showMonthDropdown||this._showYearDropdown?c`<scb-divider></scb-divider>`:""}
|
|
40
40
|
<div class="datepicker-content" style="position:relative;">
|
|
41
|
-
${this._showMonthDropdown?
|
|
41
|
+
${this._showMonthDropdown?c`
|
|
42
42
|
<div class="dropdown-list">
|
|
43
|
-
${this._monthNames.map((o,
|
|
43
|
+
${this._monthNames.map((o,n)=>c`
|
|
44
44
|
<div
|
|
45
|
-
@keydown=${
|
|
45
|
+
@keydown=${d=>{(d.key==="Enter"||d.key===" ")&&(d.preventDefault(),this._onMonthChangeCustom(n))}}
|
|
46
46
|
tabindex="0"
|
|
47
|
-
class="dropdown-item${
|
|
48
|
-
@click=${()=>this._onMonthChangeCustom(
|
|
49
|
-
id=${
|
|
47
|
+
class="dropdown-item${n===t?" selected":""}"
|
|
48
|
+
@click=${()=>this._onMonthChangeCustom(n)}
|
|
49
|
+
id=${n===t?"selected-month":""}
|
|
50
50
|
>
|
|
51
|
-
${
|
|
51
|
+
${n===t?c`<md-icon>check</md-icon>`:""}
|
|
52
52
|
${o}
|
|
53
53
|
<md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
|
|
54
54
|
</div>
|
|
55
55
|
`)}
|
|
56
56
|
</div>
|
|
57
57
|
`:""}
|
|
58
|
-
${this._showYearDropdown?
|
|
58
|
+
${this._showYearDropdown?c`
|
|
59
59
|
<div class="dropdown-list">
|
|
60
|
-
${
|
|
60
|
+
${r.map(o=>c`
|
|
61
61
|
<div
|
|
62
|
-
@keydown=${
|
|
62
|
+
@keydown=${n=>{(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),this._onYearChangeCustom(o))}}
|
|
63
63
|
tabindex="0"
|
|
64
64
|
class="dropdown-item${o===e?" selected":""}"
|
|
65
65
|
@click=${()=>this._onYearChangeCustom(o)}
|
|
66
66
|
id=${o===e?"selected-year":""}
|
|
67
67
|
>
|
|
68
|
-
${o===e?
|
|
68
|
+
${o===e?c`<md-icon>check</md-icon>`:""}
|
|
69
69
|
${o}
|
|
70
70
|
<md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
|
|
71
71
|
</div>
|
|
72
72
|
`)}
|
|
73
73
|
</div>
|
|
74
74
|
`:""}
|
|
75
|
-
${!this._showMonthDropdown&&!this._showYearDropdown?
|
|
75
|
+
${!this._showMonthDropdown&&!this._showYearDropdown?c`
|
|
76
76
|
<div class="datepicker-calendar">
|
|
77
77
|
<table>
|
|
78
78
|
<thead>
|
|
@@ -81,19 +81,19 @@ import{a as m,r as p,n as u,i as w,x as d,t as _}from"../../vendor/vendor.js";im
|
|
|
81
81
|
</tr>
|
|
82
82
|
</thead>
|
|
83
83
|
<tbody>
|
|
84
|
-
${a.map(o=>
|
|
84
|
+
${a.map(o=>c`
|
|
85
85
|
<tr>
|
|
86
|
-
${o.map(
|
|
86
|
+
${o.map(n=>n?c`
|
|
87
87
|
<td>
|
|
88
88
|
<div
|
|
89
|
-
@keydown=${
|
|
89
|
+
@keydown=${d=>{(d.key==="Enter"||d.key===" ")&&(d.preventDefault(),this._selectDate(n))}}
|
|
90
90
|
role="button"
|
|
91
91
|
tabindex="0"
|
|
92
|
-
class="day${this._isToday(
|
|
93
|
-
@click=${()=>this._selectDate(
|
|
94
|
-
>${
|
|
92
|
+
class="day${this._isToday(n,s)?" today":""}${this._isSelected(n)?" selected":""}"
|
|
93
|
+
@click=${()=>this._selectDate(n)}
|
|
94
|
+
>${n.getDate()}<md-ripple></md-ripple><md-focus-ring></md-focus-ring></div>
|
|
95
95
|
</td>
|
|
96
|
-
`:
|
|
96
|
+
`:c`<td></td>`)}
|
|
97
97
|
</tr>
|
|
98
98
|
`)}
|
|
99
99
|
</tbody>
|
|
@@ -101,7 +101,7 @@ import{a as m,r as p,n as u,i as w,x as d,t as _}from"../../vendor/vendor.js";im
|
|
|
101
101
|
</div>
|
|
102
102
|
`:""}
|
|
103
103
|
</div>
|
|
104
|
-
${
|
|
104
|
+
${i?c`
|
|
105
105
|
<div style="padding: 0 24px;">
|
|
106
106
|
<label style="display:flex;align-items:center;gap:8px;">
|
|
107
107
|
<span>${this.lang=="sv"?"Tid:":"Time:"}</span>
|
|
@@ -110,18 +110,28 @@ import{a as m,r as p,n as u,i as w,x as d,t as _}from"../../vendor/vendor.js";im
|
|
|
110
110
|
</div>
|
|
111
111
|
`:""}
|
|
112
112
|
<div class="datepicker-footer">
|
|
113
|
-
${!this._showMonthDropdown&&!this._showYearDropdown?
|
|
113
|
+
${!this._showMonthDropdown&&!this._showYearDropdown?c`
|
|
114
114
|
<scb-button variant="text" label=${this.lang=="sv"?"Stäng":"Close"} @click=${this._close}></scb-button>
|
|
115
115
|
`:""}
|
|
116
116
|
</div>
|
|
117
117
|
</div>
|
|
118
|
-
`}_getMonthDays(e,t){const s=new Date(Date.UTC(e,t,1)),a=new Date(Date.UTC(e,t+1,0)),
|
|
118
|
+
`}_getMonthDays(e,t){const s=new Date(Date.UTC(e,t,1)),a=new Date(Date.UTC(e,t+1,0)),r=[];let i=[],o=s.getUTCDay(),n=o===0?6:o-1;for(let d=0;d<n;d++)i.push(null);for(let d=1;d<=a.getUTCDate();d++){const u=new Date(Date.UTC(e,t,d));i.push(u),i.length===7&&(r.push(i),i=[])}if(i.length){for(;i.length<7;)i.push(null);r.push(i)}return r}_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){if(this._selectedDate=e,this.variant==="datetime-local"){const t=new Date(e);t.setHours(this._selectedHour??0,this._selectedMinute??0,0,0),this._selectedHour=t.getHours(),this._selectedMinute=t.getMinutes();const s=r=>r.toString().padStart(2,"0"),a=`${t.getFullYear()}-${s(t.getMonth()+1)}-${s(t.getDate())} ${s(t.getHours())}:${s(t.getMinutes())}`;this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:a},bubbles:!0,composed:!0}))}else{const t=e.toISOString().slice(0,10);this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:t},bubbles:!0,composed:!0}))}}_fireDateTimeChange(){if(this.variant==="datetime-local"&&this._selectedDate){const e=new Date(this._selectedDate);e.setHours(this._selectedHour??0,this._selectedMinute??0,0,0);const t=a=>a.toString().padStart(2,"0"),s=`${e.getFullYear()}-${t(e.getMonth()+1)}-${t(e.getDate())} ${t(e.getHours())}:${t(e.getMinutes())}`;this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:s},bubbles:!0,composed:!0}))}}};l.styles=[v`
|
|
119
119
|
:host {
|
|
120
120
|
--scb-datepicker-width: 380px;
|
|
121
|
-
|
|
121
|
+
--scb-datepicker-z-index: 1100;
|
|
122
|
+
--scb-datepicker-viewport-margin: 8px;
|
|
123
|
+
--scb-datepicker-offset: var(--spacing-2, 4px);
|
|
124
|
+
max-width: var(--scb-datepicker-computed-width, min(var(--scb-datepicker-width), calc(100vw - (var(--scb-datepicker-viewport-margin) * 2))));
|
|
122
125
|
font-family: var(--brand-font);
|
|
123
126
|
color: var(--md-sys-color-on-surface);
|
|
124
|
-
|
|
127
|
+
display: block;
|
|
128
|
+
position: absolute;
|
|
129
|
+
top: var(--scb-datepicker-top, calc(100% + var(--scb-datepicker-offset)));
|
|
130
|
+
bottom: var(--scb-datepicker-bottom, auto);
|
|
131
|
+
left: 0;
|
|
132
|
+
width: var(--scb-datepicker-computed-width, min(var(--scb-datepicker-width), calc(100vw - (var(--scb-datepicker-viewport-margin) * 2))));
|
|
133
|
+
transform: translateX(var(--scb-datepicker-translate-x, 0px));
|
|
134
|
+
z-index: var(--scb-datepicker-z-index);
|
|
125
135
|
}
|
|
126
136
|
.month-selector, .year-selector {
|
|
127
137
|
display: flex;
|
|
@@ -188,8 +198,10 @@ import{a as m,r as p,n as u,i as w,x as d,t as _}from"../../vendor/vendor.js";im
|
|
|
188
198
|
background: var(--md-sys-color-surface);
|
|
189
199
|
border-radius: var(--md-sys-shape-corner-small);
|
|
190
200
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
|
|
191
|
-
max-width:
|
|
201
|
+
max-width: 100%;
|
|
192
202
|
width: 100%;
|
|
203
|
+
max-height: var(--scb-datepicker-max-height, 80vh);
|
|
204
|
+
overflow: auto;
|
|
193
205
|
font-family: var(--brand-font);
|
|
194
206
|
}
|
|
195
207
|
.datepicker-content{
|
|
@@ -213,9 +225,9 @@ import{a as m,r as p,n as u,i as w,x as d,t as _}from"../../vendor/vendor.js";im
|
|
|
213
225
|
}
|
|
214
226
|
.popup {
|
|
215
227
|
position:absolute;
|
|
216
|
-
top:
|
|
228
|
+
top:0;
|
|
217
229
|
left:0;
|
|
218
|
-
z-index:
|
|
230
|
+
z-index:1;
|
|
219
231
|
}
|
|
220
232
|
.header {
|
|
221
233
|
display: flex;
|
|
@@ -281,4 +293,4 @@ import{a as m,r as p,n as u,i as w,x as d,t as _}from"../../vendor/vendor.js";im
|
|
|
281
293
|
.close-datepicker:hover {
|
|
282
294
|
background: var(--md-sys-color-primary-container, #e3f2fd);
|
|
283
295
|
}
|
|
284
|
-
`];
|
|
296
|
+
`];p([h()],l.prototype,"_currentDate",2);p([h()],l.prototype,"_selectedDate",2);p([h()],l.prototype,"_showMonthDropdown",2);p([h()],l.prototype,"_showYearDropdown",2);p([w({type:String})],l.prototype,"variant",2);p([w({type:String})],l.prototype,"lang",2);p([w({type:String})],l.prototype,"selectedValue",2);p([w({type:Boolean})],l.prototype,"open",2);p([h()],l.prototype,"_selectedHour",2);p([h()],l.prototype,"_selectedMinute",2);l=p([b("scb-datepicker")],l);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as u,n as
|
|
1
|
+
import{a as u,n as s,i as h,E as p,x as r,t as m}from"../../vendor/vendor.js";import"../scb-button/scb-button.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-textfield/scb-textfield.js";import"../scb-checkbox/scb-checkbox.js";import"../scb-radio-button/scb-radio-button.js";import"../scb-switch/scb-switch.js";import"../scb-chip/scb-chip.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";import"../scb-datepicker/scb-datepicker.js";import"../scb-divider/scb-divider.js";import"../scb-checkbox/scb-checkbox-group.js";import"../scb-radio-button/scb-radio-group.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var i=customElements.define.bind(customElements);customElements.define=function(e,a,c){try{customElements.get(e)||i(e,a,c)}catch(d){var l=String(d||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var g=Object.defineProperty,f=Object.getOwnPropertyDescriptor,o=(t,i,e,a)=>{for(var c=a>1?void 0:a?f(i,e):i,l=t.length-1,d;l>=0;l--)(d=t[l])&&(c=(a?d(i,e,c):d(c))||c);return a&&c&&g(i,e,c),c};let n=class extends h{constructor(){super(...arguments),this.open=!1,this.inSb=!1,this.scrimClose=!0,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.variant="basic",this.label="",this.icon="",this.supportingText="",this.okButton="OK",this.cancelButton="Avbryt",this.deleteButton="Delete",this.confirmButton="Ta bort",this.denyButton="Avbryt",this.resetButton="Återställ",this.submitButton="Spara",this.formId="",this.formAction="",this.formMethod="",this.__lastTriggerEl=null,this.__onDocumentClick=t=>{this.__getActionFromEvent(t)==="toggle"&&(this.__setOpen(!this.open),t.stopPropagation())},this.__onDocumentKeydown=t=>{this.open&&t.key==="Escape"&&(this.__fire("esc"),this.__setOpen(!1))},this.__onScrimClick=()=>{this.scrimClose&&(this.__fire("scrim"),this.__setOpen(!1))},this.__onOk=()=>{this.__fire("ok"),this.__setOpen(!1)},this.__onCancel=()=>{this.__fire("cancel"),this.__setOpen(!1)},this.__onConfirm=()=>{this.__fire("confirm"),this.__setOpen(!1)},this.__onDeny=()=>{this.__fire("deny"),this.__setOpen(!1)},this.__onReset=()=>{const t=this.shadowRoot?.querySelector("form");t instanceof HTMLFormElement&&(this.__clearGeneratedFormValues(t),t.reset()),(this.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0})??[]).forEach(e=>{const a=e.tagName;a==="SCB-TEXTFIELD"&&(e.value=""),a==="SCB-CHECKBOX"&&(e.checked=!1),a==="SCB-RADIO-BUTTON"&&(e.checked=!1),a==="SCB-SWITCH"&&(e.selected=!1),a==="SCB-CHIP"&&(e.selected=!1)}),this.__fire("reset")},this.__onSubmit=()=>{const t=this.shadowRoot?.querySelector("form");t instanceof HTMLFormElement&&(this.__syncSlottedFormValues(t),t.requestSubmit()),this.__fire("submit"),this.__setOpen(!1)},this.__onKeydownTrap=t=>{if(!this.open||t.key!=="Tab")return;const i=Array.from(this.shadowRoot.querySelectorAll('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])')).filter(c=>!c.hasAttribute("disabled"));if(!i.length)return;const e=i[0],a=i[i.length-1];t.shiftKey&&document.activeElement===e?(a.focus(),t.preventDefault()):!t.shiftKey&&document.activeElement===a&&(e.focus(),t.preventDefault())}}__getActionFromEvent(t){if(!this.id)return null;for(const i of t.composedPath())if(i instanceof Element){if(i.getAttribute("data-dialog-toggle")===this.id)return this.__lastTriggerEl=i,"toggle";if(i.getAttribute("aria-controls")===this.id)return this.__lastTriggerEl=i,"toggle"}return null}connectedCallback(){super.connectedCallback(),this.__applyZIndex(),this.__applyMaxSize(),document.addEventListener("click",this.__onDocumentClick,!1),document.addEventListener("keydown",this.__onDocumentKeydown,!0),this.addEventListener("keydown",this.__onKeydownTrap)}disconnectedCallback(){document.removeEventListener("click",this.__onDocumentClick,!1),document.removeEventListener("keydown",this.__onDocumentKeydown,!0),this.removeEventListener("keydown",this.__onKeydownTrap),super.disconnectedCallback()}__applyZIndex(){const t=typeof this.zIndex=="number"&&Number.isFinite(this.zIndex)?this.zIndex:void 0;if(t===void 0){this.style.removeProperty("--z-dialog-scrim"),this.style.removeProperty("--z-dialog");return}this.style.setProperty("--z-dialog-scrim",String(t)),this.style.setProperty("--z-dialog",String(t+1))}__applyMaxSize(){const t=(this.maxW??"").trim(),i=(this.maxH??"").trim();t?(this.style.setProperty("--scb-dialog-max-w",t),this.style.setProperty("--scb-dialog-width",`min(${t}, 90vw)`)):(this.style.removeProperty("--scb-dialog-max-w"),this.style.removeProperty("--scb-dialog-width")),i?this.style.setProperty("--scb-dialog-max-h",i):this.style.removeProperty("--scb-dialog-max-h")}updated(t){if(t.has("zIndex")&&this.__applyZIndex(),(t.has("maxW")||t.has("maxH"))&&this.__applyMaxSize(),t.has("open")){const i=t.get("open");this.__updateTriggersExpanded(),this.open&&!i?this.updateComplete.then(()=>{const e=this.shadowRoot?.querySelector('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])');e?e.focus():this.shadowRoot?.querySelector(".container")?.focus()}):!this.open&&i&&this.__lastTriggerEl?.focus?.(),this.__toggleScrollLock(this.open)}(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&this.__applySpacing()}__updateTriggersExpanded(){this.id&&document.querySelectorAll(`[aria-controls="${this.id}"], [data-dialog-toggle="${this.id}"]`).forEach(t=>{t.hasAttribute("aria-controls")&&t.setAttribute("aria-expanded",String(this.open))})}__toggleScrollLock(t){if(this.inSb)return;const i=document.documentElement;i.style.overflow=t?"hidden":""}mapSpacingToken(t){if(!t)return;const i=String(t).trim();if(i)return/^\d+$/.test(i)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(i,10)))})`:i}__applySpacing(){const t=this.mapSpacingToken(this.spacing),i=this.mapSpacingToken(this.spacingTop)??t,e=this.mapSpacingToken(this.spacingBottom)??t,a=this.mapSpacingToken(this.spacingLeft),c=this.mapSpacingToken(this.spacingRight);i?this.style.setProperty("--scb-dialog-spacing-block-start",i):this.style.removeProperty("--scb-dialog-spacing-block-start"),e?this.style.setProperty("--scb-dialog-spacing-block-end",e):this.style.removeProperty("--scb-dialog-spacing-block-end"),a?this.style.setProperty("--scb-dialog-spacing-inline-start",a):this.style.removeProperty("--scb-dialog-spacing-inline-start"),c?this.style.setProperty("--scb-dialog-spacing-inline-end",c):this.style.removeProperty("--scb-dialog-spacing-inline-end")}__setOpen(t){this.open=t,this.__fire(t?"open":"close")}__fire(t,i){this.dispatchEvent(new CustomEvent(t,{detail:i,bubbles:!0,composed:!0}))}__getSlottedElements(){const t=this.shadowRoot?.querySelector("slot");if(!(t instanceof HTMLSlotElement))return[];const i=t.assignedElements({flatten:!0}),e=[];for(const a of i)e.push(a,...Array.from(a.querySelectorAll("*")));return e}__appendHiddenFormValue(t,i,e){const a=document.createElement("input");a.type="hidden",a.name=i,a.value=e,a.setAttribute("data-scb-dialog-generated","true"),t.append(a)}__clearGeneratedFormValues(t){t.querySelectorAll('input[data-scb-dialog-generated="true"]').forEach(i=>i.remove())}__syncSlottedFormValues(t){this.__clearGeneratedFormValues(t),this.__getSlottedElements().forEach(e=>{if(!(e instanceof HTMLElement))return;const a=(e.getAttribute("name")??"").trim();if(!(!a||e.disabled===!0||e.hasAttribute("disabled"))){if(e instanceof HTMLInputElement){if(e.form===t)return;const l=(e.type||"").toLowerCase();if(l==="checkbox"||l==="radio"){e.checked&&this.__appendHiddenFormValue(t,a,e.value||"on");return}this.__appendHiddenFormValue(t,a,e.value??"");return}if(e instanceof HTMLTextAreaElement){if(e.form===t)return;this.__appendHiddenFormValue(t,a,e.value??"");return}if(e instanceof HTMLSelectElement){if(e.form===t)return;if(e.multiple){Array.from(e.selectedOptions).forEach(l=>{this.__appendHiddenFormValue(t,a,l.value)});return}this.__appendHiddenFormValue(t,a,e.value??"");return}switch(e.tagName){case"SCB-TEXTFIELD":this.__appendHiddenFormValue(t,a,String(e.value??""));return;case"SCB-CHECKBOX":e.checked&&this.__appendHiddenFormValue(t,a,String(e.value??e.getAttribute("value")??"on"));return;case"SCB-RADIO-BUTTON":e.checked&&this.__appendHiddenFormValue(t,a,String(e.value??e.getAttribute("value")??"on"));return;case"SCB-SWITCH":(e.selected||e.checked)&&this.__appendHiddenFormValue(t,a,String(e.value??e.getAttribute("value")??"on"));return;case"SCB-CHIP":e.selected&&this.__appendHiddenFormValue(t,a,String(e.value??e.getAttribute("value")??"on"));return;default:"value"in e&&this.__appendHiddenFormValue(t,a,String(e.value??""))}}})}__slotIsEmpty(){const t=this.shadowRoot?.querySelector("slot");return t?t.assignedElements({flatten:!0}).length===0:!0}renderHeader(t){const i=this.variant==="form"||this.variant==="floating"||this.variant==="iframe";return r`
|
|
2
2
|
<div class="header">
|
|
3
3
|
<div class="title">
|
|
4
4
|
${this.icon?r`<md-icon class="dialog-icon">${this.icon}</md-icon>`:p}
|
|
@@ -240,6 +240,10 @@ import{a as u,n as o,i as h,E as p,x as r,t as m}from"../../vendor/vendor.js";im
|
|
|
240
240
|
gap: var(--scb-form-gap, var(--spacing-6, 20px)); /* <— token + fallback */
|
|
241
241
|
}
|
|
242
242
|
|
|
243
|
+
:host([variant="form"]) .content {
|
|
244
|
+
overflow: visible;
|
|
245
|
+
}
|
|
246
|
+
|
|
243
247
|
:host([variant="floating"]) .container { --scb-dialog-min-w: var(--scb-dialog-min-w-floating, 360px); }
|
|
244
248
|
|
|
245
249
|
/* Choose: gör slottade radios vertikala med spacing */
|
|
@@ -258,4 +262,4 @@ import{a as u,n as o,i as h,E as p,x as r,t as m}from"../../vendor/vendor.js";im
|
|
|
258
262
|
to { opacity: 0; }
|
|
259
263
|
}
|
|
260
264
|
|
|
261
|
-
`;
|
|
265
|
+
`;o([s({type:Boolean,reflect:!0})],n.prototype,"open",2);o([s({type:String,attribute:"max-w",reflect:!0})],n.prototype,"maxW",2);o([s({type:String,attribute:"max-h",reflect:!0})],n.prototype,"maxH",2);o([s({type:Number,attribute:"z-index",reflect:!0})],n.prototype,"zIndex",2);o([s({type:Boolean,attribute:!1})],n.prototype,"inSb",2);o([s({type:Boolean,attribute:"scrim-close"})],n.prototype,"scrimClose",2);o([s({type:String,reflect:!0})],n.prototype,"spacing",2);o([s({type:String,attribute:"spacing-top",reflect:!0})],n.prototype,"spacingTop",2);o([s({type:String,attribute:"spacing-bottom",reflect:!0})],n.prototype,"spacingBottom",2);o([s({type:String,attribute:"spacing-left",reflect:!0})],n.prototype,"spacingLeft",2);o([s({type:String,attribute:"spacing-right",reflect:!0})],n.prototype,"spacingRight",2);o([s({type:String})],n.prototype,"variant",2);o([s({type:String})],n.prototype,"label",2);o([s({type:String})],n.prototype,"icon",2);o([s({type:String,attribute:"supporting-text"})],n.prototype,"supportingText",2);o([s({type:String,attribute:"ok-button"})],n.prototype,"okButton",2);o([s({type:String,attribute:"cancel-button"})],n.prototype,"cancelButton",2);o([s({type:String,attribute:"delete-button"})],n.prototype,"deleteButton",2);o([s({type:String,attribute:"confirm-button"})],n.prototype,"confirmButton",2);o([s({type:String,attribute:"deny-button"})],n.prototype,"denyButton",2);o([s({type:String,attribute:"reset-button"})],n.prototype,"resetButton",2);o([s({type:String,attribute:"submit-button"})],n.prototype,"submitButton",2);o([s({type:String,attribute:"form-id"})],n.prototype,"formId",2);o([s({type:String,attribute:"form-action"})],n.prototype,"formAction",2);o([s({type:String,attribute:"form-method"})],n.prototype,"formMethod",2);n=o([m("scb-dialog")],n);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.249",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -382,5 +382,5 @@
|
|
|
382
382
|
},
|
|
383
383
|
"./mvc/*": "./mvc/*"
|
|
384
384
|
},
|
|
385
|
-
"buildHash": "
|
|
385
|
+
"buildHash": "1B5C55D5BC0912753DB657F25DC6AA077FAB64180D0716BA611BF4DAD9FB9A0E"
|
|
386
386
|
}
|
|
@@ -10,8 +10,13 @@ export declare class ScbDatepicker extends LitElement {
|
|
|
10
10
|
open: boolean;
|
|
11
11
|
private _selectedHour;
|
|
12
12
|
private _selectedMinute;
|
|
13
|
+
private readonly _viewportMargin;
|
|
14
|
+
private readonly _popupOffset;
|
|
15
|
+
private _onWindowReposition;
|
|
16
|
+
private _positionPopupWithinViewport;
|
|
13
17
|
static styles: import('lit').CSSResult[];
|
|
14
18
|
updated(changed: PropertyValues): void;
|
|
19
|
+
disconnectedCallback(): void;
|
|
15
20
|
private _monthNames;
|
|
16
21
|
render(): TemplateResult;
|
|
17
22
|
private _getMonthDays;
|
|
@@ -1,19 +1,21 @@
|
|
|
1
|
-
import { css as
|
|
2
|
-
import { state as
|
|
1
|
+
import { css as b, LitElement as _, html as c } from "lit";
|
|
2
|
+
import { state as h, property as m, customElement as f } from "lit/decorators.js";
|
|
3
3
|
import "../scb-icon-button/scb-icon-button.js";
|
|
4
4
|
import "../scb-button/scb-button.js";
|
|
5
5
|
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
|
|
10
|
-
for (var
|
|
11
|
-
(o = e[
|
|
12
|
-
return
|
|
9
|
+
var D = Object.defineProperty, y = Object.getOwnPropertyDescriptor, l = (e, t, r, a) => {
|
|
10
|
+
for (var n = a > 1 ? void 0 : a ? y(t, r) : t, s = e.length - 1, o; s >= 0; s--)
|
|
11
|
+
(o = e[s]) && (n = (a ? o(t, r, n) : o(n)) || n);
|
|
12
|
+
return a && n && D(t, r, n), n;
|
|
13
13
|
};
|
|
14
|
-
let
|
|
14
|
+
let p = class extends _ {
|
|
15
15
|
constructor() {
|
|
16
|
-
super(...arguments), this._currentDate = /* @__PURE__ */ new Date(), this._selectedDate = null, this._showMonthDropdown = !1, this._showYearDropdown = !1, this.variant = "date", this.lang = "sv", this.selectedValue = "", this.open = !0, this._selectedHour = 0, this._selectedMinute = 0, this.
|
|
16
|
+
super(...arguments), this._currentDate = /* @__PURE__ */ new Date(), this._selectedDate = null, this._showMonthDropdown = !1, this._showYearDropdown = !1, this.variant = "date", this.lang = "sv", this.selectedValue = "", this.open = !0, this._selectedHour = 0, this._selectedMinute = 0, this._viewportMargin = 8, this._popupOffset = 4, this._onWindowReposition = () => {
|
|
17
|
+
this._positionPopupWithinViewport();
|
|
18
|
+
}, this._monthNames = [
|
|
17
19
|
this.lang == "sv" ? "Januari" : "January",
|
|
18
20
|
this.lang == "sv" ? "Februari" : "February",
|
|
19
21
|
this.lang == "sv" ? "Mars" : "March",
|
|
@@ -41,8 +43,8 @@ let c = class extends w {
|
|
|
41
43
|
const e = this._currentDate.getFullYear(), t = this._currentDate.getMonth();
|
|
42
44
|
this._currentDate = new Date(e + 1, t, 1);
|
|
43
45
|
}, this._onTimeChange = (e) => {
|
|
44
|
-
const t = e.target.value, [
|
|
45
|
-
this._selectedHour = isNaN(
|
|
46
|
+
const t = e.target.value, [r, a] = t.split(":"), n = parseInt(r, 10), s = parseInt(a, 10);
|
|
47
|
+
this._selectedHour = isNaN(n) ? 0 : Math.max(0, Math.min(23, n)), this._selectedMinute = isNaN(s) ? 0 : Math.max(0, Math.min(59, s)), this._fireDateTimeChange();
|
|
46
48
|
}, this._close = () => {
|
|
47
49
|
this.open = !1, this.dispatchEvent(new CustomEvent("datepicker-closed", {
|
|
48
50
|
bubbles: !0,
|
|
@@ -50,16 +52,31 @@ let c = class extends w {
|
|
|
50
52
|
}));
|
|
51
53
|
};
|
|
52
54
|
}
|
|
55
|
+
_positionPopupWithinViewport() {
|
|
56
|
+
var g;
|
|
57
|
+
if (!this.open) return;
|
|
58
|
+
const e = (g = this.parentElement) == null ? void 0 : g.getBoundingClientRect(), t = this.renderRoot.querySelector(".datepicker-popup");
|
|
59
|
+
if (!e || !t) return;
|
|
60
|
+
const r = window.innerWidth, a = window.innerHeight, n = Math.max(220, r - this._viewportMargin * 2), s = Math.min(t.offsetWidth || 380, n), o = t.offsetHeight || 420, d = Math.min(
|
|
61
|
+
Math.max(e.left, this._viewportMargin),
|
|
62
|
+
r - this._viewportMargin - s
|
|
63
|
+
) - e.left, u = a - e.bottom - this._viewportMargin, w = e.top - this._viewportMargin, v = u < o + this._popupOffset && w > u;
|
|
64
|
+
this.style.setProperty("--scb-datepicker-computed-width", `${s}px`), this.style.setProperty("--scb-datepicker-translate-x", `${d}px`), v ? (this.style.setProperty("--scb-datepicker-top", "auto"), this.style.setProperty("--scb-datepicker-bottom", `calc(100% + ${this._popupOffset}px)`), this.style.setProperty("--scb-datepicker-max-height", `${Math.max(0, w - this._popupOffset)}px`)) : (this.style.setProperty("--scb-datepicker-top", `calc(100% + ${this._popupOffset}px)`), this.style.setProperty("--scb-datepicker-bottom", "auto"), this.style.setProperty("--scb-datepicker-max-height", `${Math.max(0, u - this._popupOffset)}px`));
|
|
65
|
+
}
|
|
53
66
|
updated(e) {
|
|
54
|
-
if (super.updated(e), this.open ? window.addEventListener("mousedown", this._outsideClickHandler) : window.removeEventListener("mousedown", this._outsideClickHandler), e.has("selectedValue") && this.selectedValue) {
|
|
67
|
+
if (super.updated(e), this.open ? (window.addEventListener("mousedown", this._outsideClickHandler), window.addEventListener("resize", this._onWindowReposition, { passive: !0 }), window.addEventListener("scroll", this._onWindowReposition, { passive: !0, capture: !0 }), requestAnimationFrame(() => this._positionPopupWithinViewport())) : (window.removeEventListener("mousedown", this._outsideClickHandler), window.removeEventListener("resize", this._onWindowReposition), window.removeEventListener("scroll", this._onWindowReposition, !0)), e.has("selectedValue") && this.selectedValue) {
|
|
55
68
|
const t = new Date(this.selectedValue);
|
|
56
69
|
isNaN(t.getTime()) || (this._selectedDate = t, this._currentDate = new Date(t.getFullYear(), t.getMonth(), 1), this.variant === "datetime-local" && (this._selectedHour = t.getHours(), this._selectedMinute = t.getMinutes()));
|
|
57
70
|
}
|
|
71
|
+
this.open && requestAnimationFrame(() => this._positionPopupWithinViewport());
|
|
72
|
+
}
|
|
73
|
+
disconnectedCallback() {
|
|
74
|
+
window.removeEventListener("mousedown", this._outsideClickHandler), window.removeEventListener("resize", this._onWindowReposition), window.removeEventListener("scroll", this._onWindowReposition, !0), super.disconnectedCallback();
|
|
58
75
|
}
|
|
59
76
|
render() {
|
|
60
|
-
if (!this.open) return
|
|
61
|
-
const e = this._currentDate.getFullYear(), t = this._currentDate.getMonth(),
|
|
62
|
-
return
|
|
77
|
+
if (!this.open) return c``;
|
|
78
|
+
const e = this._currentDate.getFullYear(), t = this._currentDate.getMonth(), r = /* @__PURE__ */ new Date(), a = this._getMonthDays(e, t), n = Array.from({ length: 101 }, (o, i) => r.getFullYear() - 50 + i), s = this.variant === "datetime-local" && !this._showMonthDropdown && !this._showYearDropdown;
|
|
79
|
+
return c`
|
|
63
80
|
<div class="datepicker-popup popup">
|
|
64
81
|
<div class="header">
|
|
65
82
|
<div class="month-selector ${this._showMonthDropdown ? "open" : ""} ${this._showYearDropdown ? "disable" : ""}">
|
|
@@ -101,47 +118,47 @@ let c = class extends w {
|
|
|
101
118
|
<scb-icon-button icon="chevron_right" @click=${this._nextYear} aria-label=${this.lang == "sv" ? "Nästa år" : "Next year"}></scb-icon-button>
|
|
102
119
|
</div>
|
|
103
120
|
</div>
|
|
104
|
-
${this._showMonthDropdown || this._showYearDropdown ?
|
|
121
|
+
${this._showMonthDropdown || this._showYearDropdown ? c`<scb-divider></scb-divider>` : ""}
|
|
105
122
|
<div class="datepicker-content" style="position:relative;">
|
|
106
|
-
${this._showMonthDropdown ?
|
|
123
|
+
${this._showMonthDropdown ? c`
|
|
107
124
|
<div class="dropdown-list">
|
|
108
|
-
${this._monthNames.map((o,
|
|
125
|
+
${this._monthNames.map((o, i) => c`
|
|
109
126
|
<div
|
|
110
|
-
@keydown=${(
|
|
111
|
-
(
|
|
127
|
+
@keydown=${(d) => {
|
|
128
|
+
(d.key === "Enter" || d.key === " ") && (d.preventDefault(), this._onMonthChangeCustom(i));
|
|
112
129
|
}}
|
|
113
130
|
tabindex="0"
|
|
114
|
-
class="dropdown-item${
|
|
115
|
-
@click=${() => this._onMonthChangeCustom(
|
|
116
|
-
id=${
|
|
131
|
+
class="dropdown-item${i === t ? " selected" : ""}"
|
|
132
|
+
@click=${() => this._onMonthChangeCustom(i)}
|
|
133
|
+
id=${i === t ? "selected-month" : ""}
|
|
117
134
|
>
|
|
118
|
-
${
|
|
135
|
+
${i === t ? c`<md-icon>check</md-icon>` : ""}
|
|
119
136
|
${o}
|
|
120
137
|
<md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
|
|
121
138
|
</div>
|
|
122
139
|
`)}
|
|
123
140
|
</div>
|
|
124
141
|
` : ""}
|
|
125
|
-
${this._showYearDropdown ?
|
|
142
|
+
${this._showYearDropdown ? c`
|
|
126
143
|
<div class="dropdown-list">
|
|
127
|
-
${
|
|
144
|
+
${n.map((o) => c`
|
|
128
145
|
<div
|
|
129
|
-
@keydown=${(
|
|
130
|
-
(
|
|
146
|
+
@keydown=${(i) => {
|
|
147
|
+
(i.key === "Enter" || i.key === " ") && (i.preventDefault(), this._onYearChangeCustom(o));
|
|
131
148
|
}}
|
|
132
149
|
tabindex="0"
|
|
133
150
|
class="dropdown-item${o === e ? " selected" : ""}"
|
|
134
151
|
@click=${() => this._onYearChangeCustom(o)}
|
|
135
152
|
id=${o === e ? "selected-year" : ""}
|
|
136
153
|
>
|
|
137
|
-
${o === e ?
|
|
154
|
+
${o === e ? c`<md-icon>check</md-icon>` : ""}
|
|
138
155
|
${o}
|
|
139
156
|
<md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
|
|
140
157
|
</div>
|
|
141
158
|
`)}
|
|
142
159
|
</div>
|
|
143
160
|
` : ""}
|
|
144
|
-
${!this._showMonthDropdown && !this._showYearDropdown ?
|
|
161
|
+
${!this._showMonthDropdown && !this._showYearDropdown ? c`
|
|
145
162
|
<div class="datepicker-calendar">
|
|
146
163
|
<table>
|
|
147
164
|
<thead>
|
|
@@ -150,21 +167,21 @@ let c = class extends w {
|
|
|
150
167
|
</tr>
|
|
151
168
|
</thead>
|
|
152
169
|
<tbody>
|
|
153
|
-
${
|
|
170
|
+
${a.map((o) => c`
|
|
154
171
|
<tr>
|
|
155
|
-
${o.map((
|
|
172
|
+
${o.map((i) => i ? c`
|
|
156
173
|
<td>
|
|
157
174
|
<div
|
|
158
|
-
@keydown=${(
|
|
159
|
-
(
|
|
175
|
+
@keydown=${(d) => {
|
|
176
|
+
(d.key === "Enter" || d.key === " ") && (d.preventDefault(), this._selectDate(i));
|
|
160
177
|
}}
|
|
161
178
|
role="button"
|
|
162
179
|
tabindex="0"
|
|
163
|
-
class="day${this._isToday(
|
|
164
|
-
@click=${() => this._selectDate(
|
|
165
|
-
>${
|
|
180
|
+
class="day${this._isToday(i, r) ? " today" : ""}${this._isSelected(i) ? " selected" : ""}"
|
|
181
|
+
@click=${() => this._selectDate(i)}
|
|
182
|
+
>${i.getDate()}<md-ripple></md-ripple><md-focus-ring></md-focus-ring></div>
|
|
166
183
|
</td>
|
|
167
|
-
` :
|
|
184
|
+
` : c`<td></td>`)}
|
|
168
185
|
</tr>
|
|
169
186
|
`)}
|
|
170
187
|
</tbody>
|
|
@@ -172,7 +189,7 @@ let c = class extends w {
|
|
|
172
189
|
</div>
|
|
173
190
|
` : ""}
|
|
174
191
|
</div>
|
|
175
|
-
${
|
|
192
|
+
${s ? c`
|
|
176
193
|
<div style="padding: 0 24px;">
|
|
177
194
|
<label style="display:flex;align-items:center;gap:8px;">
|
|
178
195
|
<span>${this.lang == "sv" ? "Tid:" : "Time:"}</span>
|
|
@@ -181,7 +198,7 @@ let c = class extends w {
|
|
|
181
198
|
</div>
|
|
182
199
|
` : ""}
|
|
183
200
|
<div class="datepicker-footer">
|
|
184
|
-
${!this._showMonthDropdown && !this._showYearDropdown ?
|
|
201
|
+
${!this._showMonthDropdown && !this._showYearDropdown ? c`
|
|
185
202
|
<scb-button variant="text" label=${this.lang == "sv" ? "Stäng" : "Close"} @click=${this._close}></scb-button>
|
|
186
203
|
` : ""}
|
|
187
204
|
</div>
|
|
@@ -189,18 +206,18 @@ let c = class extends w {
|
|
|
189
206
|
`;
|
|
190
207
|
}
|
|
191
208
|
_getMonthDays(e, t) {
|
|
192
|
-
const
|
|
193
|
-
let
|
|
194
|
-
for (let
|
|
195
|
-
for (let
|
|
196
|
-
const
|
|
197
|
-
|
|
209
|
+
const r = new Date(Date.UTC(e, t, 1)), a = new Date(Date.UTC(e, t + 1, 0)), n = [];
|
|
210
|
+
let s = [], o = r.getUTCDay(), i = o === 0 ? 6 : o - 1;
|
|
211
|
+
for (let d = 0; d < i; d++) s.push(null);
|
|
212
|
+
for (let d = 1; d <= a.getUTCDate(); d++) {
|
|
213
|
+
const u = new Date(Date.UTC(e, t, d));
|
|
214
|
+
s.push(u), s.length === 7 && (n.push(s), s = []);
|
|
198
215
|
}
|
|
199
|
-
if (
|
|
200
|
-
for (;
|
|
201
|
-
|
|
216
|
+
if (s.length) {
|
|
217
|
+
for (; s.length < 7; ) s.push(null);
|
|
218
|
+
n.push(s);
|
|
202
219
|
}
|
|
203
|
-
return
|
|
220
|
+
return n;
|
|
204
221
|
}
|
|
205
222
|
_toggleMonthDropdown() {
|
|
206
223
|
this._showMonthDropdown = !this._showMonthDropdown, this._showMonthDropdown && (this._showYearDropdown = !1, setTimeout(() => {
|
|
@@ -232,9 +249,9 @@ let c = class extends w {
|
|
|
232
249
|
if (this._selectedDate = e, this.variant === "datetime-local") {
|
|
233
250
|
const t = new Date(e);
|
|
234
251
|
t.setHours(this._selectedHour ?? 0, this._selectedMinute ?? 0, 0, 0), this._selectedHour = t.getHours(), this._selectedMinute = t.getMinutes();
|
|
235
|
-
const
|
|
252
|
+
const r = (n) => n.toString().padStart(2, "0"), a = `${t.getFullYear()}-${r(t.getMonth() + 1)}-${r(t.getDate())} ${r(t.getHours())}:${r(t.getMinutes())}`;
|
|
236
253
|
this.dispatchEvent(new CustomEvent("date-selected", {
|
|
237
|
-
detail: { value:
|
|
254
|
+
detail: { value: a },
|
|
238
255
|
bubbles: !0,
|
|
239
256
|
composed: !0
|
|
240
257
|
}));
|
|
@@ -251,23 +268,33 @@ let c = class extends w {
|
|
|
251
268
|
if (this.variant === "datetime-local" && this._selectedDate) {
|
|
252
269
|
const e = new Date(this._selectedDate);
|
|
253
270
|
e.setHours(this._selectedHour ?? 0, this._selectedMinute ?? 0, 0, 0);
|
|
254
|
-
const t = (
|
|
271
|
+
const t = (a) => a.toString().padStart(2, "0"), r = `${e.getFullYear()}-${t(e.getMonth() + 1)}-${t(e.getDate())} ${t(e.getHours())}:${t(e.getMinutes())}`;
|
|
255
272
|
this.dispatchEvent(new CustomEvent("date-selected", {
|
|
256
|
-
detail: { value:
|
|
273
|
+
detail: { value: r },
|
|
257
274
|
bubbles: !0,
|
|
258
275
|
composed: !0
|
|
259
276
|
}));
|
|
260
277
|
}
|
|
261
278
|
}
|
|
262
279
|
};
|
|
263
|
-
|
|
264
|
-
|
|
280
|
+
p.styles = [
|
|
281
|
+
b`
|
|
265
282
|
:host {
|
|
266
283
|
--scb-datepicker-width: 380px;
|
|
267
|
-
|
|
284
|
+
--scb-datepicker-z-index: 1100;
|
|
285
|
+
--scb-datepicker-viewport-margin: 8px;
|
|
286
|
+
--scb-datepicker-offset: var(--spacing-2, 4px);
|
|
287
|
+
max-width: var(--scb-datepicker-computed-width, min(var(--scb-datepicker-width), calc(100vw - (var(--scb-datepicker-viewport-margin) * 2))));
|
|
268
288
|
font-family: var(--brand-font);
|
|
269
289
|
color: var(--md-sys-color-on-surface);
|
|
270
|
-
|
|
290
|
+
display: block;
|
|
291
|
+
position: absolute;
|
|
292
|
+
top: var(--scb-datepicker-top, calc(100% + var(--scb-datepicker-offset)));
|
|
293
|
+
bottom: var(--scb-datepicker-bottom, auto);
|
|
294
|
+
left: 0;
|
|
295
|
+
width: var(--scb-datepicker-computed-width, min(var(--scb-datepicker-width), calc(100vw - (var(--scb-datepicker-viewport-margin) * 2))));
|
|
296
|
+
transform: translateX(var(--scb-datepicker-translate-x, 0px));
|
|
297
|
+
z-index: var(--scb-datepicker-z-index);
|
|
271
298
|
}
|
|
272
299
|
.month-selector, .year-selector {
|
|
273
300
|
display: flex;
|
|
@@ -334,8 +361,10 @@ c.styles = [
|
|
|
334
361
|
background: var(--md-sys-color-surface);
|
|
335
362
|
border-radius: var(--md-sys-shape-corner-small);
|
|
336
363
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
|
|
337
|
-
max-width:
|
|
364
|
+
max-width: 100%;
|
|
338
365
|
width: 100%;
|
|
366
|
+
max-height: var(--scb-datepicker-max-height, 80vh);
|
|
367
|
+
overflow: auto;
|
|
339
368
|
font-family: var(--brand-font);
|
|
340
369
|
}
|
|
341
370
|
.datepicker-content{
|
|
@@ -359,9 +388,9 @@ c.styles = [
|
|
|
359
388
|
}
|
|
360
389
|
.popup {
|
|
361
390
|
position:absolute;
|
|
362
|
-
top:
|
|
391
|
+
top:0;
|
|
363
392
|
left:0;
|
|
364
|
-
z-index:
|
|
393
|
+
z-index:1;
|
|
365
394
|
}
|
|
366
395
|
.header {
|
|
367
396
|
display: flex;
|
|
@@ -429,39 +458,39 @@ c.styles = [
|
|
|
429
458
|
}
|
|
430
459
|
`
|
|
431
460
|
];
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
],
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
],
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
],
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
],
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
],
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
],
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
],
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
],
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
],
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
],
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
],
|
|
461
|
+
l([
|
|
462
|
+
h()
|
|
463
|
+
], p.prototype, "_currentDate", 2);
|
|
464
|
+
l([
|
|
465
|
+
h()
|
|
466
|
+
], p.prototype, "_selectedDate", 2);
|
|
467
|
+
l([
|
|
468
|
+
h()
|
|
469
|
+
], p.prototype, "_showMonthDropdown", 2);
|
|
470
|
+
l([
|
|
471
|
+
h()
|
|
472
|
+
], p.prototype, "_showYearDropdown", 2);
|
|
473
|
+
l([
|
|
474
|
+
m({ type: String })
|
|
475
|
+
], p.prototype, "variant", 2);
|
|
476
|
+
l([
|
|
477
|
+
m({ type: String })
|
|
478
|
+
], p.prototype, "lang", 2);
|
|
479
|
+
l([
|
|
480
|
+
m({ type: String })
|
|
481
|
+
], p.prototype, "selectedValue", 2);
|
|
482
|
+
l([
|
|
483
|
+
m({ type: Boolean })
|
|
484
|
+
], p.prototype, "open", 2);
|
|
485
|
+
l([
|
|
486
|
+
h()
|
|
487
|
+
], p.prototype, "_selectedHour", 2);
|
|
488
|
+
l([
|
|
489
|
+
h()
|
|
490
|
+
], p.prototype, "_selectedMinute", 2);
|
|
491
|
+
p = l([
|
|
492
|
+
f("scb-datepicker")
|
|
493
|
+
], p);
|
|
465
494
|
export {
|
|
466
|
-
|
|
495
|
+
p as ScbDatepicker
|
|
467
496
|
};
|
package/scb-dialog/scb-dialog.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { css as
|
|
2
|
-
import { property as
|
|
1
|
+
import { css as u, LitElement as m, nothing as p, html as l } from "lit";
|
|
2
|
+
import { property as s, customElement as g } from "lit/decorators.js";
|
|
3
3
|
import "../scb-button/scb-button.js";
|
|
4
4
|
import "../scb-icon-button/scb-icon-button.js";
|
|
5
5
|
import "../scb-textfield/scb-textfield.js";
|
|
@@ -8,7 +8,7 @@ import "../scb-radio-button/scb-radio-button.js";
|
|
|
8
8
|
import "../scb-switch/scb-switch.js";
|
|
9
9
|
import "../scb-chip/scb-chip.js";
|
|
10
10
|
import "@material/web/icon/icon.js";
|
|
11
|
-
var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor,
|
|
11
|
+
var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (t, e, i, a) => {
|
|
12
12
|
for (var r = a > 1 ? void 0 : a ? b(e, i) : e, c = t.length - 1, d; c >= 0; c--)
|
|
13
13
|
(d = t[c]) && (r = (a ? d(e, i, r) : d(r)) || r);
|
|
14
14
|
return a && r && f(e, i, r), r;
|
|
@@ -98,11 +98,11 @@ let n = class extends m {
|
|
|
98
98
|
if (t.has("zIndex") && this.__applyZIndex(), (t.has("maxW") || t.has("maxH")) && this.__applyMaxSize(), t.has("open")) {
|
|
99
99
|
const a = t.get("open");
|
|
100
100
|
this.__updateTriggersExpanded(), this.open && !a ? this.updateComplete.then(() => {
|
|
101
|
-
var c, d,
|
|
101
|
+
var c, d, h;
|
|
102
102
|
const r = (c = this.shadowRoot) == null ? void 0 : c.querySelector(
|
|
103
103
|
'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'
|
|
104
104
|
);
|
|
105
|
-
r ? r.focus() : (
|
|
105
|
+
r ? r.focus() : (h = (d = this.shadowRoot) == null ? void 0 : d.querySelector(".container")) == null || h.focus();
|
|
106
106
|
}) : !this.open && a && ((i = (e = this.__lastTriggerEl) == null ? void 0 : e.focus) == null || i.call(e)), this.__toggleScrollLock(this.open);
|
|
107
107
|
}
|
|
108
108
|
(t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom") || t.has("spacingLeft") || t.has("spacingRight")) && this.__applySpacing();
|
|
@@ -308,7 +308,7 @@ let n = class extends m {
|
|
|
308
308
|
`;
|
|
309
309
|
}
|
|
310
310
|
};
|
|
311
|
-
n.styles =
|
|
311
|
+
n.styles = u`
|
|
312
312
|
:host {
|
|
313
313
|
display:block;
|
|
314
314
|
position:relative;
|
|
@@ -497,6 +497,10 @@ n.styles = h`
|
|
|
497
497
|
gap: var(--scb-form-gap, var(--spacing-6, 20px)); /* <— token + fallback */
|
|
498
498
|
}
|
|
499
499
|
|
|
500
|
+
:host([variant="form"]) .content {
|
|
501
|
+
overflow: visible;
|
|
502
|
+
}
|
|
503
|
+
|
|
500
504
|
:host([variant="floating"]) .container { --scb-dialog-min-w: var(--scb-dialog-min-w-floating, 360px); }
|
|
501
505
|
|
|
502
506
|
/* Choose: gör slottade radios vertikala med spacing */
|
|
@@ -516,82 +520,82 @@ n.styles = h`
|
|
|
516
520
|
}
|
|
517
521
|
|
|
518
522
|
`;
|
|
519
|
-
|
|
520
|
-
|
|
523
|
+
o([
|
|
524
|
+
s({ type: Boolean, reflect: !0 })
|
|
521
525
|
], n.prototype, "open", 2);
|
|
522
|
-
|
|
523
|
-
|
|
526
|
+
o([
|
|
527
|
+
s({ type: String, attribute: "max-w", reflect: !0 })
|
|
524
528
|
], n.prototype, "maxW", 2);
|
|
525
|
-
|
|
526
|
-
|
|
529
|
+
o([
|
|
530
|
+
s({ type: String, attribute: "max-h", reflect: !0 })
|
|
527
531
|
], n.prototype, "maxH", 2);
|
|
528
|
-
|
|
529
|
-
|
|
532
|
+
o([
|
|
533
|
+
s({ type: Number, attribute: "z-index", reflect: !0 })
|
|
530
534
|
], n.prototype, "zIndex", 2);
|
|
531
|
-
|
|
532
|
-
|
|
535
|
+
o([
|
|
536
|
+
s({ type: Boolean, attribute: !1 })
|
|
533
537
|
], n.prototype, "inSb", 2);
|
|
534
|
-
|
|
535
|
-
|
|
538
|
+
o([
|
|
539
|
+
s({ type: Boolean, attribute: "scrim-close" })
|
|
536
540
|
], n.prototype, "scrimClose", 2);
|
|
537
|
-
|
|
538
|
-
|
|
541
|
+
o([
|
|
542
|
+
s({ type: String, reflect: !0 })
|
|
539
543
|
], n.prototype, "spacing", 2);
|
|
540
|
-
|
|
541
|
-
|
|
544
|
+
o([
|
|
545
|
+
s({ type: String, attribute: "spacing-top", reflect: !0 })
|
|
542
546
|
], n.prototype, "spacingTop", 2);
|
|
543
|
-
|
|
544
|
-
|
|
547
|
+
o([
|
|
548
|
+
s({ type: String, attribute: "spacing-bottom", reflect: !0 })
|
|
545
549
|
], n.prototype, "spacingBottom", 2);
|
|
546
|
-
|
|
547
|
-
|
|
550
|
+
o([
|
|
551
|
+
s({ type: String, attribute: "spacing-left", reflect: !0 })
|
|
548
552
|
], n.prototype, "spacingLeft", 2);
|
|
549
|
-
|
|
550
|
-
|
|
553
|
+
o([
|
|
554
|
+
s({ type: String, attribute: "spacing-right", reflect: !0 })
|
|
551
555
|
], n.prototype, "spacingRight", 2);
|
|
552
|
-
|
|
553
|
-
|
|
556
|
+
o([
|
|
557
|
+
s({ type: String })
|
|
554
558
|
], n.prototype, "variant", 2);
|
|
555
|
-
|
|
556
|
-
|
|
559
|
+
o([
|
|
560
|
+
s({ type: String })
|
|
557
561
|
], n.prototype, "label", 2);
|
|
558
|
-
|
|
559
|
-
|
|
562
|
+
o([
|
|
563
|
+
s({ type: String })
|
|
560
564
|
], n.prototype, "icon", 2);
|
|
561
|
-
|
|
562
|
-
|
|
565
|
+
o([
|
|
566
|
+
s({ type: String, attribute: "supporting-text" })
|
|
563
567
|
], n.prototype, "supportingText", 2);
|
|
564
|
-
|
|
565
|
-
|
|
568
|
+
o([
|
|
569
|
+
s({ type: String, attribute: "ok-button" })
|
|
566
570
|
], n.prototype, "okButton", 2);
|
|
567
|
-
|
|
568
|
-
|
|
571
|
+
o([
|
|
572
|
+
s({ type: String, attribute: "cancel-button" })
|
|
569
573
|
], n.prototype, "cancelButton", 2);
|
|
570
|
-
|
|
571
|
-
|
|
574
|
+
o([
|
|
575
|
+
s({ type: String, attribute: "delete-button" })
|
|
572
576
|
], n.prototype, "deleteButton", 2);
|
|
573
|
-
|
|
574
|
-
|
|
577
|
+
o([
|
|
578
|
+
s({ type: String, attribute: "confirm-button" })
|
|
575
579
|
], n.prototype, "confirmButton", 2);
|
|
576
|
-
|
|
577
|
-
|
|
580
|
+
o([
|
|
581
|
+
s({ type: String, attribute: "deny-button" })
|
|
578
582
|
], n.prototype, "denyButton", 2);
|
|
579
|
-
|
|
580
|
-
|
|
583
|
+
o([
|
|
584
|
+
s({ type: String, attribute: "reset-button" })
|
|
581
585
|
], n.prototype, "resetButton", 2);
|
|
582
|
-
|
|
583
|
-
|
|
586
|
+
o([
|
|
587
|
+
s({ type: String, attribute: "submit-button" })
|
|
584
588
|
], n.prototype, "submitButton", 2);
|
|
585
|
-
|
|
586
|
-
|
|
589
|
+
o([
|
|
590
|
+
s({ type: String, attribute: "form-id" })
|
|
587
591
|
], n.prototype, "formId", 2);
|
|
588
|
-
|
|
589
|
-
|
|
592
|
+
o([
|
|
593
|
+
s({ type: String, attribute: "form-action" })
|
|
590
594
|
], n.prototype, "formAction", 2);
|
|
591
|
-
|
|
592
|
-
|
|
595
|
+
o([
|
|
596
|
+
s({ type: String, attribute: "form-method" })
|
|
593
597
|
], n.prototype, "formMethod", 2);
|
|
594
|
-
n =
|
|
598
|
+
n = o([
|
|
595
599
|
g("scb-dialog")
|
|
596
600
|
], n);
|
|
597
601
|
export {
|
package/scb-wc-test.bundle.js
CHANGED
|
@@ -3454,7 +3454,7 @@
|
|
|
3454
3454
|
:host([overlay][direction='vertical'][anchor='start']) {
|
|
3455
3455
|
left: calc(var(--scb-divider-gap) / -2);
|
|
3456
3456
|
}
|
|
3457
|
-
`,Cr([o({type:String,reflect:!0})],Ii.prototype,"variant",2),Cr([o({type:String,reflect:!0})],Ii.prototype,"direction",2),Cr([o({type:String,reflect:!0})],Ii.prototype,"inset",2),Cr([o({type:Boolean,reflect:!0})],Ii.prototype,"overlay",2),Cr([o({type:String,reflect:!0})],Ii.prototype,"anchor",2),Cr([o({type:String,reflect:!0})],Ii.prototype,"spacing",2),Ii=Cr([y("scb-divider")],Ii);var Ab=Object.defineProperty,Ib=Object.getOwnPropertyDescriptor,Jt=(t,e,i,r)=>{for(var s=r>1?void 0:r?Ib(e,i):e,a=t.length-1,n;a>=0;a--)(n=t[a])&&(s=(r?n(e,i,s):n(s))||s);return r&&s&&Ab(e,i,s),s};let gt=class extends _{constructor(){super(...arguments),this._currentDate=new Date,this._selectedDate=null,this._showMonthDropdown=!1,this._showYearDropdown=!1,this.variant="date",this.lang="sv",this.selectedValue="",this.open=!0,this._selectedHour=0,this._selectedMinute=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._outsideClickHandler=t=>{this.open&&(t.composedPath().includes(this)||this._close())},this._prevMonth=()=>{const t=this._currentDate.getFullYear(),e=this._currentDate.getMonth();e===0?this._currentDate=new Date(t-1,11,1):this._currentDate=new Date(t,e-1,1)},this._prevYear=()=>{const t=this._currentDate.getFullYear(),e=this._currentDate.getMonth();this._currentDate=new Date(t-1,e,1)},this._nextMonth=()=>{const t=this._currentDate.getFullYear(),e=this._currentDate.getMonth();e===11?this._currentDate=new Date(t+1,0,1):this._currentDate=new Date(t,e+1,1)},this._nextYear=()=>{const t=this._currentDate.getFullYear(),e=this._currentDate.getMonth();this._currentDate=new Date(t+1,e,1)},this._onTimeChange=t=>{const e=t.target.value,[i,r]=e.split(":"),s=parseInt(i,10),a=parseInt(r,10);this._selectedHour=isNaN(s)?0:Math.max(0,Math.min(23,s)),this._selectedMinute=isNaN(a)?0:Math.max(0,Math.min(59,a)),this._fireDateTimeChange()},this._close=()=>{this.open=!1,this.dispatchEvent(new CustomEvent("datepicker-closed",{bubbles:!0,composed:!0}))}}updated(t){if(super.updated(t),this.open?window.addEventListener("mousedown",this._outsideClickHandler):window.removeEventListener("mousedown",this._outsideClickHandler),t.has("selectedValue")&&this.selectedValue){const e=new Date(this.selectedValue);isNaN(e.getTime())||(this._selectedDate=e,this._currentDate=new Date(e.getFullYear(),e.getMonth(),1),this.variant==="datetime-local"&&(this._selectedHour=e.getHours(),this._selectedMinute=e.getMinutes()))}}render(){if(!this.open)return c``;const t=this._currentDate.getFullYear(),e=this._currentDate.getMonth(),i=new Date,r=this._getMonthDays(t,e),s=Array.from({length:101},(n,l)=>i.getFullYear()-50+l),a=this.variant==="datetime-local"&&!this._showMonthDropdown&&!this._showYearDropdown;return c`
|
|
3457
|
+
`,Cr([o({type:String,reflect:!0})],Ii.prototype,"variant",2),Cr([o({type:String,reflect:!0})],Ii.prototype,"direction",2),Cr([o({type:String,reflect:!0})],Ii.prototype,"inset",2),Cr([o({type:Boolean,reflect:!0})],Ii.prototype,"overlay",2),Cr([o({type:String,reflect:!0})],Ii.prototype,"anchor",2),Cr([o({type:String,reflect:!0})],Ii.prototype,"spacing",2),Ii=Cr([y("scb-divider")],Ii);var Ab=Object.defineProperty,Ib=Object.getOwnPropertyDescriptor,Jt=(t,e,i,r)=>{for(var s=r>1?void 0:r?Ib(e,i):e,a=t.length-1,n;a>=0;a--)(n=t[a])&&(s=(r?n(e,i,s):n(s))||s);return r&&s&&Ab(e,i,s),s};let gt=class extends _{constructor(){super(...arguments),this._currentDate=new Date,this._selectedDate=null,this._showMonthDropdown=!1,this._showYearDropdown=!1,this.variant="date",this.lang="sv",this.selectedValue="",this.open=!0,this._selectedHour=0,this._selectedMinute=0,this._viewportMargin=8,this._popupOffset=4,this._onWindowReposition=()=>{this._positionPopupWithinViewport()},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._outsideClickHandler=t=>{this.open&&(t.composedPath().includes(this)||this._close())},this._prevMonth=()=>{const t=this._currentDate.getFullYear(),e=this._currentDate.getMonth();e===0?this._currentDate=new Date(t-1,11,1):this._currentDate=new Date(t,e-1,1)},this._prevYear=()=>{const t=this._currentDate.getFullYear(),e=this._currentDate.getMonth();this._currentDate=new Date(t-1,e,1)},this._nextMonth=()=>{const t=this._currentDate.getFullYear(),e=this._currentDate.getMonth();e===11?this._currentDate=new Date(t+1,0,1):this._currentDate=new Date(t,e+1,1)},this._nextYear=()=>{const t=this._currentDate.getFullYear(),e=this._currentDate.getMonth();this._currentDate=new Date(t+1,e,1)},this._onTimeChange=t=>{const e=t.target.value,[i,r]=e.split(":"),s=parseInt(i,10),a=parseInt(r,10);this._selectedHour=isNaN(s)?0:Math.max(0,Math.min(23,s)),this._selectedMinute=isNaN(a)?0:Math.max(0,Math.min(59,a)),this._fireDateTimeChange()},this._close=()=>{this.open=!1,this.dispatchEvent(new CustomEvent("datepicker-closed",{bubbles:!0,composed:!0}))}}_positionPopupWithinViewport(){var m;if(!this.open)return;const t=(m=this.parentElement)==null?void 0:m.getBoundingClientRect(),e=this.renderRoot.querySelector(".datepicker-popup");if(!t||!e)return;const i=window.innerWidth,r=window.innerHeight,s=Math.max(220,i-this._viewportMargin*2),a=Math.min(e.offsetWidth||380,s),n=e.offsetHeight||420,d=Math.min(Math.max(t.left,this._viewportMargin),i-this._viewportMargin-a)-t.left,h=r-t.bottom-this._viewportMargin,v=t.top-this._viewportMargin,b=h<n+this._popupOffset&&v>h;this.style.setProperty("--scb-datepicker-computed-width",`${a}px`),this.style.setProperty("--scb-datepicker-translate-x",`${d}px`),b?(this.style.setProperty("--scb-datepicker-top","auto"),this.style.setProperty("--scb-datepicker-bottom",`calc(100% + ${this._popupOffset}px)`),this.style.setProperty("--scb-datepicker-max-height",`${Math.max(0,v-this._popupOffset)}px`)):(this.style.setProperty("--scb-datepicker-top",`calc(100% + ${this._popupOffset}px)`),this.style.setProperty("--scb-datepicker-bottom","auto"),this.style.setProperty("--scb-datepicker-max-height",`${Math.max(0,h-this._popupOffset)}px`))}updated(t){if(super.updated(t),this.open?(window.addEventListener("mousedown",this._outsideClickHandler),window.addEventListener("resize",this._onWindowReposition,{passive:!0}),window.addEventListener("scroll",this._onWindowReposition,{passive:!0,capture:!0}),requestAnimationFrame(()=>this._positionPopupWithinViewport())):(window.removeEventListener("mousedown",this._outsideClickHandler),window.removeEventListener("resize",this._onWindowReposition),window.removeEventListener("scroll",this._onWindowReposition,!0)),t.has("selectedValue")&&this.selectedValue){const e=new Date(this.selectedValue);isNaN(e.getTime())||(this._selectedDate=e,this._currentDate=new Date(e.getFullYear(),e.getMonth(),1),this.variant==="datetime-local"&&(this._selectedHour=e.getHours(),this._selectedMinute=e.getMinutes()))}this.open&&requestAnimationFrame(()=>this._positionPopupWithinViewport())}disconnectedCallback(){window.removeEventListener("mousedown",this._outsideClickHandler),window.removeEventListener("resize",this._onWindowReposition),window.removeEventListener("scroll",this._onWindowReposition,!0),super.disconnectedCallback()}render(){if(!this.open)return c``;const t=this._currentDate.getFullYear(),e=this._currentDate.getMonth(),i=new Date,r=this._getMonthDays(t,e),s=Array.from({length:101},(n,l)=>i.getFullYear()-50+l),a=this.variant==="datetime-local"&&!this._showMonthDropdown&&!this._showYearDropdown;return c`
|
|
3458
3458
|
<div class="datepicker-popup popup">
|
|
3459
3459
|
<div class="header">
|
|
3460
3460
|
<div class="month-selector ${this._showMonthDropdown?"open":""} ${this._showYearDropdown?"disable":""}">
|
|
@@ -3574,10 +3574,20 @@
|
|
|
3574
3574
|
`}_getMonthDays(t,e){const i=new Date(Date.UTC(t,e,1)),r=new Date(Date.UTC(t,e+1,0)),s=[];let a=[],n=i.getUTCDay(),l=n===0?6:n-1;for(let d=0;d<l;d++)a.push(null);for(let d=1;d<=r.getUTCDate();d++){const h=new Date(Date.UTC(t,e,d));a.push(h),a.length===7&&(s.push(a),a=[])}if(a.length){for(;a.length<7;)a.push(null);s.push(a)}return s}_toggleMonthDropdown(){this._showMonthDropdown=!this._showMonthDropdown,this._showMonthDropdown&&(this._showYearDropdown=!1,setTimeout(()=>{const t=this.renderRoot.querySelector("#selected-month");t&&t.scrollIntoView({block:"center"})},0))}_toggleYearDropdown(){this._showYearDropdown=!this._showYearDropdown,this._showYearDropdown&&(this._showMonthDropdown=!1,setTimeout(()=>{const t=this.renderRoot.querySelector("#selected-year");t&&t.scrollIntoView({block:"center"})},0))}_onMonthChangeCustom(t){const e=this._currentDate.getFullYear();this._currentDate=new Date(e,t,1),this._showMonthDropdown=!1}_onYearChangeCustom(t){const e=this._currentDate.getMonth();this._currentDate=new Date(t,e,1),this._showYearDropdown=!1}_isToday(t,e){return t.getDate()===e.getDate()&&t.getMonth()===e.getMonth()&&t.getFullYear()===e.getFullYear()}_isSelected(t){return this._selectedDate&&t.getDate()===this._selectedDate.getDate()&&t.getMonth()===this._selectedDate.getMonth()&&t.getFullYear()===this._selectedDate.getFullYear()}_selectDate(t){if(this._selectedDate=t,this.variant==="datetime-local"){const e=new Date(t);e.setHours(this._selectedHour??0,this._selectedMinute??0,0,0),this._selectedHour=e.getHours(),this._selectedMinute=e.getMinutes();const i=s=>s.toString().padStart(2,"0"),r=`${e.getFullYear()}-${i(e.getMonth()+1)}-${i(e.getDate())} ${i(e.getHours())}:${i(e.getMinutes())}`;this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:r},bubbles:!0,composed:!0}))}else{const e=t.toISOString().slice(0,10);this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:e},bubbles:!0,composed:!0}))}}_fireDateTimeChange(){if(this.variant==="datetime-local"&&this._selectedDate){const t=new Date(this._selectedDate);t.setHours(this._selectedHour??0,this._selectedMinute??0,0,0);const e=r=>r.toString().padStart(2,"0"),i=`${t.getFullYear()}-${e(t.getMonth()+1)}-${e(t.getDate())} ${e(t.getHours())}:${e(t.getMinutes())}`;this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:i},bubbles:!0,composed:!0}))}}};gt.styles=[f`
|
|
3575
3575
|
:host {
|
|
3576
3576
|
--scb-datepicker-width: 380px;
|
|
3577
|
-
|
|
3577
|
+
--scb-datepicker-z-index: 1100;
|
|
3578
|
+
--scb-datepicker-viewport-margin: 8px;
|
|
3579
|
+
--scb-datepicker-offset: var(--spacing-2, 4px);
|
|
3580
|
+
max-width: var(--scb-datepicker-computed-width, min(var(--scb-datepicker-width), calc(100vw - (var(--scb-datepicker-viewport-margin) * 2))));
|
|
3578
3581
|
font-family: var(--brand-font);
|
|
3579
3582
|
color: var(--md-sys-color-on-surface);
|
|
3580
|
-
|
|
3583
|
+
display: block;
|
|
3584
|
+
position: absolute;
|
|
3585
|
+
top: var(--scb-datepicker-top, calc(100% + var(--scb-datepicker-offset)));
|
|
3586
|
+
bottom: var(--scb-datepicker-bottom, auto);
|
|
3587
|
+
left: 0;
|
|
3588
|
+
width: var(--scb-datepicker-computed-width, min(var(--scb-datepicker-width), calc(100vw - (var(--scb-datepicker-viewport-margin) * 2))));
|
|
3589
|
+
transform: translateX(var(--scb-datepicker-translate-x, 0px));
|
|
3590
|
+
z-index: var(--scb-datepicker-z-index);
|
|
3581
3591
|
}
|
|
3582
3592
|
.month-selector, .year-selector {
|
|
3583
3593
|
display: flex;
|
|
@@ -3644,8 +3654,10 @@
|
|
|
3644
3654
|
background: var(--md-sys-color-surface);
|
|
3645
3655
|
border-radius: var(--md-sys-shape-corner-small);
|
|
3646
3656
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
|
|
3647
|
-
max-width:
|
|
3657
|
+
max-width: 100%;
|
|
3648
3658
|
width: 100%;
|
|
3659
|
+
max-height: var(--scb-datepicker-max-height, 80vh);
|
|
3660
|
+
overflow: auto;
|
|
3649
3661
|
font-family: var(--brand-font);
|
|
3650
3662
|
}
|
|
3651
3663
|
.datepicker-content{
|
|
@@ -3669,9 +3681,9 @@
|
|
|
3669
3681
|
}
|
|
3670
3682
|
.popup {
|
|
3671
3683
|
position:absolute;
|
|
3672
|
-
top:
|
|
3684
|
+
top:0;
|
|
3673
3685
|
left:0;
|
|
3674
|
-
z-index:
|
|
3686
|
+
z-index:1;
|
|
3675
3687
|
}
|
|
3676
3688
|
.header {
|
|
3677
3689
|
display: flex;
|
|
@@ -4977,6 +4989,10 @@ ${this.value}</textarea
|
|
|
4977
4989
|
gap: var(--scb-form-gap, var(--spacing-6, 20px)); /* <— token + fallback */
|
|
4978
4990
|
}
|
|
4979
4991
|
|
|
4992
|
+
:host([variant="form"]) .content {
|
|
4993
|
+
overflow: visible;
|
|
4994
|
+
}
|
|
4995
|
+
|
|
4980
4996
|
:host([variant="floating"]) .container { --scb-dialog-min-w: var(--scb-dialog-min-w-floating, 360px); }
|
|
4981
4997
|
|
|
4982
4998
|
/* Choose: gör slottade radios vertikala med spacing */
|