@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.
@@ -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(): Promise<void>;
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 a=i>1?void 0:i?f(e,t):e,o=r.length-1,l;o>=0;o--)(l=r[o])&&(a=(i?l(e,t,a):l(a))||a);return i&&a&&b(e,t,a),a};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`
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,a=t.dataset.type,o=t.dataset.selected==="true";if(!(!this.getOptionElements().length&&(!this.customUserInput||!this.allowUserInput&&this.customUserInput)&&a!=="new-option"&&a!=="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():a==="searchbox"||a==="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 l=this.querySelector('[role="searchbox"]');l&&l.focus()}else if(t.dataset.index==="0"&&this.customUserInput){const l=this.querySelector('[data-type="new-option"]');l&&l.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.label+e.value).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(a=>{var o;return(o=a.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);
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 u, x as r, E as p, t as b, n as l, a as f } from "./element-DJZPsA_J.js";
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 k } from "./repeat-B6qPUgAq.js";
5
- import { e as d } from "./class-map-Dw6Wrxwi.js";
6
- import { u as x } from "./stringutils-DJjRa8dG.js";
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 u {
12
+ let i = class extends d {
13
13
  constructor() {
14
- super(...arguments), this.id = x(), 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 = [];
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=${d({
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
- ${k(
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=${d({
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) {
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./calendar-CL9O0tLP.cjs"),t=e.PktCalendar;Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>e.PktCalendar});exports.default=t;
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;
@@ -1,4 +1,4 @@
1
- import { P as a } from "./calendar-ChphTIhk.js";
1
+ import { P as a } from "./calendar-CodWwTHM.js";
2
2
  const r = a;
3
3
  export {
4
4
  a as PktCalendar,
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./combobox-CNH-j9Za.cjs"),o=e.PktCombobox;Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>e.PktCombobox});exports.default=o;
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;
@@ -1,4 +1,4 @@
1
- import { P as o } from "./combobox-C_pTRtsQ.js";
1
+ import { P as o } from "./combobox-DxNotM0u.js";
2
2
  const b = o;
3
3
  export {
4
4
  o as PktCombobox,
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./datepicker-CV73pLqD.cjs"),t=e.PktDatepicker;Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>e.PktDatepicker});exports.default=t;
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;
@@ -1,4 +1,4 @@
1
- import { a as t } from "./datepicker-Ca552mbJ.js";
1
+ import { a as t } from "./datepicker-BEMo4X9s.js";
2
2
  const e = t;
3
3
  export {
4
4
  t as PktDatepicker,
@@ -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-CL9O0tLP.cjs"),g=require("./card-B9RPShvV.cjs"),h=require("./combobox-CNH-j9Za.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-CV73pLqD.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`
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-ChphTIhk.js";
6
- import { P as j } from "./calendar-ChphTIhk.js";
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-C_pTRtsQ.js";
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-Ca552mbJ.js";
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";
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./listbox-BBO1d5Jd.cjs"),t=e.PktListbox;Object.defineProperty(exports,"PktListbox",{enumerable:!0,get:()=>e.PktListbox});exports.default=t;
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;
@@ -1,4 +1,4 @@
1
- import { P as t } from "./listbox-DJ7b3Wmc.js";
1
+ import { P as t } from "./listbox-n4wjlLqD.js";
2
2
  const s = t;
3
3
  export {
4
4
  t as PktListbox,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oslokommune/punkt-elements",
3
- "version": "13.6.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": "90347a2abe1e35e1f43eb7813d5ae6dba16f2c85"
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, j: number) {
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(j, currentDate) ||
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(j, currentDate),
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(j, currentDate) && this.handleRangeHover(currentDate)}
433
+ this.range && !this.isExcluded(currentDate) && this.handleRangeHover(currentDate)}
435
434
  @focus=${() => {
436
- this.range && !this.isExcluded(j, currentDate) && this.handleRangeHover(currentDate)
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, j))
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(weekday: number, date: Date) {
524
- if (this.excludeweekdays.includes(weekday.toString())) return true
525
- if (this.earliest && newDate(date, 'end') < newDate(this.earliest, 'start')) return true
526
- if (this.latest && newDate(date, 'start') > newDate(this.latest, 'end')) return true
527
- return this.excludedates.some((x: Date | string) => {
528
- if (typeof x === 'string') {
529
- return x === formatISODate(date)
530
- } else {
531
- return x.toDateString() === date.toDateString()
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(newDate())
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).sort(),
42
+ valueUtils.sortDates((this.dates ?? []).filter(Boolean)),
42
43
  (date) => date,
43
44
  (date) =>
44
45
  html` <pkt-tag