@oslokommune/punkt-elements 12.10.3 → 12.10.4
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.
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-De04fSKv.cjs"),c=require("./ref-B160Pg_6.cjs")
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-De04fSKv.cjs"),c=require("./ref-B160Pg_6.cjs"),$=require("./index-DrbmKLH4.cjs"),u=require("./class-map-BQ1sNo2I.cjs"),g=require("./directive-DtixNHDT.cjs"),s=require("./helptext-Bu-TJ41c.cjs");/**
|
|
2
2
|
* @license
|
|
3
3
|
* Copyright 2020 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
|
-
*/const I=Symbol.for(""),d=(
|
|
6
|
-
take care to ensure page security.`)})(i)+
|
|
5
|
+
*/const I=Symbol.for(""),d=(n,...a)=>({_$litStatic$:a.reduce((o,i,r)=>o+(p=>{if(p._$litStatic$!==void 0)return p._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${p}. Use 'unsafeStatic' to pass non-literal values, but
|
|
6
|
+
take care to ensure page security.`)})(i)+n[r+1],n[0]),r:I});var P=Object.defineProperty,w=Object.getOwnPropertyDescriptor,t=(n,a,o,i)=>{for(var r=i>1?void 0:i?w(a,o):a,p=n.length-1,l;p>=0;p--)(l=n[p])&&(r=(i?l(a,o,r):l(r))||r);return i&&r&&P(a,o,r),r};exports.PktInputWrapper=class extends e.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.forId=e.v4(),this.label=s.specs.props.label.default,this.helptext="",this.helptextDropdown="",this.helptextDropdownButton=s.specs.props.helptextDropdownButton.default,this.counter=s.specs.props.counter.default,this.counterCurrent=0,this.counterMaxLength=0,this.optionalTag=s.specs.props.optionalTag.default,this.optionalText=s.specs.props.optionalText.default,this.requiredTag=s.specs.props.requiredTag.default,this.requiredText=s.specs.props.requiredText.default,this.hasError=s.specs.props.hasError.default,this.errorMessage="",this.disabled=s.specs.props.disabled.default,this.inline=s.specs.props.inline.default,this.ariaDescribedby=void 0,this.hasFieldset=s.specs.props.hasFieldset.default,this.useWrapper=s.specs.props.useWrapper.default,this.wrapperType=this.useWrapper?d`fieldset`:this.hasDropdown?d`div`:d`label`,this.slotController=new c.PktSlotController(this,this.defaultSlot)}render(){const a={"pkt-inputwrapper":!0,"pkt-inputwrapper--error":this.hasError,"pkt-inputwrapper--disabled":this.disabled,"pkt-inputwrapper--inline":this.inline},o={"pkt-tag":!0,"pkt-tag--small":!0,"pkt-tag--thin-text":!0,"pkt-tag--blue-light":this.optionalTag,"pkt-tag--beige":!this.optionalTag&&this.requiredTag},i=this.helptextDropdown!=="",r={"pkt-inputwrapper__label":!0,"pkt-inputwrapper__fieldset":this.hasFieldset,"pkt-inputwrapper__legend":this.hasFieldset},p=this.ariaDescribedby?this.ariaDescribedby:this.helptext?`${this.forId}-helptext`:e.E,l=()=>this.optionalTag||this.requiredTag?e.x`<span class=${u.e(o)}
|
|
7
7
|
>${this.optionalTag?this.optionalText:this.requiredTag?this.requiredText:e.E}</span
|
|
8
8
|
>`:e.E,f=()=>this.useWrapper?this.hasFieldset?e.x`<legend class="pkt-inputwrapper__legend" id="${this.forId}-label">
|
|
9
|
-
${this.label} ${
|
|
10
|
-
</legend>`:i?e.x`<h2>${this.label} ${
|
|
9
|
+
${this.label} ${l()}
|
|
10
|
+
</legend>`:i?e.x`<h2>${this.label} ${l()}</h2>`:e.x`<span>${this.label} ${l()}</span>`:e.x`<label for="${this.forId}" class="pkt-sr-only" aria-describedby="${p}"
|
|
11
11
|
>${this.label}</label
|
|
12
12
|
>`,y=()=>this.useWrapper&&(this.helptext||this.helptextDropdown)?e.x`
|
|
13
13
|
<pkt-helptext
|
|
@@ -16,27 +16,28 @@
|
|
|
16
16
|
.helptextDropdown=${this.helptextDropdown}
|
|
17
17
|
.helptextDropdownButton=${this.helptextDropdownButton}
|
|
18
18
|
></pkt-helptext>
|
|
19
|
-
`:e.E,
|
|
19
|
+
`:e.E,b=()=>this.counter?e.x`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
|
|
20
20
|
${this.counterCurrent||0}
|
|
21
21
|
${this.counterMaxLength?`/${this.counterMaxLength}`:e.E}
|
|
22
|
-
</div>`:e.E,
|
|
22
|
+
</div>`:e.E,x=()=>this.hasError&&this.errorMessage?e.x`<div
|
|
23
23
|
class="pkt-alert pkt-alert--error pkt-alert--compact"
|
|
24
24
|
aria-live="assertive"
|
|
25
25
|
>
|
|
26
26
|
<pkt-icon name="alert-error" class="pkt-alert__icon"></pkt-icon>
|
|
27
|
-
<div class="pkt-alert__text">${
|
|
27
|
+
<div class="pkt-alert__text">${$.o(this.errorMessage)}</div>
|
|
28
28
|
</div>`:e.E,h=()=>e.x`
|
|
29
29
|
${f()} ${y()}
|
|
30
|
+
${i?e.x`<label for="${this.forId}" class="pkt-sr-only" aria-describedby="${p}"
|
|
31
|
+
>${this.label}</label
|
|
32
|
+
>`:e.E}
|
|
30
33
|
<div class="pkt-contents" ${c.n(this.defaultSlot)}></div>
|
|
31
|
-
${
|
|
34
|
+
${b()} ${x()}
|
|
32
35
|
`,k=()=>this.hasFieldset?e.x`<fieldset class=${u.e(r)} aria-describedby="${p}">
|
|
33
36
|
${h()}
|
|
34
|
-
</fieldset>`:i?e.x`<div class=${u.e(r)}
|
|
35
|
-
${h()}
|
|
36
|
-
</div>`:e.x`<label
|
|
37
|
+
</fieldset>`:i?e.x`<div class=${u.e(r)}>${h()}</div>`:e.x`<label
|
|
37
38
|
class=${u.e(r)}
|
|
38
39
|
for="${this.forId}"
|
|
39
40
|
aria-describedby="${p}"
|
|
40
41
|
>
|
|
41
42
|
${h()}
|
|
42
|
-
</label>`;return e.x`<div class=${u.e(
|
|
43
|
+
</label>`;return e.x`<div class=${u.e(a)}>${k()}</div> `}};t([e.n({type:String,reflect:!0})],exports.PktInputWrapper.prototype,"forId",2);t([e.n({type:String,reflect:!0})],exports.PktInputWrapper.prototype,"label",2);t([e.n({type:String,reflect:!0})],exports.PktInputWrapper.prototype,"helptext",2);t([e.n({type:String,reflect:!0})],exports.PktInputWrapper.prototype,"helptextDropdown",2);t([e.n({type:String,reflect:!0})],exports.PktInputWrapper.prototype,"helptextDropdownButton",2);t([e.n({type:Boolean,reflect:!0})],exports.PktInputWrapper.prototype,"counter",2);t([e.n({type:Number,reflect:!0})],exports.PktInputWrapper.prototype,"counterCurrent",2);t([e.n({type:Number,reflect:!0})],exports.PktInputWrapper.prototype,"counterMaxLength",2);t([e.n({type:Boolean,reflect:!0})],exports.PktInputWrapper.prototype,"optionalTag",2);t([e.n({type:String,reflect:!0})],exports.PktInputWrapper.prototype,"optionalText",2);t([e.n({type:Boolean,reflect:!0})],exports.PktInputWrapper.prototype,"requiredTag",2);t([e.n({type:String,reflect:!0})],exports.PktInputWrapper.prototype,"requiredText",2);t([e.n({type:Boolean,reflect:!0})],exports.PktInputWrapper.prototype,"hasError",2);t([e.n({type:String,reflect:!0})],exports.PktInputWrapper.prototype,"errorMessage",2);t([e.n({type:Boolean,reflect:!0})],exports.PktInputWrapper.prototype,"disabled",2);t([e.n({type:Boolean,reflect:!0})],exports.PktInputWrapper.prototype,"inline",2);t([e.n({type:String,reflect:!0})],exports.PktInputWrapper.prototype,"ariaDescribedby",2);t([e.n({type:Boolean,reflect:!0})],exports.PktInputWrapper.prototype,"hasFieldset",2);t([e.n({type:Boolean,reflect:!0})],exports.PktInputWrapper.prototype,"useWrapper",2);exports.PktInputWrapper=t([g.t("pkt-input-wrapper")],exports.PktInputWrapper);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { P as w, v as m, E as
|
|
1
|
+
import { P as w, v as m, E as u, x as p, n as r } from "./index-D9GOYh7D.js";
|
|
2
2
|
import { e as v, P as k, n as _ } from "./ref-D-cAUL_h.js";
|
|
3
3
|
import { o as T } from "./index-IixgwzHL.js";
|
|
4
4
|
import { e as c } from "./class-map-CZx7r-TQ.js";
|
|
@@ -9,41 +9,41 @@ import { s as o } from "./helptext-BI6RS6Vd.js";
|
|
|
9
9
|
* Copyright 2020 Google LLC
|
|
10
10
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
11
11
|
*/
|
|
12
|
-
const S = Symbol.for(""), y = (
|
|
12
|
+
const S = Symbol.for(""), y = (h, ...n) => ({ _$litStatic$: n.reduce((a, l, s) => a + ((i) => {
|
|
13
13
|
if (i._$litStatic$ !== void 0) return i._$litStatic$;
|
|
14
14
|
throw Error(`Value passed to 'literal' function must be a 'literal' result: ${i}. Use 'unsafeStatic' to pass non-literal values, but
|
|
15
15
|
take care to ensure page security.`);
|
|
16
|
-
})(l) +
|
|
17
|
-
var B = Object.defineProperty, E = Object.getOwnPropertyDescriptor, e = (
|
|
18
|
-
for (var s = l > 1 ? void 0 : l ? E(
|
|
19
|
-
(d =
|
|
20
|
-
return l && s && B(
|
|
16
|
+
})(l) + h[s + 1], h[0]), r: S });
|
|
17
|
+
var B = Object.defineProperty, E = Object.getOwnPropertyDescriptor, e = (h, n, a, l) => {
|
|
18
|
+
for (var s = l > 1 ? void 0 : l ? E(n, a) : n, i = h.length - 1, d; i >= 0; i--)
|
|
19
|
+
(d = h[i]) && (s = (l ? d(n, a, s) : d(s)) || s);
|
|
20
|
+
return l && s && B(n, a, s), s;
|
|
21
21
|
};
|
|
22
22
|
let t = class extends w {
|
|
23
23
|
constructor() {
|
|
24
24
|
super(), this.defaultSlot = v(), this.forId = m(), this.label = o.props.label.default, this.helptext = "", this.helptextDropdown = "", this.helptextDropdownButton = o.props.helptextDropdownButton.default, this.counter = o.props.counter.default, this.counterCurrent = 0, this.counterMaxLength = 0, this.optionalTag = o.props.optionalTag.default, this.optionalText = o.props.optionalText.default, this.requiredTag = o.props.requiredTag.default, this.requiredText = o.props.requiredText.default, this.hasError = o.props.hasError.default, this.errorMessage = "", this.disabled = o.props.disabled.default, this.inline = o.props.inline.default, this.ariaDescribedby = void 0, this.hasFieldset = o.props.hasFieldset.default, this.useWrapper = o.props.useWrapper.default, this.wrapperType = this.useWrapper ? y`fieldset` : this.hasDropdown ? y`div` : y`label`, this.slotController = new k(this, this.defaultSlot);
|
|
25
25
|
}
|
|
26
26
|
render() {
|
|
27
|
-
const
|
|
27
|
+
const h = {
|
|
28
28
|
"pkt-inputwrapper": !0,
|
|
29
29
|
"pkt-inputwrapper--error": this.hasError,
|
|
30
30
|
"pkt-inputwrapper--disabled": this.disabled,
|
|
31
31
|
"pkt-inputwrapper--inline": this.inline
|
|
32
|
-
},
|
|
32
|
+
}, n = {
|
|
33
33
|
"pkt-tag": !0,
|
|
34
34
|
"pkt-tag--small": !0,
|
|
35
35
|
"pkt-tag--thin-text": !0,
|
|
36
36
|
"pkt-tag--blue-light": this.optionalTag,
|
|
37
37
|
"pkt-tag--beige": !this.optionalTag && this.requiredTag
|
|
38
|
-
},
|
|
38
|
+
}, a = this.helptextDropdown !== "", l = {
|
|
39
39
|
"pkt-inputwrapper__label": !0,
|
|
40
40
|
"pkt-inputwrapper__fieldset": this.hasFieldset,
|
|
41
41
|
"pkt-inputwrapper__legend": this.hasFieldset
|
|
42
|
-
}, s = this.ariaDescribedby ? this.ariaDescribedby : this.helptext ? `${this.forId}-helptext` :
|
|
43
|
-
>${this.optionalTag ? this.optionalText : this.requiredTag ? this.requiredText :
|
|
44
|
-
>` :
|
|
42
|
+
}, s = this.ariaDescribedby ? this.ariaDescribedby : this.helptext ? `${this.forId}-helptext` : u, i = () => this.optionalTag || this.requiredTag ? p`<span class=${c(n)}
|
|
43
|
+
>${this.optionalTag ? this.optionalText : this.requiredTag ? this.requiredText : u}</span
|
|
44
|
+
>` : u, d = () => this.useWrapper ? this.hasFieldset ? p`<legend class="pkt-inputwrapper__legend" id="${this.forId}-label">
|
|
45
45
|
${this.label} ${i()}
|
|
46
|
-
</legend>` :
|
|
46
|
+
</legend>` : a ? p`<h2>${this.label} ${i()}</h2>` : p`<span>${this.label} ${i()}</span>` : p`<label for="${this.forId}" class="pkt-sr-only" aria-describedby="${s}"
|
|
47
47
|
>${this.label}</label
|
|
48
48
|
>`, $ = () => this.useWrapper && (this.helptext || this.helptextDropdown) ? p`
|
|
49
49
|
<pkt-helptext
|
|
@@ -52,31 +52,32 @@ let t = class extends w {
|
|
|
52
52
|
.helptextDropdown=${this.helptextDropdown}
|
|
53
53
|
.helptextDropdownButton=${this.helptextDropdownButton}
|
|
54
54
|
></pkt-helptext>
|
|
55
|
-
` :
|
|
55
|
+
` : u, b = () => this.counter ? p`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
|
|
56
56
|
${this.counterCurrent || 0}
|
|
57
|
-
${this.counterMaxLength ? `/${this.counterMaxLength}` :
|
|
58
|
-
</div>` :
|
|
57
|
+
${this.counterMaxLength ? `/${this.counterMaxLength}` : u}
|
|
58
|
+
</div>` : u, g = () => this.hasError && this.errorMessage ? p`<div
|
|
59
59
|
class="pkt-alert pkt-alert--error pkt-alert--compact"
|
|
60
60
|
aria-live="assertive"
|
|
61
61
|
>
|
|
62
62
|
<pkt-icon name="alert-error" class="pkt-alert__icon"></pkt-icon>
|
|
63
63
|
<div class="pkt-alert__text">${T(this.errorMessage)}</div>
|
|
64
|
-
</div>` :
|
|
64
|
+
</div>` : u, f = () => p`
|
|
65
65
|
${d()} ${$()}
|
|
66
|
+
${a ? p`<label for="${this.forId}" class="pkt-sr-only" aria-describedby="${s}"
|
|
67
|
+
>${this.label}</label
|
|
68
|
+
>` : u}
|
|
66
69
|
<div class="pkt-contents" ${_(this.defaultSlot)}></div>
|
|
67
70
|
${b()} ${g()}
|
|
68
71
|
`, x = () => this.hasFieldset ? p`<fieldset class=${c(l)} aria-describedby="${s}">
|
|
69
72
|
${f()}
|
|
70
|
-
</fieldset>` :
|
|
71
|
-
${f()}
|
|
72
|
-
</div>` : p`<label
|
|
73
|
+
</fieldset>` : a ? p`<div class=${c(l)}>${f()}</div>` : p`<label
|
|
73
74
|
class=${c(l)}
|
|
74
75
|
for="${this.forId}"
|
|
75
76
|
aria-describedby="${s}"
|
|
76
77
|
>
|
|
77
78
|
${f()}
|
|
78
79
|
</label>`;
|
|
79
|
-
return p`<div class=${c(
|
|
80
|
+
return p`<div class=${c(h)}>${x()}</div> `;
|
|
80
81
|
}
|
|
81
82
|
};
|
|
82
83
|
e([
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-elements",
|
|
3
|
-
"version": "12.10.
|
|
3
|
+
"version": "12.10.4",
|
|
4
4
|
"description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
|
|
5
5
|
"homepage": "https://punkt.oslo.kommune.no",
|
|
6
6
|
"author": "Team Designsystem, Oslo Origo",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"url": "https://github.com/oslokommune/punkt/issues"
|
|
56
56
|
},
|
|
57
57
|
"license": "MIT",
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "42ad406e1aa266fc5ac7660545f337c149d463e6"
|
|
59
59
|
}
|
|
@@ -191,6 +191,11 @@ export class PktInputWrapper extends PktElement {
|
|
|
191
191
|
const inputContent = () => {
|
|
192
192
|
return html`
|
|
193
193
|
${labelElement()} ${helptextElement()}
|
|
194
|
+
${hasDropdown
|
|
195
|
+
? html`<label for="${this.forId}" class="pkt-sr-only" aria-describedby="${describedBy}"
|
|
196
|
+
>${this.label}</label
|
|
197
|
+
>`
|
|
198
|
+
: nothing}
|
|
194
199
|
<div class="pkt-contents" ${ref(this.defaultSlot)}></div>
|
|
195
200
|
${counterElement()} ${errorElement()}
|
|
196
201
|
`
|
|
@@ -202,9 +207,7 @@ export class PktInputWrapper extends PktElement {
|
|
|
202
207
|
${inputContent()}
|
|
203
208
|
</fieldset>`
|
|
204
209
|
: hasDropdown
|
|
205
|
-
? html`<div class=${classMap(wrapperClasses)}
|
|
206
|
-
${inputContent()}
|
|
207
|
-
</div>`
|
|
210
|
+
? html`<div class=${classMap(wrapperClasses)}>${inputContent()}</div>`
|
|
208
211
|
: html`<label
|
|
209
212
|
class=${classMap(wrapperClasses)}
|
|
210
213
|
for="${this.forId}"
|