@oslokommune/punkt-elements 13.5.9 → 13.5.11
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/{combobox-yE4aYhTi.js → combobox-BXP1PL0M.js} +37 -21
- package/dist/combobox-D84REr9N.cjs +129 -0
- package/dist/{datepicker-CmTrG5GE.cjs → datepicker-DonUad47.cjs} +28 -28
- package/dist/{datepicker-BJKJBoy_.js → datepicker-F3TwE9o7.js} +88 -96
- package/dist/index.d.ts +1 -0
- 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 +2 -2
- package/package.json +3 -3
- package/src/components/combobox/combobox.ts +31 -8
- package/src/components/datepicker/datepicker.ts +15 -34
- package/src/components/datepicker/datepicker.validation.test.ts +21 -29
- package/dist/combobox-DjO0RMUB.cjs +0 -116
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,40 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
|
|
|
5
5
|
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
+
## [13.5.11](https://github.com/oslokommune/punkt/compare/13.5.10...13.5.11) (2025-09-11)
|
|
9
|
+
|
|
10
|
+
### ⚠ BREAKING CHANGES
|
|
11
|
+
Ingen
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
Ingen
|
|
15
|
+
|
|
16
|
+
### Bug Fixes
|
|
17
|
+
Ingen
|
|
18
|
+
|
|
19
|
+
### Chores
|
|
20
|
+
Ingen
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## [13.5.10](https://github.com/oslokommune/punkt/compare/13.5.9...13.5.10) (2025-09-11)
|
|
26
|
+
|
|
27
|
+
### ⚠ BREAKING CHANGES
|
|
28
|
+
Ingen
|
|
29
|
+
|
|
30
|
+
### Features
|
|
31
|
+
Ingen
|
|
32
|
+
|
|
33
|
+
### Bug Fixes
|
|
34
|
+
Ingen
|
|
35
|
+
|
|
36
|
+
### Chores
|
|
37
|
+
Ingen
|
|
38
|
+
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
|
|
8
42
|
## [13.5.9](https://github.com/oslokommune/punkt/compare/13.5.8...13.5.9) (2025-09-11)
|
|
9
43
|
|
|
10
44
|
### ⚠ BREAKING CHANGES
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { E as
|
|
1
|
+
import { E as k, x as d, n as r, a as w } from "./element-CgEWt74-.js";
|
|
2
2
|
import { o as f } from "./if-defined-CmuO4Vz9.js";
|
|
3
3
|
import { r as c } from "./state-Bo2bck5_.js";
|
|
4
4
|
import { e as _, n as v } from "./ref-BBYSqgeW.js";
|
|
5
|
-
import { e as
|
|
6
|
-
import { c as
|
|
7
|
-
import { P as
|
|
8
|
-
import { P as
|
|
9
|
-
import { P as
|
|
5
|
+
import { e as y } from "./class-map-BpTj9gtz.js";
|
|
6
|
+
import { c as R } from "./repeat-C8BeHwYx.js";
|
|
7
|
+
import { P as V } from "./input-element-NnrDmp4r.js";
|
|
8
|
+
import { P as C } from "./pkt-options-controller-CZO1nxZ8.js";
|
|
9
|
+
import { P as S } from "./pkt-slot-controller-BPGj-LC5.js";
|
|
10
10
|
import "./input-wrapper-Dr__Sxql.js";
|
|
11
11
|
import "./icon-CC1js8eR.js";
|
|
12
12
|
import "./tag-DyXzTY68.js";
|
|
@@ -18,14 +18,14 @@ const A = {
|
|
|
18
18
|
}, T = {
|
|
19
19
|
props: A
|
|
20
20
|
};
|
|
21
|
-
var M = Object.defineProperty,
|
|
22
|
-
for (var l = s > 1 ? void 0 : s ?
|
|
21
|
+
var M = Object.defineProperty, P = Object.getOwnPropertyDescriptor, o = (e, t, i, s) => {
|
|
22
|
+
for (var l = s > 1 ? void 0 : s ? P(t, i) : t, n = e.length - 1, a; n >= 0; n--)
|
|
23
23
|
(a = e[n]) && (l = (s ? a(t, i, l) : a(l)) || l);
|
|
24
24
|
return s && l && M(t, i, l), l;
|
|
25
25
|
};
|
|
26
|
-
let h = class extends
|
|
26
|
+
let h = class extends V {
|
|
27
27
|
constructor() {
|
|
28
|
-
super(), this.helptextSlot = _(), this.value = "", this.options = [], this.defaultOptions = [], this.allowUserInput = !1, this.typeahead = !1, this.includeSearch = !1, this.searchPlaceholder = "", this.multiple = !1, this.maxlength = null, this.displayValueAs = T.props.displayValueAs.default, this.tagPlacement = null, this._options = [], this._isOptionsOpen = !1, this._value = [], this._userInfoMessage = "", this._addValueText = null, this._maxIsReached = !1, this._search = "", this._inputFocus = !1, this._editingSingleValue = !1, this.inputRef = _(), this.arrowRef = _(), this.listboxRef = _(), this.focusRef = _(), this.optionTagRef = _(), this.optionsController = new
|
|
28
|
+
super(), this.helptextSlot = _(), this.value = "", this.options = [], this.defaultOptions = [], this.allowUserInput = !1, this.typeahead = !1, this.includeSearch = !1, this.searchPlaceholder = "", this.multiple = !1, this.maxlength = null, this.displayValueAs = T.props.displayValueAs.default, this.tagPlacement = null, this._options = [], this._isOptionsOpen = !1, this._value = [], this._userInfoMessage = "", this._addValueText = null, this._maxIsReached = !1, this._search = "", this._inputFocus = !1, this._editingSingleValue = !1, this.inputRef = _(), this.arrowRef = _(), this.listboxRef = _(), this.focusRef = _(), this.optionTagRef = _(), this.optionsController = new C(this), this.slotController = new S(this, this.helptextSlot), this.slotController.skipOptions = !0;
|
|
29
29
|
}
|
|
30
30
|
// Lifecycle methods
|
|
31
31
|
connectedCallback() {
|
|
@@ -104,7 +104,7 @@ let h = class extends R {
|
|
|
104
104
|
<div class="pkt-contents" ${v(this.helptextSlot)} name="helptext" slot="helptext"></div>
|
|
105
105
|
<div class="pkt-combobox" @focusout=${this.handleFocusOut}>
|
|
106
106
|
<div
|
|
107
|
-
class=${
|
|
107
|
+
class=${y({
|
|
108
108
|
"pkt-combobox__input": !0,
|
|
109
109
|
"pkt-combobox__input--fullwidth": this.fullwidth,
|
|
110
110
|
"pkt-combobox__input--open": this._isOptionsOpen,
|
|
@@ -114,7 +114,9 @@ let h = class extends R {
|
|
|
114
114
|
tabindex="-1"
|
|
115
115
|
@click=${this.handleInputClick}
|
|
116
116
|
>
|
|
117
|
-
${this.placeholder && (!this._value.length || this.multiple && this.tagPlacement == "outside") && !this._inputFocus ? d`<span class="pkt-combobox__placeholder"
|
|
117
|
+
${this.placeholder && (!this._value.length || this.multiple && this.tagPlacement == "outside") && !this._inputFocus ? d`<span class="pkt-combobox__placeholder" @click=${this.handlePlaceholderClick}
|
|
118
|
+
>${this.placeholder}</span
|
|
119
|
+
>` : this.tagPlacement !== "outside" ? this.renderSingleOrMultipleValues() : k}
|
|
118
120
|
${this.renderInputField()}
|
|
119
121
|
<div
|
|
120
122
|
class="pkt-btn pkt-btn--tertiary pkt-combobox__arrow"
|
|
@@ -132,14 +134,19 @@ let h = class extends R {
|
|
|
132
134
|
tabindex="${this.disabled ? "-1" : "0"}"
|
|
133
135
|
>
|
|
134
136
|
<pkt-icon
|
|
135
|
-
class=${
|
|
137
|
+
class=${y({
|
|
136
138
|
"pkt-combobox__arrow-icon": !0,
|
|
137
139
|
"pkt-combobox__arrow-icon--open": this._isOptionsOpen
|
|
138
140
|
})}
|
|
139
141
|
name="chevron-thin-down"
|
|
140
142
|
></pkt-icon>
|
|
141
143
|
</div>
|
|
142
|
-
<div
|
|
144
|
+
<div
|
|
145
|
+
${v(this.focusRef)}
|
|
146
|
+
tabindex="-1"
|
|
147
|
+
@keydown=${this.handleArrowClick}
|
|
148
|
+
class="pkt-contents"
|
|
149
|
+
></div>
|
|
143
150
|
</div>
|
|
144
151
|
|
|
145
152
|
<pkt-listbox
|
|
@@ -166,7 +173,7 @@ let h = class extends R {
|
|
|
166
173
|
|
|
167
174
|
${this.tagPlacement === "outside" && this.multiple ? d`<div class="pkt-combobox__tags-outside">
|
|
168
175
|
${this.renderSingleOrMultipleValues()}
|
|
169
|
-
</div>` :
|
|
176
|
+
</div>` : k}
|
|
170
177
|
</pkt-input-wrapper>
|
|
171
178
|
`;
|
|
172
179
|
}
|
|
@@ -204,7 +211,7 @@ let h = class extends R {
|
|
|
204
211
|
`;
|
|
205
212
|
}
|
|
206
213
|
renderSingleOrMultipleValues() {
|
|
207
|
-
const e = !this.multiple, t = this._editingSingleValue ? null : this.renderValueTag(this.findValueInOptions(this._value[0])), i =
|
|
214
|
+
const e = !this.multiple, t = this._editingSingleValue ? null : this.renderValueTag(this.findValueInOptions(this._value[0])), i = R(
|
|
208
215
|
this._value,
|
|
209
216
|
(s) => s,
|
|
210
217
|
(s) => {
|
|
@@ -227,12 +234,18 @@ let h = class extends R {
|
|
|
227
234
|
if (!e) return "";
|
|
228
235
|
switch (this.displayValueAs) {
|
|
229
236
|
case "prefixAndValue":
|
|
230
|
-
return d`<span data-focusfix=${this.id}
|
|
237
|
+
return d`<span class="pkt-combobox__value" data-focusfix=${this.id}
|
|
238
|
+
>${e.prefix || ""} ${e.value}</span
|
|
239
|
+
>`;
|
|
231
240
|
case "value":
|
|
232
|
-
return d`<span data-focusfix=${this.id}
|
|
241
|
+
return d`<span class="pkt-combobox__value" data-focusfix=${this.id}
|
|
242
|
+
>${e.value}</span
|
|
243
|
+
>`;
|
|
233
244
|
case "label":
|
|
234
245
|
default:
|
|
235
|
-
return d`<span data-focusfix=${this.id}
|
|
246
|
+
return d`<span class="pkt-combobox__value" data-focusfix=${this.id}
|
|
247
|
+
>${e.label || e.value}</span
|
|
248
|
+
>`;
|
|
236
249
|
}
|
|
237
250
|
}
|
|
238
251
|
// Event handlers
|
|
@@ -289,7 +302,10 @@ let h = class extends R {
|
|
|
289
302
|
}
|
|
290
303
|
handleInputClick(e) {
|
|
291
304
|
var t, i;
|
|
292
|
-
this.disabled || (e.currentTarget && e.currentTarget !== this.arrowRef.value && ((t = this.inputRef.value) == null ? void 0 : t.type) !== "hidden" ? (i = this.inputRef.value) == null || i.focus() : this.handleArrowClick(e));
|
|
305
|
+
this.disabled || (e.currentTarget && e.currentTarget !== this.arrowRef.value && ((t = this.inputRef.value) == null ? void 0 : t.type) !== "hidden" ? ((i = this.inputRef.value) == null || i.focus(), this.requestUpdate()) : this.handleArrowClick(e));
|
|
306
|
+
}
|
|
307
|
+
handlePlaceholderClick(e) {
|
|
308
|
+
this.disabled || (e.stopPropagation(), this.inputRef.value && this.inputRef.value.type !== "hidden" && (this.inputRef.value.focus(), this._inputFocus = !0, this.requestUpdate()));
|
|
293
309
|
}
|
|
294
310
|
handleArrowClick(e) {
|
|
295
311
|
var t, i;
|
|
@@ -510,7 +526,7 @@ o([
|
|
|
510
526
|
c()
|
|
511
527
|
], h.prototype, "_editingSingleValue", 2);
|
|
512
528
|
h = o([
|
|
513
|
-
|
|
529
|
+
w("pkt-combobox")
|
|
514
530
|
], h);
|
|
515
531
|
export {
|
|
516
532
|
h as P
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
"use strict";const a=require("./element-6DBpyGQm.cjs"),c=require("./if-defined-Cni-RHLS.cjs"),d=require("./state-DPobt-Yz.cjs"),r=require("./ref-iJtiv3o2.cjs"),O=require("./class-map-BBG2gMX4.cjs"),$=require("./repeat-CDsZqct8.cjs"),I=require("./input-element-C4xJoM-X.cjs"),y=require("./pkt-options-controller-CiuBG6Lt.cjs"),w=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-CZ-a00V7.cjs");require("./icon-B_ryAy4Q.cjs");require("./tag-Bbs0U_Au.cjs");require("./listbox-C4supLfR.cjs");const C={displayValueAs:{default:"label"}},R={props:C};var V=Object.defineProperty,S=Object.getOwnPropertyDescriptor,o=(v,e,t,i)=>{for(var s=i>1?void 0:i?S(e,t):e,l=v.length-1,h;l>=0;l--)(h=v[l])&&(s=(i?h(e,t,s):h(s))||s);return i&&s&&V(e,t,s),s};exports.PktCombobox=class extends I.PktInputElement{constructor(){super(),this.helptextSlot=r.e(),this.value="",this.options=[],this.defaultOptions=[],this.allowUserInput=!1,this.typeahead=!1,this.includeSearch=!1,this.searchPlaceholder="",this.multiple=!1,this.maxlength=null,this.displayValueAs=R.props.displayValueAs.default,this.tagPlacement=null,this._options=[],this._isOptionsOpen=!1,this._value=[],this._userInfoMessage="",this._addValueText=null,this._maxIsReached=!1,this._search="",this._inputFocus=!1,this._editingSingleValue=!1,this.inputRef=r.e(),this.arrowRef=r.e(),this.listboxRef=r.e(),this.focusRef=r.e(),this.optionTagRef=r.e(),this.optionsController=new y.PktOptionsSlotController(this),this.slotController=new w.PktSlotController(this,this.helptextSlot),this.slotController.skipOptions=!0}connectedCallback(){var e;if(super.connectedCallback(),document&&document.body.addEventListener("click",t=>{this._isOptionsOpen&&!this.contains(t.target)&&this.handleFocusOut(t)}),this._options=[],this.defaultOptions&&this.defaultOptions.length){const t=((e=this.options)==null?void 0:e.filter(i=>i.userAdded))||[];this.options=[...t,...JSON.parse(JSON.stringify(this.defaultOptions))],this._options=[...this.options]}if(this.optionsController.nodes.length){const t=[];this.optionsController.nodes.forEach(i=>{if(!i.textContent&&!i.getAttribute("value"))return null;const s={value:i.getAttribute("value")||i.textContent||"",label:i.textContent||i.getAttribute("value")||""};i.getAttribute("data-prefix")&&(s.prefix=i.getAttribute("data-prefix")||void 0),i.getAttribute("tagskincolor")&&(s.tagSkinColor=i.getAttribute("tagskincolor")),i.getAttribute("description")&&(s.description=i.getAttribute("description")||void 0),s.fulltext=s.value+s.label+(s.prefix||""),t.push(s)}),t.length&&(this.options=[...t],this._options=[...t])}}updated(e){var t;if(e.has("_value")&&this.valueChanged(this._value,e.get("_value")),e.has("value")&&(Array.isArray(this.value)?this._value=this.value:this.value&&this.multiple?this._value=this.value.split(","):this.value?this._value=[this.value]:this._value=[],!this.multiple&&this._value.length>1&&(this._value=[this._value[0]]),this.isMaxItemsReached()),e.has("defaultOptions")&&this.defaultOptions.length){const i=((t=this.options)==null?void 0:t.filter(s=>s.userAdded))||[];this.options=[...i,...JSON.parse(JSON.stringify(this.defaultOptions))],this._options=[...this.options]}if(e.has("options")){const s=this._options.filter(l=>l.userAdded).filter(l=>!this.options.some(h=>h.value===l.value));this._options=[...s,...this.options],this._options.forEach(l=>{if(l.value&&!l.label&&(l.label=l.value),l.selected&&!this._value.includes(l.value)){const h=[...this._value];this._value=[...this._value,l.value],this.valueChanged(this._value,h)}l.fulltext=l.value+l.label+(l.prefix||""),l.selected=l.selected||this._value.includes(l.value)})}e.has("_search")&&this.dispatchEvent(new CustomEvent("search",{detail:this._search,bubbles:!1})),super.updated(e)}attributeChangedCallback(e,t,i){e==="value"&&(Array.isArray(this.value)?this._value=this.value:this.value&&this.multiple?this._value=this.value.split(","):this.value?this._value=[this.value]:this._value=[],!this.multiple&&this._value.length>1&&(this._value=[this._value[0]])),e==="options"&&(this._options=this.options,this._options.forEach(s=>{s.value&&!s.label&&(s.label=s.value),s.selected&&!this._value.includes(s.value)&&(this._value=[...this._value,s.value]),s.fulltext=s.value+s.label+(s.prefix||"")}),this._search=""),super.attributeChangedCallback(e,t,i)}render(){return a.x`
|
|
2
|
+
<pkt-input-wrapper
|
|
3
|
+
.label=${this.label}
|
|
4
|
+
.helptext=${this.helptext}
|
|
5
|
+
.helptextDropdown=${c.o(this.helptextDropdown)}
|
|
6
|
+
.helptextDropdownButton=${c.o(this.helptextDropdownButton)}
|
|
7
|
+
?fullwidth=${this.fullwidth}
|
|
8
|
+
?hasError=${this.hasError}
|
|
9
|
+
?inline=${this.inline}
|
|
10
|
+
?disabled=${this.disabled}
|
|
11
|
+
.errorMessage=${this.errorMessage}
|
|
12
|
+
?optionalTag=${this.optionalTag}
|
|
13
|
+
.optionalText=${this.optionalText}
|
|
14
|
+
?requiredTag=${this.requiredTag}
|
|
15
|
+
.requiredText=${this.requiredText}
|
|
16
|
+
.tagText=${this.tagText}
|
|
17
|
+
?useWrapper=${this.useWrapper}
|
|
18
|
+
.forId=${this.allowUserInput||this.typeahead?this.id+"-input":this.id+"-arrow"}
|
|
19
|
+
class="pkt-combobox__wrapper"
|
|
20
|
+
@labelClick=${this.handleInputClick}
|
|
21
|
+
>
|
|
22
|
+
<div class="pkt-contents" ${r.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
|
|
23
|
+
<div class="pkt-combobox" @focusout=${this.handleFocusOut}>
|
|
24
|
+
<div
|
|
25
|
+
class=${O.e({"pkt-combobox__input":!0,"pkt-combobox__input--fullwidth":this.fullwidth,"pkt-combobox__input--open":this._isOptionsOpen,"pkt-combobox__input--error":this.hasError,"pkt-combobox__input--disabled":this.disabled})}
|
|
26
|
+
tabindex="-1"
|
|
27
|
+
@click=${this.handleInputClick}
|
|
28
|
+
>
|
|
29
|
+
${this.placeholder&&(!this._value.length||this.multiple&&this.tagPlacement=="outside")&&!this._inputFocus?a.x`<span class="pkt-combobox__placeholder" @click=${this.handlePlaceholderClick}
|
|
30
|
+
>${this.placeholder}</span
|
|
31
|
+
>`:this.tagPlacement!=="outside"?this.renderSingleOrMultipleValues():a.E}
|
|
32
|
+
${this.renderInputField()}
|
|
33
|
+
<div
|
|
34
|
+
class="pkt-btn pkt-btn--tertiary pkt-combobox__arrow"
|
|
35
|
+
@click=${this.handleArrowClick}
|
|
36
|
+
@keydown=${this.handleArrowClick}
|
|
37
|
+
id="${this.id}-arrow"
|
|
38
|
+
${r.n(this.arrowRef)}
|
|
39
|
+
aria-expanded=${this._isOptionsOpen}
|
|
40
|
+
aria-controls="${this.id}-listbox"
|
|
41
|
+
aria-haspopup="listbox"
|
|
42
|
+
aria-label="Åpne liste"
|
|
43
|
+
?disabled=${this.disabled}
|
|
44
|
+
?data-disabled=${this.disabled}
|
|
45
|
+
role="button"
|
|
46
|
+
tabindex="${this.disabled?"-1":"0"}"
|
|
47
|
+
>
|
|
48
|
+
<pkt-icon
|
|
49
|
+
class=${O.e({"pkt-combobox__arrow-icon":!0,"pkt-combobox__arrow-icon--open":this._isOptionsOpen})}
|
|
50
|
+
name="chevron-thin-down"
|
|
51
|
+
></pkt-icon>
|
|
52
|
+
</div>
|
|
53
|
+
<div
|
|
54
|
+
${r.n(this.focusRef)}
|
|
55
|
+
tabindex="-1"
|
|
56
|
+
@keydown=${this.handleArrowClick}
|
|
57
|
+
class="pkt-contents"
|
|
58
|
+
></div>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<pkt-listbox
|
|
62
|
+
id="${this.id}-listbox"
|
|
63
|
+
.options=${this._options}
|
|
64
|
+
.isOpen=${this._isOptionsOpen}
|
|
65
|
+
.searchPlaceholder=${this.searchPlaceholder}
|
|
66
|
+
.label="Liste: ${this.label||""}"
|
|
67
|
+
?includeSearch=${this.includeSearch}
|
|
68
|
+
?isMultiSelect=${this.multiple}
|
|
69
|
+
?allowUserInput=${this.allowUserInput&&!this._maxIsReached}
|
|
70
|
+
?maxIsReached=${this._maxIsReached}
|
|
71
|
+
.customUserInput=${c.o(this._addValueText)}
|
|
72
|
+
.userMessage=${this._userInfoMessage}
|
|
73
|
+
@search=${this.handleSearch}
|
|
74
|
+
@option-toggle=${this.handleOptionToggled}
|
|
75
|
+
@select-all=${this.addAllOptions}
|
|
76
|
+
@close-options=${()=>this._isOptionsOpen=!1}
|
|
77
|
+
.searchValue=${this._search||null}
|
|
78
|
+
.maxLength=${this.maxlength||0}
|
|
79
|
+
${r.n(this.listboxRef)}
|
|
80
|
+
></pkt-listbox>
|
|
81
|
+
</div>
|
|
82
|
+
|
|
83
|
+
${this.tagPlacement==="outside"&&this.multiple?a.x`<div class="pkt-combobox__tags-outside">
|
|
84
|
+
${this.renderSingleOrMultipleValues()}
|
|
85
|
+
</div>`:a.E}
|
|
86
|
+
</pkt-input-wrapper>
|
|
87
|
+
`}renderInputField(){return this.typeahead||this.allowUserInput?a.x`
|
|
88
|
+
<div class="pkt-combobox__input-div combobox__input">
|
|
89
|
+
<input
|
|
90
|
+
type="text"
|
|
91
|
+
id="${this.id}-input"
|
|
92
|
+
name=${(this.name||this.id)+"-input"}
|
|
93
|
+
@input=${this.handleInput}
|
|
94
|
+
@keydown=${this.handleInputKeydown}
|
|
95
|
+
@focus=${this.handleFocus}
|
|
96
|
+
@blur=${this.handleBlur}
|
|
97
|
+
autocomplete="off"
|
|
98
|
+
role="combobox"
|
|
99
|
+
aria-label=${c.o(this.label)}
|
|
100
|
+
aria-autocomplete=${this.typeahead?"both":"list"}
|
|
101
|
+
aria-controls="${this.id}-listbox"
|
|
102
|
+
aria-multiselectable=${c.o(this.multiple?"true":void 0)}
|
|
103
|
+
aria-activedescendant=${c.o(this._value[0]&&this.findValueInOptions(this._value[0])?`${this.id}-listbox-${this.findIndexInOptions(this._value[0])}`:void 0)}
|
|
104
|
+
${r.n(this.inputRef)}
|
|
105
|
+
/>
|
|
106
|
+
</div>
|
|
107
|
+
`:a.x`
|
|
108
|
+
<input
|
|
109
|
+
type="hidden"
|
|
110
|
+
id="${this.id}-input"
|
|
111
|
+
name=${(this.name||this.id)+"-input"}
|
|
112
|
+
.value=${this._value.join(",")}
|
|
113
|
+
${r.n(this.inputRef)}
|
|
114
|
+
/>
|
|
115
|
+
`}renderSingleOrMultipleValues(){const e=!this.multiple,t=this._editingSingleValue?null:this.renderValueTag(this.findValueInOptions(this._value[0])),i=$.c(this._value,s=>s,s=>{var n;const l=this.findValueInOptions(s),h=(n=this.options.find(u=>u.value===s))==null?void 0:n.tagSkinColor;return a.x`
|
|
116
|
+
<pkt-tag
|
|
117
|
+
skin=${h||"blue-dark"}
|
|
118
|
+
?closeTag=${!this.disabled}
|
|
119
|
+
@close=${()=>this.handleTagRemove(s)}
|
|
120
|
+
>
|
|
121
|
+
${this.renderValueTag(l)}
|
|
122
|
+
</pkt-tag>
|
|
123
|
+
`});return e?t:i}renderValueTag(e){if(!e)return"";switch(this.displayValueAs){case"prefixAndValue":return a.x`<span class="pkt-combobox__value" data-focusfix=${this.id}
|
|
124
|
+
>${e.prefix||""} ${e.value}</span
|
|
125
|
+
>`;case"value":return a.x`<span class="pkt-combobox__value" data-focusfix=${this.id}
|
|
126
|
+
>${e.value}</span
|
|
127
|
+
>`;case"label":default:return a.x`<span class="pkt-combobox__value" data-focusfix=${this.id}
|
|
128
|
+
>${e.label||e.value}</span
|
|
129
|
+
>`}}handleInput(e){if(e.stopPropagation(),e.stopImmediatePropagation(),this.disabled)return;this.touched=!0;const t=e.target;if(this._search=t.value,this.checkForMatches(),this.typeahead)if(this._search){if(this._options=this.options.filter(i=>{var s;return(s=i.fulltext)==null?void 0:s.toLowerCase().includes(this._search.toLowerCase())}),e.inputType!=="deleteContentBackward"){const i=this._options.filter(s=>{var l;return!s.selected&&((l=s.label)==null?void 0:l.toLowerCase().startsWith(this._search.toLowerCase()))});if(i.length>0&&this.inputRef.value&&this.inputRef.value.type!=="hidden"){const s=i[0];s!=null&&s.label&&(t.value=s.label,window.setTimeout(()=>t.setSelectionRange(this._search.length,t.value.length),0),t.selectionDirection="backward")}}}else this._options=[...this.options]}handleFocus(){if(!this.disabled){if(!this.multiple&&this._value[0]&&this.inputRef.value&&this.inputRef.value.type!=="hidden"){const e=this.findValueInOptions(this._value[0]);this._editingSingleValue=!0,this.inputRef.value.value=this.displayValueAs==="label"&&(e!=null&&e.label)?e.label:this._value[0]}this._inputFocus=!0,this._search="",this._options=[...this.options],this._isOptionsOpen=!0,this.onFocus(),this.requestUpdate()}}handleFocusOut(e){var t,i,s,l,h;if(!this.disabled&&((i=(t=e.relatedTarget)==null?void 0:t.closest("pkt-combobox"))==null?void 0:i.id)!==this.id&&((l=(s=e.relatedTarget)==null?void 0:s.closest("pkt-combobox"))==null?void 0:l.id)!==this.id&&((h=e.target)==null?void 0:h.getAttribute("data-focusfix"))!==this.id&&e.relatedTarget!==this.focusRef.value&&e.relatedTarget!==this.inputRef.value&&e.relatedTarget!==this.arrowRef.value&&this._isOptionsOpen){if(this._inputFocus=!1,this._addValueText=null,this._userInfoMessage="",this._search="",this.inputRef.value&&this.inputRef.value.type!=="hidden"&&this.inputRef.value.value!==""){const n=this.inputRef.value.value,u=this.findValueInOptions(n);!this._value.includes(n)&&!u?this.allowUserInput?this.addNewUserValue(n):this.multiple||this.removeValue(this._value[0]):u&&!this._value.includes(u.value)&&this.setSelected(u.value),this.inputRef.value.value=""}this._isOptionsOpen=!1,this.onBlur()}}handleBlur(){this._inputFocus=!1,this._editingSingleValue=!1,this.onBlur()}handleInputClick(e){var t,i;this.disabled||(e.currentTarget&&e.currentTarget!==this.arrowRef.value&&((t=this.inputRef.value)==null?void 0:t.type)!=="hidden"?((i=this.inputRef.value)==null||i.focus(),this.requestUpdate()):this.handleArrowClick(e))}handlePlaceholderClick(e){this.disabled||(e.stopPropagation(),this.inputRef.value&&this.inputRef.value.type!=="hidden"&&(this.inputRef.value.focus(),this._inputFocus=!0,this.requestUpdate()))}handleArrowClick(e){var t,i;this.disabled||e instanceof KeyboardEvent&&e.key&&e.key!=="Enter"&&e.key!==" "&&e.key!=="ArrowDown"||(e.stopImmediatePropagation(),e.preventDefault(),this._isOptionsOpen=!this._isOptionsOpen,this._isOptionsOpen?(t=this.listboxRef.value)==null||t.focusFirstOrSelectedOption():(i=this.arrowRef.value)==null||i.focus())}handleOptionToggled(e){this.toggleValue(e.detail)}handleSearch(e){e.stopPropagation(),this._search=e.detail.toLowerCase()}handleInputKeydown(e){var t,i,s;switch(e.key){case",":this.multiple&&(e.preventDefault(),this.addValue());break;case"Enter":e.preventDefault(),this.addValue();break;case"Backspace":!this._search&&((t=this.inputRef.value)==null?void 0:t.type)==="hidden"&&this.removeLastValue(e);break;case"Tab":case"ArrowDown":e.shiftKey||((i=this.listboxRef.value)==null||i.focusFirstOrSelectedOption(),e.preventDefault());break;case"Escape":this._isOptionsOpen=!1,(s=this.arrowRef.value)==null||s.focus(),e.preventDefault();break}}handleTagRemove(e){this.removeSelected(e)}blurInput(){this.inputRef.value&&this.inputRef.value.matches(":focus")&&this.inputRef.value.blur()}checkForMatches(){var h;const e=((h=this.inputRef.value)==null?void 0:h.value)||this._search||"",t=e.trim().toLowerCase()||"";if(!t){!this.multiple&&this._value[0]&&this.removeValue(this._value[0]),this.resetComboboxInput(!1);return}const i=this._value.find(n=>n.toLowerCase()===t),s=this._options.filter(n=>{var u;return((u=n.label)==null?void 0:u.toLowerCase().includes(t))??!1}),l=s.find(n=>{var u;return((u=n.label)==null?void 0:u.toLowerCase())===t||n.value.toLowerCase()===t});switch(!0){case((s.length===0||!l)&&this.allowUserInput):this._addValueText=e,this._userInfoMessage="";break;case(s.length===0&&!this.allowUserInput):this._addValueText=null,this._userInfoMessage="Ingen match i søket";break;case!!i:this._addValueText=null,this._userInfoMessage="Verdien er allerede valgt";break;case s.length>1:this._addValueText=null,this._userInfoMessage="";break;default:this._addValueText=null,this._userInfoMessage=""}}findValueInOptions(e){return this.options.find(t=>t.value===e||t.label===e)||null}findIndexInOptions(e){return this._options.findIndex(t=>t.value===e||t.label===e)}isMaxItemsReached(){const e=this.maxlength!==null&&this._value.length>=this.maxlength;return e?this._maxIsReached=!0:this._maxIsReached=!1,e}toggleValue(e){var g,k;if(this.disabled)return;this.touched=!0,this._userInfoMessage="",this._addValueText=null;const t=((g=this.findValueInOptions(e))==null?void 0:g.value)||null,i=this._value.includes(e||t||""),s=!!t,l=((k=this._options.find(_=>_.value===e))==null?void 0:k.disabled)||!1,h=!(e!=null&&e.trim()),n=!this.multiple,u=this.multiple,x=this.isMaxItemsReached();let p=!1,f=!0,b="",m="";l||(!s&&this.allowUserInput&&!h?(this.addNewUserValue(e),b="Ny verdi lagt til",p=!u):!s&&!this.allowUserInput?(n&&this._value[0]&&this.removeValue(this._value[0]),f=!1,p=!0,b="Ingen treff i søket"):i?(this.removeValue(t),p=!0):h&&n?(this.removeAllSelected(),p=!0):n?(this._value[0]&&this.removeSelected(this._value[0]),this.setSelected(t),p=!1,this.inputRef.value&&this.inputRef.value.type!=="hidden"&&(this.inputRef.value.value="",this.inputRef.value.blur())):u&&!x?(this.setSelected(t),p=!0):u&&x?(this._userInfoMessage="Maks antall valg nådd",f=!1,m=e):(n&&this.removeAllSelected(),this._userInfoMessage="Ingen gyldig verdi valgt",f=!1,p=!0,m=e),this._isOptionsOpen=p,p||window.setTimeout(()=>{var _;(_=this.focusRef.value)==null||_.focus()},0),this._userInfoMessage=b,this._search=m||"",this.resetComboboxInput(f),u&&this.isMaxItemsReached())}setSelected(e){if(!this._value.includes(e)){if(this.multiple&&this.isMaxItemsReached()){this._userInfoMessage="Maks antall valg nådd";return}!this.multiple&&this.removeAllSelected(),this._value=e?[...this._value,e]:this._value,this._options=this._options.map(t=>(t.value===e&&(t.selected=!0),t)),this.resetComboboxInput(!0)}}removeSelected(e){if(!e)return;this._value=this._value.filter(i=>i!==e);const t=this.findValueInOptions(e);t?(t.selected=!1,t.userAdded?(this._options=[...this._options.filter(i=>i.value!==e)],this.options=[...this.options.filter(i=>i.value!==e)]):this._options=[...this._options,t]):!e&&!this.multiple&&(this._options=this._options.map(i=>(i.selected=!1,i)))}addAllOptions(){if(this.multiple){if(this.maxlength&&this._options.length>this.maxlength){this._userInfoMessage="For mange valgt";return}this._value=this._options.map(e=>e.value),this._options=this._options.map(e=>(e.selected=!0,e)),this.requestUpdate()}}removeAllSelected(){this._value=[],this._options=this._options.map(e=>(e.selected=!1,e)),this._options=this._options.filter(e=>!e.userAdded),this.requestUpdate()}addValue(){var t;const e=((t=this.inputRef.value)==null?void 0:t.value.trim())||"";this._search=e,this.toggleValue(e)}removeValue(e){this._value=this.multiple?this._value.filter(t=>t!==e):[],this.removeSelected(e)}addNewUserValue(e){if(!e||e.trim()==="")return;if(!this.multiple)this._value[0]&&this.removeSelected(this._value[0]),this._value=[e],this._isOptionsOpen=!1,this.blurInput();else if(!this.findValueInOptions(e)){if(this.isMaxItemsReached())return;this._value=[...this._value,e]}const t={value:e,label:e,userAdded:!0};this.options=[t,...this.options],this._options=[t,...this._options],this.setSelected(e),this.requestUpdate()}resetComboboxInput(e=!0){if(this._addValueText=null,this.inputRef.value&&this.inputRef.value.type!=="hidden"&&e)if(this._search="",this.multiple)this.inputRef.value.value="";else{const t=this.findValueInOptions(this._value[0]);window.setTimeout(()=>{!this.inputRef.value||this.inputRef.value.type==="hidden"||(this.inputRef.value.value=this.displayValueAs==="label"&&(t!=null&&t.label)?t.label:this._value[0]||"")},0),this._userInfoMessage=""}this._options=[...this.options]}removeLastValue(e){if(this._value.length===0)return;e.preventDefault();const t=this._value[this._value.length-1];t&&this.removeSelected(t),this.isMaxItemsReached()}};o([a.n({type:String,reflect:!0})],exports.PktCombobox.prototype,"value",2);o([a.n({type:Array})],exports.PktCombobox.prototype,"options",2);o([a.n({type:Array})],exports.PktCombobox.prototype,"defaultOptions",2);o([a.n({type:Boolean})],exports.PktCombobox.prototype,"allowUserInput",2);o([a.n({type:Boolean})],exports.PktCombobox.prototype,"typeahead",2);o([a.n({type:Boolean})],exports.PktCombobox.prototype,"includeSearch",2);o([a.n({type:String})],exports.PktCombobox.prototype,"searchPlaceholder",2);o([a.n({type:Boolean})],exports.PktCombobox.prototype,"multiple",2);o([a.n({type:Number})],exports.PktCombobox.prototype,"maxlength",2);o([a.n({type:String})],exports.PktCombobox.prototype,"displayValueAs",2);o([a.n({type:String})],exports.PktCombobox.prototype,"tagPlacement",2);o([d.r()],exports.PktCombobox.prototype,"_options",2);o([d.r()],exports.PktCombobox.prototype,"_isOptionsOpen",2);o([d.r()],exports.PktCombobox.prototype,"_value",2);o([d.r()],exports.PktCombobox.prototype,"_userInfoMessage",2);o([d.r()],exports.PktCombobox.prototype,"_addValueText",2);o([d.r()],exports.PktCombobox.prototype,"_maxIsReached",2);o([d.r()],exports.PktCombobox.prototype,"_search",2);o([d.r()],exports.PktCombobox.prototype,"_inputFocus",2);o([d.r()],exports.PktCombobox.prototype,"_editingSingleValue",2);exports.PktCombobox=o([a.t("pkt-combobox")],exports.PktCombobox);
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
"use strict";const d=require("./class-map-BBG2gMX4.cjs"),
|
|
1
|
+
"use strict";const d=require("./class-map-BBG2gMX4.cjs"),h=require("./if-defined-Cni-RHLS.cjs"),s=require("./element-6DBpyGQm.cjs"),v=require("./state-DPobt-Yz.cjs"),o=require("./calendar-32W9p9uc.cjs"),m=require("./input-element-C4xJoM-X.cjs"),r=require("./ref-iJtiv3o2.cjs"),y=require("./repeat-CDsZqct8.cjs");require("./icon-B_ryAy4Q.cjs");require("./input-wrapper-CZ-a00V7.cjs");require("./tag-Bbs0U_Au.cjs");const k=require("./pkt-slot-controller-BzddBp7z.cjs"),$={dateformat:{default:"dd.MM.yyyy"},min:{default:null},max:{default:null},weeknumbers:{default:!1},withcontrols:{default:!1},multiple:{default:!1},range:{default:!1}},p={props:$};var b=Object.defineProperty,x=Object.getOwnPropertyDescriptor,n=(c,t,e,i)=>{for(var a=i>1?void 0:i?x(t,e):t,l=c.length-1,u;l>=0;l--)(u=c[l])&&(a=(i?u(t,e,a):u(a))||a);return i&&a&&b(t,e,a),a};const g=c=>new Promise(t=>setTimeout(t,c));exports.PktDatepicker=class extends m.PktInputElement{constructor(){super(),this._valueProperty="",this._value=[],this.label="Datovelger",this.dateformat=p.props.dateformat.default,this.multiple=p.props.multiple.default,this.maxlength=null,this.range=p.props.range.default,this.showRangeLabels=!1,this.min=null,this.max=null,this.weeknumbers=p.props.weeknumbers.default,this.withcontrols=p.props.withcontrols.default,this.excludedates=[],this.excludeweekdays=[],this.currentmonth=null,this.calendarOpen=!1,this.timezone="Europe/Oslo",this.inputClasses={},this.buttonClasses={},this.inputRef=r.e(),this.inputRefTo=r.e(),this.btnRef=r.e(),this.calRef=r.e(),this.popupRef=r.e(),this.helptextSlot=r.e(),this.addToSelected=t=>{const e=t.target;if(!e.value)return;const i=this.min?o.newDate(this.min):null,a=this.max?o.newDate(this.max):null,l=o.newDate(e.value.split(",")[0]);l&&!isNaN(l.getTime())&&(!i||l>=i)&&(!a||l<=a)&&this.calRef.value&&this.calRef.value.handleDateSelect(l),e.value=""},this.slotController=new k.PktSlotController(this,this.helptextSlot)}get value(){return this._valueProperty}set value(t){const e=this._valueProperty;this._valueProperty=Array.isArray(t)?t.join(","):t||"",this.valueChanged(this._valueProperty,e),this.requestUpdate("value",e)}async connectedCallback(){super.connectedCallback();const t=navigator.userAgent,e=/iP(hone|od|ad)/.test(t);this.inputType=e?"text":"date",document&&document.body.addEventListener("click",i=>{var a,l;(a=this.inputRef)!=null&&a.value&&((l=this.btnRef)!=null&&l.value)&&!this.inputRef.value.contains(i.target)&&!(this.inputRefTo.value&&this.inputRefTo.value.contains(i.target))&&!this.btnRef.value.contains(i.target)&&!i.target.closest(".pkt-calendar-popup")&&this.calendarOpen&&(this.onBlur(),this.hideCalendar())}),document&&document.body.addEventListener("keydown",i=>{i.key==="Escape"&&this.calendarOpen&&this.hideCalendar()}),this.value&&(this._value=Array.isArray(this.value)?this.value.filter(Boolean):this.value.split(",").filter(Boolean)),this.min=this.min||p.props.min.default,this.max=this.max||p.props.max.default,typeof this.excludedates=="string"&&(this.excludedates=this.excludedates.split(",")),typeof this.excludeweekdays=="string"&&(this.excludeweekdays=this.excludeweekdays.split(",")),(this.multiple||this.range)&&this.name&&!this.name.endsWith("[]")&&(this.name=this.name+"[]"),this.calendarOpen&&(await g(20),this.handleCalendarPosition())}disconnectedCallback(){super.disconnectedCallback(),document&&document.body.removeEventListener("click",t=>{var e,i;(e=this.inputRef)!=null&&e.value&&((i=this.btnRef)!=null&&i.value)&&!this.inputRef.value.contains(t.target)&&!this.btnRef.value.contains(t.target)&&this.hideCalendar()})}onInput(){this.dispatchEvent(new Event("input",{bubbles:!0}))}valueChanged(t,e){if(t===e)return;let i=[];t&&(typeof t=="string"?i=t.split(",").filter(Boolean):i=String(t).split(",").filter(Boolean)),this._value=i;const a=i.join(",");this._valueProperty!==a&&(this._valueProperty=a),super.valueChanged(a,e)}attributeChangedCallback(t,e,i){t==="value"&&this.value!==e&&this.valueChanged(i,e),t==="excludedates"&&typeof this.excludedates=="string"&&(this.excludedates=(i==null?void 0:i.split(","))??[]),t==="excludeweekdays"&&typeof this.excludeweekdays=="string"&&(this.excludeweekdays=(i==null?void 0:i.split(","))??[]),super.attributeChangedCallback(t,e,i)}updated(t){if(t.has("value")){const e=Array.isArray(this.value)?this.value.join(","):this.value,i=t.get("value"),a=Array.isArray(i)?i.join(","):i;this.valueChanged(e,a)}t.has("multiple")&&(this.multiple&&!Array.isArray(this._value)?this._value=typeof this.value=="string"?this.value?this.value.split(",").filter(Boolean):[]:[]:!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(t)}renderInput(){return s.x`
|
|
2
2
|
<input
|
|
3
3
|
class="${d.e(this.inputClasses)}"
|
|
4
4
|
.type=${this.inputType}
|
|
5
5
|
id="${this.id}-input"
|
|
6
6
|
.value=${this._value[0]??""}
|
|
7
|
-
min=${
|
|
8
|
-
max=${
|
|
9
|
-
placeholder=${
|
|
7
|
+
min=${h.o(this.min)}
|
|
8
|
+
max=${h.o(this.max)}
|
|
9
|
+
placeholder=${h.o(this.placeholder)}
|
|
10
10
|
?readonly=${this.readonly}
|
|
11
11
|
aria-describedby="${this.id}-helptext"
|
|
12
12
|
@click=${t=>{t.preventDefault(),this.showCalendar()}}
|
|
@@ -18,57 +18,57 @@
|
|
|
18
18
|
@change=${t=>{this.touched=!0,t.stopImmediatePropagation()}}
|
|
19
19
|
${r.n(this.inputRef)}
|
|
20
20
|
/>
|
|
21
|
-
`}renderRangeInput(){const t={"pkt-input-prefix":this.showRangeLabels,"pkt-hide":!this.showRangeLabels};return
|
|
22
|
-
${this.showRangeLabels?
|
|
21
|
+
`}renderRangeInput(){const t={"pkt-input-prefix":this.showRangeLabels,"pkt-hide":!this.showRangeLabels};return s.x`
|
|
22
|
+
${this.showRangeLabels?s.x` <div class="pkt-input-prefix">${this.strings.generic.from}</div> `:s.E}
|
|
23
23
|
<input
|
|
24
24
|
class=${d.e(this.inputClasses)}
|
|
25
25
|
.type=${this.inputType}
|
|
26
26
|
id="${this.id}-input"
|
|
27
27
|
.value=${this._value[0]??""}
|
|
28
|
-
min=${
|
|
29
|
-
max=${
|
|
30
|
-
placeholder=${
|
|
28
|
+
min=${h.o(this.min)}
|
|
29
|
+
max=${h.o(this.max)}
|
|
30
|
+
placeholder=${h.o(this.placeholder)}
|
|
31
31
|
?readonly=${this.readonly}
|
|
32
32
|
?disabled=${this.disabled}
|
|
33
33
|
@click=${e=>{e.preventDefault(),this.showCalendar()}}
|
|
34
|
-
@keydown=${e=>{var i,a;if(e.key===","&&((i=this.inputRef.value)==null||i.blur()),(e.key==="Space"||e.key===" ")&&(e.preventDefault(),this.toggleCalendar(e)),e.key==="Enter"){const
|
|
34
|
+
@keydown=${e=>{var i,a;if(e.key===","&&((i=this.inputRef.value)==null||i.blur()),(e.key==="Space"||e.key===" ")&&(e.preventDefault(),this.toggleCalendar(e)),e.key==="Enter"){const l=this.internals.form;l?l.requestSubmit():(a=this.inputRefTo.value)==null||a.focus()}}}
|
|
35
35
|
@input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
|
|
36
36
|
@focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
|
|
37
|
-
@blur=${e=>{var i,a;if(e.target.value){this.manageValidity(e.target);const
|
|
37
|
+
@blur=${e=>{var i,a;if(e.target.value){this.manageValidity(e.target);const l=o.fromISOToDate(e.target.value);l&&this._value[0]!==e.target.value&&this._value[1]&&(this.clearInputValue(),(a=(i=this.calRef)==null?void 0:i.value)==null||a.handleDateSelect(l))}else this._value[0]&&this.clearInputValue()}}
|
|
38
38
|
@change=${e=>{e.stopImmediatePropagation()}}
|
|
39
39
|
${r.n(this.inputRef)}
|
|
40
40
|
/>
|
|
41
41
|
<div class="${d.e(t)}" id="${this.id}-to-label">
|
|
42
42
|
${this.strings.generic.to}
|
|
43
43
|
</div>
|
|
44
|
-
${this.showRangeLabels?
|
|
44
|
+
${this.showRangeLabels?s.E:s.x` <div class="pkt-input-separator">–</div> `}
|
|
45
45
|
<input
|
|
46
46
|
class=${d.e(this.inputClasses)}
|
|
47
47
|
.type=${this.inputType}
|
|
48
48
|
id="${this.id}-to"
|
|
49
49
|
aria-labelledby="${this.id}-to-label"
|
|
50
50
|
.value=${this._value[1]??""}
|
|
51
|
-
min=${
|
|
52
|
-
max=${
|
|
53
|
-
placeholder=${
|
|
51
|
+
min=${h.o(this.min)}
|
|
52
|
+
max=${h.o(this.max)}
|
|
53
|
+
placeholder=${h.o(this.placeholder)}
|
|
54
54
|
?readonly=${this.readonly}
|
|
55
55
|
?disabled=${this.disabled}
|
|
56
56
|
@click=${e=>{e.preventDefault(),this.showCalendar()}}
|
|
57
|
-
@keydown=${e=>{var i,a;if(e.key===","&&((i=this.inputRefTo.value)==null||i.blur()),(e.key==="Space"||e.key===" ")&&(e.preventDefault(),this.toggleCalendar(e)),e.key==="Enter"){const
|
|
57
|
+
@keydown=${e=>{var i,a;if(e.key===","&&((i=this.inputRefTo.value)==null||i.blur()),(e.key==="Space"||e.key===" ")&&(e.preventDefault(),this.toggleCalendar(e)),e.key==="Enter"){const l=this.internals.form;l?l.requestSubmit():(a=this.inputRefTo.value)==null||a.blur()}}}
|
|
58
58
|
@input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
|
|
59
59
|
@focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
|
|
60
|
-
@blur=${e=>{var i,a,
|
|
60
|
+
@blur=${e=>{var i,a,l;if((i=this.calRef.value)!=null&&i.contains(e.relatedTarget)||this.onBlur(),e.target.value){this.manageValidity(e.target);const u=e.target.value;this.min&&this.min>u?this.internals.setValidity({rangeUnderflow:!0},this.strings.forms.messages.rangeUnderflow,e.target):this.max&&this.max<u&&this.internals.setValidity({rangeOverflow:!0},this.strings.forms.messages.rangeOverflow,e.target);const f=o.fromISOToDate(e.target.value);f&&this._value[1]!==o.formatISODate(f)&&((l=(a=this.calRef)==null?void 0:a.value)==null||l.handleDateSelect(f))}}}
|
|
61
61
|
@change=${e=>{this.touched=!0,e.stopImmediatePropagation()}}
|
|
62
62
|
${r.n(this.inputRefTo)}
|
|
63
63
|
/>
|
|
64
|
-
`}renderMultipleInput(){return
|
|
64
|
+
`}renderMultipleInput(){return s.x`
|
|
65
65
|
<input
|
|
66
66
|
class=${d.e(this.inputClasses)}
|
|
67
67
|
.type=${this.inputType}
|
|
68
68
|
id="${this.id}-input"
|
|
69
|
-
min=${
|
|
70
|
-
max=${
|
|
71
|
-
placeholder=${
|
|
69
|
+
min=${h.o(this.min)}
|
|
70
|
+
max=${h.o(this.max)}
|
|
71
|
+
placeholder=${h.o(this.placeholder)}
|
|
72
72
|
?readonly=${this.readonly}
|
|
73
73
|
?disabled=${this.disabled||this.maxlength&&this._value.length>=this.maxlength}
|
|
74
74
|
@click=${t=>{t.preventDefault(),this.showCalendar()}}
|
|
@@ -79,9 +79,9 @@
|
|
|
79
79
|
@change=${t=>{this.touched=!0,t.stopImmediatePropagation()}}
|
|
80
80
|
${r.n(this.inputRef)}
|
|
81
81
|
/>
|
|
82
|
-
`}renderTags(){return
|
|
82
|
+
`}renderTags(){return s.x`
|
|
83
83
|
<div class="pkt-datepicker__tags" aria-live="polite">
|
|
84
|
-
${this._value[0]?
|
|
84
|
+
${this._value[0]?y.c((this._value??[]).filter(Boolean).sort(),t=>t,t=>s.x`
|
|
85
85
|
<pkt-tag
|
|
86
86
|
.id="${this.id+t+"-tag"}"
|
|
87
87
|
closeTag
|
|
@@ -89,9 +89,9 @@
|
|
|
89
89
|
@close=${()=>{var e;return(e=this.calRef.value)==null?void 0:e.handleDateSelect(o.fromISOToDate(t))}}
|
|
90
90
|
><time datetime="${t}">${o.fromISOtoLocal(t,this.dateformat)}</time></pkt-tag
|
|
91
91
|
>
|
|
92
|
-
`):
|
|
92
|
+
`):s.E}
|
|
93
93
|
</div>
|
|
94
|
-
`}renderCalendar(){return
|
|
94
|
+
`}renderCalendar(){return s.x`<div
|
|
95
95
|
class="pkt-calendar-popup pkt-${this.calendarOpen?"show":"hide"}"
|
|
96
96
|
@focusout=${t=>{this.calendarOpen&&this.handleFocusOut(t)}}
|
|
97
97
|
id="${this.id}-popup"
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
@close=${()=>{this.onBlur(),this.hideCalendar()}}
|
|
115
115
|
${r.n(this.calRef)}
|
|
116
116
|
></pkt-calendar>
|
|
117
|
-
</div>`}render(){return this.inputClasses={"pkt-input":!0,"pkt-datepicker__input":!0,"pkt-input--fullwidth":this.fullwidth,"pkt-datepicker--hasrangelabels":this.showRangeLabels,"pkt-datepicker--multiple":this.multiple,"pkt-datepicker--range":this.range},this.buttonClasses={"pkt-input-icon":!0,"pkt-btn":!0,"pkt-btn--icon-only":!0,"pkt-btn--tertiary":!0,"pkt-datepicker__calendar-button":!0},
|
|
117
|
+
</div>`}render(){return this.inputClasses={"pkt-input":!0,"pkt-datepicker__input":!0,"pkt-input--fullwidth":this.fullwidth,"pkt-datepicker--hasrangelabels":this.showRangeLabels,"pkt-datepicker--multiple":this.multiple,"pkt-datepicker--range":this.range},this.buttonClasses={"pkt-input-icon":!0,"pkt-btn":!0,"pkt-btn--icon-only":!0,"pkt-btn--tertiary":!0,"pkt-datepicker__calendar-button":!0},s.x`
|
|
118
118
|
<pkt-input-wrapper
|
|
119
119
|
label="${this.label}"
|
|
120
120
|
forId="${this.id}-input"
|
|
@@ -140,7 +140,7 @@
|
|
|
140
140
|
class="pkt-datepicker"
|
|
141
141
|
>
|
|
142
142
|
<div class="pkt-contents" ${r.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
|
|
143
|
-
${this.multiple?this.renderTags():
|
|
143
|
+
${this.multiple?this.renderTags():s.E}
|
|
144
144
|
<div
|
|
145
145
|
class="pkt-datepicker__inputs ${this.range&&this.showRangeLabels?"pkt-input__range-inputs":""}"
|
|
146
146
|
>
|
|
@@ -161,4 +161,4 @@
|
|
|
161
161
|
</div>
|
|
162
162
|
</pkt-input-wrapper>
|
|
163
163
|
${this.renderCalendar()}
|
|
164
|
-
`}handleCalendarPosition(){var t;if(this.popupRef.value&&this.inputRef.value){const e=this.multiple&&!!this.maxlength,i=((t=this.inputRef.value.parentElement)==null?void 0:t.getBoundingClientRect())||this.inputRef.value.getBoundingClientRect(),a=e?i.height+30:i.height,
|
|
164
|
+
`}handleCalendarPosition(){var t;if(this.popupRef.value&&this.inputRef.value){const e=this.multiple&&!!this.maxlength,i=((t=this.inputRef.value.parentElement)==null?void 0:t.getBoundingClientRect())||this.inputRef.value.getBoundingClientRect(),a=e?i.height+30:i.height,l=this.popupRef.value.getBoundingClientRect().height;let u=e?"calc(100% - 30px)":"100%";i&&i.top+l>window.innerHeight&&i.top-l>0&&(u=`calc(100% - ${a}px - ${l}px)`),this.popupRef.value.style.top=u}}handleFocusOut(t){this.contains(t.target)||(this.onBlur(),this.hideCalendar())}async showCalendar(){var t;this.calendarOpen=!0,await g(20),this.handleCalendarPosition(),this.isMobileSafari&&((t=this.calRef.value)==null||t.focusOnCurrentDate())}hideCalendar(){this.calendarOpen=!1}async toggleCalendar(t){t.preventDefault(),this.calendarOpen?this.hideCalendar():this.showCalendar()}clearInputValue(){this._value=[],this.value=""}};n([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"value",1);n([s.n({type:Array})],exports.PktDatepicker.prototype,"_value",2);n([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"label",2);n([s.n({type:String})],exports.PktDatepicker.prototype,"dateformat",2);n([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"multiple",2);n([s.n({type:Number,reflect:!0})],exports.PktDatepicker.prototype,"maxlength",2);n([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"range",2);n([s.n({type:Boolean})],exports.PktDatepicker.prototype,"showRangeLabels",2);n([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"min",2);n([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"max",2);n([s.n({type:Boolean})],exports.PktDatepicker.prototype,"weeknumbers",2);n([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"withcontrols",2);n([s.n({converter:o.converters.csvToArray})],exports.PktDatepicker.prototype,"excludedates",2);n([s.n({converter:o.converters.csvToArray})],exports.PktDatepicker.prototype,"excludeweekdays",2);n([s.n({type:String})],exports.PktDatepicker.prototype,"currentmonth",2);n([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"calendarOpen",2);n([s.n({type:String})],exports.PktDatepicker.prototype,"timezone",2);n([v.r()],exports.PktDatepicker.prototype,"inputClasses",2);n([v.r()],exports.PktDatepicker.prototype,"buttonClasses",2);exports.PktDatepicker=n([s.t("pkt-datepicker")],exports.PktDatepicker);
|