@oslokommune/punkt-elements 16.7.0 → 16.7.3
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/accordionitem-_9AiCIvd.cjs +34 -0
- package/dist/{accordionitem-ZlaXvjt5.js → accordionitem-dCfSrxh5.js} +57 -55
- package/dist/alert-BtOk8yRH.cjs +33 -0
- package/dist/{alert-BuAXrnKl.js → alert-DlY2_grU.js} +48 -46
- package/dist/backlink-Ce5Vldop.js +49 -0
- package/dist/backlink-y3dwjKPC.cjs +13 -0
- package/dist/button-B_TXwNzt.cjs +27 -0
- package/dist/{button-DEyvt1LI.js → button-BiY-wlKF.js} +79 -77
- package/dist/calendar-B2pji2zn.cjs +90 -0
- package/dist/{calendar-S63oreVW.js → calendar-DhjQDC4C.js} +689 -687
- package/dist/card-BwMNB5Bb.cjs +87 -0
- package/dist/{card-DDiLfuO4.js → card-CGlmcMSR.js} +99 -97
- package/dist/checkbox-BsJZYA26.js +147 -0
- package/dist/checkbox-CTY8f_qn.cjs +31 -0
- package/dist/{combobox-BmxSecfE.js → combobox-DSB5WOxg.js} +223 -226
- package/dist/{combobox-Hb2V-fPX.cjs → combobox-DbICIgKG.cjs} +4 -4
- package/dist/consent-DkOQpbsg.cjs +11 -0
- package/dist/{consent-iXyx5v6J.js → consent-SNWV_mMU.js} +48 -46
- package/dist/datepicker-BEWl9iz3.cjs +273 -0
- package/dist/{datepicker-CZl7b8Na.js → datepicker-euHyzXnb.js} +341 -329
- package/dist/{heading-CKt7cVn7.js → heading-D2tVS6lS.js} +30 -28
- package/dist/heading-DrzbgDb6.cjs +1 -0
- package/dist/helptext-BKtU4mas.js +82 -0
- package/dist/helptext-DcRC7wW2.cjs +24 -0
- package/dist/icon-CxQcIa5F.js +105 -0
- package/dist/icon-q81vqPK_.cjs +9 -0
- package/dist/input-wrapper-Bs4CRNst.js +181 -0
- package/dist/input-wrapper-Bv9aqqVq.cjs +54 -0
- package/dist/link-C0rl-86s.cjs +7 -0
- package/dist/link-Cdqgl60z.js +55 -0
- package/dist/linkcard-Dimu7Rlx.cjs +13 -0
- package/dist/linkcard-Lbq_UhjZ.js +56 -0
- package/dist/{listbox-BQKDZvZn.js → listbox-Bia4_tvN.js} +131 -129
- package/dist/listbox-La2GZQei.cjs +106 -0
- package/dist/loader-D1ugDXGV.cjs +16 -0
- package/dist/{loader-Ci3CHU8k.js → loader-DyN6RGC5.js} +51 -49
- package/dist/messagebox-BGMVm2t9.js +71 -0
- package/dist/messagebox-M0yIgCz9.cjs +13 -0
- package/dist/modal-CMO1RtIi.cjs +36 -0
- package/dist/{modal-DzGe1g8Z.js → modal-DjPQDE-Z.js} +53 -51
- package/dist/pkt-accordion.cjs +1 -1
- package/dist/pkt-accordion.js +2 -2
- package/dist/pkt-alert.cjs +1 -1
- package/dist/pkt-alert.js +3 -4
- package/dist/pkt-backlink.cjs +1 -1
- package/dist/pkt-backlink.js +2 -3
- package/dist/pkt-breadcrumbs.cjs +11 -11
- package/dist/pkt-breadcrumbs.js +30 -28
- package/dist/pkt-button.cjs +1 -1
- package/dist/pkt-button.js +3 -4
- package/dist/pkt-calendar.cjs +1 -1
- package/dist/pkt-calendar.js +2 -3
- package/dist/pkt-card.cjs +1 -1
- package/dist/pkt-card.js +2 -3
- package/dist/pkt-checkbox.cjs +1 -1
- package/dist/pkt-checkbox.js +3 -4
- package/dist/pkt-combobox.cjs +1 -1
- package/dist/pkt-combobox.js +3 -4
- package/dist/pkt-consent.cjs +1 -1
- package/dist/pkt-consent.js +2 -3
- package/dist/pkt-datepicker.cjs +1 -1
- package/dist/pkt-datepicker.js +7 -8
- package/dist/pkt-header.cjs +35 -35
- package/dist/pkt-header.js +224 -218
- package/dist/pkt-heading.cjs +1 -1
- package/dist/pkt-heading.js +3 -4
- package/dist/pkt-helptext.cjs +1 -1
- package/dist/pkt-helptext.js +3 -4
- package/dist/pkt-icon.cjs +1 -1
- package/dist/pkt-icon.js +3 -4
- package/dist/pkt-index.cjs +1 -1
- package/dist/pkt-index.js +26 -26
- package/dist/pkt-input-wrapper.cjs +1 -1
- package/dist/pkt-input-wrapper.js +2 -3
- package/dist/pkt-link.cjs +1 -1
- package/dist/pkt-link.js +2 -3
- package/dist/pkt-linkcard.cjs +1 -1
- package/dist/pkt-linkcard.js +3 -4
- package/dist/pkt-listbox.cjs +1 -1
- package/dist/pkt-listbox.js +3 -4
- package/dist/pkt-loader.cjs +1 -1
- package/dist/pkt-loader.js +3 -4
- package/dist/pkt-messagebox.cjs +1 -1
- package/dist/pkt-messagebox.js +3 -4
- package/dist/pkt-modal.cjs +1 -1
- package/dist/pkt-modal.js +3 -4
- package/dist/pkt-progressbar.cjs +1 -1
- package/dist/pkt-progressbar.js +2 -3
- package/dist/pkt-radiobutton.cjs +1 -1
- package/dist/pkt-radiobutton.js +3 -4
- package/dist/pkt-select.cjs +1 -1
- package/dist/pkt-select.js +3 -4
- package/dist/pkt-tabs.cjs +1 -1
- package/dist/pkt-tabs.js +2 -2
- package/dist/pkt-tag.cjs +1 -1
- package/dist/pkt-tag.js +3 -4
- package/dist/pkt-textarea.cjs +1 -1
- package/dist/pkt-textarea.js +3 -4
- package/dist/pkt-textinput.cjs +1 -1
- package/dist/pkt-textinput.js +3 -4
- package/dist/pkt-timepicker.cjs +22 -19
- package/dist/pkt-timepicker.js +84 -76
- package/dist/progressbar-BqlMzkM_.cjs +21 -0
- package/dist/{progressbar-By7e0lEI.js → progressbar-sbHDFC12.js} +88 -88
- package/dist/radiobutton-5ZqVVtTT.cjs +31 -0
- package/dist/{radiobutton-6frNG9J_.js → radiobutton-D8Ai8ETa.js} +44 -42
- package/dist/select-De-n8on9.js +230 -0
- package/dist/select-dTWibR6_.cjs +49 -0
- package/dist/tabitem-B9-jeV97.js +334 -0
- package/dist/tabitem-BnhzqfW3.cjs +65 -0
- package/dist/tag-CbwO8yvD.cjs +27 -0
- package/dist/{tag-BuCpqaks.js → tag-D4FI5t3y.js} +42 -40
- package/dist/textarea-BmLaKzsc.cjs +50 -0
- package/dist/{textarea-Bzuymclz.js → textarea-CMiSJaYL.js} +62 -60
- package/dist/textinput-em9y4yrL.cjs +70 -0
- package/dist/{textinput-9lHjs4ce.js → textinput-r8udK0IX.js} +57 -55
- package/package.json +2 -2
- package/src/components/accordion/accordion.ts +6 -1
- package/src/components/accordion/accordionitem.ts +6 -1
- package/src/components/alert/alert.ts +6 -1
- package/src/components/backlink/backlink.ts +6 -1
- package/src/components/breadcrumbs/breadcrumbs.ts +6 -1
- package/src/components/button/button.ts +6 -1
- package/src/components/calendar/calendar.ts +6 -1
- package/src/components/card/card.ts +6 -1
- package/src/components/checkbox/checkbox.ts +6 -1
- package/src/components/combobox/combobox.ts +6 -1
- package/src/components/consent/consent.ts +6 -1
- package/src/components/datepicker/date-tags.ts +6 -1
- package/src/components/datepicker/datepicker-multiple.ts +6 -1
- package/src/components/datepicker/datepicker-popup.ts +6 -1
- package/src/components/datepicker/datepicker-range.ts +6 -1
- package/src/components/datepicker/datepicker-single.ts +6 -1
- package/src/components/datepicker/datepicker.ts +6 -1
- package/src/components/header/header-service.ts +6 -1
- package/src/components/header/header-user-menu.ts +6 -1
- package/src/components/header/header.ts +6 -1
- package/src/components/heading/heading.ts +6 -1
- package/src/components/helptext/helptext.ts +6 -1
- package/src/components/icon/icon.ts +6 -1
- package/src/components/input-wrapper/input-wrapper.ts +6 -1
- package/src/components/link/link.ts +6 -1
- package/src/components/linkcard/linkcard.ts +6 -1
- package/src/components/listbox/listbox.ts +6 -1
- package/src/components/loader/loader.ts +6 -1
- package/src/components/messagebox/messagebox.ts +6 -1
- package/src/components/modal/modal.ts +6 -1
- package/src/components/progressbar/progressbar.ts +6 -1
- package/src/components/radiobutton/radiobutton.ts +6 -1
- package/src/components/select/select.ts +6 -1
- package/src/components/tabs/tabitem.ts +6 -1
- package/src/components/tabs/tabs.ts +6 -1
- package/src/components/tag/tag.ts +6 -1
- package/src/components/textarea/textarea.ts +6 -1
- package/src/components/textinput/textinput.ts +6 -1
- package/src/components/timepicker/timepicker.ts +14 -2
- package/dist/accordionitem-D1Agl1bB.cjs +0 -34
- package/dist/alert-DFkFNTxh.cjs +0 -33
- package/dist/backlink-EiAXUUZP.cjs +0 -13
- package/dist/backlink-V4DAt17e.js +0 -47
- package/dist/button-DYv5Dg4M.cjs +0 -27
- package/dist/calendar-HIE9nxcc.cjs +0 -90
- package/dist/card-CyeH6l1c.cjs +0 -87
- package/dist/checkbox-BLlwTABj.cjs +0 -31
- package/dist/checkbox-ejBUa5qQ.js +0 -145
- package/dist/consent-ruWAEVXW.cjs +0 -11
- package/dist/datepicker-D2H7U6MS.cjs +0 -273
- package/dist/heading-Cvz8m1xL.cjs +0 -1
- package/dist/helptext-5Mzp65-F.cjs +0 -24
- package/dist/helptext-jIoWRcCF.js +0 -80
- package/dist/icon-BlKA8YuW.js +0 -103
- package/dist/icon-Bqj9oBbl.cjs +0 -9
- package/dist/input-wrapper-B0MkQ0IZ.cjs +0 -54
- package/dist/input-wrapper-B2JpK016.js +0 -179
- package/dist/link-R_lNhViF.cjs +0 -7
- package/dist/link-Z_GizclR.js +0 -53
- package/dist/linkcard-BlQvdB1a.js +0 -54
- package/dist/linkcard-C7HbSLlX.cjs +0 -13
- package/dist/listbox-CGgV9MAe.cjs +0 -106
- package/dist/loader-e2gs_1xz.cjs +0 -16
- package/dist/messagebox-Bf-XMlvW.js +0 -69
- package/dist/messagebox-D67w71VX.cjs +0 -13
- package/dist/modal-CyvEkbfQ.cjs +0 -36
- package/dist/progressbar-DsJ2B9Vm.cjs +0 -21
- package/dist/radiobutton-Bv-BZ1Hw.cjs +0 -31
- package/dist/select-CXZt1nHS.js +0 -228
- package/dist/select-WFhS4Vfp.cjs +0 -49
- package/dist/tabitem-CB8wkKmv.js +0 -332
- package/dist/tabitem-DZpspU4Q.cjs +0 -65
- package/dist/tag-X6xdjR0N.cjs +0 -27
- package/dist/textarea-DoeHJ7HR.cjs +0 -50
- package/dist/textinput-BNsLd26i.cjs +0 -70
|
@@ -1,179 +0,0 @@
|
|
|
1
|
-
import { P as $, s as g } from "./element-with-slot-Dqk6-TRR.js";
|
|
2
|
-
import { o as x } from "./if-defined-B0krMLad.js";
|
|
3
|
-
import { A as s, b as o, n as r, t as m } from "./element-CPpT3rFQ.js";
|
|
4
|
-
import { o as k } from "./icon-BlKA8YuW.js";
|
|
5
|
-
import { e as v } from "./class-map-CEnykyO_.js";
|
|
6
|
-
import { u as w } from "./utils-DznhwRXm.js";
|
|
7
|
-
import { b as T } from "./booleanish-C9R0tdXH.js";
|
|
8
|
-
import { s as p } from "./input-wrapper-CDgenrYA.js";
|
|
9
|
-
import "./helptext-jIoWRcCF.js";
|
|
10
|
-
import "./alert-BuAXrnKl.js";
|
|
11
|
-
var E = Object.defineProperty, D = Object.getOwnPropertyDescriptor, e = (l, a, n, h) => {
|
|
12
|
-
for (var i = h > 1 ? void 0 : h ? D(a, n) : a, d = l.length - 1, u; d >= 0; d--)
|
|
13
|
-
(u = l[d]) && (i = (h ? u(a, n, i) : u(i)) || i);
|
|
14
|
-
return h && i && E(a, n, i), i;
|
|
15
|
-
};
|
|
16
|
-
let t = class extends $ {
|
|
17
|
-
constructor() {
|
|
18
|
-
super(...arguments), this.forId = w(), this.label = "", this.helptext = null, this.helptextDropdown = null, this.helptextDropdownButton = null, this.counter = p.props.counter.default, this.counterCurrent = 0, this.counterMaxLength = 0, this.counterError = null, this.counterPosition = "bottom", this.optionalTag = p.props.optionalTag.default, this.optionalText = p.props.optionalText.default, this.requiredTag = p.props.requiredTag.default, this.requiredText = p.props.requiredText.default, this.tagText = null, this.hasError = p.props.hasError.default, this.errorMessage = "", this.disabled = p.props.disabled.default, this.inline = p.props.inline.default, this.ariaDescribedby = void 0, this.hasFieldset = p.props.hasFieldset.default, this.role = "group", this.useWrapper = p.props.useWrapper.default;
|
|
19
|
-
}
|
|
20
|
-
updated(l) {
|
|
21
|
-
super.updated(l);
|
|
22
|
-
}
|
|
23
|
-
render() {
|
|
24
|
-
const l = {
|
|
25
|
-
"pkt-inputwrapper": !0,
|
|
26
|
-
"pkt-inputwrapper--error": this.hasError,
|
|
27
|
-
"pkt-inputwrapper--disabled": this.disabled,
|
|
28
|
-
"pkt-inputwrapper--inline": this.inline
|
|
29
|
-
}, a = "pkt-tag pkt-tag--small pkt-tag--thin-text", n = this.ariaDescribedby ? this.ariaDescribedby : this.helptext ? `${this.forId}-helptext` : s, h = () => o`
|
|
30
|
-
${this.tagText ? o`<span class=${a + " pkt-tag--gray"}>${this.tagText}</span>` : s}
|
|
31
|
-
${this.optionalTag ? o`<span class=${a + " pkt-tag--blue-light"}>${this.optionalText}</span>` : s}
|
|
32
|
-
${this.requiredTag ? o`<span class=${a + " pkt-tag--beige"}>${this.requiredText}</span>` : s}
|
|
33
|
-
`, i = () => this.useWrapper ? this.hasFieldset ? o`<legend
|
|
34
|
-
class="pkt-inputwrapper__legend"
|
|
35
|
-
id="${this.forId}-label"
|
|
36
|
-
@click=${this.handleLabelClick}
|
|
37
|
-
>
|
|
38
|
-
${this.label} ${h()}
|
|
39
|
-
</legend>` : o`<label
|
|
40
|
-
class="pkt-inputwrapper__label"
|
|
41
|
-
for="${this.forId}"
|
|
42
|
-
aria-describedby="${n}"
|
|
43
|
-
id="${this.forId}-label"
|
|
44
|
-
@click=${this.handleLabelClick}
|
|
45
|
-
>${this.label}${h()}</label
|
|
46
|
-
>` : o`<label
|
|
47
|
-
for="${this.forId}"
|
|
48
|
-
class="pkt-sr-only"
|
|
49
|
-
aria-describedby="${n}"
|
|
50
|
-
id="${this.forId}-label"
|
|
51
|
-
>
|
|
52
|
-
${this.label}
|
|
53
|
-
</label>`, d = () => o`
|
|
54
|
-
<pkt-helptext
|
|
55
|
-
class="${x(this.useWrapper ? void 0 : "pkt-hide")}"
|
|
56
|
-
.forId=${this.forId}
|
|
57
|
-
.helptext=${this.helptext}
|
|
58
|
-
.helptextDropdown=${this.helptextDropdown}
|
|
59
|
-
.helptextDropdownButton=${this.helptextDropdownButton || p.props.helptextDropdownButton.default}
|
|
60
|
-
@toggleHelpText=${(f) => {
|
|
61
|
-
this.toggleDropdown(f);
|
|
62
|
-
}}
|
|
63
|
-
>${g(this, "helptext")}</pkt-helptext>
|
|
64
|
-
`, u = () => this.counter ? o`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
|
|
65
|
-
${this.counterError ? this.counterError : s} ${this.counterCurrent || 0}
|
|
66
|
-
${this.counterMaxLength ? `/${this.counterMaxLength}` : s}
|
|
67
|
-
</div>` : s, b = () => this.hasError && this.errorMessage ? o`<pkt-alert
|
|
68
|
-
skin="error"
|
|
69
|
-
compact
|
|
70
|
-
id=${`${this.forId}-error`}
|
|
71
|
-
aria-live="assertive"
|
|
72
|
-
aria-atomic="true"
|
|
73
|
-
>
|
|
74
|
-
${k(this.errorMessage)}
|
|
75
|
-
</pkt-alert>` : s, c = () => o`
|
|
76
|
-
${i()}
|
|
77
|
-
${d()}
|
|
78
|
-
${this.counterPosition === "top" ? u() : s}
|
|
79
|
-
<div class="pkt-contents">${g(this)}</div>
|
|
80
|
-
${this.counterPosition === "bottom" ? u() : s}
|
|
81
|
-
${b()}
|
|
82
|
-
`, y = () => this.hasFieldset ? o`<fieldset class="pkt-inputwrapper__fieldset" aria-describedby="${n}">
|
|
83
|
-
${c()}
|
|
84
|
-
</fieldset>` : o`<div class="pkt-inputwrapper__fieldset">${c()}</div>`;
|
|
85
|
-
return o`<div class=${v(l)}>${y()}</div> `;
|
|
86
|
-
}
|
|
87
|
-
toggleDropdown(l) {
|
|
88
|
-
this.dispatchEvent(
|
|
89
|
-
new CustomEvent("toggleHelpText", {
|
|
90
|
-
bubbles: !1,
|
|
91
|
-
detail: { isOpen: l.detail.isOpen }
|
|
92
|
-
})
|
|
93
|
-
);
|
|
94
|
-
}
|
|
95
|
-
handleLabelClick() {
|
|
96
|
-
this.dispatchEvent(
|
|
97
|
-
new CustomEvent("labelClick", {
|
|
98
|
-
bubbles: !0,
|
|
99
|
-
composed: !0,
|
|
100
|
-
detail: "label clicked"
|
|
101
|
-
})
|
|
102
|
-
);
|
|
103
|
-
}
|
|
104
|
-
};
|
|
105
|
-
e([
|
|
106
|
-
r({ type: String })
|
|
107
|
-
], t.prototype, "forId", 2);
|
|
108
|
-
e([
|
|
109
|
-
r({ type: String })
|
|
110
|
-
], t.prototype, "label", 2);
|
|
111
|
-
e([
|
|
112
|
-
r({ type: String })
|
|
113
|
-
], t.prototype, "helptext", 2);
|
|
114
|
-
e([
|
|
115
|
-
r({ type: String })
|
|
116
|
-
], t.prototype, "helptextDropdown", 2);
|
|
117
|
-
e([
|
|
118
|
-
r({ type: String })
|
|
119
|
-
], t.prototype, "helptextDropdownButton", 2);
|
|
120
|
-
e([
|
|
121
|
-
r({ type: Boolean })
|
|
122
|
-
], t.prototype, "counter", 2);
|
|
123
|
-
e([
|
|
124
|
-
r({ type: Number })
|
|
125
|
-
], t.prototype, "counterCurrent", 2);
|
|
126
|
-
e([
|
|
127
|
-
r({ type: Number })
|
|
128
|
-
], t.prototype, "counterMaxLength", 2);
|
|
129
|
-
e([
|
|
130
|
-
r({ type: String })
|
|
131
|
-
], t.prototype, "counterError", 2);
|
|
132
|
-
e([
|
|
133
|
-
r({ type: String, reflect: !1 })
|
|
134
|
-
], t.prototype, "counterPosition", 2);
|
|
135
|
-
e([
|
|
136
|
-
r({ type: Boolean })
|
|
137
|
-
], t.prototype, "optionalTag", 2);
|
|
138
|
-
e([
|
|
139
|
-
r({ type: String })
|
|
140
|
-
], t.prototype, "optionalText", 2);
|
|
141
|
-
e([
|
|
142
|
-
r({ type: Boolean })
|
|
143
|
-
], t.prototype, "requiredTag", 2);
|
|
144
|
-
e([
|
|
145
|
-
r({ type: String })
|
|
146
|
-
], t.prototype, "requiredText", 2);
|
|
147
|
-
e([
|
|
148
|
-
r({ type: String })
|
|
149
|
-
], t.prototype, "tagText", 2);
|
|
150
|
-
e([
|
|
151
|
-
r({ type: Boolean })
|
|
152
|
-
], t.prototype, "hasError", 2);
|
|
153
|
-
e([
|
|
154
|
-
r({ type: String })
|
|
155
|
-
], t.prototype, "errorMessage", 2);
|
|
156
|
-
e([
|
|
157
|
-
r({ type: Boolean })
|
|
158
|
-
], t.prototype, "disabled", 2);
|
|
159
|
-
e([
|
|
160
|
-
r({ type: Boolean })
|
|
161
|
-
], t.prototype, "inline", 2);
|
|
162
|
-
e([
|
|
163
|
-
r({ type: String })
|
|
164
|
-
], t.prototype, "ariaDescribedby", 2);
|
|
165
|
-
e([
|
|
166
|
-
r({ type: Boolean })
|
|
167
|
-
], t.prototype, "hasFieldset", 2);
|
|
168
|
-
e([
|
|
169
|
-
r({ type: String, reflect: !0 })
|
|
170
|
-
], t.prototype, "role", 2);
|
|
171
|
-
e([
|
|
172
|
-
r({ type: Boolean, reflect: !0, converter: T })
|
|
173
|
-
], t.prototype, "useWrapper", 2);
|
|
174
|
-
t = e([
|
|
175
|
-
m("pkt-input-wrapper")
|
|
176
|
-
], t);
|
|
177
|
-
export {
|
|
178
|
-
t as P
|
|
179
|
-
};
|
package/dist/link-R_lNhViF.cjs
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
"use strict";const c=require("./element-with-slot-ZX-up7jO.cjs"),t=require("./element-gR_VtSiD.cjs"),h=require("./class-map-CsENJXf1.cjs");require("./icon-Bqj9oBbl.cjs");const k={href:{default:"#"},target:{default:"_self"}},a={props:k};var f=Object.defineProperty,u=Object.getOwnPropertyDescriptor,i=(o,n,s,r)=>{for(var e=r>1?void 0:r?u(n,s):n,l=o.length-1,p;l>=0;l--)(p=o[l])&&(e=(r?p(n,s,e):p(e))||e);return r&&e&&f(n,s,e),e};exports.PktLink=class extends c.PktElementWithSlot{constructor(){super(...arguments),this.href=a.props.href.default,this.iconName=void 0,this.iconPosition=void 0,this.external=!1,this.target=a.props.target.default}render(){const n={"pkt-link":!0,"pkt-link--icon-left":!!this.iconName&&this.iconPosition==="left"||!!(this.iconName&&!this.iconPosition),"pkt-link--icon-right":!!this.iconName&&this.iconPosition==="right","pkt-link--external":this.external};return t.b`<a
|
|
2
|
-
class=${h.e(n)}
|
|
3
|
-
href=${this.href}
|
|
4
|
-
.target=${this.target}
|
|
5
|
-
.rel=${this.external?"noopener noreferrer":t.A}
|
|
6
|
-
>${this.iconName?t.b`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>`:""} <span>${c.slotContent(this)}</span></a
|
|
7
|
-
>`}};i([t.n({type:String,reflect:!0})],exports.PktLink.prototype,"href",2);i([t.n({type:String,reflect:!0})],exports.PktLink.prototype,"iconName",2);i([t.n({type:String,reflect:!0})],exports.PktLink.prototype,"iconPosition",2);i([t.n({type:Boolean,reflect:!0})],exports.PktLink.prototype,"external",2);i([t.n({type:String,reflect:!0})],exports.PktLink.prototype,"target",2);exports.PktLink=i([t.t("pkt-link")],exports.PktLink);
|
package/dist/link-Z_GizclR.js
DELETED
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import { P as h, s as m } from "./element-with-slot-Dqk6-TRR.js";
|
|
2
|
-
import { A as u, b as c, n as i, t as g } from "./element-CPpT3rFQ.js";
|
|
3
|
-
import { e as P } from "./class-map-CEnykyO_.js";
|
|
4
|
-
import "./icon-BlKA8YuW.js";
|
|
5
|
-
const k = { href: { default: "#" }, target: { default: "_self" } }, f = {
|
|
6
|
-
props: k
|
|
7
|
-
};
|
|
8
|
-
var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, r = (o, n, p, s) => {
|
|
9
|
-
for (var t = s > 1 ? void 0 : s ? _(n, p) : n, a = o.length - 1, l; a >= 0; a--)
|
|
10
|
-
(l = o[a]) && (t = (s ? l(n, p, t) : l(t)) || t);
|
|
11
|
-
return s && t && y(n, p, t), t;
|
|
12
|
-
};
|
|
13
|
-
let e = class extends h {
|
|
14
|
-
constructor() {
|
|
15
|
-
super(...arguments), this.href = f.props.href.default, this.iconName = void 0, this.iconPosition = void 0, this.external = !1, this.target = f.props.target.default;
|
|
16
|
-
}
|
|
17
|
-
render() {
|
|
18
|
-
const o = {
|
|
19
|
-
"pkt-link": !0,
|
|
20
|
-
"pkt-link--icon-left": !!this.iconName && this.iconPosition === "left" || !!(this.iconName && !this.iconPosition),
|
|
21
|
-
"pkt-link--icon-right": !!this.iconName && this.iconPosition === "right",
|
|
22
|
-
"pkt-link--external": this.external
|
|
23
|
-
};
|
|
24
|
-
return c`<a
|
|
25
|
-
class=${P(o)}
|
|
26
|
-
href=${this.href}
|
|
27
|
-
.target=${this.target}
|
|
28
|
-
.rel=${this.external ? "noopener noreferrer" : u}
|
|
29
|
-
>${this.iconName ? c`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>` : ""} <span>${m(this)}</span></a
|
|
30
|
-
>`;
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
|
-
r([
|
|
34
|
-
i({ type: String, reflect: !0 })
|
|
35
|
-
], e.prototype, "href", 2);
|
|
36
|
-
r([
|
|
37
|
-
i({ type: String, reflect: !0 })
|
|
38
|
-
], e.prototype, "iconName", 2);
|
|
39
|
-
r([
|
|
40
|
-
i({ type: String, reflect: !0 })
|
|
41
|
-
], e.prototype, "iconPosition", 2);
|
|
42
|
-
r([
|
|
43
|
-
i({ type: Boolean, reflect: !0 })
|
|
44
|
-
], e.prototype, "external", 2);
|
|
45
|
-
r([
|
|
46
|
-
i({ type: String, reflect: !0 })
|
|
47
|
-
], e.prototype, "target", 2);
|
|
48
|
-
e = r([
|
|
49
|
-
g("pkt-link")
|
|
50
|
-
], e);
|
|
51
|
-
export {
|
|
52
|
-
e as P
|
|
53
|
-
};
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { b as c, n, t as f } from "./element-CPpT3rFQ.js";
|
|
2
|
-
import { P as h, s as k } from "./element-with-slot-Dqk6-TRR.js";
|
|
3
|
-
import "./icon-BlKA8YuW.js";
|
|
4
|
-
import { o as m } from "./if-defined-B0krMLad.js";
|
|
5
|
-
var _ = Object.defineProperty, u = Object.getOwnPropertyDescriptor, r = (o, i, l, s) => {
|
|
6
|
-
for (var e = s > 1 ? void 0 : s ? u(i, l) : i, p = o.length - 1, a; p >= 0; p--)
|
|
7
|
-
(a = o[p]) && (e = (s ? a(i, l, e) : a(e)) || e);
|
|
8
|
-
return s && e && _(i, l, e), e;
|
|
9
|
-
};
|
|
10
|
-
let t = class extends h {
|
|
11
|
-
constructor() {
|
|
12
|
-
super(...arguments), this.title = "", this.href = "#", this.iconName = "", this.external = !1, this.openInNewTab = !1, this.skin = "normal";
|
|
13
|
-
}
|
|
14
|
-
render() {
|
|
15
|
-
const o = ["pkt-linkcard", this.skin && `pkt-linkcard--${this.skin}`].filter(Boolean).join(" "), i = ["pkt-linkcard__title", this.external && "pkt-link pkt-link--external"].filter(Boolean).join(" ");
|
|
16
|
-
return c`
|
|
17
|
-
<a
|
|
18
|
-
href=${this.href}
|
|
19
|
-
class=${o}
|
|
20
|
-
target=${this.openInNewTab ? "_blank" : "_self"}
|
|
21
|
-
rel=${m(this.openInNewTab ? "noopener noreferrer" : void 0)}
|
|
22
|
-
>
|
|
23
|
-
${this.iconName && c`<pkt-icon class="pkt-link__icon" name="${this.iconName}" />`}
|
|
24
|
-
${this.title && c`<div class=${i}>${this.title}</div>`}
|
|
25
|
-
|
|
26
|
-
<div class="pkt-linkcard__text">${k(this)}</div>
|
|
27
|
-
</a>
|
|
28
|
-
`;
|
|
29
|
-
}
|
|
30
|
-
};
|
|
31
|
-
r([
|
|
32
|
-
n({ type: String, reflect: !0 })
|
|
33
|
-
], t.prototype, "title", 2);
|
|
34
|
-
r([
|
|
35
|
-
n({ type: String, reflect: !0 })
|
|
36
|
-
], t.prototype, "href", 2);
|
|
37
|
-
r([
|
|
38
|
-
n({ type: String, reflect: !0 })
|
|
39
|
-
], t.prototype, "iconName", 2);
|
|
40
|
-
r([
|
|
41
|
-
n({ type: Boolean, reflect: !0 })
|
|
42
|
-
], t.prototype, "external", 2);
|
|
43
|
-
r([
|
|
44
|
-
n({ type: Boolean, reflect: !0 })
|
|
45
|
-
], t.prototype, "openInNewTab", 2);
|
|
46
|
-
r([
|
|
47
|
-
n({ type: String, reflect: !0 })
|
|
48
|
-
], t.prototype, "skin", 2);
|
|
49
|
-
t = r([
|
|
50
|
-
f("pkt-linkcard")
|
|
51
|
-
], t);
|
|
52
|
-
export {
|
|
53
|
-
t as P
|
|
54
|
-
};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use strict";const t=require("./element-gR_VtSiD.cjs"),k=require("./element-with-slot-ZX-up7jO.cjs");require("./icon-Bqj9oBbl.cjs");const p=require("./if-defined-BOW3ODSj.cjs");var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,r=(l,n,i,s)=>{for(var e=s>1?void 0:s?h(n,i):n,o=l.length-1,a;o>=0;o--)(a=l[o])&&(e=(s?a(n,i,e):a(e))||e);return s&&e&&c(n,i,e),e};exports.PktLinkCard=class extends k.PktElementWithSlot{constructor(){super(...arguments),this.title="",this.href="#",this.iconName="",this.external=!1,this.openInNewTab=!1,this.skin="normal"}render(){const n=["pkt-linkcard",this.skin&&`pkt-linkcard--${this.skin}`].filter(Boolean).join(" "),i=["pkt-linkcard__title",this.external&&"pkt-link pkt-link--external"].filter(Boolean).join(" ");return t.b`
|
|
2
|
-
<a
|
|
3
|
-
href=${this.href}
|
|
4
|
-
class=${n}
|
|
5
|
-
target=${this.openInNewTab?"_blank":"_self"}
|
|
6
|
-
rel=${p.o(this.openInNewTab?"noopener noreferrer":void 0)}
|
|
7
|
-
>
|
|
8
|
-
${this.iconName&&t.b`<pkt-icon class="pkt-link__icon" name="${this.iconName}" />`}
|
|
9
|
-
${this.title&&t.b`<div class=${i}>${this.title}</div>`}
|
|
10
|
-
|
|
11
|
-
<div class="pkt-linkcard__text">${k.slotContent(this)}</div>
|
|
12
|
-
</a>
|
|
13
|
-
`}};r([t.n({type:String,reflect:!0})],exports.PktLinkCard.prototype,"title",2);r([t.n({type:String,reflect:!0})],exports.PktLinkCard.prototype,"href",2);r([t.n({type:String,reflect:!0})],exports.PktLinkCard.prototype,"iconName",2);r([t.n({type:Boolean,reflect:!0})],exports.PktLinkCard.prototype,"external",2);r([t.n({type:Boolean,reflect:!0})],exports.PktLinkCard.prototype,"openInNewTab",2);r([t.n({type:String,reflect:!0})],exports.PktLinkCard.prototype,"skin",2);exports.PktLinkCard=r([t.t("pkt-linkcard")],exports.PktLinkCard);
|
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
"use strict";const n=require("./element-gR_VtSiD.cjs"),g=require("./state-Dg-53wQ8.cjs"),p=require("./if-defined-BOW3ODSj.cjs"),m=require("./repeat-Cfq8CDlf.cjs"),f=require("./class-map-CsENJXf1.cjs"),y=require("./utils-byXsEz1u.cjs"),v=(s,e)=>e&&(s.find(t=>t.value===e)||s.find(t=>t.label===e))||null,O=(s,e)=>{if(!e)return-1;const t=s.findIndex(i=>i.value===e);return t>=0?t:s.findIndex(i=>i.label===e)},_=(s,e)=>{if(!e)return[...s];const t=e.toLowerCase();return s.filter(i=>(i.fulltext||i.value+(i.label||"")+(i.prefix||"")).toLowerCase().includes(t))},w=s=>s.value+(s.label||"")+(s.prefix||""),$=(s,e)=>e!==null&&s>=e,L=(s,e)=>{if(!e)return{filtered:[...s],suggestion:null};const t=e.toLowerCase(),i=s.filter(o=>{var l;return(l=o.fulltext)==null?void 0:l.toLowerCase().includes(t)}),a=i.find(o=>{var l;return!o.selected&&((l=o.label)==null?void 0:l.toLowerCase().startsWith(t))})||null;return{filtered:i,suggestion:a}},S=(s,e,t,i)=>{if(!s.trim())return{addValueText:null,userInfoMessage:""};const a=s.trim().toLowerCase(),o=e.find(u=>u.toLowerCase()===a),l=t.filter(u=>{var d;return((d=u.label)==null?void 0:d.toLowerCase().includes(a))||u.value.toLowerCase().includes(a)}),k=l.find(u=>{var d;return((d=u.label)==null?void 0:d.toLowerCase())===a||u.value.toLowerCase()===a});return(l.length===0||!k)&&i?{addValueText:s,userInfoMessage:""}:l.length===0&&!i?{addValueText:null,userInfoMessage:"Ingen treff i søket"}:o?{addValueText:null,userInfoMessage:"Verdien er allerede valgt"}:{addValueText:null,userInfoMessage:""}},I=s=>/^[\p{L} ]$/u.test(s),C=(s=500)=>{let e="",t;return{append:o=>(e+=o.toLowerCase(),t!==void 0&&clearTimeout(t),t=setTimeout(()=>{e=""},s),e),reset:()=>{e="",t!==void 0&&(clearTimeout(t),t=void 0)},getBuffer:()=>e}},M=(s,e)=>{const t=e.toLowerCase();return s.findIndex(i=>{var a;return(a=i.textContent)==null?void 0:a.trim().toLowerCase().startsWith(t)})},c=s=>{s.scrollIntoView({block:"nearest"}),window.setTimeout(()=>s.focus(),0)},h=s=>Array.from(s.querySelectorAll('[role="option"]:not([data-disabled])')||[]),P=s=>{const e=s.nextElementSibling;e&&c(e)},E=(s,e,t)=>{const i=s.previousElementSibling;if(s.dataset.index==="0"&&t){const a=e.querySelector('[role="searchbox"]');a&&c(a)}else i&&c(i)},b=s=>{const e=h(s);e[0]&&c(e[0])},x=s=>{const e=h(s),t=e[e.length-1];t&&c(t)},T=(s,e)=>{if(e.disabled)return;const t=h(s);if(e.allowUserInput&&e.customUserInput){const a=s.querySelector('[data-type="new-option"]');if(a){c(a);return}}const i=t.find(a=>a.dataset.selected==="true");if(i){c(i);return}if(e.includeSearch&&!(document.activeElement instanceof HTMLInputElement)){const a=s.querySelector('[role="searchbox"]');if(a){window.setTimeout(()=>a.focus(),0);return}}t[0]&&c(t[0])};var U=Object.defineProperty,A=Object.getOwnPropertyDescriptor,r=(s,e,t,i)=>{for(var a=i>1?void 0:i?A(e,t):e,o=s.length-1,l;o>=0;o--)(l=s[o])&&(a=(i?l(e,t,a):l(a))||a);return i&&a&&U(e,t,a),a};exports.PktListbox=class extends n.PktElement{constructor(){super(...arguments),this.id=y.uuidish(),this.label=null,this.options=[],this.isOpen=!1,this.disabled=!1,this.includeSearch=!1,this.isMultiSelect=!1,this.allowUserInput=!1,this.maxIsReached=!1,this.customUserInput=null,this.searchPlaceholder=null,this.searchValue=null,this.maxLength=0,this.userMessage=null,this._selectedOptions=0,this.typeahead=C(),this._filteredOptions=[]}connectedCallback(){super.connectedCallback(),this.includeSearch&&!this.searchValue&&(this.searchValue=""),this.options.length>0&&this.filterOptions(),this.setAttribute("tabindex","-1"),this.addEventListener("focus",this.focusFirstOrSelectedOption)}disconnectedCallback(){super.disconnectedCallback(),this.typeahead.reset()}updated(e){(e.has("options")||e.has("searchValue"))&&this.filterOptions(),super.updated(e)}attributeChangedCallback(e,t,i){(e==="options"||e==="search-value")&&this.filterOptions(),super.attributeChangedCallback(e,t,i)}get _hasOptions(){return this._filteredOptions.length>0||this.options.length>0}render(){return n.b`
|
|
2
|
-
<div
|
|
3
|
-
class=${f.e({"pkt-listbox":!0,"pkt-listbox__open":this.isOpen,"pkt-txt-16-light":!0})}
|
|
4
|
-
role=${p.o(this._hasOptions?"listbox":void 0)}
|
|
5
|
-
aria-multiselectable=${p.o(this._hasOptions&&this.isMultiSelect?"true":void 0)}
|
|
6
|
-
aria-label=${p.o(this._hasOptions?this.label??void 0:void 0)}
|
|
7
|
-
>
|
|
8
|
-
<div class="pkt-listbox__banners">
|
|
9
|
-
${this.renderSearch()} ${this.renderMaximumReachedBanner()} ${this.renderUserMessage()}
|
|
10
|
-
${this.renderEmptyMessage()} ${this.renderNewOptionBanner()}
|
|
11
|
-
</div>
|
|
12
|
-
<ul class="pkt-listbox__options" role="presentation">
|
|
13
|
-
${this.renderList()}
|
|
14
|
-
</ul>
|
|
15
|
-
</div>
|
|
16
|
-
<div aria-live="polite" class="pkt-visually-hidden">${this.userMessage}</div>
|
|
17
|
-
`}renderCheckboxOrCheckIcon(e,t){return this.isMultiSelect?n.b`
|
|
18
|
-
<input
|
|
19
|
-
class="pkt-input-check__input-checkbox"
|
|
20
|
-
type="checkbox"
|
|
21
|
-
role="presentation"
|
|
22
|
-
tabindex="-1"
|
|
23
|
-
value=${e.value}
|
|
24
|
-
@change=${i=>{i.stopPropagation()}}
|
|
25
|
-
.checked=${e.selected}
|
|
26
|
-
aria-labelledby=${this.id+"-option-label-"+t}
|
|
27
|
-
?disabled=${this.disabled||e.disabled||this.maxIsReached&&!e.selected}
|
|
28
|
-
/>
|
|
29
|
-
`:e.selected?n.b`<pkt-icon name="check-big"></pkt-icon>`:n.A}renderEmptyMessage(){return this.options.length>0||this._filteredOptions.length>0||this.userMessage?n.A:n.b`<div class="pkt-listbox__banner pkt-listbox__banner--empty">
|
|
30
|
-
<pkt-icon
|
|
31
|
-
class="pkt-listbox__banner-icon"
|
|
32
|
-
name="exclamation-mark-circle"
|
|
33
|
-
size="large"
|
|
34
|
-
></pkt-icon>
|
|
35
|
-
Tom liste
|
|
36
|
-
</div>`}renderList(){return n.b`
|
|
37
|
-
${m.c(this._filteredOptions,e=>e.value,(e,t)=>n.b`
|
|
38
|
-
<li
|
|
39
|
-
@click=${()=>{this.toggleOption(e)}}
|
|
40
|
-
aria-selected=${e.selected?"true":"false"}
|
|
41
|
-
@keydown=${this.handleOptionKeydown}
|
|
42
|
-
class=${f.e({"pkt-listbox__option":!0,"pkt-listbox__option--selected":!!(!this.isMultiSelect&&e.selected),"pkt-listbox__option--checkBox":this.isMultiSelect})}
|
|
43
|
-
tabindex="${this.disabled||e.disabled?"-1":"0"}"
|
|
44
|
-
data-index=${t}
|
|
45
|
-
data-value=${e.value}
|
|
46
|
-
data-selected=${e.selected?"true":"false"}
|
|
47
|
-
?data-disabled=${this.disabled||e.disabled||this.maxIsReached&&!e.selected}
|
|
48
|
-
aria-disabled=${this.disabled||e.disabled||this.maxIsReached&&!e.selected?"true":"false"}
|
|
49
|
-
role="option"
|
|
50
|
-
id=${`${this.id}-${t}`}
|
|
51
|
-
>
|
|
52
|
-
${this.renderCheckboxOrCheckIcon(e,t)}
|
|
53
|
-
<span class="pkt-listbox__option-label" id=${this.id+"-option-label-"+t}>
|
|
54
|
-
${e.prefix?n.b`<span class="pkt-listbox__option-prefix">${e.prefix}</span>`:n.A}
|
|
55
|
-
${e.label||e.value}
|
|
56
|
-
</span>
|
|
57
|
-
${e.description?n.b`<span class="pkt-listbox__option-description pkt-txt-14-light"
|
|
58
|
-
>${e.description}</span
|
|
59
|
-
>`:n.A}
|
|
60
|
-
</li>
|
|
61
|
-
`)}
|
|
62
|
-
`}renderNewOptionBanner(){return this.allowUserInput&&this.customUserInput?n.b`
|
|
63
|
-
<div
|
|
64
|
-
class="pkt-listbox__banner pkt-listbox__banner--new-option pkt-listbox__option"
|
|
65
|
-
data-type="new-option"
|
|
66
|
-
data-value=${this.customUserInput}
|
|
67
|
-
data-selected="false"
|
|
68
|
-
tabindex="0"
|
|
69
|
-
@click=${()=>this.toggleOption({value:this.customUserInput||""})}
|
|
70
|
-
@keydown=${this.handleOptionKeydown}
|
|
71
|
-
>
|
|
72
|
-
<pkt-icon class="pkt-listbox__banner-icon" name="plus-sign" size="large"></pkt-icon>
|
|
73
|
-
Legg til "${this.customUserInput}"
|
|
74
|
-
</div>
|
|
75
|
-
`:n.A}renderMaximumReachedBanner(){return this._selectedOptions=this.options.filter(e=>e.selected).length,this.isMultiSelect&&this._selectedOptions>0&&this.maxLength>0?n.b`
|
|
76
|
-
<div class="pkt-listbox__banner pkt-listbox__banner--maximum-reached">
|
|
77
|
-
${this._selectedOptions} av maks ${this.maxLength} mulige er valgt.
|
|
78
|
-
</div>
|
|
79
|
-
`:n.A}renderUserMessage(){return this.userMessage?n.b`<div class="pkt-listbox__banner pkt-listbox__banner--user-message">
|
|
80
|
-
<pkt-icon
|
|
81
|
-
class="pkt-listbox__banner-icon"
|
|
82
|
-
name="exclamation-mark-circle"
|
|
83
|
-
size="large"
|
|
84
|
-
></pkt-icon>
|
|
85
|
-
${this.userMessage}
|
|
86
|
-
</div>`:n.A}renderSearch(){return this.includeSearch?n.b`
|
|
87
|
-
<div class="pkt-listbox__search">
|
|
88
|
-
<span class="pkt-listbox__search-icon">
|
|
89
|
-
<pkt-icon name="magnifying-glass-small" size="large"></pkt-icon>
|
|
90
|
-
</span>
|
|
91
|
-
<input
|
|
92
|
-
class="pkt-txt-16-light"
|
|
93
|
-
type="text"
|
|
94
|
-
aria-label="Søk i listen"
|
|
95
|
-
form=""
|
|
96
|
-
placeholder=${this.searchPlaceholder||n.strings.forms.search.placeholder}
|
|
97
|
-
@input=${this.handleSearchInput}
|
|
98
|
-
@keydown=${this.handleSearchKeydown}
|
|
99
|
-
.value=${this.searchValue}
|
|
100
|
-
data-type="searchbox"
|
|
101
|
-
?disabled=${this.disabled}
|
|
102
|
-
?readonly=${this.disabled}
|
|
103
|
-
role="searchbox"
|
|
104
|
-
/>
|
|
105
|
-
</div>
|
|
106
|
-
`:n.A}handleSearchInput(e){this.searchValue=e.target.value,this.dispatchEvent(new CustomEvent("search",{detail:this.searchValue,bubbles:!1}))}handleSearchKeydown(e){switch(e.key){case"Enter":e.preventDefault();break;case"ArrowUp":case"Escape":this.closeOptions(),e.preventDefault();break;case"ArrowDown":this.focusFirstOrSelectedOption();break;case"Tab":this.tabClose();break}}handleOptionKeydown(e){const t=e.currentTarget,i=t.dataset.value,a=t.dataset.type,o=t.dataset.selected==="true";if(!(!h(this).length&&(!this.customUserInput||!this.allowUserInput&&this.customUserInput)&&a!=="new-option"&&a!=="searchbox"))switch(e.key){case" ":case"Enter":this.toggleOption(t),e.preventDefault();break;case"Backspace":i&&(o?this.toggleOption(t):this.closeOptions()),e.preventDefault();break;case"Escape":this.closeOptions(),e.preventDefault();break;case"Tab":this.tabClose();break;case"ArrowDown":e.altKey?x(this):a==="searchbox"||a==="new-option"?b(this):P(t),e.preventDefault();break;case"ArrowUp":if(e.altKey)b(this);else if(t.dataset.index==="0"&&this.includeSearch){const l=this.querySelector('[role="searchbox"]');l&&l.focus()}else if(t.dataset.index==="0"&&this.customUserInput){const l=this.querySelector('[data-type="new-option"]');l&&l.focus()}else E(t,this,this.includeSearch);e.preventDefault();break;case"Home":b(this),e.preventDefault();break;case"End":x(this),e.preventDefault();break;default:(e.metaKey||e.ctrlKey)&&e.key==="a"&&(this.selectAll(),e.preventDefault()),I(e.key)&&(this.handleTypeAhead(e.key),e.preventDefault());break}}focusFirstOrSelectedOption(){T(this,{disabled:this.disabled,allowUserInput:this.allowUserInput,customUserInput:this.customUserInput,includeSearch:this.includeSearch})}toggleOption(e){const t=e instanceof HTMLElement?e.dataset.disabled:e.disabled;if(this.disabled||t)return;const i=e instanceof HTMLElement?e.dataset.value:e.value;this.dispatchEvent(new CustomEvent("option-toggle",{detail:i,bubbles:!1}))}selectAll(){this.dispatchEvent(new CustomEvent("select-all",{bubbles:!1}))}closeOptions(){this.dispatchEvent(new CustomEvent("close-options",{bubbles:!1}))}tabClose(){this.dispatchEvent(new CustomEvent("tab-close",{bubbles:!1}))}filterOptions(){this._filteredOptions=_(this.options,this.searchValue)}handleTypeAhead(e){const t=this.typeahead.append(e),i=h(this),a=M(i,t);a>=0&&c(i[a])}};r([n.n({type:String})],exports.PktListbox.prototype,"id",2);r([n.n({type:String})],exports.PktListbox.prototype,"label",2);r([n.n({type:Array})],exports.PktListbox.prototype,"options",2);r([n.n({type:Boolean,reflect:!0,attribute:"is-open"})],exports.PktListbox.prototype,"isOpen",2);r([n.n({type:Boolean})],exports.PktListbox.prototype,"disabled",2);r([n.n({type:Boolean,attribute:"include-search"})],exports.PktListbox.prototype,"includeSearch",2);r([n.n({type:Boolean,attribute:"is-multi-select"})],exports.PktListbox.prototype,"isMultiSelect",2);r([n.n({type:Boolean,attribute:"allow-user-input"})],exports.PktListbox.prototype,"allowUserInput",2);r([n.n({type:Boolean,attribute:"max-is-reached"})],exports.PktListbox.prototype,"maxIsReached",2);r([n.n({type:String,attribute:"custom-user-input"})],exports.PktListbox.prototype,"customUserInput",2);r([n.n({type:String,attribute:"search-placeholder"})],exports.PktListbox.prototype,"searchPlaceholder",2);r([n.n({type:String,attribute:"search-value"})],exports.PktListbox.prototype,"searchValue",2);r([n.n({type:Number,attribute:"max-length"})],exports.PktListbox.prototype,"maxLength",2);r([n.n({type:String,attribute:"user-message"})],exports.PktListbox.prototype,"userMessage",2);r([g.r()],exports.PktListbox.prototype,"_filteredOptions",2);exports.PktListbox=r([n.t("pkt-listbox")],exports.PktListbox);exports.buildFulltext=w;exports.findOptionByValue=v;exports.findOptionIndex=O;exports.findTypeaheadMatches=L;exports.getSearchInfoMessage=S;exports.isMaxSelectionReached=$;
|
package/dist/loader-e2gs_1xz.cjs
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
"use strict";const d=require("./element-with-slot-ZX-up7jO.cjs"),p=require("./class-map-CsENJXf1.cjs"),t=require("./element-gR_VtSiD.cjs"),h=require("./state-Dg-53wQ8.cjs");require("./icon-Bqj9oBbl.cjs");var u=Object.defineProperty,c=Object.getOwnPropertyDescriptor,s=(r,e,a,o)=>{for(var i=o>1?void 0:o?c(e,a):e,n=r.length-1,l;n>=0;n--)(l=r[n])&&(i=(o?l(e,a,i):l(i))||i);return o&&i&&u(e,a,i),i};window.pktAnimationPath=window.pktAnimationPath||"https://punkt-cdn.oslo.kommune.no/latest/animations/";exports.PktLoader=class extends d.PktElementWithSlot{constructor(){super(...arguments),this.delay=0,this.inline=!1,this.isLoading=!0,this.message=null,this.size="medium",this.variant="shapes",this.loadingAnimationPath=window.pktAnimationPath,this._shouldDisplayLoader=!1}connectedCallback(){super.connectedCallback(),this._shouldDisplayLoader=this.delay===0,this.delay>0&&this.setupLoader()}updated(e){e.has("delay")&&this.setupLoader()}render(){const e=p.e({"pkt-loader":!0,[`pkt-loader--${this.inline?"inline":"box"}`]:!0,[`pkt-loader--${this.size}`]:!0}),a=p.e({"pkt-contents":!0,"pkt-hide":this.isLoading});return t.b`<div
|
|
2
|
-
role="status"
|
|
3
|
-
aria-live="polite"
|
|
4
|
-
aria-busy=${this.isLoading?"true":"false"}
|
|
5
|
-
class=${e}
|
|
6
|
-
>
|
|
7
|
-
${this.isLoading&&this._shouldDisplayLoader?t.b`<div class="pkt-loader__spinner">
|
|
8
|
-
<pkt-icon
|
|
9
|
-
name=${this.getVariant(this.variant)}
|
|
10
|
-
path=${this.loadingAnimationPath}
|
|
11
|
-
class="pkt-loader__svg pkt-loader__${this.variant}"
|
|
12
|
-
></pkt-icon>
|
|
13
|
-
${this.message&&t.b`<p>${this.message}</p>`}
|
|
14
|
-
</div>`:t.A}
|
|
15
|
-
<div class=${a}>${d.slotContent(this)}</div>
|
|
16
|
-
</div>`}getVariant(e){switch(e){case"blue":return"spinner-blue";case"rainbow":return"spinner";default:return"loader"}}setupLoader(){this.delay>0&&(this._shouldDisplayLoader=!1,setTimeout(()=>{this._shouldDisplayLoader=!0,this.requestUpdate()},this.delay))}};s([t.n({type:Number})],exports.PktLoader.prototype,"delay",2);s([t.n({type:Boolean})],exports.PktLoader.prototype,"inline",2);s([t.n({type:Boolean})],exports.PktLoader.prototype,"isLoading",2);s([t.n({type:String})],exports.PktLoader.prototype,"message",2);s([t.n({type:String})],exports.PktLoader.prototype,"size",2);s([t.n({type:String})],exports.PktLoader.prototype,"variant",2);s([t.n({type:String})],exports.PktLoader.prototype,"loadingAnimationPath",2);s([h.r()],exports.PktLoader.prototype,"_shouldDisplayLoader",2);exports.PktLoader=s([t.t("pkt-loader")],exports.PktLoader);
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import { P as d, s as m } from "./element-with-slot-Dqk6-TRR.js";
|
|
2
|
-
import { A as u, b as n, n as p, t as h } from "./element-CPpT3rFQ.js";
|
|
3
|
-
import { e as f } from "./class-map-CEnykyO_.js";
|
|
4
|
-
import { r as k } from "./state-C_1EOo3D.js";
|
|
5
|
-
import "./icon-BlKA8YuW.js";
|
|
6
|
-
import { u as _ } from "./classutils-RQs1k6D9.js";
|
|
7
|
-
const v = { skin: { default: "beige" }, compact: { default: !1 }, closable: { default: !1 } }, b = {
|
|
8
|
-
props: v
|
|
9
|
-
};
|
|
10
|
-
var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (t, i, a, l) => {
|
|
11
|
-
for (var s = l > 1 ? void 0 : l ? x(i, a) : i, r = t.length - 1, c; r >= 0; r--)
|
|
12
|
-
(c = t[r]) && (s = (l ? c(i, a, s) : c(s)) || s);
|
|
13
|
-
return l && s && g(i, a, s), s;
|
|
14
|
-
};
|
|
15
|
-
let e = class extends d {
|
|
16
|
-
constructor() {
|
|
17
|
-
super(), this.closable = b.props.closable.default, this.compact = b.props.compact.default, this.title = "", this.skin = b.props.skin.default, this._isClosed = !1, this.close = (t) => {
|
|
18
|
-
this._isClosed = !0, this.dispatchEvent(new CustomEvent("close", { detail: { origin: t }, bubbles: !0 })), this.dispatchEvent(new CustomEvent("on-close", { detail: { origin: t }, bubbles: !0 }));
|
|
19
|
-
}, this._isClosed = !1;
|
|
20
|
-
}
|
|
21
|
-
// Lifecycle
|
|
22
|
-
updated(t) {
|
|
23
|
-
super.updated(t), t.has("_isClosed") && _(this, "pkt-hide", this._isClosed);
|
|
24
|
-
}
|
|
25
|
-
// Render
|
|
26
|
-
render() {
|
|
27
|
-
const t = {
|
|
28
|
-
"pkt-messagebox": !0,
|
|
29
|
-
"pkt-messagebox--compact": this.compact,
|
|
30
|
-
[`pkt-messagebox--${this.skin}`]: this.skin,
|
|
31
|
-
"pkt-messagebox--closable": this.closable,
|
|
32
|
-
"pkt-hide": this._isClosed
|
|
33
|
-
};
|
|
34
|
-
return n`<div class=${f(t)}>
|
|
35
|
-
${this.closable ? n`<div class="pkt-messagebox__close">
|
|
36
|
-
<button
|
|
37
|
-
@click=${this.close}
|
|
38
|
-
class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
|
|
39
|
-
aria-label="Lukk"
|
|
40
|
-
>
|
|
41
|
-
<pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
|
|
42
|
-
</button>
|
|
43
|
-
</div>` : u}
|
|
44
|
-
${this.title ? n`<div class="pkt-messagebox__title">${this.title}</div>` : u}
|
|
45
|
-
<div class="pkt-messagebox__text">${m(this)}</div>
|
|
46
|
-
</div>`;
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
|
-
o([
|
|
50
|
-
p({ type: Boolean, reflect: !0 })
|
|
51
|
-
], e.prototype, "closable", 2);
|
|
52
|
-
o([
|
|
53
|
-
p({ type: Boolean, reflect: !0 })
|
|
54
|
-
], e.prototype, "compact", 2);
|
|
55
|
-
o([
|
|
56
|
-
p({ type: String, reflect: !0 })
|
|
57
|
-
], e.prototype, "title", 2);
|
|
58
|
-
o([
|
|
59
|
-
p({ type: String, reflect: !0 })
|
|
60
|
-
], e.prototype, "skin", 2);
|
|
61
|
-
o([
|
|
62
|
-
k()
|
|
63
|
-
], e.prototype, "_isClosed", 2);
|
|
64
|
-
e = o([
|
|
65
|
-
h("pkt-messagebox")
|
|
66
|
-
], e);
|
|
67
|
-
export {
|
|
68
|
-
e as P
|
|
69
|
-
};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use strict";const n=require("./element-with-slot-ZX-up7jO.cjs"),e=require("./element-gR_VtSiD.cjs"),b=require("./class-map-CsENJXf1.cjs"),u=require("./state-Dg-53wQ8.cjs");require("./icon-Bqj9oBbl.cjs");const k=require("./classutils-BwNK82ZQ.cjs"),d={skin:{default:"beige"},compact:{default:!1},closable:{default:!1}},r={props:d};var h=Object.defineProperty,g=Object.getOwnPropertyDescriptor,o=(l,t,a,i)=>{for(var s=i>1?void 0:i?g(t,a):t,c=l.length-1,p;c>=0;c--)(p=l[c])&&(s=(i?p(t,a,s):p(s))||s);return i&&s&&h(t,a,s),s};exports.PktMessagebox=class extends n.PktElementWithSlot{constructor(){super(),this.closable=r.props.closable.default,this.compact=r.props.compact.default,this.title="",this.skin=r.props.skin.default,this._isClosed=!1,this.close=t=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:t},bubbles:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:t},bubbles:!0}))},this._isClosed=!1}updated(t){super.updated(t),t.has("_isClosed")&&k.updateClassAttribute(this,"pkt-hide",this._isClosed)}render(){const t={"pkt-messagebox":!0,"pkt-messagebox--compact":this.compact,[`pkt-messagebox--${this.skin}`]:this.skin,"pkt-messagebox--closable":this.closable,"pkt-hide":this._isClosed};return e.b`<div class=${b.e(t)}>
|
|
2
|
-
${this.closable?e.b`<div class="pkt-messagebox__close">
|
|
3
|
-
<button
|
|
4
|
-
@click=${this.close}
|
|
5
|
-
class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
|
|
6
|
-
aria-label="Lukk"
|
|
7
|
-
>
|
|
8
|
-
<pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
|
|
9
|
-
</button>
|
|
10
|
-
</div>`:e.A}
|
|
11
|
-
${this.title?e.b`<div class="pkt-messagebox__title">${this.title}</div>`:e.A}
|
|
12
|
-
<div class="pkt-messagebox__text">${n.slotContent(this)}</div>
|
|
13
|
-
</div>`}};o([e.n({type:Boolean,reflect:!0})],exports.PktMessagebox.prototype,"closable",2);o([e.n({type:Boolean,reflect:!0})],exports.PktMessagebox.prototype,"compact",2);o([e.n({type:String,reflect:!0})],exports.PktMessagebox.prototype,"title",2);o([e.n({type:String,reflect:!0})],exports.PktMessagebox.prototype,"skin",2);o([u.r()],exports.PktMessagebox.prototype,"_isClosed",2);exports.PktMessagebox=o([e.t("pkt-messagebox")],exports.PktMessagebox);
|
package/dist/modal-CyvEkbfQ.cjs
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
"use strict";const d=require("./class-map-CsENJXf1.cjs"),o=require("./element-gR_VtSiD.cjs"),u=require("./state-Dg-53wQ8.cjs"),p=require("./element-with-slot-ZX-up7jO.cjs"),h=require("./ref-CL-Xk9Xm.cjs");require("./icon-Bqj9oBbl.cjs");const k={hideCloseButton:{default:!1},closeOnBackdropClick:{default:!1},size:{default:"medium"}},c={props:k};var m=Object.defineProperty,v=Object.getOwnPropertyDescriptor,n=(r,e,t,i)=>{for(var s=i>1?void 0:i?v(e,t):e,l=r.length-1,a;l>=0;l--)(a=r[l])&&(s=(i?a(e,t,s):a(s))||s);return i&&s&&m(e,t,s),s};exports.PktModal=class extends p.PktElementWithSlot{constructor(){super(),this.open=!1,this.headingText="",this.removePadding=!1,this.hideCloseButton=c.props.hideCloseButton.default,this.closeOnBackdropClick=c.props.closeOnBackdropClick.default,this.closeButtonSkin="blue",this.size=c.props.size.default,this.variant="dialog",this.drawerPosition="right",this.transparentBackdrop=!1,this.dialogRef=h.e(),this._isOpen=!1,this.close=(e,t=!1)=>{var s;if(!this._isOpen)return;this._isOpen=!1,this.open=!1,document.body.classList.remove("pkt-modal--open");const i=document.activeElement;i&&!this.isElementInViewport(i)&&i.scrollIntoView({behavior:"smooth",block:"nearest"}),this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),t||(s=this.dialogRef.value)==null||s.close(),this.requestUpdate()},this.showModal=(e=null)=>{var t;this._isOpen=!0,this.open=!0,(t=this.dialogRef.value)==null||t.showModal(),document.body.classList.add("pkt-modal--open"),this.dispatchEvent(new CustomEvent("showModal",{detail:{origin:e},bubbles:!0,composed:!0})),this.requestUpdate()},this._isOpen=!1}async connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.handleKeyDown.bind(this)),document.addEventListener("click",this.handleBackdropClick.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("click",this.handleBackdropClick)}updated(e){super.updated(e),e.has("open")&&(this.open&&!this._isOpen?this.showModal():!this.open&&this._isOpen&&this.close(new Event("close"),!1))}async firstUpdated(e){super.firstUpdated(e),this.dialogRef.value&&!window.HTMLDialogElement&&!this.dialogRef.value.showModal&&("document"in window&&"createElement"in document&&(await Promise.resolve().then(()=>require("./dialog-polyfill.esm-CPKZe7AL.cjs")).then(i=>i.default)).registerDialog(this.dialogRef.value),this.dialogRef.value.addEventListener("close",()=>{this.close(new Event("close"),!0)}))}handleKeyDown(e){e.key==="Escape"&&this.close(e)}handleBackdropClick(e){var t;this.closeOnBackdropClick&&e.target===((t=this.dialogRef)==null?void 0:t.value)&&this.close(e)}isElementInViewport(e){const t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}render(){const e={"pkt-modal":!0,"pkt-modal--removePadding":this.removePadding??!1,"pkt-modal--noHeadingText":this.headingText===""||this.headingText===void 0,"pkt-modal--noShadow":this.closeButtonSkin==="yellow-filled","pkt-modal--transparentBackdrop":this.transparentBackdrop??!1,[`pkt-modal--${this.size}`]:this.size!==void 0,[`pkt-modal__${this.variant}`]:this.variant!==void 0,[`pkt-modal__drawer--${this.drawerPosition}`]:this.variant==="drawer"},t={"pkt-modal__headingText":!0,"pkt-txt-24":!0},i={"pkt-modal__content":!0,"pkt-txt-18-light":!0},s=this.closeButtonSkin==="blue",l={"pkt-modal__closeButton":!0,[`pkt-modal__closeButton--${this.closeButtonSkin}`]:!0};return o.b`
|
|
2
|
-
<dialog
|
|
3
|
-
class=${d.e(e)}
|
|
4
|
-
${h.n(this.dialogRef)}
|
|
5
|
-
aria-labelledby=${this.headingText?"pkt-modal__headingText":o.A}
|
|
6
|
-
aria-describedby="pkt-modal__content"
|
|
7
|
-
@close=${a=>this.close(a,!0)}
|
|
8
|
-
>
|
|
9
|
-
<div class="pkt-modal__wrapper">
|
|
10
|
-
${this.headingText||!this.hideCloseButton?o.b`<div class="pkt-modal__header">
|
|
11
|
-
<div class="pkt-modal__header-background"></div>
|
|
12
|
-
${this.headingText?o.b`<h1 id="pkt-modal__headingText" class=${d.e(t)}>
|
|
13
|
-
${this.headingText}
|
|
14
|
-
</h1>`:o.b`<div class="pkt-modal__headingText"></div>`}
|
|
15
|
-
${this.hideCloseButton?o.b`<div class="pkt-modal__noCloseButton"></div>`:o.b`<div class="${d.e(l)}">
|
|
16
|
-
<pkt-button
|
|
17
|
-
@click=${a=>this.close(a)}
|
|
18
|
-
aria-label="close"
|
|
19
|
-
iconname="close"
|
|
20
|
-
variant="icon-only"
|
|
21
|
-
size="medium"
|
|
22
|
-
skin=${s?"tertiary":"primary"}
|
|
23
|
-
>
|
|
24
|
-
Lukk
|
|
25
|
-
</pkt-button>
|
|
26
|
-
</div>`}
|
|
27
|
-
</div>`:o.A}
|
|
28
|
-
<div class="pkt-modal__container">
|
|
29
|
-
<div
|
|
30
|
-
id="pkt-modal__content"
|
|
31
|
-
class=${d.e(i)}
|
|
32
|
-
>${p.slotContent(this)}</div>
|
|
33
|
-
</div>
|
|
34
|
-
</div>
|
|
35
|
-
</dialog>
|
|
36
|
-
`}};n([o.n({type:Boolean,reflect:!0})],exports.PktModal.prototype,"open",2);n([o.n({type:String})],exports.PktModal.prototype,"headingText",2);n([o.n({type:Boolean})],exports.PktModal.prototype,"removePadding",2);n([o.n({type:Boolean})],exports.PktModal.prototype,"hideCloseButton",2);n([o.n({type:Boolean})],exports.PktModal.prototype,"closeOnBackdropClick",2);n([o.n({type:String})],exports.PktModal.prototype,"closeButtonSkin",2);n([o.n({type:String})],exports.PktModal.prototype,"size",2);n([o.n({type:String})],exports.PktModal.prototype,"variant",2);n([o.n({type:String})],exports.PktModal.prototype,"drawerPosition",2);n([o.n({type:Boolean})],exports.PktModal.prototype,"transparentBackdrop",2);n([u.r()],exports.PktModal.prototype,"_isOpen",2);exports.PktModal=n([o.t("pkt-modal")],exports.PktModal);
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";const n=require("./class-map-CsENJXf1.cjs"),e=require("./element-gR_VtSiD.cjs"),p=require("./state-Dg-53wQ8.cjs"),h=require("./ref-CL-Xk9Xm.cjs"),b=require("./directive-C7oCP5Bh.cjs"),d=require("./utils-byXsEz1u.cjs");require("./icon-Bqj9oBbl.cjs");/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright 2018 Google LLC
|
|
4
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
|
-
*/const c="important",v=" !"+c,f=b.e(class extends b.i{constructor(l){var t;if(super(l),l.type!==b.t.ATTRIBUTE||l.name!=="style"||((t=l.strings)==null?void 0:t.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(l){return Object.keys(l).reduce((t,s)=>{const r=l[s];return r==null?t:t+`${s=s.includes("-")?s:s.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${r};`},"")}update(l,[t]){const{style:s}=l.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(t)),this.render(t);for(const r of this.ft)t[r]==null&&(this.ft.delete(r),r.includes("-")?s.removeProperty(r):s[r]=null);for(const r in t){const i=t[r];if(i!=null){this.ft.add(r);const u=typeof i=="string"&&i.endsWith(v);r.includes("-")||u?s.setProperty(r,u?i.slice(0,-11):i,u?c:""):s[r]=i}}return e.E}});var k=Object.defineProperty,m=Object.getOwnPropertyDescriptor,a=(l,t,s,r)=>{for(var i=r>1?void 0:r?m(t,s):t,u=l.length-1,o;u>=0;u--)(o=l[u])&&(i=(r?o(t,s,i):o(i))||i);return r&&i&&k(t,s,i),i};exports.PktProgressbar=class extends e.PktElement{constructor(){super(),this.ariaLabel=null,this.ariaLabelledby=null,this.ariaValueText=null,this.ariaLive="polite",this.id=d.uuidish(),this.role="progressbar",this.skin="dark-blue",this.statusPlacement="following",this.statusType="none",this.title="",this.titlePosition="left",this.valueCurrent=0,this.valueMax=100,this.valueMin=0,this.labelWidth=0,this.progressbarId=this.id,this.computedAriaLabelledby=null,this.computedAriaValueText="",this.labelRef=h.e(),this.progressBarRef=h.e()}firstUpdated(t){super.firstUpdated(t),this.setComputedValues(),this.syncAttributes()}updated(t){super.updated(t),t.has("valueCurrent")&&this.labelRef.value&&(this.labelWidth=this.labelRef.value.getBoundingClientRect().width||0),t.has("id")&&this.id&&(this.progressBarId=this.id),(t.has("statusType")||t.has("id")||t.has("ariaLabelledby"))&&(this.progressbarId=this.id||d.uuidish(),this.computedAriaLabelledby=this.ariaLabelledby||`${this.progressbarId}-title`),(t.has("ariaValueText")||t.has("valueCurrent")||t.has("valueMax"))&&(this.computedAriaValueText=this.statusType==="fraction"&&!this.ariaValueText?`${this.valueCurrent} av ${this.valueMax-this.valueMin}`:this.ariaValueText||""),this.syncAttributes()}render(){const t=this.statusType!=="none",s=this.valueMax-this.valueMin,r=this.valueCurrent/s*100,i=this.statusType==="fraction"?Math.round(r):Math.round((this.valueCurrent-this.valueMin)/(this.valueMax-this.valueMin)*100),u=`${this.valueCurrent} av ${s}`,o=n.e({"pkt-progressbar__bar":!0,[`pkt-progressbar__bar--${this.skin}`]:!!this.skin}),g=n.e({"pkt-progressbar__title":!0,"pkt-progressbar__title-center":this.titlePosition==="center"}),y=n.e({"pkt-progressbar__status":!0,"pkt-progressbar__status--center":this.statusPlacement==="center"}),P=n.e({"pkt-progressbar__status-placement--following":this.statusPlacement==="following","pkt-progressbar__status-placement--center":this.statusPlacement==="center","pkt-progressbar__status-placement--left":this.statusPlacement==="left"});return e.b` <div
|
|
6
|
-
class="pkt-progressbar__container"
|
|
7
|
-
.ref=${this.progressBarRef}
|
|
8
|
-
style=${f({"--pkt-progress-label-width":`${this.labelWidth}px`,"--pkt-progress-width":`${i}%`})}
|
|
9
|
-
>
|
|
10
|
-
${this.title?e.b`<p id=${`${this.progressBarId}-title`} class=${g}>${this.title}</p>`:e.A}
|
|
11
|
-
|
|
12
|
-
<div class="pkt-progressbar__bar-wrapper">
|
|
13
|
-
<div class=${o}></div>
|
|
14
|
-
</div>
|
|
15
|
-
|
|
16
|
-
${t?e.b`<div class=${y}>
|
|
17
|
-
<span class=${P} ${h.n(this.labelRef)}>
|
|
18
|
-
${this.statusType==="percentage"?`${i}%`:u}
|
|
19
|
-
</span>
|
|
20
|
-
</div>`:e.A}
|
|
21
|
-
</div>`}setComputedValues(){this.progressbarId=this.id||d.uuidish(),this.computedAriaLabelledby=this.ariaLabelledby||`${this.progressbarId}-title`,this.computedAriaValueText=this.statusType==="fraction"&&!this.ariaValueText?`${this.valueCurrent} av ${this.valueMax-this.valueMin}`:this.ariaValueText||""}syncAttributes(){this._handleAttribute("aria-live",this.ariaLive),this._handleAttribute("aria-valuenow",this.valueCurrent),this._handleAttribute("aria-valuemin",this.valueMin),this._handleAttribute("aria-valuemax",this.valueMax),this._handleAttribute("aria-valuetext",this.computedAriaValueText),this._handleAttribute("aria-label",this.ariaLabel),this._handleAttribute("role",this.role),this._handleAttribute("aria-atomic","true"),this._handleAttribute("id",this.progressbarId),this.ariaLabel||this._handleAttribute("aria-labelledby",this.computedAriaLabelledby)}_handleAttribute(t,s){s==null||s===""?this.removeAttribute(t):this.setAttribute(t,String(s))}};a([e.n({type:String})],exports.PktProgressbar.prototype,"ariaLabel",2);a([e.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"ariaLabelledby",2);a([e.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"ariaValueText",2);a([e.n({type:String})],exports.PktProgressbar.prototype,"ariaLive",2);a([e.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"id",2);a([e.n({type:String})],exports.PktProgressbar.prototype,"role",2);a([e.n({type:String})],exports.PktProgressbar.prototype,"skin",2);a([e.n({type:String})],exports.PktProgressbar.prototype,"statusPlacement",2);a([e.n({type:String})],exports.PktProgressbar.prototype,"statusType",2);a([e.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"title",2);a([e.n({type:String})],exports.PktProgressbar.prototype,"titlePosition",2);a([e.n({type:Number,reflect:!0})],exports.PktProgressbar.prototype,"valueCurrent",2);a([e.n({type:Number})],exports.PktProgressbar.prototype,"valueMax",2);a([e.n({type:Number})],exports.PktProgressbar.prototype,"valueMin",2);a([p.r()],exports.PktProgressbar.prototype,"labelWidth",2);a([p.r()],exports.PktProgressbar.prototype,"progressbarId",2);a([p.r()],exports.PktProgressbar.prototype,"computedAriaLabelledby",2);a([p.r()],exports.PktProgressbar.prototype,"computedAriaValueText",2);exports.PktProgressbar=a([e.t("pkt-progressbar")],exports.PktProgressbar);const _=exports.PktProgressbar;exports.PktProgressbar$1=_;
|