@oslokommune/punkt-elements 14.3.0 → 14.4.0
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/CHANGELOG.md +17 -0
- package/dist/{checkbox-CnhA52o_.js → checkbox-DfVUNTjH.js} +1 -1
- package/dist/{checkbox-C0TPnShf.cjs → checkbox-uxeHrTLH.cjs} +1 -1
- package/dist/{combobox-C1xwAju5.cjs → combobox-CcyHcqdW.cjs} +13 -13
- package/dist/{combobox-Dcp_fHcL.js → combobox-MZsqmVL-.js} +45 -45
- package/dist/{datepicker-COIRRau0.cjs → datepicker-BeMs_vsm.cjs} +25 -25
- package/dist/{datepicker-Bjb9GK1E.js → datepicker-a2LvhbRb.js} +215 -234
- package/dist/index.d.ts +213 -14
- package/dist/input-element-CARcDzQB.js +840 -0
- package/dist/input-element-CiaV6jln.cjs +1 -0
- package/dist/pkt-checkbox.cjs +1 -1
- package/dist/pkt-checkbox.js +1 -1
- package/dist/pkt-combobox.cjs +1 -1
- package/dist/pkt-combobox.js +1 -1
- package/dist/pkt-datepicker.cjs +1 -1
- package/dist/pkt-datepicker.js +2 -2
- package/dist/pkt-header.cjs +1 -1
- package/dist/pkt-header.js +1 -1
- package/dist/pkt-index.cjs +1 -1
- package/dist/pkt-index.js +7 -7
- package/dist/pkt-options-controller-DjBCEHU4.cjs +1 -0
- package/dist/{pkt-options-controller-CZO1nxZ8.js → pkt-options-controller-zn5cmMvL.js} +3 -3
- package/dist/pkt-radiobutton.cjs +1 -1
- package/dist/pkt-radiobutton.js +1 -1
- package/dist/pkt-select.cjs +1 -1
- package/dist/pkt-select.js +1 -1
- package/dist/pkt-textarea.cjs +1 -1
- package/dist/pkt-textarea.js +1 -1
- package/dist/pkt-textinput.cjs +1 -1
- package/dist/pkt-textinput.js +1 -1
- package/dist/{radiobutton-Caq8-GhM.js → radiobutton-BmgdSpYf.js} +1 -1
- package/dist/{radiobutton-BkqaqO5E.cjs → radiobutton-DVe09YxP.cjs} +1 -1
- package/dist/select-7KFOnLln.cjs +49 -0
- package/dist/select-CKqz-JKZ.js +228 -0
- package/dist/{textarea-a6T4aJJU.js → textarea-Bmrv_vve.js} +1 -1
- package/dist/{textarea-DyUy8u7X.cjs → textarea-VBUXPS1O.cjs} +1 -1
- package/dist/{textinput-IN3b0nSH.cjs → textinput-BkYKotc1.cjs} +1 -1
- package/dist/{textinput-DIuM70dd.js → textinput-Lp1crOmj.js} +1 -1
- package/package.json +2 -2
- package/src/components/checkbox/checkbox.ts +1 -1
- package/src/components/combobox/combobox.ts +2 -2
- package/src/components/datepicker/datepicker-utils.test.ts +0 -25
- package/src/components/datepicker/datepicker-utils.ts +0 -28
- package/src/components/datepicker/datepicker.ts +0 -6
- package/src/components/radiobutton/radiobutton.ts +1 -1
- package/src/components/select/select.ts +12 -47
- package/src/components/textarea/textarea.ts +1 -1
- package/src/components/textinput/textinput.ts +1 -1
- package/dist/input-element-B8M8Nppd.js +0 -708
- package/dist/input-element-D697OAJo.cjs +0 -1
- package/dist/pkt-options-controller-CiuBG6Lt.cjs +0 -1
- package/dist/select-3dwlk22G.cjs +0 -49
- package/dist/select-_C-yztI0.js +0 -173
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
"use strict";const
|
|
1
|
+
"use strict";const r=require("./element-CJ_QKaki.cjs"),B=require("./state-DSjcvzDN.cjs"),u=require("./calendar-ZzLAjDpv.cjs"),A=require("./input-element-CiaV6jln.cjs"),p=require("./ref-BFa5Utho.cjs");require("./icon-MRx-m0Or.cjs");require("./input-wrapper-CtBiAb04.cjs");const m=require("./class-map-C_erArZz.cjs"),M=require("./repeat-BZb41H64.cjs");require("./tag-B02fKJ66.cjs");const I=require("./utils-byXsEz1u.cjs"),g=require("./if-defined-Bc9-_I01.cjs"),j=require("./pkt-slot-controller-BzddBp7z.cjs");var F=Object.defineProperty,q=Object.getOwnPropertyDescriptor,b=(s,e,t,a)=>{for(var i=a>1?void 0:a?q(e,t):e,n=s.length-1,l;n>=0;n--)(l=s[n])&&(i=(a?l(e,t,i):l(i))||i);return a&&i&&F(e,t,i),i};exports.PktDateTags=class extends r.PktElement{constructor(){super(...arguments),this.dates=[],this.dateformat="dd.MM.yyyy",this.className="pkt-datepicker__tags",this.idBase=I.uuidish()}render(){return this.classes={"pkt-date-tags":!0,[this.className]:!0},r.x`
|
|
2
2
|
<div class=${m.e(this.classes)} aria-live="polite">
|
|
3
|
-
${Array.isArray(this.dates)&&this.dates[0]?M.c(u.sortDateStrings((this.dates??[]).filter(Boolean)),e=>e,e=>{var t;return
|
|
3
|
+
${Array.isArray(this.dates)&&this.dates[0]?M.c(u.sortDateStrings((this.dates??[]).filter(Boolean)),e=>e,e=>{var t;return r.x` <pkt-tag
|
|
4
4
|
id=${this.idBase+e+"-tag"}
|
|
5
5
|
closeTag
|
|
6
6
|
@close=${()=>{this.dispatchEvent(new CustomEvent("date-tag-removed",{detail:e}))}}
|
|
7
7
|
.ariaLabel=${`${(t=this.strings)==null?void 0:t.calendar.deleteDate} ${u.fromISOtoLocal(e,this.dateformat)}`}
|
|
8
8
|
>
|
|
9
9
|
<time datetime=${e}>${u.fromISOtoLocal(e,this.dateformat)}</time>
|
|
10
|
-
</pkt-tag>`}):
|
|
10
|
+
</pkt-tag>`}):r.E}
|
|
11
11
|
</div>
|
|
12
|
-
`}};b([
|
|
12
|
+
`}};b([r.n({type:Array})],exports.PktDateTags.prototype,"dates",2);b([r.n({type:String})],exports.PktDateTags.prototype,"dateformat",2);b([r.n({type:String,attribute:"class"})],exports.PktDateTags.prototype,"className",2);b([r.n({type:String,attribute:"id-base"})],exports.PktDateTags.prototype,"idBase",2);exports.PktDateTags=b([r.t("pkt-date-tags")],exports.PktDateTags);const L={dateformat:{default:"dd.MM.yyyy"},weeknumbers:{default:!1},withcontrols:{default:!1},multiple:{default:!1},range:{default:!1}},$={props:L},y=()=>{const s=navigator.userAgent;return!!(/iP(hone|od|ad)/.test(s)||/Macintosh/.test(s)&&"ontouchend"in document)},S={validateRangeOrder(s){return!s||s.length!==2?!0:u.isValidDateRange(s[0],s[1])},sortDates(s){return u.sortDateStrings(s)},filterSelectableDates(s,e,t,a,i){return u.filterSelectableDates(s,e,t,a,i)}},V={getInputType(){return y()?"text":"date"}},k={submitForm(s){var t;const e=(t=s.internals)==null?void 0:t.form;e&&e.requestSubmit()},submitFormOrFallback(s,e){const t=s==null?void 0:s.form;t?t.requestSubmit():e()},validateDateInput(s,e,t,a,i){var l,h,R,E;const n=s.value;n&&(t&&t>n?e.setValidity({rangeUnderflow:!0},((h=(l=i==null?void 0:i.forms)==null?void 0:l.messages)==null?void 0:h.rangeUnderflow)||"Value is below minimum",s):a&&a<n&&e.setValidity({rangeOverflow:!0},((E=(R=i==null?void 0:i.forms)==null?void 0:R.messages)==null?void 0:E.rangeOverflow)||"Value is above maximum",s))}},D={addToSelected(s,e,t,a){const i=s.target;if(!i.value)return;const n=t?u.newDate(t):null,l=a?u.newDate(a):null,h=u.newDate(i.value.split(",")[0]);h&&!isNaN(h.getTime())&&(!n||h>=n)&&(!l||h<=l)&&e.value&&e.value.handleDateSelect(h),i.value=""},handleCalendarPosition(s,e,t=!1){var h;if(!s.value||!e.value)return;const a=((h=e.value.parentElement)==null?void 0:h.getBoundingClientRect())||e.value.getBoundingClientRect(),i=t?a.height+30:a.height,n=s.value.getBoundingClientRect().height;let l=t?"calc(100% - 30px)":"100%";a&&a.top+n>window.innerHeight&&a.top-n>0&&(l=`calc(100% - ${i}px - ${n}px)`),s.value.style.top=l}},T={getInputClasses(s,e,t,a,i,n){return{"pkt-input":!0,"pkt-datepicker__input":!0,"pkt-input--fullwidth":s,"pkt-datepicker--hasrangelabels":e,"pkt-datepicker--multiple":t,"pkt-datepicker--range":a,"ios-readonly-hack":i===!1&&n==="text"}},getButtonClasses(){return{"pkt-input-icon":!0,"pkt-btn":!0,"pkt-btn--icon-only":!0,"pkt-btn--tertiary":!0,"pkt-datepicker__calendar-button":!0}},getRangeLabelClasses(s){return{"pkt-input-prefix":s,"pkt-hide":!s}}},P={processDateSelection(s,e,t){return!e&&!t?s[0]||"":Array.isArray(s)?s.join(","):s},updateInputValues(s,e,t,a,i,n){s.value&&(a&&(e!=null&&e.value)?(s.value.value=t[0]??"",e.value.value=t[1]??"",n(s.value),n(e.value)):i||(s.value.value=t.length?t[0]:"",n(s.value)))},processRangeBlur(s,e,t,a,i){var l;const n=s.target;if(n.value){i(n);const h=u.fromISOToDate(n.value);h&&((l=t==null?void 0:t.value)==null||l.handleDateSelect(h))}else e[0]&&a()}},w={handleInputKeydown(s,e,t,a,i,n){const{key:l}=s;l===","&&(s.preventDefault(),n?n(s):i&&i()),(l==="Space"||l===" ")&&(s.preventDefault(),e(s)),l==="Enter"&&(s.preventDefault(),t?t():a?a():i&&i())},handleButtonKeydown(s,e){const{key:t}=s;(t==="Enter"||t===" "||t==="Space")&&(s.preventDefault(),e(s))}};var U=Object.defineProperty,K=Object.getOwnPropertyDescriptor,c=(s,e,t,a)=>{for(var i=a>1?void 0:a?K(e,t):e,n=s.length-1,l;n>=0;n--)(l=s[n])&&(i=(a?l(e,t,i):l(i))||i);return a&&i&&U(e,t,i),i};let d=class extends r.PktElement{constructor(){super(...arguments),this.open=!1,this.multiple=!1,this.range=!1,this.weeknumbers=!1,this.withcontrols=!1,this.maxMultiple=null,this.selected=[],this.earliest=null,this.latest=null,this.excludedates=[],this.excludeweekdays=[],this.currentmonth=null,this.popupRef=p.e(),this.calendarRef=p.e(),this.handleDocumentClick=s=>{if(!this.open)return;const e=s.composedPath(),t=this.parentElement,a=this.popupRef.value;!e.includes(this)&&!e.includes(a)&&!(t&&e.includes(t))&&(this.hide(),this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0})))},this.handleDocumentKeydown=s=>{this.open&&s.key==="Escape"&&(this.hide(),this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0})))}}firstUpdated(){this.calRef=this.calendarRef,document.addEventListener("keydown",this.handleDocumentKeydown),document.addEventListener("click",this.handleDocumentClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleDocumentClick),document.removeEventListener("keydown",this.handleDocumentKeydown)}show(){var s;this.open=!0,(s=this.calendarRef.value)==null||s.focus()}hide(){this.open=!1}toggle(){this.open?this.hide():this.show()}contains(s){var e;return!!s&&!!((e=this.popupRef.value)!=null&&e.contains(s))}focusOnCurrentDate(){const s=this.calendarRef.value;s&&typeof s.focusOnCurrentDate=="function"&&s.focusOnCurrentDate()}addToSelected(s,e,t){if(typeof D.addToSelected=="function")return D.addToSelected(s,this.calendarRef,e,t)}handleDateSelect(s){const e=this.calendarRef.value;if(e&&typeof e.handleDateSelect=="function")return e.handleDateSelect(s)}render(){const s={"pkt-calendar-popup":!0,show:this.open,hide:!this.open};return r.x`
|
|
13
13
|
<div
|
|
14
14
|
class="${m.e(s)}"
|
|
15
15
|
${p.n(this.popupRef)}
|
|
@@ -34,9 +34,9 @@
|
|
|
34
34
|
@close=${()=>{this.hide(),this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}}
|
|
35
35
|
></pkt-calendar>
|
|
36
36
|
</div>
|
|
37
|
-
`}};c([
|
|
37
|
+
`}};c([r.n({type:Boolean,reflect:!0})],d.prototype,"open",2);c([r.n({type:Boolean})],d.prototype,"multiple",2);c([r.n({type:Boolean})],d.prototype,"range",2);c([r.n({type:Boolean})],d.prototype,"weeknumbers",2);c([r.n({type:Boolean})],d.prototype,"withcontrols",2);c([r.n({type:Number})],d.prototype,"maxMultiple",2);c([r.n({type:Array})],d.prototype,"selected",2);c([r.n({type:String})],d.prototype,"earliest",2);c([r.n({type:String})],d.prototype,"latest",2);c([r.n({type:Array})],d.prototype,"excludedates",2);c([r.n({type:Array})],d.prototype,"excludeweekdays",2);c([r.n({type:String})],d.prototype,"currentmonth",2);d=c([r.t("pkt-datepicker-popup")],d);var N=Object.defineProperty,v=(s,e,t,a)=>{for(var i=void 0,n=s.length-1,l;n>=0;n--)(l=s[n])&&(i=l(e,t,i)||i);return i&&N(e,t,i),i};class f extends r.PktElement{constructor(){super(...arguments),this.inputType="date",this.id="",this.readonly=!1,this.disabled=!1,this.inputClasses={},this.inputRef=p.e(),this.btnRef=p.e()}get inputElement(){return this.inputRef.value}get buttonElement(){return this.btnRef.value}get isInputReadonly(){return this.readonly||this.inputType==="text"}dispatchToggleCalendar(e){this.readonly||this.dispatchEvent(new CustomEvent("toggle-calendar",{detail:e,bubbles:!0,composed:!0}))}dispatchInput(e){this.dispatchEvent(new CustomEvent("input-change",{detail:e,bubbles:!0,composed:!0}))}dispatchFocus(){this.dispatchEvent(new CustomEvent("input-focus",{bubbles:!0,composed:!0}))}dispatchBlur(e){this.dispatchEvent(new CustomEvent("input-blur",{detail:e,bubbles:!0,composed:!0}))}dispatchChange(e){this.dispatchEvent(new CustomEvent("input-changed",{detail:e,bubbles:!0,composed:!0}))}renderCalendarButton(){var e;return r.x`
|
|
38
38
|
<button
|
|
39
|
-
class="${m.e(
|
|
39
|
+
class="${m.e(T.getButtonClasses())}"
|
|
40
40
|
type="button"
|
|
41
41
|
@click=${t=>this.dispatchToggleCalendar(t)}
|
|
42
42
|
@keydown=${t=>{const{key:a}=t;(a==="Enter"||a===" "||a==="Space")&&(t.preventDefault(),this.dispatchToggleCalendar(t))}}
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
<pkt-icon name="calendar"></pkt-icon>
|
|
47
47
|
<span class="pkt-btn__text">${((e=this.strings.calendar)==null?void 0:e.buttonAltText)||"Åpne kalender"}</span>
|
|
48
48
|
</button>
|
|
49
|
-
`}createRenderRoot(){return this}}v([
|
|
49
|
+
`}createRenderRoot(){return this}}v([r.n({type:String})],f.prototype,"inputType");v([r.n({type:String})],f.prototype,"id");v([r.n({type:String})],f.prototype,"min");v([r.n({type:String})],f.prototype,"max");v([r.n({type:String})],f.prototype,"placeholder");v([r.n({type:Boolean})],f.prototype,"readonly");v([r.n({type:Boolean})],f.prototype,"disabled");v([r.n({type:Object})],f.prototype,"inputClasses");v([r.n({type:Object})],f.prototype,"internals");const O={calendar:{buttonAltText:"Åpne kalender"}},z={calendar:{buttonAltText:"Åpne kalender"},generic:{from:"Fra",to:"Til"}};var H=Object.defineProperty,W=Object.getOwnPropertyDescriptor,_=(s,e,t,a)=>{for(var i=a>1?void 0:a?W(e,t):e,n=s.length-1,l;n>=0;n--)(l=s[n])&&(i=(a?l(e,t,i):l(i))||i);return a&&i&&H(e,t,i),i};exports.PktDatepickerSingle=class extends f{constructor(){super(...arguments),this.value="",this.strings=O}dispatchManageValidity(e){this.dispatchEvent(new CustomEvent("manage-validity",{detail:e,bubbles:!0,composed:!0}))}render(){return r.x`
|
|
50
50
|
<div class="pkt-input__container">
|
|
51
51
|
<input
|
|
52
52
|
class="${m.e(this.inputClasses)}"
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
@click=${e=>{e.preventDefault(),this.dispatchToggleCalendar(e)}}
|
|
62
62
|
@touchend=${e=>{e.preventDefault(),this.dispatchToggleCalendar(e)}}
|
|
63
63
|
?disabled=${this.disabled}
|
|
64
|
-
@keydown=${e=>
|
|
64
|
+
@keydown=${e=>w.handleInputKeydown(e,t=>this.dispatchToggleCalendar(t),()=>k.submitFormOrFallback(this.internals,()=>{var t;return(t=this.inputRef.value)==null?void 0:t.blur()}),void 0,()=>{var t;return(t=this.inputRef.value)==null?void 0:t.blur()})}
|
|
65
65
|
@input=${e=>{this.dispatchInput(e),e.stopImmediatePropagation()}}
|
|
66
66
|
@focus=${()=>{this.dispatchFocus(),y()&&this.dispatchToggleCalendar(new Event("focus"))}}
|
|
67
67
|
@blur=${e=>{this.dispatchBlur(e),this.dispatchManageValidity(e.target),this.dispatchEvent(new CustomEvent("value-change",{detail:e.target.value,bubbles:!0,composed:!0}))}}
|
|
@@ -70,9 +70,9 @@
|
|
|
70
70
|
/>
|
|
71
71
|
${this.renderCalendarButton()}
|
|
72
72
|
</div>
|
|
73
|
-
`}};
|
|
73
|
+
`}};_([r.n({type:String})],exports.PktDatepickerSingle.prototype,"value",2);_([r.n({type:Object})],exports.PktDatepickerSingle.prototype,"strings",2);exports.PktDatepickerSingle=_([r.t("pkt-datepicker-single")],exports.PktDatepickerSingle);var G=Object.defineProperty,J=Object.getOwnPropertyDescriptor,C=(s,e,t,a)=>{for(var i=a>1?void 0:a?J(e,t):e,n=s.length-1,l;n>=0;n--)(l=s[n])&&(i=(a?l(e,t,i):l(i))||i);return a&&i&&G(e,t,i),i};exports.PktDatepickerRange=class extends f{constructor(){super(...arguments),this.value=[],this.showRangeLabels=!1,this.strings=z,this.inputRefTo=p.e()}get inputElementTo(){return this.inputRefTo.value}render(){var t,a;const e=T.getRangeLabelClasses(this.showRangeLabels);return r.x`
|
|
74
74
|
<div class="pkt-input__container">
|
|
75
|
-
${this.showRangeLabels?
|
|
75
|
+
${this.showRangeLabels?r.x` <div class="pkt-input-prefix">${(t=this.strings.generic)==null?void 0:t.from}</div> `:r.E}
|
|
76
76
|
<input
|
|
77
77
|
class=${m.e(this.inputClasses)}
|
|
78
78
|
.type=${this.inputType}
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
?disabled=${this.disabled}
|
|
86
86
|
@click=${i=>{i.preventDefault(),this.dispatchToggleCalendar(i)}}
|
|
87
87
|
@touchend=${i=>{i.preventDefault(),this.dispatchToggleCalendar(i)}}
|
|
88
|
-
@keydown=${i=>
|
|
88
|
+
@keydown=${i=>w.handleInputKeydown(i,n=>this.dispatchToggleCalendar(n),()=>k.submitFormOrFallback(this.internals,()=>{var n;return(n=this.inputRefTo.value)==null?void 0:n.focus()}),()=>{var n;return(n=this.inputRefTo.value)==null?void 0:n.focus()},()=>{var n;return(n=this.inputRef.value)==null?void 0:n.blur()})}
|
|
89
89
|
@input=${i=>{this.dispatchInput(i),i.stopImmediatePropagation()}}
|
|
90
90
|
@focus=${()=>{this.dispatchFocus(),y()&&this.dispatchToggleCalendar(new Event("focus"))}}
|
|
91
91
|
@blur=${i=>{this.dispatchBlur(i),this.dispatchEvent(new CustomEvent("range-blur",{detail:{event:i,values:this.value,inputType:"from"},bubbles:!0,composed:!0}))}}
|
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
<div class="${m.e(e)}" id="${this.id}-to-label">
|
|
96
96
|
${(a=this.strings.generic)==null?void 0:a.to}
|
|
97
97
|
</div>
|
|
98
|
-
${this.showRangeLabels?
|
|
98
|
+
${this.showRangeLabels?r.E:r.x` <div class="pkt-input-separator">–</div> `}
|
|
99
99
|
<input
|
|
100
100
|
class=${m.e(this.inputClasses)}
|
|
101
101
|
.type=${this.inputType}
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
?disabled=${this.disabled}
|
|
110
110
|
@click=${i=>{i.preventDefault(),this.dispatchToggleCalendar(i)}}
|
|
111
111
|
@touchend=${i=>{i.preventDefault(),this.dispatchToggleCalendar(i)}}
|
|
112
|
-
@keydown=${i=>
|
|
112
|
+
@keydown=${i=>w.handleInputKeydown(i,n=>this.dispatchToggleCalendar(n),()=>k.submitFormOrFallback(this.internals,()=>{var n;return(n=this.inputRefTo.value)==null?void 0:n.blur()}),void 0,()=>{var n;return(n=this.inputRefTo.value)==null?void 0:n.blur()})}
|
|
113
113
|
@input=${i=>{this.dispatchInput(i),i.stopImmediatePropagation()}}
|
|
114
114
|
@focus=${()=>{this.dispatchFocus(),y()&&this.dispatchToggleCalendar(new Event("focus"))}}
|
|
115
115
|
@blur=${i=>{this.dispatchBlur(i),this.dispatchEvent(new CustomEvent("range-blur",{detail:{event:i,values:this.value,inputType:"to"},bubbles:!0,composed:!0}))}}
|
|
@@ -118,7 +118,7 @@
|
|
|
118
118
|
/>
|
|
119
119
|
${this.renderCalendarButton()}
|
|
120
120
|
</div>
|
|
121
|
-
`}};
|
|
121
|
+
`}};C([r.n({type:Array})],exports.PktDatepickerRange.prototype,"value",2);C([r.n({type:Boolean})],exports.PktDatepickerRange.prototype,"showRangeLabels",2);C([r.n({type:Object})],exports.PktDatepickerRange.prototype,"strings",2);exports.PktDatepickerRange=C([r.t("pkt-datepicker-range")],exports.PktDatepickerRange);var Q=Object.defineProperty,X=Object.getOwnPropertyDescriptor,x=(s,e,t,a)=>{for(var i=a>1?void 0:a?X(e,t):e,n=s.length-1,l;n>=0;n--)(l=s[n])&&(i=(a?l(e,t,i):l(i))||i);return a&&i&&Q(e,t,i),i};exports.PktDatepickerMultiple=class extends f{constructor(){super(...arguments),this.value=[],this.strings=O}get isInputDisabled(){return this.disabled||this.maxlength!==void 0&&this.maxlength!==null&&this.value.length>=this.maxlength}dispatchAddToSelected(e){this.dispatchEvent(new CustomEvent("add-to-selected",{detail:e,bubbles:!0,composed:!0}))}render(){return r.x`
|
|
122
122
|
<div class="pkt-input__container">
|
|
123
123
|
<input
|
|
124
124
|
class=${m.e(this.inputClasses)}
|
|
@@ -134,13 +134,13 @@
|
|
|
134
134
|
@blur=${e=>{this.dispatchBlur(e),this.dispatchAddToSelected(e)}}
|
|
135
135
|
@input=${e=>{this.dispatchInput(e),e.stopImmediatePropagation()}}
|
|
136
136
|
@focus=${()=>{this.dispatchFocus(),y()&&this.dispatchToggleCalendar(new Event("focus"))}}
|
|
137
|
-
@keydown=${e=>
|
|
137
|
+
@keydown=${e=>w.handleInputKeydown(e,t=>this.dispatchToggleCalendar(t),()=>k.submitFormOrFallback(this.internals,()=>{var t;return(t=this.inputRef.value)==null?void 0:t.blur()}),void 0,void 0,t=>this.dispatchAddToSelected(t))}
|
|
138
138
|
@change=${e=>{this.dispatchChange(e),e.stopImmediatePropagation()}}
|
|
139
139
|
${p.n(this.inputRef)}
|
|
140
140
|
/>
|
|
141
141
|
${this.renderCalendarButton()}
|
|
142
142
|
</div>
|
|
143
|
-
`}};
|
|
143
|
+
`}};x([r.n({type:Array})],exports.PktDatepickerMultiple.prototype,"value",2);x([r.n({type:Number})],exports.PktDatepickerMultiple.prototype,"maxlength",2);x([r.n({type:Object})],exports.PktDatepickerMultiple.prototype,"strings",2);exports.PktDatepickerMultiple=x([r.t("pkt-datepicker-multiple")],exports.PktDatepickerMultiple);var Y=Object.defineProperty,Z=Object.getOwnPropertyDescriptor,o=(s,e,t,a)=>{for(var i=a>1?void 0:a?Z(e,t):e,n=s.length-1,l;n>=0;n--)(l=s[n])&&(i=(a?l(e,t,i):l(i))||i);return a&&i&&Y(e,t,i),i};exports.PktDatepicker=class extends A.PktInputElement{constructor(){super(),this._valueProperty="",this.datepickerPopupRef=p.e(),this._value=[],this.label="Datovelger",this.dateformat=$.props.dateformat.default,this.multiple=$.props.multiple.default,this.maxlength=null,this.range=$.props.range.default,this.showRangeLabels=!1,this.min=null,this.max=null,this.weeknumbers=$.props.weeknumbers.default,this.withcontrols=$.props.withcontrols.default,this.excludedates=[],this.excludeweekdays=[],this.currentmonth=null,this.calendarOpen=!1,this.timezone="Europe/Oslo",this.inputClasses={},this.calRef=p.e(),this.popupRef=p.e(),this.helptextSlot=p.e(),this.singleInputRef=p.e(),this.rangeInputRef=p.e(),this.multipleInputRef=p.e(),this.addToSelected=e=>{const t=this.datepickerPopupRef.value;return t&&typeof t.addToSelected=="function"?t.addToSelected(e,this.min,this.max):D.addToSelected(e,this.calRef,this.min,this.max)},this.slotController=new j.PktSlotController(this,this.helptextSlot)}get value(){return this._valueProperty}set value(e){const t=this._valueProperty;this._valueProperty=Array.isArray(e)?e.join(","):e||"",this.valueChanged(this._valueProperty,t),this.requestUpdate("value",t)}get inputType(){return V.getInputType()}connectedCallback(){super.connectedCallback(),this.timezone&&this.timezone!==window.pktTz&&(window.pktTz=this.timezone)}disconnectedCallback(){super.disconnectedCallback()}onInput(){this.dispatchEvent(new Event("input",{bubbles:!0}))}valueChanged(e,t){if(e===t)return;const a=u.valueToArray(e),i=this.multiple&&a.length>1?S.filterSelectableDates(a,this.min,this.max,this.excludedates,this.excludeweekdays):a;if(this.range&&!S.validateRangeOrder(i)){this._value=[],this._valueProperty="",super.valueChanged("",t);return}this._value=i;const n=u.arrayToCsv(i);this._valueProperty!==n&&(this._valueProperty=n),super.valueChanged(n,t)}attributeChangedCallback(e,t,a){e==="value"&&this.value!==t&&this.valueChanged(a,t),e==="excludedates"&&typeof this.excludedates=="string"&&(this.excludedates=u.valueToArray(a||"")),e==="excludeweekdays"&&typeof this.excludeweekdays=="string"&&(this.excludeweekdays=u.valueToArray(a||"")),super.attributeChangedCallback(e,t,a)}updated(e){if(e.has("value")){const t=Array.isArray(this.value)?this.value.join(","):this.value,a=e.get("value"),i=Array.isArray(a)?a.join(","):a;this.valueChanged(t,i)}e.has("multiple")&&(this.multiple&&!Array.isArray(this._value)?this._value=u.valueToArray(this.value):!this.multiple&&Array.isArray(this._value)&&(this._value=this._value.filter(Boolean)),!this.multiple&&!this.range&&Array.isArray(this._value)&&(this._value=[this._value[0]??""])),super.updated(e)}get inputRef(){return{value:this.currentInputElement}}get inputRefTo(){return{value:this.currentInputElementTo}}get currentInputElement(){var e,t,a;return this.multiple?(e=this.multipleInputRef.value)==null?void 0:e.inputElement:this.range?(t=this.rangeInputRef.value)==null?void 0:t.inputElement:(a=this.singleInputRef.value)==null?void 0:a.inputElement}get currentInputElementTo(){var e;if(this.range)return(e=this.rangeInputRef.value)==null?void 0:e.inputElementTo}get currentButtonElement(){var e,t,a;return this.multiple?(e=this.multipleInputRef.value)==null?void 0:e.buttonElement:this.range?(t=this.rangeInputRef.value)==null?void 0:t.buttonElement:(a=this.singleInputRef.value)==null?void 0:a.buttonElement}get btnRef(){return{value:this.currentButtonElement}}renderInput(){return r.x`
|
|
144
144
|
<pkt-datepicker-single
|
|
145
145
|
.value=${this._value[0]??""}
|
|
146
146
|
.inputType=${this.inputType}
|
|
@@ -162,7 +162,7 @@
|
|
|
162
162
|
@input-changed=${()=>{this.touched=!0}}
|
|
163
163
|
${p.n(this.singleInputRef)}
|
|
164
164
|
></pkt-datepicker-single>
|
|
165
|
-
`}renderRangeInput(){return
|
|
165
|
+
`}renderRangeInput(){return r.x`
|
|
166
166
|
<pkt-datepicker-range
|
|
167
167
|
.value=${this._value}
|
|
168
168
|
.inputType=${this.inputType}
|
|
@@ -180,14 +180,14 @@
|
|
|
180
180
|
@input-change=${()=>this.onInput()}
|
|
181
181
|
@input-focus=${()=>this.onFocus()}
|
|
182
182
|
@input-blur=${e=>{var t;(t=this.calRef.value)!=null&&t.contains(e.detail.relatedTarget)||this.onBlur()}}
|
|
183
|
-
@range-blur=${e=>{const t=this.currentInputElement,a=this.currentInputElementTo;if(t&&a){const i=t.value,n=a.value;if(i&&n&&i>n)a.value="",this._value=[i],this.value=i;else{const
|
|
183
|
+
@range-blur=${e=>{const t=this.currentInputElement,a=this.currentInputElementTo;if(t&&a){const i=t.value,n=a.value;if(i&&n&&i>n)a.value="",this._value=[i],this.value=i;else{const l=[i,n].filter(Boolean);l.length>0&&(l[0]!==this._value[0]||l[1]!==this._value[1])&&(this._value=l,this.value=l.join(","))}}P.processRangeBlur(e.detail.event,e.detail.values,this.calRef,()=>this.clearInputValue(),i=>this.manageValidity(i))}}
|
|
184
184
|
@manage-validity=${e=>this.manageValidity(e.detail)}
|
|
185
185
|
@validate-date-input=${e=>{k.validateDateInput(e.detail,this.internals,this.min,this.max,this.strings)}}
|
|
186
186
|
@handle-date-select=${e=>{var a,i;const t=u.fromISOToDate(e.detail);if(t){const n=u.formatISODate(t);this._value[0]!==n&&this._value[1]!==n&&((i=(a=this.calRef)==null?void 0:a.value)==null||i.handleDateSelect(t))}}}
|
|
187
187
|
@input-changed=${()=>{this.touched=!0}}
|
|
188
188
|
${p.n(this.rangeInputRef)}
|
|
189
189
|
></pkt-datepicker-range>
|
|
190
|
-
`}renderMultipleInput(){return
|
|
190
|
+
`}renderMultipleInput(){return r.x`
|
|
191
191
|
<pkt-datepicker-multiple
|
|
192
192
|
.value=${this._value}
|
|
193
193
|
.inputType=${this.inputType}
|
|
@@ -209,7 +209,7 @@
|
|
|
209
209
|
@input-changed=${()=>{this.touched=!0}}
|
|
210
210
|
${p.n(this.multipleInputRef)}
|
|
211
211
|
></pkt-datepicker-multiple>
|
|
212
|
-
`}renderCalendar(){return
|
|
212
|
+
`}renderCalendar(){return r.x`
|
|
213
213
|
<pkt-datepicker-popup
|
|
214
214
|
class="pkt-contents"
|
|
215
215
|
?open=${this.calendarOpen}
|
|
@@ -224,11 +224,11 @@
|
|
|
224
224
|
.excludedates=${Array.isArray(this.excludedates)?this.excludedates:this.excludedates.split(",")}
|
|
225
225
|
.excludeweekdays=${this.excludeweekdays}
|
|
226
226
|
.currentmonth=${this.currentmonth?u.parseISODateString(this.currentmonth):null}
|
|
227
|
-
@date-selected=${e=>{this.value=
|
|
227
|
+
@date-selected=${e=>{this.value=P.processDateSelection(e.detail,this.multiple,this.range),this._value=e.detail,P.updateInputValues(this.inputRef,this.inputRefTo,this._value,this.range,this.multiple,t=>this.manageValidity(t))}}
|
|
228
228
|
@close=${()=>{this.onBlur(),this.hideCalendar()}}
|
|
229
229
|
${p.n(this.datepickerPopupRef)}
|
|
230
230
|
></pkt-datepicker-popup>
|
|
231
|
-
`}render(){return this.inputClasses=
|
|
231
|
+
`}render(){return this.inputClasses=T.getInputClasses(this.fullwidth,this.showRangeLabels,this.multiple,this.range,this.readonly,this.inputType),r.x`
|
|
232
232
|
<pkt-input-wrapper
|
|
233
233
|
label="${this.label}"
|
|
234
234
|
forId="${this.id}-input"
|
|
@@ -254,13 +254,13 @@
|
|
|
254
254
|
class="pkt-datepicker"
|
|
255
255
|
>
|
|
256
256
|
<div class="pkt-contents" ${p.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
|
|
257
|
-
${this.multiple?
|
|
257
|
+
${this.multiple?r.x`<pkt-date-tags
|
|
258
258
|
.dates=${this._value}
|
|
259
259
|
dateformat=${this.dateformat}
|
|
260
260
|
strings=${this.strings}
|
|
261
261
|
id-base=${this.id}
|
|
262
262
|
@date-tag-removed=${e=>{var i;const t=this.datepickerPopupRef.value,a=u.fromISOToDate(e.detail);t&&a&&typeof t.handleDateSelect=="function"?t.handleDateSelect(a):(i=this.calRef.value)==null||i.handleDateSelect(a)}}
|
|
263
|
-
></pkt-date-tags>`:
|
|
263
|
+
></pkt-date-tags>`:r.E}
|
|
264
264
|
<div
|
|
265
265
|
class="pkt-datepicker__inputs ${this.range&&this.showRangeLabels?"pkt-input__range-inputs":""}"
|
|
266
266
|
>
|
|
@@ -268,4 +268,4 @@
|
|
|
268
268
|
</div>
|
|
269
269
|
</pkt-input-wrapper>
|
|
270
270
|
${this.renderCalendar()}
|
|
271
|
-
`}handleCalendarPosition(){const e=this.multiple&&!!this.maxlength;
|
|
271
|
+
`}handleCalendarPosition(){const e=this.multiple&&!!this.maxlength;D.handleCalendarPosition(this.popupRef,this.inputRef,e)}async showCalendar(){var t;const e=this.datepickerPopupRef.value;if(this.calendarOpen=!0,e&&typeof e.show=="function"){e.show(),y()&&e.focusOnCurrentDate();return}await I.sleep(20),this.handleCalendarPosition(),y()&&((t=this.calRef.value)==null||t.focusOnCurrentDate())}hideCalendar(){const e=this.datepickerPopupRef.value;if(this.calendarOpen=!1,e&&typeof e.hide=="function")return e.hide()}async toggleCalendar(e){e.preventDefault();const t=this.datepickerPopupRef.value;if(t&&typeof t.toggle=="function"){const a=!!t.open;t.toggle(),this.calendarOpen=!a;return}this.calendarOpen?this.hideCalendar():this.showCalendar()}clearInputValue(){this._value=[],this.value="",this.internals.setFormValue(this.value),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("value-change",{detail:this._value,bubbles:!0,composed:!0}))}};o([r.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"value",1);o([r.n({type:Array})],exports.PktDatepicker.prototype,"_value",2);o([r.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"label",2);o([r.n({type:String})],exports.PktDatepicker.prototype,"dateformat",2);o([r.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"multiple",2);o([r.n({type:Number,reflect:!0})],exports.PktDatepicker.prototype,"maxlength",2);o([r.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"range",2);o([r.n({type:Boolean})],exports.PktDatepicker.prototype,"showRangeLabels",2);o([r.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"min",2);o([r.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"max",2);o([r.n({type:Boolean})],exports.PktDatepicker.prototype,"weeknumbers",2);o([r.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"withcontrols",2);o([r.n({converter:u.converters.csvToArray})],exports.PktDatepicker.prototype,"excludedates",2);o([r.n({converter:u.converters.csvToArray})],exports.PktDatepicker.prototype,"excludeweekdays",2);o([r.n({type:String})],exports.PktDatepicker.prototype,"currentmonth",2);o([r.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"calendarOpen",2);o([r.n({type:String})],exports.PktDatepicker.prototype,"timezone",2);o([B.r()],exports.PktDatepicker.prototype,"inputClasses",2);exports.PktDatepicker=o([r.t("pkt-datepicker")],exports.PktDatepicker);
|