scb-wc-test 0.1.259 → 0.1.261
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 +25 -25
- package/mvc/components/scb-textfield/scb-textfield.js +3 -4
- package/package.json +2 -2
- package/scb-datepicker/scb-datepicker.d.ts +1 -0
- package/scb-datepicker/scb-datepicker.js +63 -48
- package/scb-textfield/scb-textfield.js +4 -5
- package/scb-wc-test.bundle.js +22 -23
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as k,r as h,n as m,i as x,x as c,t as $}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 t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(o,a,r){try{customElements.get(o)||e(o,a,r)}catch(s){var i=String(s||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw s}}}}catch{}})();var M=Object.defineProperty,Y=Object.getOwnPropertyDescriptor,l=(t,e,o,a)=>{for(var r=a>1?void 0:a?Y(e,o):e,i=t.length-1,s;i>=0;i--)(s=t[i])&&(r=(a?s(e,o,r):s(r))||r);return a&&r&&M(e,o,r),r};let p=class extends x{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,[o,a]=e.split(":"),r=parseInt(o,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}))}}_isRenderedInsideDialog(){const t=this.getRootNode(),e=t instanceof ShadowRoot?t.host:null;return e instanceof HTMLElement&&e.closest("scb-dialog")?!0:!!this.closest("scb-dialog")}_positionPopupWithinViewport(){if(!this.open)return;const t=this.renderRoot.querySelector(".datepicker-popup");if(!t)return;const e=this.parentElement?.getBoundingClientRect();if(!e)return;const o=window.innerWidth,a=window.innerHeight,r=Math.max(220,o-this._viewportMargin*2);if(this._isRenderedInsideDialog()){const g=Math.min(t.offsetWidth||380,r),b=t.offsetHeight||420,_=(o-g)/2,f=(a-b)/2,y=_-e.left,D=f-e.top;this.style.setProperty("--scb-datepicker-position","absolute"),this.style.setProperty("--scb-datepicker-top",`${D}px`),this.style.setProperty("--scb-datepicker-bottom","auto"),this.style.setProperty("--scb-datepicker-left",`${y}px`),this.style.setProperty("--scb-datepicker-transform","none"),this.style.setProperty("--scb-datepicker-computed-width",`${g}px`),this.style.setProperty("--scb-datepicker-max-height",`${Math.max(220,a-this._viewportMargin*2)}px`);return}const i=Math.min(t.offsetWidth||380,r),s=t.offsetHeight||420,d=Math.min(Math.max(e.left,this._viewportMargin),o-this._viewportMargin-i)-e.left,u=a-e.bottom-this._viewportMargin,w=e.top-this._viewportMargin,v=u<s+this._popupOffset&&w>u;this.style.setProperty("--scb-datepicker-position","absolute"),this.style.setProperty("--scb-datepicker-computed-width",`${i}px`),this.style.setProperty("--scb-datepicker-left","0"),this.style.setProperty("--scb-datepicker-transform",`translateX(${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`))}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(),o=new Date,a=this._getMonthDays(t,e),r=Array.from({length:101},(s,n)=>o.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":""}">
|
|
@@ -8,9 +8,9 @@ import{a as v,r as h,n as w,i as _,x as c,t as b}from"../../vendor/vendor.js";im
|
|
|
8
8
|
tabindex=${this._showYearDropdown?-1:0}
|
|
9
9
|
class="dropdown-selected"
|
|
10
10
|
@click=${()=>this._toggleMonthDropdown()}
|
|
11
|
-
@keydown=${
|
|
11
|
+
@keydown=${s=>{(s.key==="Enter"||s.key===" ")&&(s.preventDefault(),this._toggleMonthDropdown())}}
|
|
12
12
|
>
|
|
13
|
-
${this._monthNames[
|
|
13
|
+
${this._monthNames[e].slice(0,3)}
|
|
14
14
|
<md-icon>arrow_drop_down</md-icon>
|
|
15
15
|
<md-focus-ring></md-focus-ring>
|
|
16
16
|
<md-ripple></md-ripple>
|
|
@@ -25,9 +25,9 @@ import{a as v,r as h,n as w,i as _,x as c,t as b}from"../../vendor/vendor.js";im
|
|
|
25
25
|
tabindex=${this._showMonthDropdown?-1:0}
|
|
26
26
|
class="dropdown-selected"
|
|
27
27
|
@click=${()=>this._toggleYearDropdown()}
|
|
28
|
-
@keydown=${
|
|
28
|
+
@keydown=${s=>{(s.key==="Enter"||s.key===" ")&&(s.preventDefault(),this._toggleYearDropdown())}}
|
|
29
29
|
>
|
|
30
|
-
${
|
|
30
|
+
${t}
|
|
31
31
|
<md-icon>arrow_drop_down</md-icon>
|
|
32
32
|
<md-focus-ring></md-focus-ring>
|
|
33
33
|
<md-ripple></md-ripple>
|
|
@@ -40,16 +40,16 @@ import{a as v,r as h,n as w,i as _,x as c,t as b}from"../../vendor/vendor.js";im
|
|
|
40
40
|
<div class="datepicker-content" style="position:relative;">
|
|
41
41
|
${this._showMonthDropdown?c`
|
|
42
42
|
<div class="dropdown-list">
|
|
43
|
-
${this._monthNames.map((
|
|
43
|
+
${this._monthNames.map((s,n)=>c`
|
|
44
44
|
<div
|
|
45
45
|
@keydown=${d=>{(d.key==="Enter"||d.key===" ")&&(d.preventDefault(),this._onMonthChangeCustom(n))}}
|
|
46
46
|
tabindex="0"
|
|
47
|
-
class="dropdown-item${n===
|
|
47
|
+
class="dropdown-item${n===e?" selected":""}"
|
|
48
48
|
@click=${()=>this._onMonthChangeCustom(n)}
|
|
49
|
-
id=${n===
|
|
49
|
+
id=${n===e?"selected-month":""}
|
|
50
50
|
>
|
|
51
|
-
${n===
|
|
52
|
-
${
|
|
51
|
+
${n===e?c`<md-icon>check</md-icon>`:""}
|
|
52
|
+
${s}
|
|
53
53
|
<md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
|
|
54
54
|
</div>
|
|
55
55
|
`)}
|
|
@@ -57,16 +57,16 @@ import{a as v,r as h,n as w,i as _,x as c,t as b}from"../../vendor/vendor.js";im
|
|
|
57
57
|
`:""}
|
|
58
58
|
${this._showYearDropdown?c`
|
|
59
59
|
<div class="dropdown-list">
|
|
60
|
-
${r.map(
|
|
60
|
+
${r.map(s=>c`
|
|
61
61
|
<div
|
|
62
|
-
@keydown=${n=>{(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),this._onYearChangeCustom(
|
|
62
|
+
@keydown=${n=>{(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),this._onYearChangeCustom(s))}}
|
|
63
63
|
tabindex="0"
|
|
64
|
-
class="dropdown-item${
|
|
65
|
-
@click=${()=>this._onYearChangeCustom(
|
|
66
|
-
id=${
|
|
64
|
+
class="dropdown-item${s===t?" selected":""}"
|
|
65
|
+
@click=${()=>this._onYearChangeCustom(s)}
|
|
66
|
+
id=${s===t?"selected-year":""}
|
|
67
67
|
>
|
|
68
|
-
${
|
|
69
|
-
${
|
|
68
|
+
${s===t?c`<md-icon>check</md-icon>`:""}
|
|
69
|
+
${s}
|
|
70
70
|
<md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
|
|
71
71
|
</div>
|
|
72
72
|
`)}
|
|
@@ -81,15 +81,15 @@ import{a as v,r as h,n as w,i as _,x as c,t as b}from"../../vendor/vendor.js";im
|
|
|
81
81
|
</tr>
|
|
82
82
|
</thead>
|
|
83
83
|
<tbody>
|
|
84
|
-
${a.map(
|
|
84
|
+
${a.map(s=>c`
|
|
85
85
|
<tr>
|
|
86
|
-
${
|
|
86
|
+
${s.map(n=>n?c`
|
|
87
87
|
<td>
|
|
88
88
|
<div
|
|
89
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(n,
|
|
92
|
+
class="day${this._isToday(n,o)?" today":""}${this._isSelected(n)?" selected":""}"
|
|
93
93
|
@click=${()=>this._selectDate(n)}
|
|
94
94
|
>${n.getDate()}<md-ripple></md-ripple><md-focus-ring></md-focus-ring></div>
|
|
95
95
|
</td>
|
|
@@ -115,7 +115,7 @@ import{a as v,r as h,n as w,i as _,x as c,t as b}from"../../vendor/vendor.js";im
|
|
|
115
115
|
`:""}
|
|
116
116
|
</div>
|
|
117
117
|
</div>
|
|
118
|
-
`}_getMonthDays(e
|
|
118
|
+
`}_getMonthDays(t,e){const o=new Date(Date.UTC(t,e,1)),a=new Date(Date.UTC(t,e+1,0)),r=[];let i=[],s=o.getUTCDay(),n=s===0?6:s-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(t,e,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 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 o=r=>r.toString().padStart(2,"0"),a=`${e.getFullYear()}-${o(e.getMonth()+1)}-${o(e.getDate())} ${o(e.getHours())}:${o(e.getMinutes())}`;this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:a},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=a=>a.toString().padStart(2,"0"),o=`${t.getFullYear()}-${e(t.getMonth()+1)}-${e(t.getDate())} ${e(t.getHours())}:${e(t.getMinutes())}`;this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:o},bubbles:!0,composed:!0}))}}};p.styles=[k`
|
|
119
119
|
:host {
|
|
120
120
|
--scb-datepicker-width: 380px;
|
|
121
121
|
--scb-datepicker-z-index: 1100;
|
|
@@ -125,12 +125,12 @@ import{a as v,r as h,n as w,i as _,x as c,t as b}from"../../vendor/vendor.js";im
|
|
|
125
125
|
font-family: var(--brand-font);
|
|
126
126
|
color: var(--md-sys-color-on-surface);
|
|
127
127
|
display: block;
|
|
128
|
-
position: absolute;
|
|
128
|
+
position: var(--scb-datepicker-position, absolute);
|
|
129
129
|
top: var(--scb-datepicker-top, calc(100% + var(--scb-datepicker-offset)));
|
|
130
130
|
bottom: var(--scb-datepicker-bottom, auto);
|
|
131
|
-
left: 0;
|
|
131
|
+
left: var(--scb-datepicker-left, 0);
|
|
132
132
|
width: var(--scb-datepicker-computed-width, min(var(--scb-datepicker-width), calc(100vw - (var(--scb-datepicker-viewport-margin) * 2))));
|
|
133
|
-
transform:
|
|
133
|
+
transform: var(--scb-datepicker-transform, translateX(0px));
|
|
134
134
|
z-index: var(--scb-datepicker-z-index);
|
|
135
135
|
}
|
|
136
136
|
.month-selector, .year-selector {
|
|
@@ -293,4 +293,4 @@ import{a as v,r as h,n as w,i as _,x as c,t as b}from"../../vendor/vendor.js";im
|
|
|
293
293
|
.close-datepicker:hover {
|
|
294
294
|
background: var(--md-sys-color-primary-container, #e3f2fd);
|
|
295
295
|
}
|
|
296
|
-
`];
|
|
296
|
+
`];l([h()],p.prototype,"_currentDate",2);l([h()],p.prototype,"_selectedDate",2);l([h()],p.prototype,"_showMonthDropdown",2);l([h()],p.prototype,"_showYearDropdown",2);l([m({type:String})],p.prototype,"variant",2);l([m({type:String})],p.prototype,"lang",2);l([m({type:String})],p.prototype,"selectedValue",2);l([m({type:Boolean})],p.prototype,"open",2);l([h()],p.prototype,"_selectedHour",2);l([h()],p.prototype,"_selectedMinute",2);p=l([$("scb-datepicker")],p);
|
|
@@ -43,15 +43,14 @@ import{a as _,n,r as w,i as $,x as c,t as k}from"../../vendor/vendor.js";import"
|
|
|
43
43
|
<div class="ripple-wrapper">
|
|
44
44
|
<textarea
|
|
45
45
|
class="scb-textfield"
|
|
46
|
+
.value=${this.value}
|
|
46
47
|
?disabled=${this.disabled}
|
|
47
48
|
name="${this.name}"
|
|
48
49
|
id="${this._inputId}"
|
|
49
50
|
?required=${this.required}
|
|
50
51
|
aria-invalid=${this.error?"true":"false"}
|
|
51
52
|
aria-describedby=${i}
|
|
52
|
-
>
|
|
53
|
-
${this.value}</textarea
|
|
54
|
-
>
|
|
53
|
+
></textarea>
|
|
55
54
|
<md-ripple></md-ripple>
|
|
56
55
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
57
56
|
</div>
|
|
@@ -197,7 +196,7 @@ ${this.value}</textarea
|
|
|
197
196
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
198
197
|
</div>
|
|
199
198
|
</div>
|
|
200
|
-
`}firstUpdated(e){super.firstUpdated(e),this._initialValue=this.value,l(this,r,m).call(this),l(this,r,f).call(this)
|
|
199
|
+
`}firstUpdated(e){super.firstUpdated(e),this._initialValue=this.value,this._internals&&this.value&&this._internals.setFormValue(this.value),l(this,r,m).call(this),l(this,r,f).call(this)}updated(e){if(super.updated(e),this.toggleAttribute("aria-disabled",this.disabled),e.has("size")&&this._syncDensityForSize(),this._internals&&(e.has("value")||e.has("disabled"))){const t=this.disabled?null:this.value;this._internals.setFormValue(t)}e.has("type")&&(l(this,r,m).call(this),this._hasRenderedOnce&&l(this,r,y).call(this)),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&l(this,r,f).call(this),this._hasRenderedOnce=!0}formDisabledCallback(e){this.disabled=e}connectedCallback(){super.connectedCallback(),this._syncDensityForSize(),this._inputId=this.id||`scb-textfield-${Math.random().toString(36).substr(2,9)}`,this._formSubmitHandler=e=>{this.reportValidity()||(e.preventDefault(),e.stopPropagation())},this._form=this.closest("form"),this._form&&(this._form.addEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler=()=>{this.value=this._initialValue;const e=this.shadowRoot?.querySelector(".scb-textfield");e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)&&(e.value=this._initialValue),this.error=!1},this._form.addEventListener("reset",this._formResetHandler,!0)),window.addEventListener("keydown",this._onGlobalKeydown,!0),window.addEventListener("pointerdown",this._onGlobalPointerDown,!0)}disconnectedCallback(){super.disconnectedCallback(),this._form&&this._formSubmitHandler&&(this._form.removeEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0)),l(this,r,x).call(this),window.removeEventListener("keydown",this._onGlobalKeydown,!0),window.removeEventListener("pointerdown",this._onGlobalPointerDown,!0)}reportValidity(){const e=this.shadowRoot?.querySelector(".scb-textfield");if(e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)){this.required&&!e.value?e.setCustomValidity(this.errorText||"Ogiltig inmatning."):e.setCustomValidity("");const t=e.reportValidity();this.error=!t;const i=t?"":this.errorText||e.validationMessage||"Ogiltig inmatning.";return t||(this.errorText=i),this._internals&&(t?this._internals.setValidity({}):this._internals.setValidity({customError:!0},i,e)),t}return!0}_onClearClick(){const e=this.shadowRoot?.querySelector(".scb-textfield");if(e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)){if(e.value="",this.value="",this._internals){const t=this.disabled?null:this.value;this._internals.setFormValue(t),this._internals.setValidity({})}this.error=!1,e.setCustomValidity(""),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0})),e.focus()}}};r=new WeakSet;f=function(){const e=l(this,r,u).call(this,this.spacing),t=l(this,r,u).call(this,this.spacingTop)??e,i=l(this,r,u).call(this,this.spacingBottom)??e,o=l(this,r,u).call(this,this.spacingLeft),d=l(this,r,u).call(this,this.spacingRight);t?this.style.setProperty("--scb-textfield-spacing-block-start",t):this.style.removeProperty("--scb-textfield-spacing-block-start"),i?this.style.setProperty("--scb-textfield-spacing-block-end",i):this.style.removeProperty("--scb-textfield-spacing-block-end"),o?this.style.setProperty("--scb-textfield-spacing-inline-start",o):this.style.removeProperty("--scb-textfield-spacing-inline-start"),d?this.style.setProperty("--scb-textfield-spacing-inline-end",d):this.style.removeProperty("--scb-textfield-spacing-inline-end")};u=function(e){if(!e)return;const t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t};g=function(){if(!this.pattern)return;if(!this.value){this.error=!1;return}const e=new RegExp(this.pattern);this.error=!e.test(this.value)};m=function(){const e=this.shadowRoot?.querySelector(".scb-textfield");e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)&&this._boundField!==e&&(l(this,r,x).call(this),this._boundField=e,this.type!=="time"&&e.addEventListener("input",this._onFieldInput),e.addEventListener("change",this._onFieldChange),e.addEventListener("select",this._onFieldSelect),e.addEventListener("focus",this._onFieldFocus),e.addEventListener("blur",this._onFieldBlur))};x=function(){const e=this._boundField;e&&(e.removeEventListener("input",this._onFieldInput),e.removeEventListener("change",this._onFieldChange),e.removeEventListener("select",this._onFieldSelect),e.removeEventListener("focus",this._onFieldFocus),e.removeEventListener("blur",this._onFieldBlur),this._boundField=null)};y=function(){this._showDatepicker=!1;const e=this.shadowRoot?.querySelector(".scb-textfield");if(e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)&&(e.value="",e.setCustomValidity("")),this.value="",this.error=!1,this._internals){const t=this.disabled?null:"";this._internals.setFormValue(t),this._internals.setValidity({})}};b=function(){const e=this.renderRoot?.querySelector(".ripple-wrapper");e&&(this._inputFocused&&this._kbShouldShowRing?e.setAttribute("data-kb-focus","true"):e.removeAttribute("data-kb-focus"))};s.formAssociated=!0;s.styles=[_`
|
|
201
200
|
:host {
|
|
202
201
|
--scb-textfield-number-max-width: 280px;
|
|
203
202
|
--scb-textfield-text-max-width: 400px;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.261",
|
|
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": "539B13A4462D83F9EADD2A6F5DDB773482E28DEB538B172B958A22C50EAA9551"
|
|
386
386
|
}
|
|
@@ -13,6 +13,7 @@ export declare class ScbDatepicker extends LitElement {
|
|
|
13
13
|
private readonly _viewportMargin;
|
|
14
14
|
private readonly _popupOffset;
|
|
15
15
|
private _onWindowReposition;
|
|
16
|
+
private _isRenderedInsideDialog;
|
|
16
17
|
private _positionPopupWithinViewport;
|
|
17
18
|
static styles: import('lit').CSSResult[];
|
|
18
19
|
updated(changed: PropertyValues): void;
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import { css as
|
|
2
|
-
import { state as h, property as m, customElement as
|
|
1
|
+
import { css as x, LitElement as $, html as c } from "lit";
|
|
2
|
+
import { state as h, property as m, customElement as M } 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 a &&
|
|
9
|
+
var Y = Object.defineProperty, C = Object.getOwnPropertyDescriptor, l = (e, t, s, a) => {
|
|
10
|
+
for (var i = a > 1 ? void 0 : a ? C(t, s) : t, r = e.length - 1, o; r >= 0; r--)
|
|
11
|
+
(o = e[r]) && (i = (a ? o(t, s, i) : o(i)) || i);
|
|
12
|
+
return a && i && Y(t, s, i), i;
|
|
13
13
|
};
|
|
14
|
-
let p = class extends
|
|
14
|
+
let p = class extends $ {
|
|
15
15
|
constructor() {
|
|
16
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
17
|
this._positionPopupWithinViewport();
|
|
@@ -43,8 +43,8 @@ let p = class extends _ {
|
|
|
43
43
|
const e = this._currentDate.getFullYear(), t = this._currentDate.getMonth();
|
|
44
44
|
this._currentDate = new Date(e + 1, t, 1);
|
|
45
45
|
}, this._onTimeChange = (e) => {
|
|
46
|
-
const t = e.target.value, [
|
|
47
|
-
this._selectedHour = isNaN(
|
|
46
|
+
const t = e.target.value, [s, a] = t.split(":"), i = parseInt(s, 10), r = parseInt(a, 10);
|
|
47
|
+
this._selectedHour = isNaN(i) ? 0 : Math.max(0, Math.min(23, i)), this._selectedMinute = isNaN(r) ? 0 : Math.max(0, Math.min(59, r)), this._fireDateTimeChange();
|
|
48
48
|
}, this._close = () => {
|
|
49
49
|
this.open = !1, this.dispatchEvent(new CustomEvent("datepicker-closed", {
|
|
50
50
|
bubbles: !0,
|
|
@@ -52,16 +52,31 @@ let p = class extends _ {
|
|
|
52
52
|
}));
|
|
53
53
|
};
|
|
54
54
|
}
|
|
55
|
+
_isRenderedInsideDialog() {
|
|
56
|
+
const e = this.getRootNode(), t = e instanceof ShadowRoot ? e.host : null;
|
|
57
|
+
return t instanceof HTMLElement && t.closest("scb-dialog") ? !0 : !!this.closest("scb-dialog");
|
|
58
|
+
}
|
|
55
59
|
_positionPopupWithinViewport() {
|
|
56
60
|
var g;
|
|
57
61
|
if (!this.open) return;
|
|
58
|
-
const e =
|
|
59
|
-
if (!e
|
|
60
|
-
const
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
62
|
+
const e = this.renderRoot.querySelector(".datepicker-popup");
|
|
63
|
+
if (!e) return;
|
|
64
|
+
const t = (g = this.parentElement) == null ? void 0 : g.getBoundingClientRect();
|
|
65
|
+
if (!t) return;
|
|
66
|
+
const s = window.innerWidth, a = window.innerHeight, i = Math.max(220, s - this._viewportMargin * 2);
|
|
67
|
+
if (this._isRenderedInsideDialog()) {
|
|
68
|
+
const v = Math.min(e.offsetWidth || 380, i), _ = e.offsetHeight || 420, f = (s - v) / 2, y = (a - _) / 2, D = f - t.left, k = y - t.top;
|
|
69
|
+
this.style.setProperty("--scb-datepicker-position", "absolute"), this.style.setProperty("--scb-datepicker-top", `${k}px`), this.style.setProperty("--scb-datepicker-bottom", "auto"), this.style.setProperty("--scb-datepicker-left", `${D}px`), this.style.setProperty("--scb-datepicker-transform", "none"), this.style.setProperty("--scb-datepicker-computed-width", `${v}px`), this.style.setProperty(
|
|
70
|
+
"--scb-datepicker-max-height",
|
|
71
|
+
`${Math.max(220, a - this._viewportMargin * 2)}px`
|
|
72
|
+
);
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
const r = Math.min(e.offsetWidth || 380, i), o = e.offsetHeight || 420, d = Math.min(
|
|
76
|
+
Math.max(t.left, this._viewportMargin),
|
|
77
|
+
s - this._viewportMargin - r
|
|
78
|
+
) - t.left, u = a - t.bottom - this._viewportMargin, w = t.top - this._viewportMargin, b = u < o + this._popupOffset && w > u;
|
|
79
|
+
this.style.setProperty("--scb-datepicker-position", "absolute"), this.style.setProperty("--scb-datepicker-computed-width", `${r}px`), this.style.setProperty("--scb-datepicker-left", "0"), this.style.setProperty("--scb-datepicker-transform", `translateX(${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, 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
80
|
}
|
|
66
81
|
updated(e) {
|
|
67
82
|
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) {
|
|
@@ -75,7 +90,7 @@ let p = class extends _ {
|
|
|
75
90
|
}
|
|
76
91
|
render() {
|
|
77
92
|
if (!this.open) return c``;
|
|
78
|
-
const e = this._currentDate.getFullYear(), t = this._currentDate.getMonth(),
|
|
93
|
+
const e = this._currentDate.getFullYear(), t = this._currentDate.getMonth(), s = /* @__PURE__ */ new Date(), a = this._getMonthDays(e, t), i = Array.from({ length: 101 }, (o, n) => s.getFullYear() - 50 + n), r = this.variant === "datetime-local" && !this._showMonthDropdown && !this._showYearDropdown;
|
|
79
94
|
return c`
|
|
80
95
|
<div class="datepicker-popup popup">
|
|
81
96
|
<div class="header">
|
|
@@ -122,17 +137,17 @@ let p = class extends _ {
|
|
|
122
137
|
<div class="datepicker-content" style="position:relative;">
|
|
123
138
|
${this._showMonthDropdown ? c`
|
|
124
139
|
<div class="dropdown-list">
|
|
125
|
-
${this._monthNames.map((o,
|
|
140
|
+
${this._monthNames.map((o, n) => c`
|
|
126
141
|
<div
|
|
127
142
|
@keydown=${(d) => {
|
|
128
|
-
(d.key === "Enter" || d.key === " ") && (d.preventDefault(), this._onMonthChangeCustom(
|
|
143
|
+
(d.key === "Enter" || d.key === " ") && (d.preventDefault(), this._onMonthChangeCustom(n));
|
|
129
144
|
}}
|
|
130
145
|
tabindex="0"
|
|
131
|
-
class="dropdown-item${
|
|
132
|
-
@click=${() => this._onMonthChangeCustom(
|
|
133
|
-
id=${
|
|
146
|
+
class="dropdown-item${n === t ? " selected" : ""}"
|
|
147
|
+
@click=${() => this._onMonthChangeCustom(n)}
|
|
148
|
+
id=${n === t ? "selected-month" : ""}
|
|
134
149
|
>
|
|
135
|
-
${
|
|
150
|
+
${n === t ? c`<md-icon>check</md-icon>` : ""}
|
|
136
151
|
${o}
|
|
137
152
|
<md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
|
|
138
153
|
</div>
|
|
@@ -141,10 +156,10 @@ let p = class extends _ {
|
|
|
141
156
|
` : ""}
|
|
142
157
|
${this._showYearDropdown ? c`
|
|
143
158
|
<div class="dropdown-list">
|
|
144
|
-
${
|
|
159
|
+
${i.map((o) => c`
|
|
145
160
|
<div
|
|
146
|
-
@keydown=${(
|
|
147
|
-
(
|
|
161
|
+
@keydown=${(n) => {
|
|
162
|
+
(n.key === "Enter" || n.key === " ") && (n.preventDefault(), this._onYearChangeCustom(o));
|
|
148
163
|
}}
|
|
149
164
|
tabindex="0"
|
|
150
165
|
class="dropdown-item${o === e ? " selected" : ""}"
|
|
@@ -169,17 +184,17 @@ let p = class extends _ {
|
|
|
169
184
|
<tbody>
|
|
170
185
|
${a.map((o) => c`
|
|
171
186
|
<tr>
|
|
172
|
-
${o.map((
|
|
187
|
+
${o.map((n) => n ? c`
|
|
173
188
|
<td>
|
|
174
189
|
<div
|
|
175
190
|
@keydown=${(d) => {
|
|
176
|
-
(d.key === "Enter" || d.key === " ") && (d.preventDefault(), this._selectDate(
|
|
191
|
+
(d.key === "Enter" || d.key === " ") && (d.preventDefault(), this._selectDate(n));
|
|
177
192
|
}}
|
|
178
193
|
role="button"
|
|
179
194
|
tabindex="0"
|
|
180
|
-
class="day${this._isToday(
|
|
181
|
-
@click=${() => this._selectDate(
|
|
182
|
-
>${
|
|
195
|
+
class="day${this._isToday(n, s) ? " today" : ""}${this._isSelected(n) ? " selected" : ""}"
|
|
196
|
+
@click=${() => this._selectDate(n)}
|
|
197
|
+
>${n.getDate()}<md-ripple></md-ripple><md-focus-ring></md-focus-ring></div>
|
|
183
198
|
</td>
|
|
184
199
|
` : c`<td></td>`)}
|
|
185
200
|
</tr>
|
|
@@ -189,7 +204,7 @@ let p = class extends _ {
|
|
|
189
204
|
</div>
|
|
190
205
|
` : ""}
|
|
191
206
|
</div>
|
|
192
|
-
${
|
|
207
|
+
${r ? c`
|
|
193
208
|
<div style="padding: 0 24px;">
|
|
194
209
|
<label style="display:flex;align-items:center;gap:8px;">
|
|
195
210
|
<span>${this.lang == "sv" ? "Tid:" : "Time:"}</span>
|
|
@@ -206,18 +221,18 @@ let p = class extends _ {
|
|
|
206
221
|
`;
|
|
207
222
|
}
|
|
208
223
|
_getMonthDays(e, t) {
|
|
209
|
-
const
|
|
210
|
-
let
|
|
211
|
-
for (let d = 0; d <
|
|
224
|
+
const s = new Date(Date.UTC(e, t, 1)), a = new Date(Date.UTC(e, t + 1, 0)), i = [];
|
|
225
|
+
let r = [], o = s.getUTCDay(), n = o === 0 ? 6 : o - 1;
|
|
226
|
+
for (let d = 0; d < n; d++) r.push(null);
|
|
212
227
|
for (let d = 1; d <= a.getUTCDate(); d++) {
|
|
213
228
|
const u = new Date(Date.UTC(e, t, d));
|
|
214
|
-
|
|
229
|
+
r.push(u), r.length === 7 && (i.push(r), r = []);
|
|
215
230
|
}
|
|
216
|
-
if (
|
|
217
|
-
for (;
|
|
218
|
-
|
|
231
|
+
if (r.length) {
|
|
232
|
+
for (; r.length < 7; ) r.push(null);
|
|
233
|
+
i.push(r);
|
|
219
234
|
}
|
|
220
|
-
return
|
|
235
|
+
return i;
|
|
221
236
|
}
|
|
222
237
|
_toggleMonthDropdown() {
|
|
223
238
|
this._showMonthDropdown = !this._showMonthDropdown, this._showMonthDropdown && (this._showYearDropdown = !1, setTimeout(() => {
|
|
@@ -249,7 +264,7 @@ let p = class extends _ {
|
|
|
249
264
|
if (this._selectedDate = e, this.variant === "datetime-local") {
|
|
250
265
|
const t = new Date(e);
|
|
251
266
|
t.setHours(this._selectedHour ?? 0, this._selectedMinute ?? 0, 0, 0), this._selectedHour = t.getHours(), this._selectedMinute = t.getMinutes();
|
|
252
|
-
const
|
|
267
|
+
const s = (i) => i.toString().padStart(2, "0"), a = `${t.getFullYear()}-${s(t.getMonth() + 1)}-${s(t.getDate())} ${s(t.getHours())}:${s(t.getMinutes())}`;
|
|
253
268
|
this.dispatchEvent(new CustomEvent("date-selected", {
|
|
254
269
|
detail: { value: a },
|
|
255
270
|
bubbles: !0,
|
|
@@ -268,9 +283,9 @@ let p = class extends _ {
|
|
|
268
283
|
if (this.variant === "datetime-local" && this._selectedDate) {
|
|
269
284
|
const e = new Date(this._selectedDate);
|
|
270
285
|
e.setHours(this._selectedHour ?? 0, this._selectedMinute ?? 0, 0, 0);
|
|
271
|
-
const t = (a) => a.toString().padStart(2, "0"),
|
|
286
|
+
const t = (a) => a.toString().padStart(2, "0"), s = `${e.getFullYear()}-${t(e.getMonth() + 1)}-${t(e.getDate())} ${t(e.getHours())}:${t(e.getMinutes())}`;
|
|
272
287
|
this.dispatchEvent(new CustomEvent("date-selected", {
|
|
273
|
-
detail: { value:
|
|
288
|
+
detail: { value: s },
|
|
274
289
|
bubbles: !0,
|
|
275
290
|
composed: !0
|
|
276
291
|
}));
|
|
@@ -278,7 +293,7 @@ let p = class extends _ {
|
|
|
278
293
|
}
|
|
279
294
|
};
|
|
280
295
|
p.styles = [
|
|
281
|
-
|
|
296
|
+
x`
|
|
282
297
|
:host {
|
|
283
298
|
--scb-datepicker-width: 380px;
|
|
284
299
|
--scb-datepicker-z-index: 1100;
|
|
@@ -288,12 +303,12 @@ p.styles = [
|
|
|
288
303
|
font-family: var(--brand-font);
|
|
289
304
|
color: var(--md-sys-color-on-surface);
|
|
290
305
|
display: block;
|
|
291
|
-
position: absolute;
|
|
306
|
+
position: var(--scb-datepicker-position, absolute);
|
|
292
307
|
top: var(--scb-datepicker-top, calc(100% + var(--scb-datepicker-offset)));
|
|
293
308
|
bottom: var(--scb-datepicker-bottom, auto);
|
|
294
|
-
left: 0;
|
|
309
|
+
left: var(--scb-datepicker-left, 0);
|
|
295
310
|
width: var(--scb-datepicker-computed-width, min(var(--scb-datepicker-width), calc(100vw - (var(--scb-datepicker-viewport-margin) * 2))));
|
|
296
|
-
transform:
|
|
311
|
+
transform: var(--scb-datepicker-transform, translateX(0px));
|
|
297
312
|
z-index: var(--scb-datepicker-z-index);
|
|
298
313
|
}
|
|
299
314
|
.month-selector, .year-selector {
|
|
@@ -489,7 +504,7 @@ l([
|
|
|
489
504
|
h()
|
|
490
505
|
], p.prototype, "_selectedMinute", 2);
|
|
491
506
|
p = l([
|
|
492
|
-
|
|
507
|
+
M("scb-datepicker")
|
|
493
508
|
], p);
|
|
494
509
|
export {
|
|
495
510
|
p as ScbDatepicker
|
|
@@ -109,15 +109,14 @@ let s = class extends w {
|
|
|
109
109
|
<div class="ripple-wrapper">
|
|
110
110
|
<textarea
|
|
111
111
|
class="scb-textfield"
|
|
112
|
+
.value=${this.value}
|
|
112
113
|
?disabled=${this.disabled}
|
|
113
114
|
name="${this.name}"
|
|
114
115
|
id="${this._inputId}"
|
|
115
116
|
?required=${this.required}
|
|
116
117
|
aria-invalid=${this.error ? "true" : "false"}
|
|
117
118
|
aria-describedby=${i}
|
|
118
|
-
>
|
|
119
|
-
${this.value}</textarea
|
|
120
|
-
>
|
|
119
|
+
></textarea>
|
|
121
120
|
<md-ripple></md-ripple>
|
|
122
121
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
123
122
|
</div>
|
|
@@ -283,14 +282,14 @@ ${this.value}</textarea
|
|
|
283
282
|
* Vi kör också ett customevent onValueChanged.
|
|
284
283
|
*/
|
|
285
284
|
firstUpdated(e) {
|
|
286
|
-
super.firstUpdated(e), this._initialValue = this.value, l(this, r, m).call(this), l(this, r, f).call(this)
|
|
285
|
+
super.firstUpdated(e), this._initialValue = this.value, this._internals && this.value && this._internals.setFormValue(this.value), l(this, r, m).call(this), l(this, r, f).call(this);
|
|
287
286
|
}
|
|
288
287
|
updated(e) {
|
|
289
288
|
if (super.updated(e), this.toggleAttribute("aria-disabled", this.disabled), e.has("size") && this._syncDensityForSize(), this._internals && (e.has("value") || e.has("disabled"))) {
|
|
290
289
|
const t = this.disabled ? null : this.value;
|
|
291
290
|
this._internals.setFormValue(t);
|
|
292
291
|
}
|
|
293
|
-
e.has("type") && (l(this, r, m).call(this), this._hasRenderedOnce && l(this, r, y).call(this)), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && l(this, r, f).call(this);
|
|
292
|
+
e.has("type") && (l(this, r, m).call(this), this._hasRenderedOnce && l(this, r, y).call(this)), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && l(this, r, f).call(this), this._hasRenderedOnce = !0;
|
|
294
293
|
}
|
|
295
294
|
// Körs av webbläsaren när formuläret sätter disabled på kontrollen
|
|
296
295
|
formDisabledCallback(e) {
|