@oslokommune/punkt-elements 18.6.0 → 18.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +34 -0
- package/dist/card-CsSNvjZV.cjs +64 -0
- package/dist/card-PXDm9JXv.js +182 -0
- package/dist/{checkbox-D6j7amKX.cjs → checkbox-CMu4pF8-.cjs} +1 -1
- package/dist/{checkbox-DcvKYDU2.js → checkbox-DReZOEy2.js} +1 -1
- package/dist/{combobox-BT1LB0gl.cjs → combobox-BZm_12qR.cjs} +1 -1
- package/dist/{combobox-CiT2YvLb.js → combobox-DcBFiuwP.js} +2 -2
- package/dist/components/datepicker/datepicker-base.d.ts +4 -0
- package/dist/components/datepicker/datepicker.d.ts +3 -1
- package/dist/{datepicker-CqWg6K2N.js → datepicker-DboWQcrh.js} +58 -29
- package/dist/{datepicker-DIgQrvbZ.cjs → datepicker-NSWMVoGi.cjs} +22 -5
- package/dist/{fileupload-BmT5nQX0.cjs → fileupload-BYVtnSaI.cjs} +1 -1
- package/dist/{fileupload-4nTdjPKw.js → fileupload-CqxWUH0y.js} +1 -1
- package/dist/{header-DU10rGhU.js → header-DsaPCLjJ.js} +1 -1
- package/dist/{header-DybJSDQQ.cjs → header-DzVHM7gZ.cjs} +1 -1
- package/dist/{input-element-zXKo9jpe.js → input-element-BiUfK_gU.js} +8 -8
- package/dist/{input-element-uajHIWAO.cjs → input-element-kvI_5er5.cjs} +1 -1
- package/dist/{input-wrapper-B4TCGGwj.js → input-wrapper-Bwh720ke.js} +4 -4
- package/dist/{input-wrapper-791L3L--.cjs → input-wrapper-wyvCnWPp.cjs} +2 -2
- package/dist/pkt-card.cjs +1 -1
- package/dist/pkt-card.js +1 -1
- package/dist/pkt-checkbox.cjs +1 -1
- package/dist/pkt-checkbox.js +1 -1
- package/dist/pkt-combobox.cjs +1 -1
- package/dist/pkt-combobox.js +1 -1
- package/dist/pkt-datepicker.cjs +1 -1
- package/dist/pkt-datepicker.js +1 -1
- package/dist/pkt-fileupload.cjs +1 -1
- package/dist/pkt-fileupload.js +1 -1
- package/dist/pkt-header.cjs +1 -1
- package/dist/pkt-header.js +1 -1
- package/dist/pkt-index.cjs +1 -1
- package/dist/pkt-index.js +14 -14
- package/dist/pkt-input-wrapper.cjs +1 -1
- package/dist/pkt-input-wrapper.js +1 -1
- package/dist/pkt-radiobutton.cjs +1 -1
- package/dist/pkt-radiobutton.js +1 -1
- package/dist/pkt-select.cjs +1 -1
- package/dist/pkt-select.js +1 -1
- package/dist/pkt-textarea.cjs +1 -1
- package/dist/pkt-textarea.js +1 -1
- package/dist/pkt-textinput.cjs +1 -1
- package/dist/pkt-textinput.js +1 -1
- package/dist/pkt-timepicker.cjs +1 -1
- package/dist/pkt-timepicker.js +1 -1
- package/dist/{radiobutton-BuOLykKo.cjs → radiobutton-B6pzZQZV.cjs} +1 -1
- package/dist/{radiobutton-Dr5OQ0IY.js → radiobutton-bGdAEz26.js} +1 -1
- package/dist/{select-Cd_saUE7.js → select-D7r2s7Cw.js} +2 -2
- package/dist/{select-Cc7c9dRd.cjs → select-ay8WHI7p.cjs} +1 -1
- package/dist/shared-types/card.d.ts +86 -0
- package/dist/shared-types/index.d.ts +4 -1
- package/dist/shared-types/layout.d.ts +2 -1
- package/dist/shared-types/skin.d.ts +1 -4
- package/dist/{textarea-MJvpE_yV.js → textarea-CzAL8e6L.js} +2 -2
- package/dist/{textarea-xTcafucE.cjs → textarea-s4IDLsBi.cjs} +1 -1
- package/dist/{textinput-B4VnZzsa.cjs → textinput-B9w4jhIP.cjs} +1 -1
- package/dist/{textinput-Cr7Z9ilH.js → textinput-DT3HR9eU.js} +2 -2
- package/dist/{timepicker-srjt12dI.js → timepicker-BE0UouVr.js} +2 -2
- package/dist/{timepicker-85ViMBd6.cjs → timepicker-C-Ip5Jgl.cjs} +1 -1
- package/package.json +2 -2
- package/src/components/card/card.ts +19 -16
- package/src/components/datepicker/datepicker-base.ts +14 -0
- package/src/components/datepicker/datepicker-multiple.ts +3 -0
- package/src/components/datepicker/datepicker-range.ts +6 -0
- package/src/components/datepicker/datepicker-single.ts +3 -1
- package/src/components/datepicker/datepicker.accessibility.test.ts +24 -3
- package/src/components/datepicker/datepicker.ts +63 -63
- package/dist/card-CwvUQj1a.js +0 -360
- package/dist/card-b7jjKk6B.cjs +0 -64
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
|
+
## [18.7.0](https://github.com/oslokommune/punkt/compare/18.6.1...18.7.0) (2026-09-10)
|
|
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
|
+
## [18.6.1](https://github.com/oslokommune/punkt/compare/18.6.0...18.6.1) (2026-09-09)
|
|
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
|
## [18.6.0](https://github.com/oslokommune/punkt/compare/18.5.2...18.6.0) (2026-09-09)
|
|
9
43
|
|
|
10
44
|
### ⚠ BREAKING CHANGES
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
const e=require("./element-DRc10X2R.cjs"),t=require("./class-map-BEib48YL.cjs"),n=require("./if-defined-BeVQnl3C.cjs"),r=require("./element-with-slot-DgtT8lCH.cjs");require("./icon-DBFTFd-J.cjs"),require("./tag-Cojf4jgA.cjs");var i=[`outlined`,`outlined-beige`,`gray`,`blue`,`beige`,`green`],a={headingLevel:3,layout:`vertical`,skin:`outlined`,padding:`default`,tagPosition:`top`,openLinkInNewTab:!1,borderOnHover:!0,zoom:!1,imageShape:`square`,restrictImageHeight:!1},o=class extends r.t{constructor(...e){super(...e),this.ariaLabel=``,this.metaLead=null,this.borderOnHover=a.borderOnHover,this.zoom=a.zoom,this.imageAspect=null,this.restrictImageHeight=a.restrictImageHeight,this.clickCardLink=null,this.metaTrail=null,this.layout=a.layout,this.heading=``,this.headingLevel=a.headingLevel,this.image={src:``,alt:``},this.imageShape=a.imageShape,this.openLinkInNewTab=a.openLinkInNewTab,this.padding=a.padding,this.skin=a.skin,this.subheading=``,this.tagPosition=`top`,this.tags=[]}connectedCallback(){super.connectedCallback()}render(){let r={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.layout}`]:this.layout,[`pkt-card--padding-${this.padding}`]:this.padding,"pkt-card--border-on-hover":this.borderOnHover,"pkt-card--zoom":this.zoom},i=this.ariaLabel?.trim()||(this.heading?`${this.heading} lenkekort`:`lenkekort`),a=this.ariaLabel?.trim()||(this.heading?this.heading:`kort`);return e._`
|
|
2
|
+
<article
|
|
3
|
+
class=${t.t(r)}
|
|
4
|
+
aria-label=${n.t(this.clickCardLink?i:a)}
|
|
5
|
+
>
|
|
6
|
+
${this.renderImage()}
|
|
7
|
+
<div class="pkt-card__wrapper">
|
|
8
|
+
${this.tagPosition===`top`?this.renderTags():e.h}
|
|
9
|
+
${this.renderHeader()}
|
|
10
|
+
${this.renderSlot()}
|
|
11
|
+
${this.tagPosition===`bottom`?this.renderTags():e.h}
|
|
12
|
+
${this.renderMetadata()}
|
|
13
|
+
</div>
|
|
14
|
+
</article>
|
|
15
|
+
`}renderImage(){let n={"pkt-card__image":!0,[`pkt-card__image-${this.imageShape}`]:this.imageShape,[`pkt-card__image-aspect-${this.imageAspect}`]:!!this.imageAspect,"pkt-card__image-restricted":this.restrictImageHeight};return e._`
|
|
16
|
+
${this.image.src&&e._`
|
|
17
|
+
<div class=${t.t(n)}>
|
|
18
|
+
<img src=${this.image.src} alt=${this.image.alt||``} />
|
|
19
|
+
</div>
|
|
20
|
+
`}
|
|
21
|
+
`}renderHeadingTag(t,n){let r=this.headingLevel&&this.headingLevel>=1&&this.headingLevel<=6?this.headingLevel:3,i=`pkt-heading pkt-heading--medium pkt-heading--fw-regular ${t}`;switch(r){case 1:return e._`<h1 class=${i}>${n}</h1>`;case 2:return e._`<h2 class=${i}>${n}</h2>`;case 4:return e._`<h4 class=${i}>${n}</h4>`;case 5:return e._`<h5 class=${i}>${n}</h5>`;case 6:return e._`<h6 class=${i}>${n}</h6>`;default:return e._`<h3 class=${i}>${n}</h3>`}}renderHeading(){return!this.heading||this.clickCardLink?e.h:this.renderHeadingTag(`pkt-card__heading`,this.heading)}renderLinkHeading(){return this.clickCardLink?this.renderHeadingTag(`pkt-card__link-heading pkt-card__heading`,e._`<a
|
|
22
|
+
class="pkt-card__link"
|
|
23
|
+
href=${this.clickCardLink}
|
|
24
|
+
target=${this.openLinkInNewTab?`_blank`:`_self`}
|
|
25
|
+
rel=${n.t(this.openLinkInNewTab?`noopener noreferrer`:void 0)}
|
|
26
|
+
>${this.heading}</a
|
|
27
|
+
>`):e.h}renderSubheading(){return e._`
|
|
28
|
+
${this.subheading?e._` <p class="pkt-card__subheading ">${this.subheading}</p> `:e.h}
|
|
29
|
+
`}renderHeader(){let t=!!this.heading||!!this.subheading;return e._`
|
|
30
|
+
${t?e._`
|
|
31
|
+
<header class="pkt-card__header">
|
|
32
|
+
${this.renderHeading()}
|
|
33
|
+
${this.renderLinkHeading()}
|
|
34
|
+
${this.renderSubheading()}
|
|
35
|
+
</header>
|
|
36
|
+
`:e.h}
|
|
37
|
+
`}renderTags(){let r={"pkt-card__tags":!0,[`pkt-card__tags-${this.tagPosition}`]:this.tagPosition};return e._`
|
|
38
|
+
${this.tags.length>0?e._`
|
|
39
|
+
<div
|
|
40
|
+
class=${t.t(r)}
|
|
41
|
+
role="list"
|
|
42
|
+
aria-label=${this.tags.length>1?`merkelapper`:`merkelapp`}
|
|
43
|
+
>
|
|
44
|
+
${this.tags.map(t=>e._`
|
|
45
|
+
<pkt-tag
|
|
46
|
+
role="listitem"
|
|
47
|
+
textStyle="normal-text"
|
|
48
|
+
size="medium"
|
|
49
|
+
skin=${n.t(t.skin)}
|
|
50
|
+
iconName=${n.t(t.iconName)}
|
|
51
|
+
>
|
|
52
|
+
<span>${t.text}</span>
|
|
53
|
+
</pkt-tag>
|
|
54
|
+
`)}
|
|
55
|
+
</div>
|
|
56
|
+
`:e.h}
|
|
57
|
+
`}renderSlot(){return e._`<section class="pkt-card__content">${r.r(this)}</section>`}renderMetadata(){return e._`
|
|
58
|
+
${this.metaLead||this.metaTrail?e._`
|
|
59
|
+
<footer class="pkt-card__metadata">
|
|
60
|
+
${this.metaLead?e._`<span class="pkt-card__metadata-lead">${this.metaLead}</span>`:e.h}
|
|
61
|
+
${this.metaTrail?e._`<span class="pkt-card__metadata-trail">${this.metaTrail}</span>`:e.h}
|
|
62
|
+
</footer>
|
|
63
|
+
`:e.h}
|
|
64
|
+
`}};e.n([e.u({type:String})],o.prototype,`ariaLabel`,void 0),e.n([e.u({type:String})],o.prototype,`metaLead`,void 0),e.n([e.u({type:Boolean})],o.prototype,`borderOnHover`,void 0),e.n([e.u({type:Boolean})],o.prototype,`zoom`,void 0),e.n([e.u({type:String})],o.prototype,`imageAspect`,void 0),e.n([e.u({type:Boolean})],o.prototype,`restrictImageHeight`,void 0),e.n([e.u({type:String,reflect:!0})],o.prototype,`clickCardLink`,void 0),e.n([e.u({type:String})],o.prototype,`metaTrail`,void 0),e.n([e.u({type:String})],o.prototype,`layout`,void 0),e.n([e.u({type:String})],o.prototype,`heading`,void 0),e.n([e.u({type:Number,attribute:`headinglevel`})],o.prototype,`headingLevel`,void 0),e.n([e.u({type:Object})],o.prototype,`image`,void 0),e.n([e.u({type:String})],o.prototype,`imageShape`,void 0),e.n([e.u({type:Boolean})],o.prototype,`openLinkInNewTab`,void 0),e.n([e.u({type:String})],o.prototype,`padding`,void 0),e.n([e.u({type:String,converter:{fromAttribute:e=>{let t=i;return e&&t.includes(e)?e:(e&&!t.includes(e)&&console.warn(`Invalid skin value "${e}". Using default skin "${a.skin}".`),a.skin)},toAttribute:e=>e}})],o.prototype,`skin`,void 0),e.n([e.u({type:String})],o.prototype,`subheading`,void 0),e.n([e.u({type:String})],o.prototype,`tagPosition`,void 0),e.n([e.u({type:Array})],o.prototype,`tags`,void 0);try{e.d(`pkt-card`)(o)}catch{console.warn(`Forsøker å definere <pkt-card>, men den er allerede definert`)}var s=o;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return s}});
|
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
import { _ as e, d as t, h as n, n as r, u as i } from "./element-e2MAMNEP.js";
|
|
2
|
+
import { t as a } from "./class-map-BL_YL_Ed.js";
|
|
3
|
+
import { t as o } from "./if-defined-r8tKY4tG.js";
|
|
4
|
+
import { r as s, t as c } from "./element-with-slot-GwTT3WRD.js";
|
|
5
|
+
import "./icon-jEFbKTB_.js";
|
|
6
|
+
import "./tag-D2Xvsy1i.js";
|
|
7
|
+
//#region ../../shared-types/card.ts
|
|
8
|
+
var l = [
|
|
9
|
+
"outlined",
|
|
10
|
+
"outlined-beige",
|
|
11
|
+
"gray",
|
|
12
|
+
"blue",
|
|
13
|
+
"beige",
|
|
14
|
+
"green"
|
|
15
|
+
], u = {
|
|
16
|
+
headingLevel: 3,
|
|
17
|
+
layout: "vertical",
|
|
18
|
+
skin: "outlined",
|
|
19
|
+
padding: "default",
|
|
20
|
+
tagPosition: "top",
|
|
21
|
+
openLinkInNewTab: !1,
|
|
22
|
+
borderOnHover: !0,
|
|
23
|
+
zoom: !1,
|
|
24
|
+
imageShape: "square",
|
|
25
|
+
restrictImageHeight: !1
|
|
26
|
+
}, d = class extends c {
|
|
27
|
+
constructor(...e) {
|
|
28
|
+
super(...e), this.ariaLabel = "", this.metaLead = null, this.borderOnHover = u.borderOnHover, this.zoom = u.zoom, this.imageAspect = null, this.restrictImageHeight = u.restrictImageHeight, this.clickCardLink = null, this.metaTrail = null, this.layout = u.layout, this.heading = "", this.headingLevel = u.headingLevel, this.image = {
|
|
29
|
+
src: "",
|
|
30
|
+
alt: ""
|
|
31
|
+
}, this.imageShape = u.imageShape, this.openLinkInNewTab = u.openLinkInNewTab, this.padding = u.padding, this.skin = u.skin, this.subheading = "", this.tagPosition = "top", this.tags = [];
|
|
32
|
+
}
|
|
33
|
+
connectedCallback() {
|
|
34
|
+
super.connectedCallback();
|
|
35
|
+
}
|
|
36
|
+
render() {
|
|
37
|
+
let t = {
|
|
38
|
+
"pkt-card": !0,
|
|
39
|
+
[`pkt-card--${this.skin}`]: this.skin,
|
|
40
|
+
[`pkt-card--${this.layout}`]: this.layout,
|
|
41
|
+
[`pkt-card--padding-${this.padding}`]: this.padding,
|
|
42
|
+
"pkt-card--border-on-hover": this.borderOnHover,
|
|
43
|
+
"pkt-card--zoom": this.zoom
|
|
44
|
+
}, r = this.ariaLabel?.trim() || (this.heading ? `${this.heading} lenkekort` : "lenkekort"), i = this.ariaLabel?.trim() || (this.heading ? this.heading : "kort");
|
|
45
|
+
return e`
|
|
46
|
+
<article
|
|
47
|
+
class=${a(t)}
|
|
48
|
+
aria-label=${o(this.clickCardLink ? r : i)}
|
|
49
|
+
>
|
|
50
|
+
${this.renderImage()}
|
|
51
|
+
<div class="pkt-card__wrapper">
|
|
52
|
+
${this.tagPosition === "top" ? this.renderTags() : n}
|
|
53
|
+
${this.renderHeader()}
|
|
54
|
+
${this.renderSlot()}
|
|
55
|
+
${this.tagPosition === "bottom" ? this.renderTags() : n}
|
|
56
|
+
${this.renderMetadata()}
|
|
57
|
+
</div>
|
|
58
|
+
</article>
|
|
59
|
+
`;
|
|
60
|
+
}
|
|
61
|
+
renderImage() {
|
|
62
|
+
let t = {
|
|
63
|
+
"pkt-card__image": !0,
|
|
64
|
+
[`pkt-card__image-${this.imageShape}`]: this.imageShape,
|
|
65
|
+
[`pkt-card__image-aspect-${this.imageAspect}`]: !!this.imageAspect,
|
|
66
|
+
"pkt-card__image-restricted": this.restrictImageHeight
|
|
67
|
+
};
|
|
68
|
+
return e`
|
|
69
|
+
${this.image.src && e`
|
|
70
|
+
<div class=${a(t)}>
|
|
71
|
+
<img src=${this.image.src} alt=${this.image.alt || ""} />
|
|
72
|
+
</div>
|
|
73
|
+
`}
|
|
74
|
+
`;
|
|
75
|
+
}
|
|
76
|
+
renderHeadingTag(t, n) {
|
|
77
|
+
let r = this.headingLevel && this.headingLevel >= 1 && this.headingLevel <= 6 ? this.headingLevel : 3, i = `pkt-heading pkt-heading--medium pkt-heading--fw-regular ${t}`;
|
|
78
|
+
switch (r) {
|
|
79
|
+
case 1: return e`<h1 class=${i}>${n}</h1>`;
|
|
80
|
+
case 2: return e`<h2 class=${i}>${n}</h2>`;
|
|
81
|
+
case 4: return e`<h4 class=${i}>${n}</h4>`;
|
|
82
|
+
case 5: return e`<h5 class=${i}>${n}</h5>`;
|
|
83
|
+
case 6: return e`<h6 class=${i}>${n}</h6>`;
|
|
84
|
+
default: return e`<h3 class=${i}>${n}</h3>`;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
renderHeading() {
|
|
88
|
+
return !this.heading || this.clickCardLink ? n : this.renderHeadingTag("pkt-card__heading", this.heading);
|
|
89
|
+
}
|
|
90
|
+
renderLinkHeading() {
|
|
91
|
+
return this.clickCardLink ? this.renderHeadingTag("pkt-card__link-heading pkt-card__heading", e`<a
|
|
92
|
+
class="pkt-card__link"
|
|
93
|
+
href=${this.clickCardLink}
|
|
94
|
+
target=${this.openLinkInNewTab ? "_blank" : "_self"}
|
|
95
|
+
rel=${o(this.openLinkInNewTab ? "noopener noreferrer" : void 0)}
|
|
96
|
+
>${this.heading}</a
|
|
97
|
+
>`) : n;
|
|
98
|
+
}
|
|
99
|
+
renderSubheading() {
|
|
100
|
+
return e`
|
|
101
|
+
${this.subheading ? e` <p class="pkt-card__subheading ">${this.subheading}</p> ` : n}
|
|
102
|
+
`;
|
|
103
|
+
}
|
|
104
|
+
renderHeader() {
|
|
105
|
+
let t = !!this.heading || !!this.subheading;
|
|
106
|
+
return e`
|
|
107
|
+
${t ? e`
|
|
108
|
+
<header class="pkt-card__header">
|
|
109
|
+
${this.renderHeading()}
|
|
110
|
+
${this.renderLinkHeading()}
|
|
111
|
+
${this.renderSubheading()}
|
|
112
|
+
</header>
|
|
113
|
+
` : n}
|
|
114
|
+
`;
|
|
115
|
+
}
|
|
116
|
+
renderTags() {
|
|
117
|
+
let t = {
|
|
118
|
+
"pkt-card__tags": !0,
|
|
119
|
+
[`pkt-card__tags-${this.tagPosition}`]: this.tagPosition
|
|
120
|
+
};
|
|
121
|
+
return e`
|
|
122
|
+
${this.tags.length > 0 ? e`
|
|
123
|
+
<div
|
|
124
|
+
class=${a(t)}
|
|
125
|
+
role="list"
|
|
126
|
+
aria-label=${this.tags.length > 1 ? "merkelapper" : "merkelapp"}
|
|
127
|
+
>
|
|
128
|
+
${this.tags.map((t) => e`
|
|
129
|
+
<pkt-tag
|
|
130
|
+
role="listitem"
|
|
131
|
+
textStyle="normal-text"
|
|
132
|
+
size="medium"
|
|
133
|
+
skin=${o(t.skin)}
|
|
134
|
+
iconName=${o(t.iconName)}
|
|
135
|
+
>
|
|
136
|
+
<span>${t.text}</span>
|
|
137
|
+
</pkt-tag>
|
|
138
|
+
`)}
|
|
139
|
+
</div>
|
|
140
|
+
` : n}
|
|
141
|
+
`;
|
|
142
|
+
}
|
|
143
|
+
renderSlot() {
|
|
144
|
+
return e`<section class="pkt-card__content">${s(this)}</section>`;
|
|
145
|
+
}
|
|
146
|
+
renderMetadata() {
|
|
147
|
+
return e`
|
|
148
|
+
${this.metaLead || this.metaTrail ? e`
|
|
149
|
+
<footer class="pkt-card__metadata">
|
|
150
|
+
${this.metaLead ? e`<span class="pkt-card__metadata-lead">${this.metaLead}</span>` : n}
|
|
151
|
+
${this.metaTrail ? e`<span class="pkt-card__metadata-trail">${this.metaTrail}</span>` : n}
|
|
152
|
+
</footer>
|
|
153
|
+
` : n}
|
|
154
|
+
`;
|
|
155
|
+
}
|
|
156
|
+
};
|
|
157
|
+
r([i({ type: String })], d.prototype, "ariaLabel", void 0), r([i({ type: String })], d.prototype, "metaLead", void 0), r([i({ type: Boolean })], d.prototype, "borderOnHover", void 0), r([i({ type: Boolean })], d.prototype, "zoom", void 0), r([i({ type: String })], d.prototype, "imageAspect", void 0), r([i({ type: Boolean })], d.prototype, "restrictImageHeight", void 0), r([i({
|
|
158
|
+
type: String,
|
|
159
|
+
reflect: !0
|
|
160
|
+
})], d.prototype, "clickCardLink", void 0), r([i({ type: String })], d.prototype, "metaTrail", void 0), r([i({ type: String })], d.prototype, "layout", void 0), r([i({ type: String })], d.prototype, "heading", void 0), r([i({
|
|
161
|
+
type: Number,
|
|
162
|
+
attribute: "headinglevel"
|
|
163
|
+
})], d.prototype, "headingLevel", void 0), r([i({ type: Object })], d.prototype, "image", void 0), r([i({ type: String })], d.prototype, "imageShape", void 0), r([i({ type: Boolean })], d.prototype, "openLinkInNewTab", void 0), r([i({ type: String })], d.prototype, "padding", void 0), r([i({
|
|
164
|
+
type: String,
|
|
165
|
+
converter: {
|
|
166
|
+
fromAttribute: (e) => {
|
|
167
|
+
let t = l;
|
|
168
|
+
return e && t.includes(e) ? e : (e && !t.includes(e) && console.warn(`Invalid skin value "${e}". Using default skin "${u.skin}".`), u.skin);
|
|
169
|
+
},
|
|
170
|
+
toAttribute: (e) => e
|
|
171
|
+
}
|
|
172
|
+
})], d.prototype, "skin", void 0), r([i({ type: String })], d.prototype, "subheading", void 0), r([i({ type: String })], d.prototype, "tagPosition", void 0), r([i({ type: Array })], d.prototype, "tags", void 0);
|
|
173
|
+
try {
|
|
174
|
+
t("pkt-card")(d);
|
|
175
|
+
} catch {
|
|
176
|
+
console.warn("Forsøker å definere <pkt-card>, men den er allerede definert");
|
|
177
|
+
}
|
|
178
|
+
//#endregion
|
|
179
|
+
//#region src/components/card/index.ts
|
|
180
|
+
var f = d;
|
|
181
|
+
//#endregion
|
|
182
|
+
export { d as n, f as t };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const e=require("./element-DRc10X2R.cjs"),t=require("./class-map-BEib48YL.cjs"),n=require("./ref-BkV4Cd8U.cjs"),r=require("./input-element-
|
|
1
|
+
const e=require("./element-DRc10X2R.cjs"),t=require("./class-map-BEib48YL.cjs"),n=require("./ref-BkV4Cd8U.cjs"),r=require("./input-element-kvI_5er5.cjs");var i=class extends r.t{constructor(...e){super(...e),this.inputRef=n.t(),this.value=``,this.checkHelptext=null,this.defaultChecked=!1,this.hasTile=!1,this.isSwitch=!1,this.labelPosition=`right`,this.hideLabel=!1,this.checked=null,this.indeterminate=!1,this.type=`checkbox`,this.tagText=null,this.optionalTag=!1,this.requiredTag=!1}connectedCallback(){super.connectedCallback()}attributeChangedCallback(e,t,n){e===`defaultChecked`&&!this.checked&&(this.checked=this.defaultChecked),e===`checked`&&(this.checked=this.checked===``||this.checked===`true`||this.checked===!0,this.inputRef.value&&(this.inputRef.value.checked=this.checked)),e===`indeterminate`&&(this.indeterminate=this.indeterminate===``||this.indeterminate===`true`||this.indeterminate===!0,this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate)),super.attributeChangedCallback(e,t,n)}firstUpdated(e){this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate===``||this.indeterminate===`true`||this.indeterminate===!0),super.firstUpdated(e)}willUpdate(e){super.willUpdate(e),e.has(`defaultChecked`)&&!this.checked&&(this.checked=this.defaultChecked)}updated(e){e.has(`checked`)&&this.inputRef.value&&(this.inputRef.value.checked=this.checked===``||this.checked===`true`||this.checked===!0),e.has(`indeterminate`)&&this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate===``||this.indeterminate===`true`||this.indeterminate===!0),super.updated(e)}render(){let r=t.t({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),i=t.t({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),a=t.t({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--disabled":this.disabled,"pkt-input-check__input-label--left":this.labelPosition===`left`,"pkt-input-check__input-label--right":this.labelPosition===`right`,"pkt-sr-only":this.hideLabel}),o=`pkt-tag pkt-tag--small pkt-tag--thin-text`,s=this.pktStrings.get(`forms`),c=()=>e._`
|
|
2
2
|
${this.tagText?e._`<span class=${o+` pkt-tag--gray`}>${this.tagText}</span>`:e.h}
|
|
3
3
|
${this.optionalTag?e._`<span class=${o+` pkt-tag--blue-light`}>${this.optionalText??s.optional}</span>`:e.h}
|
|
4
4
|
${this.requiredTag?e._`<span class=${o+` pkt-tag--beige`}>${this.requiredText??s.required}</span>`:e.h}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { _ as e, d as t, h as n, n as r, u as i } from "./element-e2MAMNEP.js";
|
|
2
2
|
import { t as a } from "./class-map-BL_YL_Ed.js";
|
|
3
3
|
import { n as o, t as s } from "./ref-lE1mGUOL.js";
|
|
4
|
-
import { t as c } from "./input-element-
|
|
4
|
+
import { t as c } from "./input-element-BiUfK_gU.js";
|
|
5
5
|
//#region src/components/checkbox/checkbox.ts
|
|
6
6
|
var l = class extends c {
|
|
7
7
|
constructor(...e) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const e=require("./element-DRc10X2R.cjs"),t=require("./class-map-BEib48YL.cjs"),n=require("./if-defined-BeVQnl3C.cjs"),r=require("./element-with-slot-DgtT8lCH.cjs");require("./icon-DBFTFd-J.cjs");const i=require("./ref-BkV4Cd8U.cjs");require("./tag-Cojf4jgA.cjs");const a=require("./repeat-uBgVG8Ch.cjs"),o=require("./listbox-D95b5zAd.cjs"),s=require("./input-element-uajHIWAO.cjs"),c=require("./pkt-options-controller-AFYyv3-b.cjs");require("./input-wrapper-791L3L--.cjs");var l=(e,t,n)=>{switch(e){case`,`:return n?`addValue`:null;case`Enter`:return`addValue`;case`Tab`:case`ArrowDown`:return t?null:`focusListbox`;case`Escape`:return`closeOptions`;default:return null}},u=(e,t,n,r,i)=>{if(!e)return{action:`none`,value:null};let a=o.i(n,e);return!t.includes(e)&&!a?r?{action:`addUserValue`,value:e}:i?{action:`none`,value:null}:{action:`removeValue`,value:t[0]}:a&&!t.includes(a.value)?{action:`selectOption`,value:a.value}:{action:`none`,value:null}},d=(e,t,n,r,i)=>e.trim().toLowerCase()?{...o.s(e,t,n,r),shouldRemoveValue:!1,shouldResetInput:!1}:{addValueText:null,userInfoMessage:``,shouldRemoveValue:!i&&!!t[0],shouldResetInput:!0},f=(e,t,n)=>{let r=o.i(t,e);return n===`label`&&r?.label?r.label:e},p={markOptionSelected(e,t){if(t){for(let n of e)if(n.value===t){n.selected=!0;break}}},markOptionDeselected(e,t){if(t){for(let n of e)if(n.value===t){n.selected=!1;break}}},markAllSelected(e){for(let t of e)t.selected=!0},markAllDeselected(e){for(let t of e)t.selected=!1},removeUserAddedOptions(e){return e.filter(e=>!e.userAdded)}},m={parseOptionsFromSlot(e){let t=[];return e.forEach(e=>{if(!e.textContent&&!e.getAttribute(`value`))return;let n={value:e.getAttribute(`value`)||e.textContent||``,label:e.textContent||e.getAttribute(`value`)||``};e.getAttribute(`data-prefix`)&&(n.prefix=e.getAttribute(`data-prefix`)||void 0),e.getAttribute(`tagskincolor`)&&(n.tagSkinColor=e.getAttribute(`tagskincolor`)),e.getAttribute(`description`)&&(n.description=e.getAttribute(`description`)||void 0),n.fulltext=o.r(n),t.push(n)}),t}},h={syncOptionsWithValues(e,t){let n=[...t];return e.forEach(e=>{e.value&&!e.label&&(e.label=e.value),e.selected&&!n.includes(e.value)&&n.push(e.value),e.fulltext=o.r(e),e.selected=e.selected||n.includes(e.value)}),{options:e,newValues:n}},mergeWithUserAdded(e,t){return[...t.filter(e=>e?.userAdded&&e.selected).filter(t=>!(Array.isArray(e)?e:[]).some(e=>e.value===t.value)),...e]}},g={name:`pkt-combobox`,react:`PktCombobox`,"css-class":`pkt-combobox`,isElement:!0,isPureReact:!0,props:{name:{type:`string`,name:`Navn`,description:`Navn som brukes i skjema ved innsending`,category:`tech`},id:{type:`string`,name:`ID`,description:`Unik ID for feltet`,category:`tech`},label:{type:`string`,name:`Etikett/label`,description:`Tekst som vises over feltet`,category:`contents`},placeholder:{name:`Hint`,description:`Spesifiserer en kort hint som beskriver forventet verdi av feltet.`,type:`string`,category:`contents`,required:!1},multiple:{type:`boolean`,name:`Flervalg`,default:!1,description:`Mulighet for å velge flere valg`,category:`functionality`},tagPlacement:{attribute:`tag-placement`,type:[`inside`,`outside`],name:`Plassering av tags i flervalg`,description:`Plassering av valgte verdier i feltet ved flervalg`,category:`functionality`,showIf:{multiple:!0}},maxlength:{type:`number`,name:`Maks antall i flervalg`,description:`Maks antall valg dersom flervalg er aktivert`,category:`functionality`,showIf:{multiple:!0}},typeahead:{type:`boolean`,name:`Typeahead`,default:!1,description:`Mulighet for automatisk utfylling av feltet fra listen over valg`,category:`functionality`},includeSearch:{attribute:`include-search`,type:`boolean`,name:`Inkluder søk`,description:`Mulighet for å søke etter valg inni dropdown`,category:`functionality`},allowUserInput:{attribute:`allow-user-input`,type:`boolean`,name:`Brukervalgte verdier`,description:`Mulighet for å skrive inn egne verdier`,category:`functionality`},searchPlaceholder:{attribute:`search-placeholder`,type:`string`,name:`Søke-plassholder`,description:`Plassholdertekst for søkefeltet i dropdown`,category:`contents`,showIf:{includeSearch:!0}},displayValueAs:{attribute:`display-value-as`,type:[`label`,`value`,`prefixAndValue`],name:`Visning av valgt verdi`,description:`Hvordan valgt verdi vises i feltet`,default:`label`,category:`ui`},inputSize:{name:`Størrelse`,description:`Visuell størrelse via input-wrapper. small: kompakt wrapper og felt (42px). xsmall: samme wrapper som small, felt 36px.`,attribute:`input-size`,type:[`small`,`medium`,`xsmall`],default:`medium`,category:`ui`},value:{name:`Verdi`,type:`string`,description:`Valgt verdi. Streng ved enkelt valg, array av strenger ved flervalg.`,category:`tech`},helptext:{type:`string`,name:`Hjelpetekst`,description:`Hjelpetekst som vises over feltet`,category:`contents`},helptextDropdown:{type:`string`,name:`Utvidet hjelpetekst`,description:`Hjelpetekst som vises i en lukket boks man kan åpne`,category:`contents`},helptextDropdownButton:{type:`string`,name:`Knappetekst for hjelpetekst`,description:`Tekst som vises på knappen for å åpne/lukke utvidet hjelpetekst`,category:`contents`,default:`Les mer`},disabled:{type:`boolean`,name:`Deaktivert`,description:`Feltet er deaktivert`,category:`tech`},hasError:{type:`boolean`,name:`Feil`,description:`Feltet har en feil`,category:`ui`},errorMessage:{type:`string`,name:`Feilmelding`,description:`Tekst som vises under feltet ved feil`,category:`contents`},required:{type:`boolean`,name:`Påkrevd`,description:`Feltet må fylles ut`,category:`tech`},requiredTag:{type:`boolean`,name:`Påkrevd-merking`,description:`Viser en merking som indikerer at feltet er påkrevd`,category:`ui`},requiredText:{type:`string`,name:`Påkrevd-tekst`,description:`Tekst som vises i påkrevd-merkingen`,category:`contents`},optionalTag:{type:`boolean`,name:`Valgfritt-merking`,description:`Viser en merking som indikerer at feltet er valgfritt`,category:`ui`},optionalText:{type:`string`,name:`Valgfritt-tekst`,description:`Tekst som vises i valgfritt-merkingen`,category:`contents`},tagText:{type:`string`,name:`Tag-tekst`,description:`Tekst som vises i en tag ved siden av label`,category:`ui`},fullwidth:{type:`boolean`,name:`Full bredde`,description:`Skal feltet ta opp hele bredden?`,category:`ui`},defaultOptions:{attribute:`default-options`,name:`Initielle valg (default options)`,description:`Liste over valg som kan velges, om options sendes inn som array med objekter (denne vil ikke modifiseres ved endring innad i komponenten)`,type:`array`,default:[],previewDefault:[{value:`bfr`,label:`Frogner`},{value:`bgo`,label:`Gamle Oslo`},{value:`bgr`,label:`Grorud`},{value:`bxx`,label:`Andre bydeler`}],items:{type:`object`,properties:{value:{type:`string`,description:`Verdi som sendes ved valg`},label:{type:`string`,description:`Tekst som vises for valget`},prefix:{type:`string`,description:`Tekst som vises før valget`},description:{type:`string`,description:`Beskrivelse av valget`},disabled:{type:`boolean`,description:`Valget er deaktivert`},selected:{type:`boolean`,description:`Valget er valgt`},tagSkinColor:{type:[`blue`,`blue-dark`,`blue-light`,`green`,`red`,`yellow`,`beige`,`gray`,`grey`],description:`Farge på tag`}},required:[`value`]},category:`contents`},options:{name:`Valg`,type:`array`,description:`Liste over valg som kan velges, om options sendes inn som array med objekter`,default:[],items:{type:`object`,properties:{value:{type:`string`,description:`Verdi som sendes ved valg`},label:{type:`string`,description:`Tekst som vises for valget`},prefix:{type:`string`,description:`Tekst som vises før valget`},description:{type:`string`,description:`Beskrivelse av valget`},disabled:{type:`boolean`,description:`Valget er deaktivert`},selected:{type:`boolean`,description:`Valget er valgt`},tagSkinColor:{type:[`blue`,`blue-dark`,`blue-light`,`green`,`red`,`yellow`,`beige`,`gray`,`grey`],description:`Farge på tag`}},required:[`value`]},category:`contents`},inline:{name:`Inline`,type:`boolean`,required:!1,default:!1,description:`Angir om feltet skal flyte med teksten`,category:`ui`},useWrapper:{name:`Bruk wrapper`,type:`boolean`,required:!1,displayAsFalse:!0,default:!0,description:`Indikerer om skjemaelementet skal bruke en wrapper`,category:`ui`},hasFieldset:{name:`Bruk fieldset`,type:`boolean`,required:!1,default:null,description:`Bruk fieldset og legend i stedet for label. Utledes automatisk når feltet ikke har en input.`,category:`ui`},counter:{name:`Teller`,type:`boolean`,required:!1,default:null,description:`Viser teller under feltet. Slås på av seg selv når det finnes en grense å telle mot; sett til false for å skru den av.`,category:`ui`}},events:{change:{type:`Event`,description:`Returnerer valgt verdi som streng. Ved flervalg returneres kommaseparerte verdier.`},"value-change":{type:`CustomEvent`,description:`Returnerer valgt verdi. Ved enkeltvalg en streng, ved flervalg en <code>string[]</code>.`},search:{type:`CustomEvent`,description:`Returnerer søketeksten som streng i <code>event.detail</code> når brukeren skriver i søkefeltet`},toggleHelpText:{type:`CustomEvent`,description:`Returnerer <code>event.detail { isOpen: true }</code> eller <code>event.detail { isOpen: false }</code> når hjelpeteksten åpnes eller lukkes`}}},_=class extends s.t{constructor(){super(),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=g.props.displayValueAs.default,this.tagPlacement=null,this.isOpen=!1,this._options=[],this._value=[],this._isOptionsOpen=!1,this._userInfoMessage=``,this._addValueText=null,this._maxIsReached=!1,this._search=``,this._inputFocus=!1,this._internalValueSync=!1,this._optionsFromSlot=!1,this._lastSlotGeneration=0,this._suppressNextOpen=!1,this.inputRef=i.t(),this.triggerRef=i.t(),this.listboxRef=i.t(),this.optionsController=new c.t(this)}get _hasTextInput(){return this.typeahead||this.allowUserInput}get _selectionDescription(){if(!(!this.multiple||this._value.length===0))return`${this._value.length} valgt`}focusTrigger(){this._hasTextInput?this.inputRef.value?.focus():this.triggerRef.value?.focus()}parseValue(){return Array.isArray(this.value)?this.multiple?this.value:this.value.length>0?[this.value[0]]:[]:this.value&&this.multiple?this.value.split(`,`):this.value?[this.value]:[]}updateMaxReached(){this._maxIsReached=o.c(this._value.length,this.maxlength)}syncValueAndDispatch(e){let t=this._value,n=this.multiple?t.join(`,`):t[0]||``;if(n!==(Array.isArray(this.value)?this.value.join(`,`):String(this.value||``))&&(this._internalValueSync=!0,this.value=n),e?.join(`,`)!==t.join(`,`)){let e=this.multiple?[...t]:t[0]||``;this.onChange(e)}else t.length===0&&e&&e.length>0&&this.clearInputValue()}onChange(e){this.touched=!0,super.onChange(e)}valueChanged(){}};e.n([e.u({type:String,reflect:!0})],_.prototype,`value`,void 0),e.n([e.u({type:Array})],_.prototype,`options`,void 0),e.n([e.u({type:Array,attribute:`default-options`})],_.prototype,`defaultOptions`,void 0),e.n([e.u({type:Boolean,attribute:`allow-user-input`})],_.prototype,`allowUserInput`,void 0),e.n([e.u({type:Boolean})],_.prototype,`typeahead`,void 0),e.n([e.u({type:Boolean,attribute:`include-search`})],_.prototype,`includeSearch`,void 0),e.n([e.u({type:String,attribute:`search-placeholder`})],_.prototype,`searchPlaceholder`,void 0),e.n([e.u({type:Boolean})],_.prototype,`multiple`,void 0),e.n([e.u({type:Number})],_.prototype,`maxlength`,void 0),e.n([e.u({type:String,attribute:`display-value-as`})],_.prototype,`displayValueAs`,void 0),e.n([e.u({type:String,attribute:`tag-placement`})],_.prototype,`tagPlacement`,void 0),e.n([e.u({type:Boolean,attribute:`open`})],_.prototype,`isOpen`,void 0),e.n([e.l()],_.prototype,`_options`,void 0),e.n([e.l()],_.prototype,`_value`,void 0),e.n([e.l()],_.prototype,`_isOptionsOpen`,void 0),e.n([e.l()],_.prototype,`_userInfoMessage`,void 0),e.n([e.l()],_.prototype,`_addValueText`,void 0),e.n([e.l()],_.prototype,`_maxIsReached`,void 0),e.n([e.l()],_.prototype,`_search`,void 0),e.n([e.l()],_.prototype,`_inputFocus`,void 0);var v=class extends _{toggleValue(e){if(this.disabled)return;this.touched=!0,this._userInfoMessage=``,this._addValueText=null;let t=o.i(this.options,e)?.value||null,n=this._value.includes(e||t||``),r=!!t,i=this._options.find(t=>t.value===e)?.disabled||!1,a=!e?.trim(),s=!this.multiple,c=this.multiple,l=o.c(this._value.length,this.maxlength),u=!1,d=!0,f=``,p=``;i||(!r&&this.allowUserInput&&!a?(this.addNewUserValue(e),f=`valueAdded`,u=c):!r&&!this.allowUserInput?(s&&this._value[0]&&this.removeValue(this._value[0]),d=!1,u=!0,f=`noResults`):n?(this.removeValue(t),u=!0,s&&this._hasTextInput&&this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(this.inputRef.value.value=``)):a&&s?(this.removeAllSelected(),u=!0):s?(this._value[0]&&this.removeSelected(this._value[0]),this.setSelected(t),u=!1):c&&!l?(this.setSelected(t),u=!0):c&&l?(f=`maxSelected`,d=!1,p=e):(s&&this.removeAllSelected(),f=`noValidValue`,d=!1,u=!0,p=e),this._isOptionsOpen=u,u||(s&&this._hasTextInput&&(this._suppressNextOpen=!0),window.setTimeout(()=>{this.focusTrigger()},0)),this._userInfoMessage=f,this._search=p||``,this.resetComboboxInput(d),c&&this.updateMaxReached())}setSelected(e){if(!this._value.includes(e)){if(this.multiple&&o.c(this._value.length,this.maxlength)){this._userInfoMessage=`maxSelected`;return}!this.multiple&&this.removeAllSelected(),this._value=e?[...this._value,e]:this._value,p.markOptionSelected(this._options,e),this.resetComboboxInput(!0)}}removeSelected(e){if(!e)return;this._value=this._value.filter(t=>t!==e);let t=o.i(this.options,e);t&&(p.markOptionDeselected(this.options,e),t.userAdded?(this._options=[...this._options.filter(t=>t.value!==e)],this.options=[...this.options.filter(t=>t.value!==e)]):this._options.some(t=>t.value===e)||(this._options=[...this._options,t]))}addAllOptions(){if(this.multiple){if(this.maxlength&&this._options.length>this.maxlength){this._userInfoMessage=`tooManySelected`;return}this._value=this._options.map(e=>e.value),p.markAllSelected(this._options),this.requestUpdate()}}removeAllSelected(){this._value=[],p.markAllDeselected(this._options),this._options=p.removeUserAddedOptions(this._options),this.requestUpdate()}addValue(){let e=this.inputRef.value?.value.trim()||``;if(this._search=e,e&&this._value.includes(e)){this.resetComboboxInput(!0),this._userInfoMessage=`alreadySelected`;return}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];else if(!o.i(this.options,e)){if(o.c(this._value.length,this.maxlength))return;this._value=[...this._value,e]}let t={value:e,label:e,userAdded:!0,selected:!0};this.options=[t,...this.options],this._options=[t,...this._options],this.resetComboboxInput(!0),this.multiple||(this._isOptionsOpen=!1,this._hasTextInput&&(this._suppressNextOpen=!0),window.setTimeout(()=>{this.focusTrigger()},0)),this.requestUpdate()}resetComboboxInput(e=!0){this._addValueText=null,this.inputRef.value&&this.inputRef.value.type!==`hidden`&&e&&(this._search=``,this.multiple?this.inputRef.value.value=``:(this.inputRef.value.value=this._value[0]?f(this._value[0],this.options,this.displayValueAs):``,this._userInfoMessage=``)),this._options=[...this.options]}removeLastValue(e){if(this._value.length===0)return;e.preventDefault();let t=this._value[this._value.length-1];t&&this.removeSelected(t),this.updateMaxReached()}},y=class extends v{handleInput(e){if(e.stopPropagation(),e.stopImmediatePropagation(),this.disabled)return;this.touched=!0;let t=e.target;if(this._search=t.value,this.checkForMatches(),this.typeahead){if(this._search){let{filtered:n,suggestion:r}=o.o(this.options,this._search);this._options=n,e.inputType!==`deleteContentBackward`&&r?.label&&this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(t.value=r.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._suppressNextOpen){this._suppressNextOpen=!1,this._inputFocus=!0,this.requestUpdate();return}!this.multiple&&this._value[0]&&this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(this.inputRef.value.value=f(this._value[0],this.options,this.displayValueAs)),this._inputFocus=!0,this._search=``,this._options=[...this.options],this._isOptionsOpen=!0,this.onFocus(),this.requestUpdate()}}handleFocusOut(e){if(this.disabled||!this._isOptionsOpen)return;let t=e.relatedTarget;t?.closest(`pkt-combobox`)?.id!==this.id&&e.target?.getAttribute(`data-focusfix`)!==this.id&&t!==this.inputRef.value&&t!==this.triggerRef.value&&this.closeAndProcessInput()}closeAndProcessInput(){if(this._inputFocus=!1,this._addValueText=null,this._userInfoMessage=``,this._search=``,this.inputRef.value&&this.inputRef.value.type!==`hidden`){let e=this.inputRef.value.value;if(!this.multiple){if(!e)this._value[0]&&this.removeSelected(this._value[0]);else{let t=o.i(this.options,e);t&&t.value!==this._value[0]?(this._value[0]&&this.removeSelected(this._value[0]),this.setSelected(t.value)):!t&&this.allowUserInput&&(this._value[0]&&this.removeSelected(this._value[0]),this.addNewUserValue(e))}}else if(e!==``){let{action:t,value:n}=u(e,this._value,this.options,this.allowUserInput,this.multiple);switch(t){case`addUserValue`:this.addNewUserValue(n);break;case`selectOption`:this.setSelected(n);break;case`removeValue`:this.removeValue(n)}}!this.multiple&&this._value[0]?this.inputRef.value.value=f(this._value[0],this.options,this.displayValueAs):this.inputRef.value.value=``}this._isOptionsOpen=!1,this.onBlur()}handleBlur(){this._inputFocus=!1,this.onBlur()}handleInputClick(e){if(this.disabled){e.preventDefault(),e.stopImmediatePropagation();return}this._hasTextInput?(this.inputRef.value?.focus(),this.requestUpdate()):(e.stopImmediatePropagation(),e.preventDefault(),this._isOptionsOpen=!this._isOptionsOpen,this._isOptionsOpen&&this.listboxRef.value?.focusFirstOrSelectedOption())}handlePlaceholderClick(e){this.disabled||(e.stopPropagation(),this._hasTextInput&&this.inputRef.value?(this.inputRef.value.focus(),this._inputFocus=!0,this.requestUpdate()):(this._isOptionsOpen=!this._isOptionsOpen,this.requestUpdate()))}handleSelectOnlyKeydown(e){if(!this.disabled)switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),this._isOptionsOpen?this._isOptionsOpen=!1:(this._isOptionsOpen=!0,this.listboxRef.value?.focusFirstOrSelectedOption());break;case`Escape`:this._isOptionsOpen&&=(e.preventDefault(),!1);break;case`Home`:case`End`:e.preventDefault(),this._isOptionsOpen||=!0,this.listboxRef.value?.focusFirstOrSelectedOption();break;case`ArrowLeft`:this.multiple&&this._value.length>0&&(e.preventDefault(),this.focusTag(this._value.length-1));break;case`Backspace`:case`Delete`:this.multiple&&this._value.length>0&&(e.preventDefault(),this.removeSelected(this._value[this._value.length-1]))}}handleOptionToggled(e){this.toggleValue(e.detail)}handleSearch(e){e.stopPropagation(),this._search=e.detail.toLowerCase(),this.checkForMatches()}handleInputKeydown(e){if(e.key===`Backspace`){let t=!this.inputRef.value?.value;!this._search&&t&&this.multiple&&this._value.length>0&&this.removeLastValue(e);return}if(e.key===`ArrowLeft`&&this.multiple&&this._value.length>0){let t=this.inputRef.value;if(t&&t.selectionStart===0&&!t.value){e.preventDefault(),this.focusTag(this._value.length-1);return}}let t=l(e.key,e.shiftKey,this.multiple);if(t&&!(e.key===`Tab`&&!this._isOptionsOpen)){if(t===`focusListbox`&&e.key===`Tab`&&!this.listboxRef.value?.querySelector(`[role="option"]:not([data-disabled]), [data-type="new-option"]`)){this.closeAndProcessInput();return}switch(e.preventDefault(),t){case`addValue`:this.addValue();break;case`focusListbox`:this.listboxRef.value?.focusFirstOrSelectedOption();break;case`closeOptions`:this._isOptionsOpen=!1}}}handleTagRemove(e){this.removeSelected(e),this._hasTextInput&&this.inputRef.value&&(this._inputFocus=!0,this.inputRef.value.focus(),this.requestUpdate())}getInsideTags(){return Array.from(this.querySelectorAll(`.pkt-combobox__input .pkt-combobox__tag-list pkt-tag`))}focusTag(e){let t=this.getInsideTags();t.forEach((t,n)=>{t.buttonTabindex=n===e?0:-1}),(t[e]?.querySelector(`button`))?.focus()}resetTagTabindices(){this.getInsideTags().forEach(e=>{e.buttonTabindex=-1})}handleTagKeydown(e,t){e.stopPropagation();let n=()=>{this.resetTagTabindices(),this._hasTextInput&&this.inputRef.value?this.inputRef.value.focus():this.triggerRef.value?.focus()};switch(e.key){case`ArrowLeft`:e.preventDefault(),t>0&&this.focusTag(t-1);break;case`ArrowRight`:e.preventDefault(),t<this._value.length-1?this.focusTag(t+1):n();break;case`Backspace`:case`Delete`:e.preventDefault();{let e=this._value[t],r=t>=this._value.length-1?t-1:t;this.removeSelected(e),r>=0?(this.requestUpdate(),this.updateComplete.then(()=>this.focusTag(r))):n()}break;case`Tab`:this.resetTagTabindices();break;case`Escape`:e.preventDefault(),n()}}checkForMatches(){let e=d(this.inputRef.value?.value||this._search||``,this._value,this.options,this.allowUserInput,this.multiple);if(e.shouldRemoveValue&&this.removeValue(this._value[0]),e.shouldResetInput){this.resetComboboxInput(!1);return}this._addValueText=e.addValueText,this._userInfoMessage=e.userInfoMessage}},b=class extends y{constructor(...e){super(...e),this.handleBodyClick=e=>{this._isOptionsOpen&&!this.contains(e.target)&&this.closeAndProcessInput()}}connectedCallback(){if(super.connectedCallback(),document?.body.addEventListener(`click`,this.handleBodyClick),this._options=[],this.defaultOptions&&this.defaultOptions.length){let e=this.options?.filter(e=>e.userAdded)||[];this.options=[...e,...JSON.parse(JSON.stringify(this.defaultOptions))],this._options=Array.isArray(this.options)?[...this.options]:[]}if(this.optionsController?.nodes&&this.optionsController.nodes.length){let e=m.parseOptionsFromSlot(this.optionsController.nodes);e.length&&(this.options=[...e],this._options=[...e],this._optionsFromSlot=!0,this._lastSlotGeneration=this.optionsController.generation)}}willUpdate(e){if(this._optionsFromSlot&&this.optionsController){let e=this.optionsController.generation;if(e!==this._lastSlotGeneration){this._lastSlotGeneration=e;let t=m.parseOptionsFromSlot(this.optionsController.nodes),n=this._options.filter(e=>e.userAdded);this.options=[...n,...t]}}super.willUpdate(e)}disconnectedCallback(){super.disconnectedCallback(),document?.body.removeEventListener(`click`,this.handleBodyClick)}firstUpdated(e){this.defaultValue!==null&&!this.value&&(this.value=this.defaultValue),super.firstUpdated(e)}updated(e){e.has(`isOpen`)&&(this._isOptionsOpen=this.isOpen);let t=e.has(`value`),n=e.has(`_value`);if(t&&this._internalValueSync)this._internalValueSync=!1,n&&this.syncValueAndDispatch(e.get(`_value`));else if(t){let e=[...this._value],t=this.parseValue();t.join(`,`)!==this._value.join(`,`)&&(this._value=t,this.options.forEach(e=>e.selected=t.includes(e.value)),this._options.forEach(e=>e.selected=t.includes(e.value)),this._options=[...this._options]),this.updateMaxReached(),this.syncValueAndDispatch(e)}else n&&this.syncValueAndDispatch(e.get(`_value`));if(e.has(`defaultOptions`)&&this.defaultOptions.length){let e=(Array.isArray(this.options)?this.options:[]).filter(e=>e.userAdded)||[];this.options=[...e,...JSON.parse(JSON.stringify(this.defaultOptions))],this._options=Array.isArray(this.options)?[...this.options]:[]}if(e.has(`options`)){let t=e.get(`options`)||this._options||[],n=h.mergeWithUserAdded(this.options,t);this._options=n,n.length>this.options.length&&(this.options=n);let r=h.syncOptionsWithValues(this._options,this._value);if(this._options=r.options,r.newValues.length>this._value.length){let e=[...this._value];this._value=r.newValues,this.syncValueAndDispatch(e)}}if(e.has(`_search`)&&this.dispatchEvent(new CustomEvent(`search`,{detail:this._search,bubbles:!1})),!this._isOptionsOpen&&this._hasTextInput&&this.inputRef.value&&this.inputRef.value.type!==`hidden`){let e=!this.multiple&&this._value[0]?f(this._value[0],this.options,this.displayValueAs):``;this.inputRef.value.value!==e&&(this.inputRef.value.value=e)}this.classList.add(`pkt-combobox-component`),this.classList.toggle(`pkt-combobox-component--fullwidth`,!!this.fullwidth),super.updated(e)}formResetCallback(){this.touched=!1;let e=this.defaultValue||(this.multiple,``);this.value=e,this._value=this.parseValue(),this._options=this._options.filter(e=>!e.userAdded).map(e=>({...e,selected:this._value.includes(e.value)})),this.options=this.options.filter(e=>!e.userAdded).map(e=>({...e,selected:this._value.includes(e.value)})),this._search=``,this._isOptionsOpen=!1,this._userInfoMessage=``,this._addValueText=null,this._inputFocus=!1,this.updateMaxReached(),this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(this.inputRef.value.value=``),this.internals.setFormValue(``),this.internals.ariaInvalid=`false`,this.requestUpdate()}attributeChangedCallback(e,t,n){if(e===`options`){this._options=Array.isArray(this.options)?[...this.options]:[];let e=h.syncOptionsWithValues(this._options,this._value);this._options=e.options,e.newValues.length>this._value.length&&(this._value=e.newValues),this._search=``}super.attributeChangedCallback(e,t,n)}render(){return e._`
|
|
1
|
+
const e=require("./element-DRc10X2R.cjs"),t=require("./class-map-BEib48YL.cjs"),n=require("./if-defined-BeVQnl3C.cjs"),r=require("./element-with-slot-DgtT8lCH.cjs");require("./icon-DBFTFd-J.cjs");const i=require("./ref-BkV4Cd8U.cjs");require("./tag-Cojf4jgA.cjs");const a=require("./repeat-uBgVG8Ch.cjs"),o=require("./listbox-D95b5zAd.cjs"),s=require("./input-element-kvI_5er5.cjs"),c=require("./pkt-options-controller-AFYyv3-b.cjs");require("./input-wrapper-wyvCnWPp.cjs");var l=(e,t,n)=>{switch(e){case`,`:return n?`addValue`:null;case`Enter`:return`addValue`;case`Tab`:case`ArrowDown`:return t?null:`focusListbox`;case`Escape`:return`closeOptions`;default:return null}},u=(e,t,n,r,i)=>{if(!e)return{action:`none`,value:null};let a=o.i(n,e);return!t.includes(e)&&!a?r?{action:`addUserValue`,value:e}:i?{action:`none`,value:null}:{action:`removeValue`,value:t[0]}:a&&!t.includes(a.value)?{action:`selectOption`,value:a.value}:{action:`none`,value:null}},d=(e,t,n,r,i)=>e.trim().toLowerCase()?{...o.s(e,t,n,r),shouldRemoveValue:!1,shouldResetInput:!1}:{addValueText:null,userInfoMessage:``,shouldRemoveValue:!i&&!!t[0],shouldResetInput:!0},f=(e,t,n)=>{let r=o.i(t,e);return n===`label`&&r?.label?r.label:e},p={markOptionSelected(e,t){if(t){for(let n of e)if(n.value===t){n.selected=!0;break}}},markOptionDeselected(e,t){if(t){for(let n of e)if(n.value===t){n.selected=!1;break}}},markAllSelected(e){for(let t of e)t.selected=!0},markAllDeselected(e){for(let t of e)t.selected=!1},removeUserAddedOptions(e){return e.filter(e=>!e.userAdded)}},m={parseOptionsFromSlot(e){let t=[];return e.forEach(e=>{if(!e.textContent&&!e.getAttribute(`value`))return;let n={value:e.getAttribute(`value`)||e.textContent||``,label:e.textContent||e.getAttribute(`value`)||``};e.getAttribute(`data-prefix`)&&(n.prefix=e.getAttribute(`data-prefix`)||void 0),e.getAttribute(`tagskincolor`)&&(n.tagSkinColor=e.getAttribute(`tagskincolor`)),e.getAttribute(`description`)&&(n.description=e.getAttribute(`description`)||void 0),n.fulltext=o.r(n),t.push(n)}),t}},h={syncOptionsWithValues(e,t){let n=[...t];return e.forEach(e=>{e.value&&!e.label&&(e.label=e.value),e.selected&&!n.includes(e.value)&&n.push(e.value),e.fulltext=o.r(e),e.selected=e.selected||n.includes(e.value)}),{options:e,newValues:n}},mergeWithUserAdded(e,t){return[...t.filter(e=>e?.userAdded&&e.selected).filter(t=>!(Array.isArray(e)?e:[]).some(e=>e.value===t.value)),...e]}},g={name:`pkt-combobox`,react:`PktCombobox`,"css-class":`pkt-combobox`,isElement:!0,isPureReact:!0,props:{name:{type:`string`,name:`Navn`,description:`Navn som brukes i skjema ved innsending`,category:`tech`},id:{type:`string`,name:`ID`,description:`Unik ID for feltet`,category:`tech`},label:{type:`string`,name:`Etikett/label`,description:`Tekst som vises over feltet`,category:`contents`},placeholder:{name:`Hint`,description:`Spesifiserer en kort hint som beskriver forventet verdi av feltet.`,type:`string`,category:`contents`,required:!1},multiple:{type:`boolean`,name:`Flervalg`,default:!1,description:`Mulighet for å velge flere valg`,category:`functionality`},tagPlacement:{attribute:`tag-placement`,type:[`inside`,`outside`],name:`Plassering av tags i flervalg`,description:`Plassering av valgte verdier i feltet ved flervalg`,category:`functionality`,showIf:{multiple:!0}},maxlength:{type:`number`,name:`Maks antall i flervalg`,description:`Maks antall valg dersom flervalg er aktivert`,category:`functionality`,showIf:{multiple:!0}},typeahead:{type:`boolean`,name:`Typeahead`,default:!1,description:`Mulighet for automatisk utfylling av feltet fra listen over valg`,category:`functionality`},includeSearch:{attribute:`include-search`,type:`boolean`,name:`Inkluder søk`,description:`Mulighet for å søke etter valg inni dropdown`,category:`functionality`},allowUserInput:{attribute:`allow-user-input`,type:`boolean`,name:`Brukervalgte verdier`,description:`Mulighet for å skrive inn egne verdier`,category:`functionality`},searchPlaceholder:{attribute:`search-placeholder`,type:`string`,name:`Søke-plassholder`,description:`Plassholdertekst for søkefeltet i dropdown`,category:`contents`,showIf:{includeSearch:!0}},displayValueAs:{attribute:`display-value-as`,type:[`label`,`value`,`prefixAndValue`],name:`Visning av valgt verdi`,description:`Hvordan valgt verdi vises i feltet`,default:`label`,category:`ui`},inputSize:{name:`Størrelse`,description:`Visuell størrelse via input-wrapper. small: kompakt wrapper og felt (42px). xsmall: samme wrapper som small, felt 36px.`,attribute:`input-size`,type:[`small`,`medium`,`xsmall`],default:`medium`,category:`ui`},value:{name:`Verdi`,type:`string`,description:`Valgt verdi. Streng ved enkelt valg, array av strenger ved flervalg.`,category:`tech`},helptext:{type:`string`,name:`Hjelpetekst`,description:`Hjelpetekst som vises over feltet`,category:`contents`},helptextDropdown:{type:`string`,name:`Utvidet hjelpetekst`,description:`Hjelpetekst som vises i en lukket boks man kan åpne`,category:`contents`},helptextDropdownButton:{type:`string`,name:`Knappetekst for hjelpetekst`,description:`Tekst som vises på knappen for å åpne/lukke utvidet hjelpetekst`,category:`contents`,default:`Les mer`},disabled:{type:`boolean`,name:`Deaktivert`,description:`Feltet er deaktivert`,category:`tech`},hasError:{type:`boolean`,name:`Feil`,description:`Feltet har en feil`,category:`ui`},errorMessage:{type:`string`,name:`Feilmelding`,description:`Tekst som vises under feltet ved feil`,category:`contents`},required:{type:`boolean`,name:`Påkrevd`,description:`Feltet må fylles ut`,category:`tech`},requiredTag:{type:`boolean`,name:`Påkrevd-merking`,description:`Viser en merking som indikerer at feltet er påkrevd`,category:`ui`},requiredText:{type:`string`,name:`Påkrevd-tekst`,description:`Tekst som vises i påkrevd-merkingen`,category:`contents`},optionalTag:{type:`boolean`,name:`Valgfritt-merking`,description:`Viser en merking som indikerer at feltet er valgfritt`,category:`ui`},optionalText:{type:`string`,name:`Valgfritt-tekst`,description:`Tekst som vises i valgfritt-merkingen`,category:`contents`},tagText:{type:`string`,name:`Tag-tekst`,description:`Tekst som vises i en tag ved siden av label`,category:`ui`},fullwidth:{type:`boolean`,name:`Full bredde`,description:`Skal feltet ta opp hele bredden?`,category:`ui`},defaultOptions:{attribute:`default-options`,name:`Initielle valg (default options)`,description:`Liste over valg som kan velges, om options sendes inn som array med objekter (denne vil ikke modifiseres ved endring innad i komponenten)`,type:`array`,default:[],previewDefault:[{value:`bfr`,label:`Frogner`},{value:`bgo`,label:`Gamle Oslo`},{value:`bgr`,label:`Grorud`},{value:`bxx`,label:`Andre bydeler`}],items:{type:`object`,properties:{value:{type:`string`,description:`Verdi som sendes ved valg`},label:{type:`string`,description:`Tekst som vises for valget`},prefix:{type:`string`,description:`Tekst som vises før valget`},description:{type:`string`,description:`Beskrivelse av valget`},disabled:{type:`boolean`,description:`Valget er deaktivert`},selected:{type:`boolean`,description:`Valget er valgt`},tagSkinColor:{type:[`blue`,`blue-dark`,`blue-light`,`green`,`red`,`yellow`,`beige`,`gray`,`grey`],description:`Farge på tag`}},required:[`value`]},category:`contents`},options:{name:`Valg`,type:`array`,description:`Liste over valg som kan velges, om options sendes inn som array med objekter`,default:[],items:{type:`object`,properties:{value:{type:`string`,description:`Verdi som sendes ved valg`},label:{type:`string`,description:`Tekst som vises for valget`},prefix:{type:`string`,description:`Tekst som vises før valget`},description:{type:`string`,description:`Beskrivelse av valget`},disabled:{type:`boolean`,description:`Valget er deaktivert`},selected:{type:`boolean`,description:`Valget er valgt`},tagSkinColor:{type:[`blue`,`blue-dark`,`blue-light`,`green`,`red`,`yellow`,`beige`,`gray`,`grey`],description:`Farge på tag`}},required:[`value`]},category:`contents`},inline:{name:`Inline`,type:`boolean`,required:!1,default:!1,description:`Angir om feltet skal flyte med teksten`,category:`ui`},useWrapper:{name:`Bruk wrapper`,type:`boolean`,required:!1,displayAsFalse:!0,default:!0,description:`Indikerer om skjemaelementet skal bruke en wrapper`,category:`ui`},hasFieldset:{name:`Bruk fieldset`,type:`boolean`,required:!1,default:null,description:`Bruk fieldset og legend i stedet for label. Utledes automatisk når feltet ikke har en input.`,category:`ui`},counter:{name:`Teller`,type:`boolean`,required:!1,default:null,description:`Viser teller under feltet. Slås på av seg selv når det finnes en grense å telle mot; sett til false for å skru den av.`,category:`ui`}},events:{change:{type:`Event`,description:`Returnerer valgt verdi som streng. Ved flervalg returneres kommaseparerte verdier.`},"value-change":{type:`CustomEvent`,description:`Returnerer valgt verdi. Ved enkeltvalg en streng, ved flervalg en <code>string[]</code>.`},search:{type:`CustomEvent`,description:`Returnerer søketeksten som streng i <code>event.detail</code> når brukeren skriver i søkefeltet`},toggleHelpText:{type:`CustomEvent`,description:`Returnerer <code>event.detail { isOpen: true }</code> eller <code>event.detail { isOpen: false }</code> når hjelpeteksten åpnes eller lukkes`}}},_=class extends s.t{constructor(){super(),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=g.props.displayValueAs.default,this.tagPlacement=null,this.isOpen=!1,this._options=[],this._value=[],this._isOptionsOpen=!1,this._userInfoMessage=``,this._addValueText=null,this._maxIsReached=!1,this._search=``,this._inputFocus=!1,this._internalValueSync=!1,this._optionsFromSlot=!1,this._lastSlotGeneration=0,this._suppressNextOpen=!1,this.inputRef=i.t(),this.triggerRef=i.t(),this.listboxRef=i.t(),this.optionsController=new c.t(this)}get _hasTextInput(){return this.typeahead||this.allowUserInput}get _selectionDescription(){if(!(!this.multiple||this._value.length===0))return`${this._value.length} valgt`}focusTrigger(){this._hasTextInput?this.inputRef.value?.focus():this.triggerRef.value?.focus()}parseValue(){return Array.isArray(this.value)?this.multiple?this.value:this.value.length>0?[this.value[0]]:[]:this.value&&this.multiple?this.value.split(`,`):this.value?[this.value]:[]}updateMaxReached(){this._maxIsReached=o.c(this._value.length,this.maxlength)}syncValueAndDispatch(e){let t=this._value,n=this.multiple?t.join(`,`):t[0]||``;if(n!==(Array.isArray(this.value)?this.value.join(`,`):String(this.value||``))&&(this._internalValueSync=!0,this.value=n),e?.join(`,`)!==t.join(`,`)){let e=this.multiple?[...t]:t[0]||``;this.onChange(e)}else t.length===0&&e&&e.length>0&&this.clearInputValue()}onChange(e){this.touched=!0,super.onChange(e)}valueChanged(){}};e.n([e.u({type:String,reflect:!0})],_.prototype,`value`,void 0),e.n([e.u({type:Array})],_.prototype,`options`,void 0),e.n([e.u({type:Array,attribute:`default-options`})],_.prototype,`defaultOptions`,void 0),e.n([e.u({type:Boolean,attribute:`allow-user-input`})],_.prototype,`allowUserInput`,void 0),e.n([e.u({type:Boolean})],_.prototype,`typeahead`,void 0),e.n([e.u({type:Boolean,attribute:`include-search`})],_.prototype,`includeSearch`,void 0),e.n([e.u({type:String,attribute:`search-placeholder`})],_.prototype,`searchPlaceholder`,void 0),e.n([e.u({type:Boolean})],_.prototype,`multiple`,void 0),e.n([e.u({type:Number})],_.prototype,`maxlength`,void 0),e.n([e.u({type:String,attribute:`display-value-as`})],_.prototype,`displayValueAs`,void 0),e.n([e.u({type:String,attribute:`tag-placement`})],_.prototype,`tagPlacement`,void 0),e.n([e.u({type:Boolean,attribute:`open`})],_.prototype,`isOpen`,void 0),e.n([e.l()],_.prototype,`_options`,void 0),e.n([e.l()],_.prototype,`_value`,void 0),e.n([e.l()],_.prototype,`_isOptionsOpen`,void 0),e.n([e.l()],_.prototype,`_userInfoMessage`,void 0),e.n([e.l()],_.prototype,`_addValueText`,void 0),e.n([e.l()],_.prototype,`_maxIsReached`,void 0),e.n([e.l()],_.prototype,`_search`,void 0),e.n([e.l()],_.prototype,`_inputFocus`,void 0);var v=class extends _{toggleValue(e){if(this.disabled)return;this.touched=!0,this._userInfoMessage=``,this._addValueText=null;let t=o.i(this.options,e)?.value||null,n=this._value.includes(e||t||``),r=!!t,i=this._options.find(t=>t.value===e)?.disabled||!1,a=!e?.trim(),s=!this.multiple,c=this.multiple,l=o.c(this._value.length,this.maxlength),u=!1,d=!0,f=``,p=``;i||(!r&&this.allowUserInput&&!a?(this.addNewUserValue(e),f=`valueAdded`,u=c):!r&&!this.allowUserInput?(s&&this._value[0]&&this.removeValue(this._value[0]),d=!1,u=!0,f=`noResults`):n?(this.removeValue(t),u=!0,s&&this._hasTextInput&&this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(this.inputRef.value.value=``)):a&&s?(this.removeAllSelected(),u=!0):s?(this._value[0]&&this.removeSelected(this._value[0]),this.setSelected(t),u=!1):c&&!l?(this.setSelected(t),u=!0):c&&l?(f=`maxSelected`,d=!1,p=e):(s&&this.removeAllSelected(),f=`noValidValue`,d=!1,u=!0,p=e),this._isOptionsOpen=u,u||(s&&this._hasTextInput&&(this._suppressNextOpen=!0),window.setTimeout(()=>{this.focusTrigger()},0)),this._userInfoMessage=f,this._search=p||``,this.resetComboboxInput(d),c&&this.updateMaxReached())}setSelected(e){if(!this._value.includes(e)){if(this.multiple&&o.c(this._value.length,this.maxlength)){this._userInfoMessage=`maxSelected`;return}!this.multiple&&this.removeAllSelected(),this._value=e?[...this._value,e]:this._value,p.markOptionSelected(this._options,e),this.resetComboboxInput(!0)}}removeSelected(e){if(!e)return;this._value=this._value.filter(t=>t!==e);let t=o.i(this.options,e);t&&(p.markOptionDeselected(this.options,e),t.userAdded?(this._options=[...this._options.filter(t=>t.value!==e)],this.options=[...this.options.filter(t=>t.value!==e)]):this._options.some(t=>t.value===e)||(this._options=[...this._options,t]))}addAllOptions(){if(this.multiple){if(this.maxlength&&this._options.length>this.maxlength){this._userInfoMessage=`tooManySelected`;return}this._value=this._options.map(e=>e.value),p.markAllSelected(this._options),this.requestUpdate()}}removeAllSelected(){this._value=[],p.markAllDeselected(this._options),this._options=p.removeUserAddedOptions(this._options),this.requestUpdate()}addValue(){let e=this.inputRef.value?.value.trim()||``;if(this._search=e,e&&this._value.includes(e)){this.resetComboboxInput(!0),this._userInfoMessage=`alreadySelected`;return}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];else if(!o.i(this.options,e)){if(o.c(this._value.length,this.maxlength))return;this._value=[...this._value,e]}let t={value:e,label:e,userAdded:!0,selected:!0};this.options=[t,...this.options],this._options=[t,...this._options],this.resetComboboxInput(!0),this.multiple||(this._isOptionsOpen=!1,this._hasTextInput&&(this._suppressNextOpen=!0),window.setTimeout(()=>{this.focusTrigger()},0)),this.requestUpdate()}resetComboboxInput(e=!0){this._addValueText=null,this.inputRef.value&&this.inputRef.value.type!==`hidden`&&e&&(this._search=``,this.multiple?this.inputRef.value.value=``:(this.inputRef.value.value=this._value[0]?f(this._value[0],this.options,this.displayValueAs):``,this._userInfoMessage=``)),this._options=[...this.options]}removeLastValue(e){if(this._value.length===0)return;e.preventDefault();let t=this._value[this._value.length-1];t&&this.removeSelected(t),this.updateMaxReached()}},y=class extends v{handleInput(e){if(e.stopPropagation(),e.stopImmediatePropagation(),this.disabled)return;this.touched=!0;let t=e.target;if(this._search=t.value,this.checkForMatches(),this.typeahead){if(this._search){let{filtered:n,suggestion:r}=o.o(this.options,this._search);this._options=n,e.inputType!==`deleteContentBackward`&&r?.label&&this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(t.value=r.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._suppressNextOpen){this._suppressNextOpen=!1,this._inputFocus=!0,this.requestUpdate();return}!this.multiple&&this._value[0]&&this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(this.inputRef.value.value=f(this._value[0],this.options,this.displayValueAs)),this._inputFocus=!0,this._search=``,this._options=[...this.options],this._isOptionsOpen=!0,this.onFocus(),this.requestUpdate()}}handleFocusOut(e){if(this.disabled||!this._isOptionsOpen)return;let t=e.relatedTarget;t?.closest(`pkt-combobox`)?.id!==this.id&&e.target?.getAttribute(`data-focusfix`)!==this.id&&t!==this.inputRef.value&&t!==this.triggerRef.value&&this.closeAndProcessInput()}closeAndProcessInput(){if(this._inputFocus=!1,this._addValueText=null,this._userInfoMessage=``,this._search=``,this.inputRef.value&&this.inputRef.value.type!==`hidden`){let e=this.inputRef.value.value;if(!this.multiple){if(!e)this._value[0]&&this.removeSelected(this._value[0]);else{let t=o.i(this.options,e);t&&t.value!==this._value[0]?(this._value[0]&&this.removeSelected(this._value[0]),this.setSelected(t.value)):!t&&this.allowUserInput&&(this._value[0]&&this.removeSelected(this._value[0]),this.addNewUserValue(e))}}else if(e!==``){let{action:t,value:n}=u(e,this._value,this.options,this.allowUserInput,this.multiple);switch(t){case`addUserValue`:this.addNewUserValue(n);break;case`selectOption`:this.setSelected(n);break;case`removeValue`:this.removeValue(n)}}!this.multiple&&this._value[0]?this.inputRef.value.value=f(this._value[0],this.options,this.displayValueAs):this.inputRef.value.value=``}this._isOptionsOpen=!1,this.onBlur()}handleBlur(){this._inputFocus=!1,this.onBlur()}handleInputClick(e){if(this.disabled){e.preventDefault(),e.stopImmediatePropagation();return}this._hasTextInput?(this.inputRef.value?.focus(),this.requestUpdate()):(e.stopImmediatePropagation(),e.preventDefault(),this._isOptionsOpen=!this._isOptionsOpen,this._isOptionsOpen&&this.listboxRef.value?.focusFirstOrSelectedOption())}handlePlaceholderClick(e){this.disabled||(e.stopPropagation(),this._hasTextInput&&this.inputRef.value?(this.inputRef.value.focus(),this._inputFocus=!0,this.requestUpdate()):(this._isOptionsOpen=!this._isOptionsOpen,this.requestUpdate()))}handleSelectOnlyKeydown(e){if(!this.disabled)switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),this._isOptionsOpen?this._isOptionsOpen=!1:(this._isOptionsOpen=!0,this.listboxRef.value?.focusFirstOrSelectedOption());break;case`Escape`:this._isOptionsOpen&&=(e.preventDefault(),!1);break;case`Home`:case`End`:e.preventDefault(),this._isOptionsOpen||=!0,this.listboxRef.value?.focusFirstOrSelectedOption();break;case`ArrowLeft`:this.multiple&&this._value.length>0&&(e.preventDefault(),this.focusTag(this._value.length-1));break;case`Backspace`:case`Delete`:this.multiple&&this._value.length>0&&(e.preventDefault(),this.removeSelected(this._value[this._value.length-1]))}}handleOptionToggled(e){this.toggleValue(e.detail)}handleSearch(e){e.stopPropagation(),this._search=e.detail.toLowerCase(),this.checkForMatches()}handleInputKeydown(e){if(e.key===`Backspace`){let t=!this.inputRef.value?.value;!this._search&&t&&this.multiple&&this._value.length>0&&this.removeLastValue(e);return}if(e.key===`ArrowLeft`&&this.multiple&&this._value.length>0){let t=this.inputRef.value;if(t&&t.selectionStart===0&&!t.value){e.preventDefault(),this.focusTag(this._value.length-1);return}}let t=l(e.key,e.shiftKey,this.multiple);if(t&&!(e.key===`Tab`&&!this._isOptionsOpen)){if(t===`focusListbox`&&e.key===`Tab`&&!this.listboxRef.value?.querySelector(`[role="option"]:not([data-disabled]), [data-type="new-option"]`)){this.closeAndProcessInput();return}switch(e.preventDefault(),t){case`addValue`:this.addValue();break;case`focusListbox`:this.listboxRef.value?.focusFirstOrSelectedOption();break;case`closeOptions`:this._isOptionsOpen=!1}}}handleTagRemove(e){this.removeSelected(e),this._hasTextInput&&this.inputRef.value&&(this._inputFocus=!0,this.inputRef.value.focus(),this.requestUpdate())}getInsideTags(){return Array.from(this.querySelectorAll(`.pkt-combobox__input .pkt-combobox__tag-list pkt-tag`))}focusTag(e){let t=this.getInsideTags();t.forEach((t,n)=>{t.buttonTabindex=n===e?0:-1}),(t[e]?.querySelector(`button`))?.focus()}resetTagTabindices(){this.getInsideTags().forEach(e=>{e.buttonTabindex=-1})}handleTagKeydown(e,t){e.stopPropagation();let n=()=>{this.resetTagTabindices(),this._hasTextInput&&this.inputRef.value?this.inputRef.value.focus():this.triggerRef.value?.focus()};switch(e.key){case`ArrowLeft`:e.preventDefault(),t>0&&this.focusTag(t-1);break;case`ArrowRight`:e.preventDefault(),t<this._value.length-1?this.focusTag(t+1):n();break;case`Backspace`:case`Delete`:e.preventDefault();{let e=this._value[t],r=t>=this._value.length-1?t-1:t;this.removeSelected(e),r>=0?(this.requestUpdate(),this.updateComplete.then(()=>this.focusTag(r))):n()}break;case`Tab`:this.resetTagTabindices();break;case`Escape`:e.preventDefault(),n()}}checkForMatches(){let e=d(this.inputRef.value?.value||this._search||``,this._value,this.options,this.allowUserInput,this.multiple);if(e.shouldRemoveValue&&this.removeValue(this._value[0]),e.shouldResetInput){this.resetComboboxInput(!1);return}this._addValueText=e.addValueText,this._userInfoMessage=e.userInfoMessage}},b=class extends y{constructor(...e){super(...e),this.handleBodyClick=e=>{this._isOptionsOpen&&!this.contains(e.target)&&this.closeAndProcessInput()}}connectedCallback(){if(super.connectedCallback(),document?.body.addEventListener(`click`,this.handleBodyClick),this._options=[],this.defaultOptions&&this.defaultOptions.length){let e=this.options?.filter(e=>e.userAdded)||[];this.options=[...e,...JSON.parse(JSON.stringify(this.defaultOptions))],this._options=Array.isArray(this.options)?[...this.options]:[]}if(this.optionsController?.nodes&&this.optionsController.nodes.length){let e=m.parseOptionsFromSlot(this.optionsController.nodes);e.length&&(this.options=[...e],this._options=[...e],this._optionsFromSlot=!0,this._lastSlotGeneration=this.optionsController.generation)}}willUpdate(e){if(this._optionsFromSlot&&this.optionsController){let e=this.optionsController.generation;if(e!==this._lastSlotGeneration){this._lastSlotGeneration=e;let t=m.parseOptionsFromSlot(this.optionsController.nodes),n=this._options.filter(e=>e.userAdded);this.options=[...n,...t]}}super.willUpdate(e)}disconnectedCallback(){super.disconnectedCallback(),document?.body.removeEventListener(`click`,this.handleBodyClick)}firstUpdated(e){this.defaultValue!==null&&!this.value&&(this.value=this.defaultValue),super.firstUpdated(e)}updated(e){e.has(`isOpen`)&&(this._isOptionsOpen=this.isOpen);let t=e.has(`value`),n=e.has(`_value`);if(t&&this._internalValueSync)this._internalValueSync=!1,n&&this.syncValueAndDispatch(e.get(`_value`));else if(t){let e=[...this._value],t=this.parseValue();t.join(`,`)!==this._value.join(`,`)&&(this._value=t,this.options.forEach(e=>e.selected=t.includes(e.value)),this._options.forEach(e=>e.selected=t.includes(e.value)),this._options=[...this._options]),this.updateMaxReached(),this.syncValueAndDispatch(e)}else n&&this.syncValueAndDispatch(e.get(`_value`));if(e.has(`defaultOptions`)&&this.defaultOptions.length){let e=(Array.isArray(this.options)?this.options:[]).filter(e=>e.userAdded)||[];this.options=[...e,...JSON.parse(JSON.stringify(this.defaultOptions))],this._options=Array.isArray(this.options)?[...this.options]:[]}if(e.has(`options`)){let t=e.get(`options`)||this._options||[],n=h.mergeWithUserAdded(this.options,t);this._options=n,n.length>this.options.length&&(this.options=n);let r=h.syncOptionsWithValues(this._options,this._value);if(this._options=r.options,r.newValues.length>this._value.length){let e=[...this._value];this._value=r.newValues,this.syncValueAndDispatch(e)}}if(e.has(`_search`)&&this.dispatchEvent(new CustomEvent(`search`,{detail:this._search,bubbles:!1})),!this._isOptionsOpen&&this._hasTextInput&&this.inputRef.value&&this.inputRef.value.type!==`hidden`){let e=!this.multiple&&this._value[0]?f(this._value[0],this.options,this.displayValueAs):``;this.inputRef.value.value!==e&&(this.inputRef.value.value=e)}this.classList.add(`pkt-combobox-component`),this.classList.toggle(`pkt-combobox-component--fullwidth`,!!this.fullwidth),super.updated(e)}formResetCallback(){this.touched=!1;let e=this.defaultValue||(this.multiple,``);this.value=e,this._value=this.parseValue(),this._options=this._options.filter(e=>!e.userAdded).map(e=>({...e,selected:this._value.includes(e.value)})),this.options=this.options.filter(e=>!e.userAdded).map(e=>({...e,selected:this._value.includes(e.value)})),this._search=``,this._isOptionsOpen=!1,this._userInfoMessage=``,this._addValueText=null,this._inputFocus=!1,this.updateMaxReached(),this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(this.inputRef.value.value=``),this.internals.setFormValue(``),this.internals.ariaInvalid=`false`,this.requestUpdate()}attributeChangedCallback(e,t,n){if(e===`options`){this._options=Array.isArray(this.options)?[...this.options]:[];let e=h.syncOptionsWithValues(this._options,this._value);this._options=e.options,e.newValues.length>this._value.length&&(this._value=e.newValues),this._search=``}super.attributeChangedCallback(e,t,n)}render(){return e._`
|
|
2
2
|
<pkt-input-wrapper
|
|
3
3
|
.strings=${this.strings}
|
|
4
4
|
.size=${this.inputSize}
|
|
@@ -7,9 +7,9 @@ import { n as l, t as u } from "./ref-lE1mGUOL.js";
|
|
|
7
7
|
import "./tag-D2Xvsy1i.js";
|
|
8
8
|
import { t as d } from "./repeat-CCnTfedv.js";
|
|
9
9
|
import { a as f, c as p, i as m, o as h, r as g, s as _ } from "./listbox-CsP0qbU1.js";
|
|
10
|
-
import { t as v } from "./input-element-
|
|
10
|
+
import { t as v } from "./input-element-BiUfK_gU.js";
|
|
11
11
|
import { t as y } from "./pkt-options-controller-DKkmDDzT.js";
|
|
12
|
-
import "./input-wrapper-
|
|
12
|
+
import "./input-wrapper-Bwh720ke.js";
|
|
13
13
|
//#region ../../shared-utils/combobox/input-utils.ts
|
|
14
14
|
var b = (e, t, n) => {
|
|
15
15
|
switch (e) {
|
|
@@ -22,6 +22,10 @@ export declare abstract class PktDatepickerBase extends PktElement {
|
|
|
22
22
|
inputClasses: Record<string, boolean>;
|
|
23
23
|
inputSize: TPktInputSize;
|
|
24
24
|
internals?: ElementInternals;
|
|
25
|
+
hasError: boolean;
|
|
26
|
+
hasHelptext: boolean;
|
|
27
|
+
get describedBy(): string | undefined;
|
|
28
|
+
get errorMessageId(): string | undefined;
|
|
25
29
|
inputRef: Ref<HTMLInputElement>;
|
|
26
30
|
btnRef: Ref<HTMLButtonElement>;
|
|
27
31
|
get inputElement(): HTMLInputElement | undefined;
|
|
@@ -14,7 +14,6 @@ export declare class PktDatepicker extends PktInputElement<Props> {
|
|
|
14
14
|
* Element attributes and properties
|
|
15
15
|
*/
|
|
16
16
|
private _valueProperty;
|
|
17
|
-
private _valueProcessing;
|
|
18
17
|
datepickerPopupRef: Ref<PktDatepickerPopup>;
|
|
19
18
|
get value(): string;
|
|
20
19
|
set value(newValue: string | string[]);
|
|
@@ -47,7 +46,10 @@ export declare class PktDatepicker extends PktInputElement<Props> {
|
|
|
47
46
|
disconnectedCallback(): void;
|
|
48
47
|
onInput(): void;
|
|
49
48
|
valueChanged(newValue: string | null, oldValue: string | null): void;
|
|
49
|
+
private deriveValue;
|
|
50
50
|
attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
|
|
51
|
+
private static readonly DERIVED_FROM;
|
|
52
|
+
protected willUpdate(changedProperties: PropertyValues): void;
|
|
51
53
|
updated(changedProperties: PropertyValues): void;
|
|
52
54
|
/**
|
|
53
55
|
* Element references
|