@oslokommune/punkt-elements 13.6.6 → 13.6.8
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 +34 -0
- package/dist/{calendar-ChphTIhk.js → calendar-CodWwTHM.js} +503 -471
- package/dist/calendar-DH-fCGyW.cjs +115 -0
- package/dist/{combobox-C_pTRtsQ.js → combobox-DxNotM0u.js} +2 -2
- package/dist/{combobox-CNH-j9Za.cjs → combobox-cK_746ek.cjs} +2 -2
- package/dist/datepicker-BEMo4X9s.js +770 -0
- package/dist/datepicker-n49TAIAt.cjs +169 -0
- package/dist/index.d.ts +7 -1
- package/dist/{listbox-BBO1d5Jd.cjs → listbox-L-iOSF7M.cjs} +2 -2
- package/dist/{listbox-DJ7b3Wmc.js → listbox-n4wjlLqD.js} +10 -10
- package/dist/pkt-calendar.cjs +1 -1
- package/dist/pkt-calendar.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 +1 -1
- package/dist/pkt-index.cjs +1 -1
- package/dist/pkt-index.js +4 -4
- package/dist/pkt-listbox.cjs +1 -1
- package/dist/pkt-listbox.js +1 -1
- package/package.json +2 -2
- package/src/components/calendar/calendar.ts +26 -28
- package/src/components/combobox/combobox.ts +1 -1
- package/src/components/datepicker/date-tags.ts +2 -1
- package/src/components/datepicker/datepicker-utils.ts +475 -0
- package/src/components/datepicker/datepicker.selection.test.ts +62 -1
- package/src/components/datepicker/datepicker.ts +157 -271
- package/src/components/listbox/listbox.ts +1 -1
- package/dist/calendar-CL9O0tLP.cjs +0 -115
- package/dist/datepicker-CV73pLqD.cjs +0 -169
- package/dist/datepicker-Ca552mbJ.js +0 -531
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
"use strict";const g=require("./class-map-CG3vIaNm.cjs"),d=require("./if-defined-CkVc_RJD.cjs"),l=require("./element-D62wHiNU.cjs"),P=require("./state-BkE_Rxl7.cjs"),u=require("./calendar-DH-fCGyW.cjs"),S=require("./input-element-Y8sdrq9C.cjs"),p=require("./ref-BfgcOXko.cjs");require("./icon-__Hjt2XZ.cjs");require("./input-wrapper-C9rZEgju.cjs");const _=require("./repeat-DzibMwhi.cjs");require("./tag-BKq07hGI.cjs");const O=require("./stringutils-CkVRq4jP.cjs"),T=require("./pkt-slot-controller-BzddBp7z.cjs"),I=i=>new Promise(e=>setTimeout(e,i)),m={isIOS(){const i=navigator.userAgent;return/iP(hone|od|ad)/.test(i)},isMobileSafari(){const i=navigator.userAgent;return/iP(hone|od|ad)/.test(i)&&/Safari/.test(i)&&!/CriOS|FxiOS/.test(i)}},c={parseValue(i){return i?Array.isArray(i)?i.filter(Boolean):typeof i=="string"?i.split(",").filter(Boolean):String(i).split(",").filter(Boolean):[]},formatValue(i){return i.join(",")},normalizeNameForMultiple(i,e,t){return i?(e||t)&&!i.endsWith("[]")?i+"[]":i:null},normalizeStringArray(i){return typeof i=="string"?i.split(",").filter(Boolean):Array.isArray(i)?i:[]},validateRangeOrder(i){return!i||i.length!==2?!0:u.isValidDateRange(i[0],i[1])},sortDates(i){return u.sortDateStrings(i)},filterSelectableDates(i,e,t,a,s){return u.filterSelectableDates(i,e,t,a,s)}},A={getInputType(){return m.isIOS()?"text":"date"}},f={submitForm(i){var t;const e=(t=i.internals)==null?void 0:t.form;e&&e.requestSubmit()},submitFormOrFallback(i,e){const t=i==null?void 0:i.form;t?t.requestSubmit():e()},validateDateInput(i,e,t,a,s){var n,h,D,x;const r=i.value;r&&(t&&t>r?e.setValidity({rangeUnderflow:!0},((h=(n=s==null?void 0:s.forms)==null?void 0:n.messages)==null?void 0:h.rangeUnderflow)||"Value is below minimum",i):a&&a<r&&e.setValidity({rangeOverflow:!0},((x=(D=s==null?void 0:s.forms)==null?void 0:D.messages)==null?void 0:x.rangeOverflow)||"Value is above maximum",i))}},C={addToSelected(i,e,t,a){const s=i.target;if(!s.value)return;const r=t?u.newDate(t):null,n=a?u.newDate(a):null,h=u.newDate(s.value.split(",")[0]);h&&!isNaN(h.getTime())&&(!r||h>=r)&&(!n||h<=n)&&e.value&&e.value.handleDateSelect(h),s.value=""},handleCalendarPosition(i,e,t=!1){var h;if(!i.value||!e.value)return;const a=((h=e.value.parentElement)==null?void 0:h.getBoundingClientRect())||e.value.getBoundingClientRect(),s=t?a.height+30:a.height,r=i.value.getBoundingClientRect().height;let n=t?"calc(100% - 30px)":"100%";a&&a.top+r>window.innerHeight&&a.top-r>0&&(n=`calc(100% - ${s}px - ${r}px)`),i.value.style.top=n}},$={createDocumentClickListener(i,e,t,a,s,r){return n=>{i!=null&&i.value&&(t!=null&&t.value)&&!i.value.contains(n.target)&&!(e!=null&&e.value&&e.value.contains(n.target))&&!t.value.contains(n.target)&&!n.target.closest(".pkt-calendar-popup")&&a()&&(s(),r())}},createDocumentKeydownListener(i,e){return t=>{t.key==="Escape"&&i()&&e()}},handleFocusOut(i,e,t,a){e.contains(i.target)||(t(),a())}},b={getInputClasses(i,e,t,a){return{"pkt-input":!0,"pkt-datepicker__input":!0,"pkt-input--fullwidth":i,"pkt-datepicker--hasrangelabels":e,"pkt-datepicker--multiple":t,"pkt-datepicker--range":a}},getButtonClasses(){return{"pkt-input-icon":!0,"pkt-btn":!0,"pkt-btn--icon-only":!0,"pkt-btn--tertiary":!0,"pkt-datepicker__calendar-button":!0}},getRangeLabelClasses(i){return{"pkt-input-prefix":i,"pkt-hide":!i}}},w={processDateSelection(i,e,t){return!e&&!t?i[0]||"":Array.isArray(i)?i.join(","):i},updateInputValues(i,e,t,a,s,r){i.value&&(a&&(e!=null&&e.value)?(i.value.value=t[0]??"",e.value.value=t[1]??"",r(i.value),r(e.value)):s||(i.value.value=t.length?t[0]:"",r(i.value)))},processRangeBlur(i,e,t,a,s){var n;const r=i.target;if(r.value){s(r);const h=u.fromISOToDate(r.value);h&&e[0]!==r.value&&e[1]&&(a(),(n=t==null?void 0:t.value)==null||n.handleDateSelect(h))}else e[0]&&a()}},y={handleInputKeydown(i,e,t,a,s,r){const{key:n}=i;n===","&&(i.preventDefault(),r?r(i):s&&s()),(n==="Space"||n===" ")&&(i.preventDefault(),e(i)),n==="Enter"&&(i.preventDefault(),t?t():a?a():s&&s())},handleButtonKeydown(i,e){const{key:t}=i;(t==="Enter"||t===" "||t==="Space")&&(i.preventDefault(),e(i))}};var B=Object.defineProperty,L=Object.getOwnPropertyDescriptor,k=(i,e,t,a)=>{for(var s=a>1?void 0:a?L(e,t):e,r=i.length-1,n;r>=0;r--)(n=i[r])&&(s=(a?n(e,t,s):n(s))||s);return a&&s&&B(e,t,s),s};exports.PktDateTags=class extends l.PktElement{constructor(){super(...arguments),this.dates=[],this.dateformat="dd.MM.yyyy",this.className="pkt-datepicker__tags",this.idBase=O.uuidish()}render(){return this.classes={"pkt-date-tags":!0,[this.className]:!0},l.x`
|
|
2
|
+
<div class=${g.e(this.classes)} aria-live="polite">
|
|
3
|
+
${Array.isArray(this.dates)&&this.dates[0]?_.c(c.sortDates((this.dates??[]).filter(Boolean)),e=>e,e=>{var t;return l.x` <pkt-tag
|
|
4
|
+
id=${this.idBase+e+"-tag"}
|
|
5
|
+
closeTag
|
|
6
|
+
@close=${()=>{this.dispatchEvent(new CustomEvent("date-tag-removed",{detail:e}))}}
|
|
7
|
+
.ariaLabel=${`${(t=this.strings)==null?void 0:t.calendar.deleteDate} ${u.fromISOtoLocal(e,this.dateformat)}`}
|
|
8
|
+
>
|
|
9
|
+
<time datetime=${e}>${u.fromISOtoLocal(e,this.dateformat)}</time>
|
|
10
|
+
</pkt-tag>`}):l.E}
|
|
11
|
+
</div>
|
|
12
|
+
`}};k([l.n({type:Array})],exports.PktDateTags.prototype,"dates",2);k([l.n({type:String})],exports.PktDateTags.prototype,"dateformat",2);k([l.n({type:String,attribute:"class"})],exports.PktDateTags.prototype,"className",2);k([l.n({type:String,attribute:"id-base"})],exports.PktDateTags.prototype,"idBase",2);exports.PktDateTags=k([l.t("pkt-date-tags")],exports.PktDateTags);const F={dateformat:{default:"dd.MM.yyyy"},weeknumbers:{default:!1},withcontrols:{default:!1},multiple:{default:!1},range:{default:!1}},v={props:F};var q=Object.defineProperty,E=Object.getOwnPropertyDescriptor,o=(i,e,t,a)=>{for(var s=a>1?void 0:a?E(e,t):e,r=i.length-1,n;r>=0;r--)(n=i[r])&&(s=(a?n(e,t,s):n(s))||s);return a&&s&&q(e,t,s),s};exports.PktDatepicker=class extends S.PktInputElement{constructor(){super(),this._valueProperty="",this._value=[],this.label="Datovelger",this.dateformat=v.props.dateformat.default,this.multiple=v.props.multiple.default,this.maxlength=null,this.range=v.props.range.default,this.showRangeLabels=!1,this.min=null,this.max=null,this.weeknumbers=v.props.weeknumbers.default,this.withcontrols=v.props.withcontrols.default,this.excludedates=[],this.excludeweekdays=[],this.currentmonth=null,this.calendarOpen=!1,this.timezone="Europe/Oslo",this.inputClasses={},this.buttonClasses={},this.inputRef=p.e(),this.inputRefTo=p.e(),this.btnRef=p.e(),this.calRef=p.e(),this.popupRef=p.e(),this.helptextSlot=p.e(),this.addToSelected=e=>{C.addToSelected(e,this.calRef,this.min,this.max)},this.slotController=new T.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 A.getInputType()}connectedCallback(){super.connectedCallback(),this.timezone&&this.timezone!==window.pktTz&&(window.pktTz=this.timezone),this.name=c.normalizeNameForMultiple(this.name,this.multiple,this.range)||this.name,this.documentClickListener=$.createDocumentClickListener(this.inputRef,this.inputRefTo,this.btnRef,()=>this.calendarOpen,this.onBlur.bind(this),this.hideCalendar.bind(this)),this.documentKeydownListener=$.createDocumentKeydownListener(()=>this.calendarOpen,this.hideCalendar.bind(this)),document.addEventListener("click",this.documentClickListener),document.addEventListener("keydown",this.documentKeydownListener)}disconnectedCallback(){super.disconnectedCallback(),this.documentClickListener&&document.removeEventListener("click",this.documentClickListener),this.documentKeydownListener&&document.removeEventListener("keydown",this.documentKeydownListener)}onInput(){this.dispatchEvent(new Event("input",{bubbles:!0}))}valueChanged(e,t){if(e===t)return;const a=c.parseValue(e),s=this.multiple&&a.length>1?c.filterSelectableDates(a,this.min,this.max,this.excludedates,this.excludeweekdays):a;if(this.range&&!c.validateRangeOrder(s)){this._value=[],this._valueProperty="",super.valueChanged("",t);return}this._value=s;const r=c.formatValue(s);this._valueProperty!==r&&(this._valueProperty=r),super.valueChanged(r,t)}attributeChangedCallback(e,t,a){e==="value"&&this.value!==t&&this.valueChanged(a,t),e==="excludedates"&&typeof this.excludedates=="string"&&(this.excludedates=c.normalizeStringArray(a||"")),e==="excludeweekdays"&&typeof this.excludeweekdays=="string"&&(this.excludeweekdays=c.normalizeStringArray(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"),s=Array.isArray(a)?a.join(","):a;this.valueChanged(t,s)}(e.has("multiple")||e.has("range"))&&(this.name=c.normalizeNameForMultiple(this.name,this.multiple,this.range)||this.name),e.has("multiple")&&(this.multiple&&!Array.isArray(this._value)?this._value=c.parseValue(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)}renderInput(){return l.x`
|
|
13
|
+
<input
|
|
14
|
+
class="${g.e(this.inputClasses)}"
|
|
15
|
+
.type=${this.inputType}
|
|
16
|
+
id="${this.id}-input"
|
|
17
|
+
.value=${this._value[0]??""}
|
|
18
|
+
min=${d.o(this.min)}
|
|
19
|
+
max=${d.o(this.max)}
|
|
20
|
+
placeholder=${d.o(this.placeholder)}
|
|
21
|
+
?readonly=${this.readonly}
|
|
22
|
+
aria-describedby="${this.id}-helptext"
|
|
23
|
+
@click=${e=>{e.preventDefault(),this.showCalendar()}}
|
|
24
|
+
?disabled=${this.disabled}
|
|
25
|
+
@keydown=${e=>y.handleInputKeydown(e,t=>this.toggleCalendar(t),()=>f.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()})}
|
|
26
|
+
@input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
|
|
27
|
+
@focus=${()=>{this.onFocus(),m.isMobileSafari()&&this.showCalendar()}}
|
|
28
|
+
@blur=${e=>{var t;(t=this.calRef.value)!=null&&t.contains(e.relatedTarget)||this.onBlur(),this.manageValidity(e.target),this.value=e.target.value}}
|
|
29
|
+
@change=${e=>{this.touched=!0,e.stopImmediatePropagation()}}
|
|
30
|
+
${p.n(this.inputRef)}
|
|
31
|
+
/>
|
|
32
|
+
`}renderRangeInput(){const e=b.getRangeLabelClasses(this.showRangeLabels);return l.x`
|
|
33
|
+
${this.showRangeLabels?l.x` <div class="pkt-input-prefix">${this.strings.generic.from}</div> `:l.E}
|
|
34
|
+
<input
|
|
35
|
+
class=${g.e(this.inputClasses)}
|
|
36
|
+
.type=${this.inputType}
|
|
37
|
+
id="${this.id}-input"
|
|
38
|
+
.value=${this._value[0]??""}
|
|
39
|
+
min=${d.o(this.min)}
|
|
40
|
+
max=${d.o(this.max)}
|
|
41
|
+
placeholder=${d.o(this.placeholder)}
|
|
42
|
+
?readonly=${this.readonly}
|
|
43
|
+
?disabled=${this.disabled}
|
|
44
|
+
@click=${t=>{t.preventDefault(),this.showCalendar()}}
|
|
45
|
+
@keydown=${t=>y.handleInputKeydown(t,a=>this.toggleCalendar(a),()=>f.submitFormOrFallback(this.internals,()=>{var a;return(a=this.inputRefTo.value)==null?void 0:a.focus()}),()=>{var a;return(a=this.inputRefTo.value)==null?void 0:a.focus()},()=>{var a;return(a=this.inputRef.value)==null?void 0:a.blur()})}
|
|
46
|
+
@input=${t=>{this.onInput(),t.stopImmediatePropagation()}}
|
|
47
|
+
@focus=${()=>{this.onFocus(),m.isMobileSafari()&&this.showCalendar()}}
|
|
48
|
+
@blur=${t=>{w.processRangeBlur(t,this._value,this.calRef,()=>this.clearInputValue(),a=>this.manageValidity(a))}}
|
|
49
|
+
@change=${t=>{t.stopImmediatePropagation()}}
|
|
50
|
+
${p.n(this.inputRef)}
|
|
51
|
+
/>
|
|
52
|
+
<div class="${g.e(e)}" id="${this.id}-to-label">
|
|
53
|
+
${this.strings.generic.to}
|
|
54
|
+
</div>
|
|
55
|
+
${this.showRangeLabels?l.E:l.x` <div class="pkt-input-separator">–</div> `}
|
|
56
|
+
<input
|
|
57
|
+
class=${g.e(this.inputClasses)}
|
|
58
|
+
.type=${this.inputType}
|
|
59
|
+
id="${this.id}-to"
|
|
60
|
+
aria-labelledby="${this.id}-to-label"
|
|
61
|
+
.value=${this._value[1]??""}
|
|
62
|
+
min=${d.o(this.min)}
|
|
63
|
+
max=${d.o(this.max)}
|
|
64
|
+
placeholder=${d.o(this.placeholder)}
|
|
65
|
+
?readonly=${this.readonly}
|
|
66
|
+
?disabled=${this.disabled}
|
|
67
|
+
@click=${t=>{t.preventDefault(),this.showCalendar()}}
|
|
68
|
+
@keydown=${t=>y.handleInputKeydown(t,a=>this.toggleCalendar(a),()=>f.submitFormOrFallback(this.internals,()=>{var a;return(a=this.inputRefTo.value)==null?void 0:a.blur()}),void 0,()=>{var a;return(a=this.inputRefTo.value)==null?void 0:a.blur()})}
|
|
69
|
+
@input=${t=>{this.onInput(),t.stopImmediatePropagation()}}
|
|
70
|
+
@focus=${()=>{this.onFocus(),m.isMobileSafari()&&this.showCalendar()}}
|
|
71
|
+
@blur=${t=>{var a,s,r;if((a=this.calRef.value)!=null&&a.contains(t.relatedTarget)||this.onBlur(),t.target.value){this.manageValidity(t.target),f.validateDateInput(t.target,this.internals,this.min,this.max,this.strings);const n=u.fromISOToDate(t.target.value);n&&this._value[1]!==u.formatISODate(n)&&((r=(s=this.calRef)==null?void 0:s.value)==null||r.handleDateSelect(n))}}}
|
|
72
|
+
@change=${t=>{this.touched=!0,t.stopImmediatePropagation()}}
|
|
73
|
+
${p.n(this.inputRefTo)}
|
|
74
|
+
/>
|
|
75
|
+
`}renderMultipleInput(){return l.x`
|
|
76
|
+
<input
|
|
77
|
+
class=${g.e(this.inputClasses)}
|
|
78
|
+
.type=${this.inputType}
|
|
79
|
+
id="${this.id}-input"
|
|
80
|
+
min=${d.o(this.min)}
|
|
81
|
+
max=${d.o(this.max)}
|
|
82
|
+
placeholder=${d.o(this.placeholder)}
|
|
83
|
+
?readonly=${this.readonly}
|
|
84
|
+
?disabled=${this.disabled||this.maxlength&&this._value.length>=this.maxlength}
|
|
85
|
+
@click=${e=>{e.preventDefault(),this.showCalendar()}}
|
|
86
|
+
@blur=${e=>{var t;(t=this.calRef.value)!=null&&t.contains(e.relatedTarget)||this.onBlur(),this.addToSelected(e)}}
|
|
87
|
+
@input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
|
|
88
|
+
@focus=${()=>{this.onFocus(),m.isMobileSafari()&&this.showCalendar()}}
|
|
89
|
+
@keydown=${e=>y.handleInputKeydown(e,t=>this.toggleCalendar(t),()=>f.submitFormOrFallback(this.internals,()=>{var t;return(t=this.inputRef.value)==null?void 0:t.blur()}),void 0,void 0,t=>this.addToSelected(t))}
|
|
90
|
+
@change=${e=>{this.touched=!0,e.stopImmediatePropagation()}}
|
|
91
|
+
${p.n(this.inputRef)}
|
|
92
|
+
/>
|
|
93
|
+
`}renderCalendar(){return l.x`<div
|
|
94
|
+
class="pkt-calendar-popup pkt-${this.calendarOpen?"show":"hide"}"
|
|
95
|
+
@focusout=${e=>{this.calendarOpen&&this.handleFocusOut(e)}}
|
|
96
|
+
id="${this.id}-popup"
|
|
97
|
+
${p.n(this.popupRef)}
|
|
98
|
+
>
|
|
99
|
+
<pkt-calendar
|
|
100
|
+
id="${this.id}-calendar"
|
|
101
|
+
?multiple=${this.multiple}
|
|
102
|
+
?range=${this.range}
|
|
103
|
+
?weeknumbers=${this.weeknumbers}
|
|
104
|
+
?withcontrols=${this.withcontrols}
|
|
105
|
+
.maxMultiple=${this.maxlength}
|
|
106
|
+
.selected=${this._value}
|
|
107
|
+
.earliest=${this.min}
|
|
108
|
+
.latest=${this.max}
|
|
109
|
+
.excludedates=${Array.isArray(this.excludedates)?this.excludedates:this.excludedates.split(",")}
|
|
110
|
+
.excludeweekdays=${this.excludeweekdays}
|
|
111
|
+
.currentmonth=${this.currentmonth?u.parseISODateString(this.currentmonth):null}
|
|
112
|
+
@date-selected=${e=>{this.value=w.processDateSelection(e.detail,this.multiple,this.range),this._value=e.detail,w.updateInputValues(this.inputRef,this.inputRefTo,this._value,this.range,this.multiple,t=>this.manageValidity(t))}}
|
|
113
|
+
@close=${()=>{this.onBlur(),this.hideCalendar()}}
|
|
114
|
+
${p.n(this.calRef)}
|
|
115
|
+
></pkt-calendar>
|
|
116
|
+
</div>`}render(){return this.inputClasses=b.getInputClasses(this.fullwidth,this.showRangeLabels,this.multiple,this.range),this.buttonClasses=b.getButtonClasses(),l.x`
|
|
117
|
+
<pkt-input-wrapper
|
|
118
|
+
label="${this.label}"
|
|
119
|
+
forId="${this.id}-input"
|
|
120
|
+
?counter=${this.multiple&&!!this.maxlength}
|
|
121
|
+
.counterCurrent=${this.value?this._value.length:0}
|
|
122
|
+
.counterMaxLength=${this.maxlength}
|
|
123
|
+
?disabled=${this.disabled}
|
|
124
|
+
?hasError=${this.hasError}
|
|
125
|
+
?hasFieldset=${this.hasFieldset}
|
|
126
|
+
?inline=${this.inline}
|
|
127
|
+
?required=${this.required}
|
|
128
|
+
?optionalTag=${this.optionalTag}
|
|
129
|
+
?requiredTag=${this.requiredTag}
|
|
130
|
+
?useWrapper=${this.useWrapper}
|
|
131
|
+
.optionalText=${this.optionalText}
|
|
132
|
+
.requiredText=${this.requiredText}
|
|
133
|
+
.tagText=${this.tagText}
|
|
134
|
+
.errorMessage=${this.errorMessage}
|
|
135
|
+
.helptext=${this.helptext}
|
|
136
|
+
.helptextDropdown=${this.helptextDropdown}
|
|
137
|
+
.helptextDropdownButton=${this.helptextDropdownButton}
|
|
138
|
+
.ariaDescribedBy=${this.ariaDescribedBy}
|
|
139
|
+
class="pkt-datepicker"
|
|
140
|
+
>
|
|
141
|
+
<div class="pkt-contents" ${p.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
|
|
142
|
+
${this.multiple?l.x`<pkt-date-tags
|
|
143
|
+
.dates=${this._value}
|
|
144
|
+
dateformat=${this.dateformat}
|
|
145
|
+
strings=${this.strings}
|
|
146
|
+
id-base=${this.id}
|
|
147
|
+
@date-tag-removed=${e=>{var t;(t=this.calRef.value)==null||t.handleDateSelect(u.fromISOToDate(e.detail))}}
|
|
148
|
+
></pkt-date-tags>`:l.E}
|
|
149
|
+
<div
|
|
150
|
+
class="pkt-datepicker__inputs ${this.range&&this.showRangeLabels?"pkt-input__range-inputs":""}"
|
|
151
|
+
>
|
|
152
|
+
<div class="pkt-input__container">
|
|
153
|
+
${this.range?this.renderRangeInput():this.multiple?this.renderMultipleInput():this.renderInput()}
|
|
154
|
+
<button
|
|
155
|
+
class="${g.e(this.buttonClasses)}"
|
|
156
|
+
type="button"
|
|
157
|
+
@click=${this.toggleCalendar}
|
|
158
|
+
@keydown=${e=>y.handleButtonKeydown(e,t=>this.toggleCalendar(t))}
|
|
159
|
+
?disabled=${this.disabled}
|
|
160
|
+
${p.n(this.btnRef)}
|
|
161
|
+
>
|
|
162
|
+
<pkt-icon name="calendar"></pkt-icon>
|
|
163
|
+
<span class="pkt-btn__text">${this.strings.calendar.buttonAltText}</span>
|
|
164
|
+
</button>
|
|
165
|
+
</div>
|
|
166
|
+
</div>
|
|
167
|
+
</pkt-input-wrapper>
|
|
168
|
+
${this.renderCalendar()}
|
|
169
|
+
`}handleCalendarPosition(){const e=this.multiple&&!!this.maxlength;C.handleCalendarPosition(this.popupRef,this.inputRef,e)}handleFocusOut(e){$.handleFocusOut(e,this,this.onBlur.bind(this),this.hideCalendar.bind(this))}async showCalendar(){var e;this.calendarOpen=!0,await I(20),this.handleCalendarPosition(),m.isMobileSafari()&&((e=this.calRef.value)==null||e.focusOnCurrentDate())}hideCalendar(){this.calendarOpen=!1}async toggleCalendar(e){e.preventDefault(),this.calendarOpen?this.hideCalendar():this.showCalendar()}clearInputValue(){this._value=[],this.value=""}};o([l.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"value",1);o([l.n({type:Array})],exports.PktDatepicker.prototype,"_value",2);o([l.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"label",2);o([l.n({type:String})],exports.PktDatepicker.prototype,"dateformat",2);o([l.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"multiple",2);o([l.n({type:Number,reflect:!0})],exports.PktDatepicker.prototype,"maxlength",2);o([l.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"range",2);o([l.n({type:Boolean})],exports.PktDatepicker.prototype,"showRangeLabels",2);o([l.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"min",2);o([l.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"max",2);o([l.n({type:Boolean})],exports.PktDatepicker.prototype,"weeknumbers",2);o([l.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"withcontrols",2);o([l.n({converter:u.converters.csvToArray})],exports.PktDatepicker.prototype,"excludedates",2);o([l.n({converter:u.converters.csvToArray})],exports.PktDatepicker.prototype,"excludeweekdays",2);o([l.n({type:String})],exports.PktDatepicker.prototype,"currentmonth",2);o([l.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"calendarOpen",2);o([l.n({type:String})],exports.PktDatepicker.prototype,"timezone",2);o([P.r()],exports.PktDatepicker.prototype,"inputClasses",2);o([P.r()],exports.PktDatepicker.prototype,"buttonClasses",2);exports.PktDatepicker=o([l.t("pkt-datepicker")],exports.PktDatepicker);
|
package/dist/index.d.ts
CHANGED
|
@@ -662,6 +662,8 @@ export declare class PktDatepicker extends PktInputElement {
|
|
|
662
662
|
* Element attributes and properties
|
|
663
663
|
*/
|
|
664
664
|
private _valueProperty;
|
|
665
|
+
private documentClickListener?;
|
|
666
|
+
private documentKeydownListener?;
|
|
665
667
|
get value(): string;
|
|
666
668
|
set value(newValue: string | string[]);
|
|
667
669
|
_value: string[];
|
|
@@ -682,11 +684,15 @@ export declare class PktDatepicker extends PktInputElement {
|
|
|
682
684
|
timezone: string;
|
|
683
685
|
inputClasses: {};
|
|
684
686
|
buttonClasses: {};
|
|
687
|
+
/**
|
|
688
|
+
* Computed properties
|
|
689
|
+
*/
|
|
690
|
+
get inputType(): string;
|
|
685
691
|
/**
|
|
686
692
|
* Housekeeping / lifecycle methods
|
|
687
693
|
*/
|
|
688
694
|
constructor();
|
|
689
|
-
connectedCallback():
|
|
695
|
+
connectedCallback(): void;
|
|
690
696
|
disconnectedCallback(): void;
|
|
691
697
|
onInput(): void;
|
|
692
698
|
valueChanged(newValue: string | null, oldValue: string | null): void;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const s=require("./element-D62wHiNU.cjs"),p=require("./state-BkE_Rxl7.cjs"),h=require("./if-defined-CkVc_RJD.cjs"),u=require("./repeat-DzibMwhi.cjs"),c=require("./class-map-CG3vIaNm.cjs"),d=require("./stringutils-CkVRq4jP.cjs");var b=Object.defineProperty,f=Object.getOwnPropertyDescriptor,n=(r,e,t,i)=>{for(var
|
|
1
|
+
"use strict";const s=require("./element-D62wHiNU.cjs"),p=require("./state-BkE_Rxl7.cjs"),h=require("./if-defined-CkVc_RJD.cjs"),u=require("./repeat-DzibMwhi.cjs"),c=require("./class-map-CG3vIaNm.cjs"),d=require("./stringutils-CkVRq4jP.cjs");var b=Object.defineProperty,f=Object.getOwnPropertyDescriptor,n=(r,e,t,i)=>{for(var l=i>1?void 0:i?f(e,t):e,o=r.length-1,a;o>=0;o--)(a=r[o])&&(l=(i?a(e,t,l):a(l))||l);return i&&l&&b(e,t,l),l};exports.PktListbox=class extends s.PktElement{constructor(){super(...arguments),this.id=d.uuidish(),this.label=null,this.options=[],this.isOpen=!1,this.disabled=!1,this.includeSearch=!1,this.isMultiSelect=!1,this.allowUserInput=!1,this.maxIsReached=!1,this.customUserInput=null,this.searchPlaceholder=null,this.searchValue=null,this.maxLength=0,this.userMessage=null,this._selectedOptions=0,this._filteredOptions=[]}connectedCallback(){super.connectedCallback(),this.includeSearch&&!this.searchValue&&(this.searchValue=""),this.options.length>0&&this.filterOptions(),this.setAttribute("tabindex","-1"),this.addEventListener("focus",this.focusFirstOrSelectedOption)}updated(e){(e.has("options")||e.has("searchValue"))&&this.filterOptions(),super.updated(e)}attributeChangedCallback(e,t,i){(e==="options"||e==="searchValue"||e==="search-value")&&this.filterOptions(),super.attributeChangedCallback(e,t,i)}render(){return s.x`
|
|
2
2
|
<div
|
|
3
3
|
class=${c.e({"pkt-listbox":!0,"pkt-listbox__open":this.isOpen,"pkt-txt-16-light":!0})}
|
|
4
4
|
role="listbox"
|
|
@@ -92,4 +92,4 @@
|
|
|
92
92
|
role="searchbox"
|
|
93
93
|
/>
|
|
94
94
|
</div>
|
|
95
|
-
`:s.E}handleSearchInput(e){this.searchValue=e.target.value,this.dispatchEvent(new CustomEvent("search",{detail:this.searchValue,bubbles:!1}))}handleSearchKeydown(e){switch(e.key){case"Enter":e.preventDefault();break;case"ArrowUp":case"Escape":this.closeOptions(),e.preventDefault();break;case"ArrowDown":case"Tab":this.focusFirstOrSelectedOption();break}}handleOptionKeydown(e){const t=e.currentTarget,i=t.dataset.value,
|
|
95
|
+
`:s.E}handleSearchInput(e){this.searchValue=e.target.value,this.dispatchEvent(new CustomEvent("search",{detail:this.searchValue,bubbles:!1}))}handleSearchKeydown(e){switch(e.key){case"Enter":e.preventDefault();break;case"ArrowUp":case"Escape":this.closeOptions(),e.preventDefault();break;case"ArrowDown":case"Tab":this.focusFirstOrSelectedOption();break}}handleOptionKeydown(e){const t=e.currentTarget,i=t.dataset.value,l=t.dataset.type,o=t.dataset.selected==="true";if(!(!this.getOptionElements().length&&(!this.customUserInput||!this.allowUserInput&&this.customUserInput)&&l!=="new-option"&&l!=="searchbox"))switch(e.key){case" ":case"Enter":this.toggleOption(t),e.preventDefault();break;case"Backspace":i&&(o?this.toggleOption(t):this.closeOptions()),e.preventDefault();break;case"Escape":case"Tab":this.closeOptions();break;case"ArrowDown":e.altKey?this.focusLastOption():l==="searchbox"||l==="new-option"?this.focusFirstOption():this.focusNextOption(t),e.preventDefault();break;case"ArrowUp":if(e.altKey)this.focusFirstOption();else if(t.dataset.index==="0"&&this.includeSearch){const a=this.querySelector('[role="searchbox"]');a&&a.focus()}else if(t.dataset.index==="0"&&this.customUserInput){const a=this.querySelector('[data-type="new-option"]');a&&a.focus()}else this.focusPreviousOption(t);e.preventDefault();break;case"Home":this.focusFirstOption(),e.preventDefault();break;case"End":this.focusLastOption(),e.preventDefault();break;default:(e.metaKey||e.ctrlKey)&&e.key==="a"&&(this.selectAll(),e.preventDefault()),this.isLetterOrSpace(e.key)&&(this.handleTypeAhead(e.key),e.preventDefault());break}}focusAndScrollIntoView(e){e.scrollIntoView({block:"nearest"}),window.setTimeout(()=>e.focus(),0)}focusNextOption(e){const t=e.nextElementSibling;t&&this.focusAndScrollIntoView(t)}focusPreviousOption(e){const t=e.previousElementSibling;if(e.dataset.index==="0"&&this.includeSearch){const i=this.querySelector('[role="searchbox"]');i&&this.focusAndScrollIntoView(i)}else t&&this.focusAndScrollIntoView(t)}focusFirstOption(){const e=this.getOptionElements()[0];e&&this.focusAndScrollIntoView(e)}focusLastOption(){const e=this.getOptionElements().pop();e&&this.focusAndScrollIntoView(e)}focusFirstOrSelectedOption(){if(this.disabled)return;const e=this.getOptionElements().find(t=>t.dataset.selected==="true");if(this.allowUserInput&&this.customUserInput){const t=this.querySelector('[data-type="new-option"]');this.focusAndScrollIntoView(t)}else if(e)this.focusAndScrollIntoView(e);else if(this.includeSearch&&!(document.activeElement instanceof HTMLInputElement)){const t=this.querySelector('[role="searchbox"]');window.setTimeout(()=>t.focus(),0)}else this.focusFirstOption()}toggleOption(e){const t=e instanceof HTMLElement?e.dataset.disabled:e.disabled;if(this.disabled||t)return;const i=e instanceof HTMLElement?e.dataset.value:e.value;this.dispatchEvent(new CustomEvent("option-toggle",{detail:i,bubbles:!1}))}selectAll(){this.dispatchEvent(new CustomEvent("select-all",{bubbles:!1}))}closeOptions(){this.dispatchEvent(new CustomEvent("close-options",{bubbles:!1}))}filterOptions(){this.searchValue?this._filteredOptions=this.options.filter(e=>{var i;return(e.fulltext||e.label+e.value+(e.prefix||"")).toLowerCase().includes(((i=this.searchValue)==null?void 0:i.toLowerCase())||"")}):this._filteredOptions=[...this.options]}isLetterOrSpace(e){return/^[\p{L} ]$/u.test(e)}handleTypeAhead(e){this.typeAheadString+=e.toLowerCase(),this.typeAheadTimeout&&clearTimeout(this.typeAheadTimeout),this.typeAheadTimeout=window.setTimeout(()=>{this.typeAheadString=""},500);const i=this.getOptionElements().find(l=>{var o;return(o=l.textContent)==null?void 0:o.trim().toLowerCase().startsWith(this.typeAheadString)});i&&this.focusAndScrollIntoView(i)}getOptionElements(){return this._filteredOptions.length?Array.from(this.querySelectorAll('[role="option"]:not([data-disabled])')||[]):[]}};n([s.n({type:String})],exports.PktListbox.prototype,"id",2);n([s.n({type:String})],exports.PktListbox.prototype,"label",2);n([s.n({type:Array})],exports.PktListbox.prototype,"options",2);n([s.n({type:Boolean,reflect:!0})],exports.PktListbox.prototype,"isOpen",2);n([s.n({type:Boolean})],exports.PktListbox.prototype,"disabled",2);n([s.n({type:Boolean})],exports.PktListbox.prototype,"includeSearch",2);n([s.n({type:Boolean})],exports.PktListbox.prototype,"isMultiSelect",2);n([s.n({type:Boolean})],exports.PktListbox.prototype,"allowUserInput",2);n([s.n({type:Boolean})],exports.PktListbox.prototype,"maxIsReached",2);n([s.n({type:String})],exports.PktListbox.prototype,"customUserInput",2);n([s.n({type:String})],exports.PktListbox.prototype,"searchPlaceholder",2);n([s.n({type:String})],exports.PktListbox.prototype,"searchValue",2);n([s.n({type:Number})],exports.PktListbox.prototype,"maxLength",2);n([s.n({type:String})],exports.PktListbox.prototype,"userMessage",2);n([p.r()],exports.PktListbox.prototype,"_filteredOptions",2);exports.PktListbox=n([s.t("pkt-listbox")],exports.PktListbox);
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import { P as
|
|
1
|
+
import { P as d, x as r, E as p, t as b, n as l, a as f } from "./element-DJZPsA_J.js";
|
|
2
2
|
import { r as m } from "./state-CPQXJ4Ct.js";
|
|
3
3
|
import { o as y } from "./if-defined-D3lgJqT7.js";
|
|
4
|
-
import { c as
|
|
5
|
-
import { e as
|
|
6
|
-
import { u as
|
|
4
|
+
import { c as x } from "./repeat-B6qPUgAq.js";
|
|
5
|
+
import { e as u } from "./class-map-Dw6Wrxwi.js";
|
|
6
|
+
import { u as k } from "./stringutils-DJjRa8dG.js";
|
|
7
7
|
var O = Object.defineProperty, g = Object.getOwnPropertyDescriptor, a = (e, t, s, o) => {
|
|
8
8
|
for (var n = o > 1 ? void 0 : o ? g(t, s) : t, c = e.length - 1, h; c >= 0; c--)
|
|
9
9
|
(h = e[c]) && (n = (o ? h(t, s, n) : h(n)) || n);
|
|
10
10
|
return o && n && O(t, s, n), n;
|
|
11
11
|
};
|
|
12
|
-
let i = class extends
|
|
12
|
+
let i = class extends d {
|
|
13
13
|
constructor() {
|
|
14
|
-
super(...arguments), this.id =
|
|
14
|
+
super(...arguments), this.id = k(), this.label = null, this.options = [], this.isOpen = !1, this.disabled = !1, this.includeSearch = !1, this.isMultiSelect = !1, this.allowUserInput = !1, this.maxIsReached = !1, this.customUserInput = null, this.searchPlaceholder = null, this.searchValue = null, this.maxLength = 0, this.userMessage = null, this._selectedOptions = 0, this._filteredOptions = [];
|
|
15
15
|
}
|
|
16
16
|
// Lifecycle methods
|
|
17
17
|
connectedCallback() {
|
|
@@ -27,7 +27,7 @@ let i = class extends u {
|
|
|
27
27
|
render() {
|
|
28
28
|
return r`
|
|
29
29
|
<div
|
|
30
|
-
class=${
|
|
30
|
+
class=${u({
|
|
31
31
|
"pkt-listbox": !0,
|
|
32
32
|
"pkt-listbox__open": this.isOpen,
|
|
33
33
|
"pkt-txt-16-light": !0
|
|
@@ -61,7 +61,7 @@ let i = class extends u {
|
|
|
61
61
|
}
|
|
62
62
|
renderList() {
|
|
63
63
|
return r`
|
|
64
|
-
${
|
|
64
|
+
${x(
|
|
65
65
|
this._filteredOptions,
|
|
66
66
|
(e) => e.value,
|
|
67
67
|
(e, t) => r`
|
|
@@ -71,7 +71,7 @@ let i = class extends u {
|
|
|
71
71
|
}}
|
|
72
72
|
aria-selected=${e.selected ? "true" : "false"}
|
|
73
73
|
@keydown=${this.handleOptionKeydown}
|
|
74
|
-
class=${
|
|
74
|
+
class=${u({
|
|
75
75
|
"pkt-listbox__option": !0,
|
|
76
76
|
"pkt-listbox__option--selected": !!(!this.isMultiSelect && e.selected),
|
|
77
77
|
"pkt-listbox__option--checkBox": this.isMultiSelect
|
|
@@ -282,7 +282,7 @@ let i = class extends u {
|
|
|
282
282
|
filterOptions() {
|
|
283
283
|
this.searchValue ? this._filteredOptions = this.options.filter((e) => {
|
|
284
284
|
var s;
|
|
285
|
-
return (e.label + e.value).toLowerCase().includes(((s = this.searchValue) == null ? void 0 : s.toLowerCase()) || "");
|
|
285
|
+
return (e.fulltext || e.label + e.value + (e.prefix || "")).toLowerCase().includes(((s = this.searchValue) == null ? void 0 : s.toLowerCase()) || "");
|
|
286
286
|
}) : this._filteredOptions = [...this.options];
|
|
287
287
|
}
|
|
288
288
|
isLetterOrSpace(e) {
|
package/dist/pkt-calendar.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./calendar-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./calendar-DH-fCGyW.cjs"),t=e.PktCalendar;Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>e.PktCalendar});exports.default=t;
|
package/dist/pkt-calendar.js
CHANGED
package/dist/pkt-combobox.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./combobox-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./combobox-cK_746ek.cjs"),o=e.PktCombobox;Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>e.PktCombobox});exports.default=o;
|
package/dist/pkt-combobox.js
CHANGED
package/dist/pkt-datepicker.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./datepicker-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./datepicker-n49TAIAt.cjs"),t=e.PktDatepicker;Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>e.PktDatepicker});exports.default=t;
|
package/dist/pkt-datepicker.js
CHANGED
package/dist/pkt-index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./alert-ZP5-fqlt.cjs"),l=require("./accordionitem-BOmnm80g.cjs"),b=require("./backlink-BT7DO6rV.cjs"),m=require("./button-BfqxLnMT.cjs"),P=require("./calendar-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./alert-ZP5-fqlt.cjs"),l=require("./accordionitem-BOmnm80g.cjs"),b=require("./backlink-BT7DO6rV.cjs"),m=require("./button-BfqxLnMT.cjs"),P=require("./calendar-DH-fCGyW.cjs"),g=require("./card-B9RPShvV.cjs"),h=require("./combobox-cK_746ek.cjs"),f=require("./consent-DFrsiYGQ.cjs"),y=require("./checkbox-CH8xeK-0.cjs"),t=require("./element-D62wHiNU.cjs"),O=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-BfgcOXko.cjs"),j=require("./class-map-CG3vIaNm.cjs"),k=require("./datepicker-n49TAIAt.cjs"),q=require("./helptext-D1fkGmfT.cjs"),x=require("./heading-H_FWjo2k.cjs"),C=require("./icon-__Hjt2XZ.cjs"),v=require("./input-wrapper-C9rZEgju.cjs"),S=require("./link-CyiVlb-7.cjs"),$=require("./linkcard-fH9uydjS.cjs"),L=require("./loader-C-3l7kb9.cjs"),T=require("./messagebox---xPIAwR.cjs"),_=require("./modal-IjDRQfX1.cjs"),A=require("./progressbar-DJzEC7cx.cjs"),p=require("./radiobutton-DEboKECm.cjs"),B=require("./tag-BKq07hGI.cjs"),I=require("./textarea-CXu8UUsY.cjs"),D=require("./textinput-C6wccDhZ.cjs"),M=require("./select-Cf1RWSsI.cjs");var R=Object.defineProperty,H=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?H(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&R(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new O.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
|
|
2
2
|
<div class="${j.e(e)}">
|
|
3
3
|
<h1 class="pkt-txt-28">${this.string}</h1>
|
|
4
4
|
|
package/dist/pkt-index.js
CHANGED
|
@@ -2,17 +2,17 @@ import { P as A } from "./alert-CTTm6ugp.js";
|
|
|
2
2
|
import { P as w, a as B } from "./accordionitem-B_h5XGCo.js";
|
|
3
3
|
import { P as E } from "./backlink-Bq8O2bt8.js";
|
|
4
4
|
import { P as O } from "./button-x6Xw-5w0.js";
|
|
5
|
-
import { c as d } from "./calendar-
|
|
6
|
-
import { P as j } from "./calendar-
|
|
5
|
+
import { c as d } from "./calendar-CodWwTHM.js";
|
|
6
|
+
import { P as j } from "./calendar-CodWwTHM.js";
|
|
7
7
|
import { P as G } from "./card-en2KhOPO.js";
|
|
8
|
-
import { P as K } from "./combobox-
|
|
8
|
+
import { P as K } from "./combobox-DxNotM0u.js";
|
|
9
9
|
import { P as U } from "./consent-CXp0bLvg.js";
|
|
10
10
|
import { P as q } from "./checkbox-DSAcMC-D.js";
|
|
11
11
|
import { P as f, t as h, x as P, n, a as c } from "./element-DJZPsA_J.js";
|
|
12
12
|
import { P as x } from "./pkt-slot-controller-BPGj-LC5.js";
|
|
13
13
|
import { e as m, n as k } from "./ref-BCGCor-j.js";
|
|
14
14
|
import { e as u } from "./class-map-Dw6Wrxwi.js";
|
|
15
|
-
import { P as F, a as J } from "./datepicker-
|
|
15
|
+
import { P as F, a as J } from "./datepicker-BEMo4X9s.js";
|
|
16
16
|
import { P as V } from "./helptext-8ykxyegi.js";
|
|
17
17
|
import { P as Y } from "./heading-DQ0R34j4.js";
|
|
18
18
|
import { P as tt } from "./icon-B1-mkmwB.js";
|
package/dist/pkt-listbox.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./listbox-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./listbox-L-iOSF7M.cjs"),t=e.PktListbox;Object.defineProperty(exports,"PktListbox",{enumerable:!0,get:()=>e.PktListbox});exports.default=t;
|
package/dist/pkt-listbox.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-elements",
|
|
3
|
-
"version": "13.6.
|
|
3
|
+
"version": "13.6.8",
|
|
4
4
|
"description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
|
|
5
5
|
"homepage": "https://punkt.oslo.kommune.no",
|
|
6
6
|
"author": "Team Designsystem, Oslo Origo",
|
|
@@ -72,5 +72,5 @@
|
|
|
72
72
|
"url": "https://github.com/oslokommune/punkt/issues"
|
|
73
73
|
},
|
|
74
74
|
"license": "MIT",
|
|
75
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "79b8e663e5cd8ebdaa23497da8c37fbabf6a4aea"
|
|
76
76
|
}
|
|
@@ -7,6 +7,8 @@ import {
|
|
|
7
7
|
formatReadableDate,
|
|
8
8
|
parseISODateString,
|
|
9
9
|
todayInTz,
|
|
10
|
+
isDateSelectable,
|
|
11
|
+
newDateFromDate,
|
|
10
12
|
} from '@/utils/dateutils'
|
|
11
13
|
import { getWeek, eachDayOfInterval, getISODay, addDays } from 'date-fns'
|
|
12
14
|
import { html, nothing, PropertyValues } from 'lit'
|
|
@@ -122,6 +124,7 @@ export class PktCalendar extends PktElement {
|
|
|
122
124
|
if (this.selected.length === 1 && this.selected[0] === '') {
|
|
123
125
|
this.selected = []
|
|
124
126
|
}
|
|
127
|
+
|
|
125
128
|
this._selected = this.selected.map((d: string) => parseISODateString(d))
|
|
126
129
|
if (this.range && this.selected.length === 2) {
|
|
127
130
|
const days = eachDayOfInterval({
|
|
@@ -134,7 +137,6 @@ export class PktCalendar extends PktElement {
|
|
|
134
137
|
const inRange: DatesInRange = {}
|
|
135
138
|
for (let i = 0; i < days.length; i++) {
|
|
136
139
|
const day = days[i]
|
|
137
|
-
// A date is in range if it's between the start and end dates (exclusive)
|
|
138
140
|
const isInRange = day > this._selected[0] && day < this._selected[1]
|
|
139
141
|
inRange[formatISODate(day)] = isInRange
|
|
140
142
|
}
|
|
@@ -147,17 +149,15 @@ export class PktCalendar extends PktElement {
|
|
|
147
149
|
setCurrentMonth() {
|
|
148
150
|
if (this.currentmonth === null && !this.currentmonthtouched) {
|
|
149
151
|
this.currentmonthtouched = true
|
|
150
|
-
// Don't return here - continue to set a default currentmonth
|
|
151
152
|
}
|
|
152
153
|
if (this.selected.length && this.selected[0] !== '') {
|
|
153
154
|
const d = parseISODateString(this.selected[this.selected.length - 1])
|
|
154
|
-
this.currentmonth = isNaN(d.getTime()) ? new Date() : d
|
|
155
|
+
this.currentmonth = isNaN(d.getTime()) ? newDateFromDate(new Date()) : d
|
|
155
156
|
} else if (this.currentmonth === null) {
|
|
156
|
-
this.currentmonth = new Date()
|
|
157
|
+
this.currentmonth = newDateFromDate(new Date())
|
|
157
158
|
}
|
|
158
|
-
// fallback to today if invalid
|
|
159
159
|
if (!this.currentmonth || isNaN(this.currentmonth.getTime())) {
|
|
160
|
-
this.currentmonth = new Date()
|
|
160
|
+
this.currentmonth = newDateFromDate(new Date())
|
|
161
161
|
}
|
|
162
162
|
this.year = this.currentmonth.getFullYear()
|
|
163
163
|
this.month = this.currentmonth.getMonth()
|
|
@@ -185,7 +185,6 @@ export class PktCalendar extends PktElement {
|
|
|
185
185
|
handleArrowKey(e: KeyboardEvent, direction: number) {
|
|
186
186
|
if ((e.target as HTMLElement)?.nodeName === 'INPUT') return
|
|
187
187
|
if ((e.target as HTMLElement)?.nodeName === 'SELECT') return
|
|
188
|
-
// Allow arrow keys on date buttons (which have data-date attribute), but not on navigation buttons
|
|
189
188
|
if (
|
|
190
189
|
(e.target as HTMLElement)?.nodeName === 'BUTTON' &&
|
|
191
190
|
!(e.target as HTMLElement)?.dataset?.date
|
|
@@ -363,14 +362,14 @@ export class PktCalendar extends PktElement {
|
|
|
363
362
|
return monthView
|
|
364
363
|
}
|
|
365
364
|
|
|
366
|
-
private renderDayView(dayCounter: number, today: Date
|
|
365
|
+
private renderDayView(dayCounter: number, today: Date) {
|
|
367
366
|
const currentDate = newDateYMD(this.year, this.month, dayCounter)
|
|
368
367
|
const currentDateISO = formatISODate(currentDate)
|
|
369
368
|
const isToday = currentDateISO === formatISODate(today)
|
|
370
369
|
const isSelected = this.selected.includes(currentDateISO)
|
|
371
370
|
const ariaLabel = formatReadableDate(currentDate)
|
|
372
371
|
const isDisabled =
|
|
373
|
-
this.isExcluded(
|
|
372
|
+
this.isExcluded(currentDate) ||
|
|
374
373
|
(!isSelected &&
|
|
375
374
|
this.multiple &&
|
|
376
375
|
this.maxMultiple > 0 &&
|
|
@@ -395,7 +394,7 @@ export class PktCalendar extends PktElement {
|
|
|
395
394
|
'pkt-cal-today': isToday,
|
|
396
395
|
'pkt-cal-selected': isSelected,
|
|
397
396
|
'pkt-cal-in-range': this.inRange[currentDateISO],
|
|
398
|
-
'pkt-cal-excluded': this.isExcluded(
|
|
397
|
+
'pkt-cal-excluded': this.isExcluded(currentDate),
|
|
399
398
|
'pkt-cal-in-range-first':
|
|
400
399
|
this.range &&
|
|
401
400
|
(this.selected.length === 2 || this.rangeHovered !== null) &&
|
|
@@ -431,9 +430,9 @@ export class PktCalendar extends PktElement {
|
|
|
431
430
|
buttonClasses,
|
|
432
431
|
)}"
|
|
433
432
|
@mouseover=${() =>
|
|
434
|
-
this.range && !this.isExcluded(
|
|
433
|
+
this.range && !this.isExcluded(currentDate) && this.handleRangeHover(currentDate)}
|
|
435
434
|
@focus=${() => {
|
|
436
|
-
this.range && !this.isExcluded(
|
|
435
|
+
this.range && !this.isExcluded(currentDate) && this.handleRangeHover(currentDate)
|
|
437
436
|
this.focusedDate = currentDateISO
|
|
438
437
|
}}
|
|
439
438
|
aria-label="${ariaLabel}"
|
|
@@ -505,7 +504,7 @@ export class PktCalendar extends PktElement {
|
|
|
505
504
|
)
|
|
506
505
|
dayCounter++
|
|
507
506
|
} else {
|
|
508
|
-
cells.push(this.renderDayView(dayCounter, today
|
|
507
|
+
cells.push(this.renderDayView(dayCounter, today))
|
|
509
508
|
dayCounter++
|
|
510
509
|
}
|
|
511
510
|
}
|
|
@@ -520,17 +519,18 @@ export class PktCalendar extends PktElement {
|
|
|
520
519
|
return rows
|
|
521
520
|
}
|
|
522
521
|
|
|
523
|
-
private isExcluded(
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
522
|
+
private isExcluded(date: Date) {
|
|
523
|
+
const excludedDatesStrings = this.excludedates.map((d) =>
|
|
524
|
+
typeof d === 'string' ? d : formatISODate(d),
|
|
525
|
+
)
|
|
526
|
+
|
|
527
|
+
return !isDateSelectable(
|
|
528
|
+
date,
|
|
529
|
+
this.earliest,
|
|
530
|
+
this.latest,
|
|
531
|
+
excludedDatesStrings,
|
|
532
|
+
this.excludeweekdays,
|
|
533
|
+
)
|
|
534
534
|
}
|
|
535
535
|
|
|
536
536
|
isPrevMonthAllowed() {
|
|
@@ -564,7 +564,7 @@ export class PktCalendar extends PktElement {
|
|
|
564
564
|
private changeMonth(year: number, month: number) {
|
|
565
565
|
this.year = typeof year === 'string' ? parseInt(year) : year
|
|
566
566
|
this.month = typeof month === 'string' ? parseInt(month) : month
|
|
567
|
-
this.currentmonth = new Date(this.year, this.month, 1)
|
|
567
|
+
this.currentmonth = newDateFromDate(new Date(this.year, this.month, 1))
|
|
568
568
|
this.tabIndexSet = 0
|
|
569
569
|
this.focusedDate = null
|
|
570
570
|
this.selectableDates = []
|
|
@@ -605,7 +605,6 @@ export class PktCalendar extends PktElement {
|
|
|
605
605
|
this.selected = [...this.selected, formatISODate(selectedDate)]
|
|
606
606
|
this._selected = [...this._selected, selectedDate]
|
|
607
607
|
|
|
608
|
-
// Update range styling if in range mode
|
|
609
608
|
if (this.range && this.selected.length === 2) {
|
|
610
609
|
this.convertSelected()
|
|
611
610
|
this.close()
|
|
@@ -678,7 +677,6 @@ export class PktCalendar extends PktElement {
|
|
|
678
677
|
if (Array.isArray(days) && days.length) {
|
|
679
678
|
for (let i = 0; i < days.length; i++) {
|
|
680
679
|
const day = days[i]
|
|
681
|
-
// A date is in range if it's between the start and hovered end dates (exclusive)
|
|
682
680
|
const isInRange = day > this._selected[0] && day < date
|
|
683
681
|
this.inRange[formatISODate(day)] = isInRange
|
|
684
682
|
}
|
|
@@ -714,7 +712,7 @@ export class PktCalendar extends PktElement {
|
|
|
714
712
|
}
|
|
715
713
|
|
|
716
714
|
public focusOnCurrentDate() {
|
|
717
|
-
const currentDateISO = formatISODate(
|
|
715
|
+
const currentDateISO = formatISODate(newDateFromDate(new Date()))
|
|
718
716
|
const el = this.querySelector(`button[data-date="${currentDateISO}"]`)
|
|
719
717
|
if (el instanceof HTMLButtonElement) {
|
|
720
718
|
this.focusedDate = currentDateISO
|
|
@@ -699,7 +699,7 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
|
|
|
699
699
|
this._userInfoMessage = ''
|
|
700
700
|
break
|
|
701
701
|
|
|
702
|
-
case matchedOptions.length === 0 && !this.allowUserInput:
|
|
702
|
+
case matchedOptions.length === 0 && !this._options.length && !this.allowUserInput:
|
|
703
703
|
this._addValueText = null
|
|
704
704
|
this._userInfoMessage = 'Ingen match i søket'
|
|
705
705
|
break
|
|
@@ -6,6 +6,7 @@ import { repeat } from 'lit/directives/repeat.js'
|
|
|
6
6
|
|
|
7
7
|
import '@/components/tag'
|
|
8
8
|
import { fromISOtoLocal } from '@/utils/dateutils'
|
|
9
|
+
import { valueUtils } from './datepicker-utils'
|
|
9
10
|
import { uuidish } from '@/utils/stringutils'
|
|
10
11
|
|
|
11
12
|
type TYear = `${number}${number}${number}${number}`
|
|
@@ -38,7 +39,7 @@ export class PktDateTags extends PktElement {
|
|
|
38
39
|
<div class=${classMap(this.classes)} aria-live="polite">
|
|
39
40
|
${Array.isArray(this.dates) && !!this.dates[0]
|
|
40
41
|
? repeat(
|
|
41
|
-
(this.dates ?? []).filter(Boolean)
|
|
42
|
+
valueUtils.sortDates((this.dates ?? []).filter(Boolean)),
|
|
42
43
|
(date) => date,
|
|
43
44
|
(date) =>
|
|
44
45
|
html` <pkt-tag
|