@oslokommune/punkt-elements 12.9.0 → 12.10.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/dist/helptext-BHjN4gSm.js +191 -0
- package/dist/helptext-DIV6QSay.cjs +21 -0
- package/dist/helptext.d.ts +1 -0
- package/dist/index.d.ts +10 -1
- package/dist/pkt-helptext.cjs +1 -0
- package/dist/pkt-helptext.js +6 -0
- package/dist/pkt-index.cjs +1 -1
- package/dist/pkt-index.js +18 -16
- package/dist/pkt-input-wrapper.cjs +28 -45
- package/dist/pkt-input-wrapper.js +89 -238
- package/package.json +2 -2
- package/src/components/helptext/helptext.ts +81 -0
- package/src/components/helptext/index.ts +4 -0
- package/src/components/index.ts +1 -0
- package/src/components/input-wrapper/index.ts +10 -51
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
import { r as k, P as h, v as c, x as l, n as o, E as u } from "./index-CF6_-ZoF.js";
|
|
2
|
+
import { o as f } from "./index-B-KXmo65.js";
|
|
3
|
+
import { e as m } from "./class-map-luGhSuLj.js";
|
|
4
|
+
import { t as x } from "./directive-Cxhakbpr.js";
|
|
5
|
+
const v = "pkt-inputwrapper", g = {
|
|
6
|
+
toggleHelpText: {
|
|
7
|
+
description: "Event for å vise eller skjule hjelpetekst i dropdown"
|
|
8
|
+
}
|
|
9
|
+
}, b = {
|
|
10
|
+
forId: {
|
|
11
|
+
name: "For ID",
|
|
12
|
+
description: "Id-en til inputfeltet som dette wrapper rundt",
|
|
13
|
+
type: "string",
|
|
14
|
+
required: !0
|
|
15
|
+
},
|
|
16
|
+
label: {
|
|
17
|
+
name: "Merkelapp",
|
|
18
|
+
description: "Merkelapp for inputfeltet",
|
|
19
|
+
type: "boolean",
|
|
20
|
+
required: !0,
|
|
21
|
+
default: "input"
|
|
22
|
+
},
|
|
23
|
+
helptext: {
|
|
24
|
+
name: "Hjelpetekst",
|
|
25
|
+
description: "Hjelpetekst for inputfeltet",
|
|
26
|
+
type: "string"
|
|
27
|
+
},
|
|
28
|
+
helptextDropdown: {
|
|
29
|
+
name: "Hjelpetekst i dropdown",
|
|
30
|
+
description: "Hjelpetekst som vises i ekspanderende felt",
|
|
31
|
+
type: "string"
|
|
32
|
+
},
|
|
33
|
+
helptextDropdownButton: {
|
|
34
|
+
name: "Tekst i hjelpetekst-knapp",
|
|
35
|
+
description: "Tekst som vises i knappen for å vise hjelpetekst i dropdown",
|
|
36
|
+
default: "Les mer <span class='pkt-sr-only'>om feltet</span>",
|
|
37
|
+
type: "string"
|
|
38
|
+
},
|
|
39
|
+
counter: {
|
|
40
|
+
name: "Teller",
|
|
41
|
+
description: "Teller for antall tegn i inputfeltet",
|
|
42
|
+
type: "boolean",
|
|
43
|
+
default: !1
|
|
44
|
+
},
|
|
45
|
+
counterCurrent: {
|
|
46
|
+
name: "Tellerverdi",
|
|
47
|
+
description: "Tellerens nåværende verdi",
|
|
48
|
+
type: "number"
|
|
49
|
+
},
|
|
50
|
+
counterMaxLength: {
|
|
51
|
+
name: "Maks tegn",
|
|
52
|
+
description: "Maks antall tegn som kan skrives i inputfeltet",
|
|
53
|
+
type: "number"
|
|
54
|
+
},
|
|
55
|
+
optionalTag: {
|
|
56
|
+
name: "Vise valgfritt-merking",
|
|
57
|
+
description: "Viser en merking som indikerer at feltet er valgfritt",
|
|
58
|
+
type: "boolean",
|
|
59
|
+
default: !1
|
|
60
|
+
},
|
|
61
|
+
optionalText: {
|
|
62
|
+
name: "Valgfritt-tekst",
|
|
63
|
+
description: "Tekst som vises i valgfritt-merkingen",
|
|
64
|
+
type: "string",
|
|
65
|
+
default: "Valgfritt"
|
|
66
|
+
},
|
|
67
|
+
requiredTag: {
|
|
68
|
+
name: "Vise påkrevd-merking",
|
|
69
|
+
description: "Viser en merking som indikerer at feltet er påkrevd",
|
|
70
|
+
type: "boolean",
|
|
71
|
+
default: !1
|
|
72
|
+
},
|
|
73
|
+
requiredText: {
|
|
74
|
+
name: "Påkrevd-tekst",
|
|
75
|
+
description: "Tekst som vises i påkrevd-merkingen",
|
|
76
|
+
type: "string",
|
|
77
|
+
default: "Må fylles ut"
|
|
78
|
+
},
|
|
79
|
+
hasError: {
|
|
80
|
+
name: "Feil",
|
|
81
|
+
description: "Indikerer at inputfeltet har en feil",
|
|
82
|
+
type: "boolean",
|
|
83
|
+
default: !1
|
|
84
|
+
},
|
|
85
|
+
errorMessage: {
|
|
86
|
+
name: "Feilmelding",
|
|
87
|
+
description: "Feilmelding som vises i tilknytning til inputfeltet",
|
|
88
|
+
type: "string"
|
|
89
|
+
},
|
|
90
|
+
disabled: {
|
|
91
|
+
name: "Deaktivert",
|
|
92
|
+
description: "Indikerer at inputfeltet er deaktivert",
|
|
93
|
+
type: "boolean",
|
|
94
|
+
default: !1
|
|
95
|
+
},
|
|
96
|
+
inline: {
|
|
97
|
+
name: "Inline",
|
|
98
|
+
description: "Indikerer at inputfeltet skal flyte sammen med sidens innhold",
|
|
99
|
+
type: "boolean",
|
|
100
|
+
default: !1
|
|
101
|
+
},
|
|
102
|
+
ariaDescribedby: {
|
|
103
|
+
name: "aria-describedby",
|
|
104
|
+
description: "Id-en til elementet som beskriver inputfeltet",
|
|
105
|
+
type: "string"
|
|
106
|
+
},
|
|
107
|
+
hasFieldset: {
|
|
108
|
+
name: "Har fieldset",
|
|
109
|
+
description: "Indikerer at inputfeltet er en del av et fieldset",
|
|
110
|
+
type: "boolean",
|
|
111
|
+
default: !1
|
|
112
|
+
},
|
|
113
|
+
useWrapper: {
|
|
114
|
+
name: "Bruk wrapper",
|
|
115
|
+
description: "Indikerer om inputfeltet skal bruke en wrapper",
|
|
116
|
+
type: "boolean",
|
|
117
|
+
default: !0
|
|
118
|
+
}
|
|
119
|
+
}, y = {
|
|
120
|
+
name: v,
|
|
121
|
+
"css-class": "pkt-inputwrapper",
|
|
122
|
+
events: g,
|
|
123
|
+
props: b
|
|
124
|
+
};
|
|
125
|
+
var w = Object.defineProperty, T = Object.getOwnPropertyDescriptor, p = (r, n, i, s) => {
|
|
126
|
+
for (var e = s > 1 ? void 0 : s ? T(n, i) : n, a = r.length - 1, d; a >= 0; a--)
|
|
127
|
+
(d = r[a]) && (e = (s ? d(n, i, e) : d(e)) || e);
|
|
128
|
+
return s && e && w(n, i, e), e;
|
|
129
|
+
};
|
|
130
|
+
let t = class extends h {
|
|
131
|
+
constructor() {
|
|
132
|
+
super(), this.forId = c(), this.helptext = "", this.helptextDropdown = "", this.helptextDropdownButton = y.props.helptextDropdownButton.default, this.isHelpTextOpen = !1;
|
|
133
|
+
}
|
|
134
|
+
render() {
|
|
135
|
+
const r = () => {
|
|
136
|
+
this.dispatchEvent(
|
|
137
|
+
new CustomEvent("toggleHelpText", {
|
|
138
|
+
bubbles: !0,
|
|
139
|
+
detail: { isOpen: !this.isHelpTextOpen }
|
|
140
|
+
})
|
|
141
|
+
), this.isHelpTextOpen = !this.isHelpTextOpen;
|
|
142
|
+
}, n = {
|
|
143
|
+
"pkt-inputwrapper__helptext": !0,
|
|
144
|
+
"pkt-inputwrapper__helptext-expandable-open": this.isHelpTextOpen,
|
|
145
|
+
"pkt-inputwrapper__helptext-expandable-closed": !this.isHelpTextOpen
|
|
146
|
+
};
|
|
147
|
+
return l`${this.helptext || this.helptextDropdown ? l`<div>
|
|
148
|
+
${this.helptext ? l`<div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
|
|
149
|
+
${f(this.helptext)}
|
|
150
|
+
</div>` : u}
|
|
151
|
+
${this.helptextDropdown ? l`<div class="pkt-inputwrapper__helptext-expandable">
|
|
152
|
+
<button
|
|
153
|
+
class="pkt-link pkt-link--icon-right pkt-btn pkt-btn--small pkt-btn--tertiary pkt-btn--icon-right"
|
|
154
|
+
type="button"
|
|
155
|
+
@click=${r}
|
|
156
|
+
>
|
|
157
|
+
<pkt-icon
|
|
158
|
+
class="pkt-btn__icon"
|
|
159
|
+
name="${this.isHelpTextOpen ? "chevron-thin-up" : "chevron-thin-down"}"
|
|
160
|
+
></pkt-icon>
|
|
161
|
+
<span class="pkt-btn__text">${f(this.helptextDropdownButton)}</span>
|
|
162
|
+
</button>
|
|
163
|
+
<div class="${m(n)}">
|
|
164
|
+
${f(this.helptextDropdown)}
|
|
165
|
+
</div>
|
|
166
|
+
</div>` : u}
|
|
167
|
+
</div>` : u}`;
|
|
168
|
+
}
|
|
169
|
+
};
|
|
170
|
+
p([
|
|
171
|
+
o({ type: String, reflect: !0 })
|
|
172
|
+
], t.prototype, "forId", 2);
|
|
173
|
+
p([
|
|
174
|
+
o({ type: String, reflect: !0 })
|
|
175
|
+
], t.prototype, "helptext", 2);
|
|
176
|
+
p([
|
|
177
|
+
o({ type: String, reflect: !0 })
|
|
178
|
+
], t.prototype, "helptextDropdown", 2);
|
|
179
|
+
p([
|
|
180
|
+
o({ type: String, reflect: !0 })
|
|
181
|
+
], t.prototype, "helptextDropdownButton", 2);
|
|
182
|
+
p([
|
|
183
|
+
k()
|
|
184
|
+
], t.prototype, "isHelpTextOpen", 2);
|
|
185
|
+
t = p([
|
|
186
|
+
x("pkt-helptext")
|
|
187
|
+
], t);
|
|
188
|
+
export {
|
|
189
|
+
t as P,
|
|
190
|
+
y as s
|
|
191
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";const e=require("./index-BYZhBzXZ.cjs"),a=require("./index-DAWAnAW_.cjs"),u=require("./class-map-DjxCaVFk.cjs"),k=require("./directive-DtixNHDT.cjs"),c="pkt-inputwrapper",f={toggleHelpText:{description:"Event for å vise eller skjule hjelpetekst i dropdown"}},h={forId:{name:"For ID",description:"Id-en til inputfeltet som dette wrapper rundt",type:"string",required:!0},label:{name:"Merkelapp",description:"Merkelapp for inputfeltet",type:"boolean",required:!0,default:"input"},helptext:{name:"Hjelpetekst",description:"Hjelpetekst for inputfeltet",type:"string"},helptextDropdown:{name:"Hjelpetekst i dropdown",description:"Hjelpetekst som vises i ekspanderende felt",type:"string"},helptextDropdownButton:{name:"Tekst i hjelpetekst-knapp",description:"Tekst som vises i knappen for å vise hjelpetekst i dropdown",default:"Les mer <span class='pkt-sr-only'>om feltet</span>",type:"string"},counter:{name:"Teller",description:"Teller for antall tegn i inputfeltet",type:"boolean",default:!1},counterCurrent:{name:"Tellerverdi",description:"Tellerens nåværende verdi",type:"number"},counterMaxLength:{name:"Maks tegn",description:"Maks antall tegn som kan skrives i inputfeltet",type:"number"},optionalTag:{name:"Vise valgfritt-merking",description:"Viser en merking som indikerer at feltet er valgfritt",type:"boolean",default:!1},optionalText:{name:"Valgfritt-tekst",description:"Tekst som vises i valgfritt-merkingen",type:"string",default:"Valgfritt"},requiredTag:{name:"Vise påkrevd-merking",description:"Viser en merking som indikerer at feltet er påkrevd",type:"boolean",default:!1},requiredText:{name:"Påkrevd-tekst",description:"Tekst som vises i påkrevd-merkingen",type:"string",default:"Må fylles ut"},hasError:{name:"Feil",description:"Indikerer at inputfeltet har en feil",type:"boolean",default:!1},errorMessage:{name:"Feilmelding",description:"Feilmelding som vises i tilknytning til inputfeltet",type:"string"},disabled:{name:"Deaktivert",description:"Indikerer at inputfeltet er deaktivert",type:"boolean",default:!1},inline:{name:"Inline",description:"Indikerer at inputfeltet skal flyte sammen med sidens innhold",type:"boolean",default:!1},ariaDescribedby:{name:"aria-describedby",description:"Id-en til elementet som beskriver inputfeltet",type:"string"},hasFieldset:{name:"Har fieldset",description:"Indikerer at inputfeltet er en del av et fieldset",type:"boolean",default:!1},useWrapper:{name:"Bruk wrapper",description:"Indikerer om inputfeltet skal bruke en wrapper",type:"boolean",default:!0}},d={name:c,"css-class":"pkt-inputwrapper",events:f,props:h};var x=Object.defineProperty,m=Object.getOwnPropertyDescriptor,r=(s,n,i,p)=>{for(var t=p>1?void 0:p?m(n,i):n,l=s.length-1,o;l>=0;l--)(o=s[l])&&(t=(p?o(n,i,t):o(t))||t);return p&&t&&x(n,i,t),t};exports.PktHelptext=class extends e.PktElement{constructor(){super(),this.forId=e.v4(),this.helptext="",this.helptextDropdown="",this.helptextDropdownButton=d.props.helptextDropdownButton.default,this.isHelpTextOpen=!1}render(){const n=()=>{this.dispatchEvent(new CustomEvent("toggleHelpText",{bubbles:!0,detail:{isOpen:!this.isHelpTextOpen}})),this.isHelpTextOpen=!this.isHelpTextOpen},i={"pkt-inputwrapper__helptext":!0,"pkt-inputwrapper__helptext-expandable-open":this.isHelpTextOpen,"pkt-inputwrapper__helptext-expandable-closed":!this.isHelpTextOpen},p=()=>this.helptext||this.helptextDropdown?e.x`<div>
|
|
2
|
+
${this.helptext?e.x`<div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
|
|
3
|
+
${a.o(this.helptext)}
|
|
4
|
+
</div>`:e.E}
|
|
5
|
+
${this.helptextDropdown?e.x`<div class="pkt-inputwrapper__helptext-expandable">
|
|
6
|
+
<button
|
|
7
|
+
class="pkt-link pkt-link--icon-right pkt-btn pkt-btn--small pkt-btn--tertiary pkt-btn--icon-right"
|
|
8
|
+
type="button"
|
|
9
|
+
@click=${n}
|
|
10
|
+
>
|
|
11
|
+
<pkt-icon
|
|
12
|
+
class="pkt-btn__icon"
|
|
13
|
+
name="${this.isHelpTextOpen?"chevron-thin-up":"chevron-thin-down"}"
|
|
14
|
+
></pkt-icon>
|
|
15
|
+
<span class="pkt-btn__text">${a.o(this.helptextDropdownButton)}</span>
|
|
16
|
+
</button>
|
|
17
|
+
<div class="${u.e(i)}">
|
|
18
|
+
${a.o(this.helptextDropdown)}
|
|
19
|
+
</div>
|
|
20
|
+
</div>`:e.E}
|
|
21
|
+
</div>`:e.E;return e.x`${p()}`}};r([e.n({type:String,reflect:!0})],exports.PktHelptext.prototype,"forId",2);r([e.n({type:String,reflect:!0})],exports.PktHelptext.prototype,"helptext",2);r([e.n({type:String,reflect:!0})],exports.PktHelptext.prototype,"helptextDropdown",2);r([e.n({type:String,reflect:!0})],exports.PktHelptext.prototype,"helptextDropdownButton",2);r([e.r()],exports.PktHelptext.prototype,"isHelpTextOpen",2);exports.PktHelptext=r([k.t("pkt-helptext")],exports.PktHelptext);exports.specs=d;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { }
|
package/dist/index.d.ts
CHANGED
|
@@ -277,6 +277,16 @@ declare class PktElement extends LitElement {
|
|
|
277
277
|
constructor();
|
|
278
278
|
}
|
|
279
279
|
|
|
280
|
+
export declare class PktHelptext extends PktElement {
|
|
281
|
+
constructor();
|
|
282
|
+
forId: string;
|
|
283
|
+
helptext: string;
|
|
284
|
+
helptextDropdown: string;
|
|
285
|
+
helptextDropdownButton: string;
|
|
286
|
+
isHelpTextOpen: boolean;
|
|
287
|
+
render(): TemplateResult<1>;
|
|
288
|
+
}
|
|
289
|
+
|
|
280
290
|
export declare class PktIcon extends PktElement {
|
|
281
291
|
path: string | undefined;
|
|
282
292
|
name: string;
|
|
@@ -349,7 +359,6 @@ export declare class PktInputWrapper extends PktElement {
|
|
|
349
359
|
ariaDescribedby: string | undefined;
|
|
350
360
|
hasFieldset: boolean;
|
|
351
361
|
useWrapper: boolean;
|
|
352
|
-
private isHelpTextOpen;
|
|
353
362
|
wrapperType: StaticValue;
|
|
354
363
|
render(): TemplateResult<1>;
|
|
355
364
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./helptext-DIV6QSay.cjs"),t=e.PktHelptext;Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>e.PktHelptext});exports.default=t;
|
package/dist/pkt-index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./pkt-alert.cjs"),t=require("./index-CzPkBTm-.cjs"),r=require("./pkt-card.cjs"),n=require("./pkt-component-template.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./pkt-alert.cjs"),t=require("./index-CzPkBTm-.cjs"),r=require("./pkt-card.cjs"),n=require("./pkt-component-template.cjs"),u=require("./pkt-datepicker.cjs"),o=require("./helptext-DIV6QSay.cjs"),a=require("./index-DAWAnAW_.cjs"),P=require("./pkt-input-wrapper.cjs"),c=require("./pkt-link.cjs"),i=require("./pkt-messagebox.cjs"),p=require("./pkt-tag.cjs");Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>e.PktAlert});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>t.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>r.PktCard});Object.defineProperty(exports,"PktComponent",{enumerable:!0,get:()=>n.PktComponent});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>u.PktDatepicker});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>o.PktHelptext});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>a.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>P.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>c.PktLink});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>i.PktMessagebox});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>p.PktTag});
|
package/dist/pkt-index.js
CHANGED
|
@@ -1,22 +1,24 @@
|
|
|
1
|
-
import { PktAlert as
|
|
1
|
+
import { PktAlert as o } from "./pkt-alert.js";
|
|
2
2
|
import { P as p } from "./index-BkXggpNp.js";
|
|
3
|
-
import { PktCard as
|
|
4
|
-
import { PktComponent as
|
|
3
|
+
import { PktCard as k } from "./pkt-card.js";
|
|
4
|
+
import { PktComponent as m } from "./pkt-component-template.js";
|
|
5
5
|
import { PktDatepicker as a } from "./pkt-datepicker.js";
|
|
6
|
-
import { P as s } from "./
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
6
|
+
import { P as s } from "./helptext-BHjN4gSm.js";
|
|
7
|
+
import { P as C } from "./index-B-KXmo65.js";
|
|
8
|
+
import { PktInputWrapper as d } from "./pkt-input-wrapper.js";
|
|
9
|
+
import { PktLink as i } from "./pkt-link.js";
|
|
10
|
+
import { PktMessagebox as b } from "./pkt-messagebox.js";
|
|
11
|
+
import { PktTag as A } from "./pkt-tag.js";
|
|
11
12
|
export {
|
|
12
|
-
|
|
13
|
+
o as PktAlert,
|
|
13
14
|
p as PktCalendar,
|
|
14
|
-
|
|
15
|
-
|
|
15
|
+
k as PktCard,
|
|
16
|
+
m as PktComponent,
|
|
16
17
|
a as PktDatepicker,
|
|
17
|
-
s as
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
b as
|
|
18
|
+
s as PktHelptext,
|
|
19
|
+
C as PktIcon,
|
|
20
|
+
d as PktInputWrapper,
|
|
21
|
+
i as PktLink,
|
|
22
|
+
b as PktMessagebox,
|
|
23
|
+
A as PktTag
|
|
22
24
|
};
|
|
@@ -1,59 +1,42 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BYZhBzXZ.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BYZhBzXZ.cjs"),c=require("./ref-CkYAEPA_.cjs"),g=require("./index-DAWAnAW_.cjs"),u=require("./class-map-DjxCaVFk.cjs"),$=require("./directive-DtixNHDT.cjs"),s=require("./helptext-DIV6QSay.cjs");/**
|
|
2
2
|
* @license
|
|
3
3
|
* Copyright 2020 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
|
-
*/const
|
|
6
|
-
take care to ensure page security.`)})(i)+
|
|
5
|
+
*/const I=Symbol.for(""),d=(l,...o)=>({_$litStatic$:o.reduce((a,i,r)=>a+(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)+l[r+1],l[0]),r:I});var P=Object.defineProperty,w=Object.getOwnPropertyDescriptor,t=(l,o,a,i)=>{for(var r=i>1?void 0:i?w(o,a):o,p=l.length-1,n;p>=0;p--)(n=l[p])&&(r=(i?n(o,a,r):n(r))||r);return i&&r&&P(o,a,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 o={"pkt-inputwrapper":!0,"pkt-inputwrapper--error":this.hasError,"pkt-inputwrapper--disabled":this.disabled,"pkt-inputwrapper--inline":this.inline},a={"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,n=()=>this.optionalTag||this.requiredTag?e.x`<span class=${u.e(a)}
|
|
7
7
|
>${this.optionalTag?this.optionalText:this.requiredTag?this.requiredText:e.E}</span
|
|
8
|
-
>`:e.E,
|
|
9
|
-
${this.label} ${
|
|
10
|
-
</legend>`:i?e.x`<h2>${this.label} ${
|
|
8
|
+
>`:e.E,f=()=>this.useWrapper?this.hasFieldset?e.x`<legend class="pkt-inputwrapper__legend" id="${this.forId}-label">
|
|
9
|
+
${this.label} ${n()}
|
|
10
|
+
</legend>`:i?e.x`<h2>${this.label} ${n()}</h2>`:e.x`<span>${this.label} ${n()}</span>`:e.x`<label for="${this.forId}" class="pkt-sr-only" aria-describedby="${p}"
|
|
11
11
|
>${this.label}</label
|
|
12
|
-
>`,
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
>
|
|
21
|
-
<pkt-icon
|
|
22
|
-
class="pkt-btn__icon"
|
|
23
|
-
name="${this.isHelpTextOpen?"chevron-thin-up":"chevron-thin-down"}"
|
|
24
|
-
></pkt-icon>
|
|
25
|
-
<span class="pkt-btn__text">${c.o(this.helptextDropdownButton)}</span>
|
|
26
|
-
</button>
|
|
27
|
-
<div class="${u.e(n)}">
|
|
28
|
-
${c.o(this.helptextDropdown)}
|
|
29
|
-
</div>
|
|
30
|
-
${this.hasFieldset?e.E:e.x`<label
|
|
31
|
-
class="pkt-sr-only"
|
|
32
|
-
for="${this.forId}"
|
|
33
|
-
aria-describedby="${d}"
|
|
34
|
-
>${this.label}</label
|
|
35
|
-
>`}
|
|
36
|
-
</div>`:e.E}</div>`:e.E,x=()=>this.counter?e.x`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
|
|
12
|
+
>`,y=()=>this.useWrapper&&(this.helptext||this.helptextDropdown)?e.x`
|
|
13
|
+
<pkt-helptext
|
|
14
|
+
.forId=${this.forId}
|
|
15
|
+
.helptext=${this.helptext}
|
|
16
|
+
.helptextDropdown=${this.helptextDropdown}
|
|
17
|
+
.helptextDropdownButton=${this.helptextDropdownButton}
|
|
18
|
+
></pkt-helptext>
|
|
19
|
+
`:e.E,x=()=>this.counter?e.x`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
|
|
37
20
|
${this.counterCurrent||0}
|
|
38
21
|
${this.counterMaxLength?`/${this.counterMaxLength}`:e.E}
|
|
39
|
-
</div>`:e.E,
|
|
22
|
+
</div>`:e.E,b=()=>this.hasError&&this.errorMessage?e.x`<div
|
|
40
23
|
class="pkt-alert pkt-alert--error pkt-alert--compact"
|
|
41
24
|
aria-live="assertive"
|
|
42
25
|
>
|
|
43
26
|
<pkt-icon name="alert-error" class="pkt-alert__icon"></pkt-icon>
|
|
44
|
-
<div class="pkt-alert__text">${
|
|
45
|
-
</div>`:e.E,
|
|
46
|
-
${
|
|
47
|
-
<div class="pkt-contents" ${
|
|
48
|
-
${x()} ${
|
|
49
|
-
`,
|
|
50
|
-
${
|
|
51
|
-
</fieldset>`:i?e.x`<div class=${u.e(
|
|
52
|
-
${
|
|
27
|
+
<div class="pkt-alert__text">${g.o(this.errorMessage)}</div>
|
|
28
|
+
</div>`:e.E,h=()=>e.x`
|
|
29
|
+
${f()} ${y()}
|
|
30
|
+
<div class="pkt-contents" ${c.n(this.defaultSlot)}></div>
|
|
31
|
+
${x()} ${b()}
|
|
32
|
+
`,k=()=>this.hasFieldset?e.x`<fieldset class=${u.e(r)} aria-describedby="${p}">
|
|
33
|
+
${h()}
|
|
34
|
+
</fieldset>`:i?e.x`<div class=${u.e(r)} aria-describedby="${p}">
|
|
35
|
+
${h()}
|
|
53
36
|
</div>`:e.x`<label
|
|
54
|
-
class=${u.e(
|
|
37
|
+
class=${u.e(r)}
|
|
55
38
|
for="${this.forId}"
|
|
56
|
-
aria-describedby="${
|
|
39
|
+
aria-describedby="${p}"
|
|
57
40
|
>
|
|
58
|
-
${
|
|
59
|
-
</label>`;return e.x`<div class=${u.e(
|
|
41
|
+
${h()}
|
|
42
|
+
</label>`;return e.x`<div class=${u.e(o)}>${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([$.t("pkt-input-wrapper")],exports.PktInputWrapper);
|
|
@@ -1,293 +1,144 @@
|
|
|
1
|
-
import { P as w, v as
|
|
2
|
-
import { e as
|
|
3
|
-
import { o as
|
|
1
|
+
import { P as w, v as m, E as h, x as p, n as r } from "./index-CF6_-ZoF.js";
|
|
2
|
+
import { e as v, P as k, n as _ } from "./ref-CY86ZeRJ.js";
|
|
3
|
+
import { o as T } from "./index-B-KXmo65.js";
|
|
4
4
|
import { e as c } from "./class-map-luGhSuLj.js";
|
|
5
|
-
import { t as
|
|
5
|
+
import { t as D } from "./directive-Cxhakbpr.js";
|
|
6
|
+
import { s as o } from "./helptext-BHjN4gSm.js";
|
|
6
7
|
/**
|
|
7
8
|
* @license
|
|
8
9
|
* Copyright 2020 Google LLC
|
|
9
10
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
10
11
|
*/
|
|
11
|
-
const S = Symbol.for(""), y = (
|
|
12
|
-
if (
|
|
13
|
-
throw Error(`Value passed to 'literal' function must be a 'literal' result: ${
|
|
12
|
+
const S = Symbol.for(""), y = (u, ...a) => ({ _$litStatic$: a.reduce((n, l, s) => n + ((i) => {
|
|
13
|
+
if (i._$litStatic$ !== void 0) return i._$litStatic$;
|
|
14
|
+
throw Error(`Value passed to 'literal' function must be a 'literal' result: ${i}. Use 'unsafeStatic' to pass non-literal values, but
|
|
14
15
|
take care to ensure page security.`);
|
|
15
|
-
})(
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
forId: {
|
|
21
|
-
name: "For ID",
|
|
22
|
-
description: "Id-en til inputfeltet som dette wrapper rundt",
|
|
23
|
-
type: "string",
|
|
24
|
-
required: !0
|
|
25
|
-
},
|
|
26
|
-
label: {
|
|
27
|
-
name: "Merkelapp",
|
|
28
|
-
description: "Merkelapp for inputfeltet",
|
|
29
|
-
type: "boolean",
|
|
30
|
-
required: !0,
|
|
31
|
-
default: "input"
|
|
32
|
-
},
|
|
33
|
-
helptext: {
|
|
34
|
-
name: "Hjelpetekst",
|
|
35
|
-
description: "Hjelpetekst for inputfeltet",
|
|
36
|
-
type: "string"
|
|
37
|
-
},
|
|
38
|
-
helptextDropdown: {
|
|
39
|
-
name: "Hjelpetekst i dropdown",
|
|
40
|
-
description: "Hjelpetekst som vises i ekspanderende felt",
|
|
41
|
-
type: "string"
|
|
42
|
-
},
|
|
43
|
-
helptextDropdownButton: {
|
|
44
|
-
name: "Tekst i hjelpetekst-knapp",
|
|
45
|
-
description: "Tekst som vises i knappen for å vise hjelpetekst i dropdown",
|
|
46
|
-
default: "Les mer <span class='pkt-sr-only'>om inputfeltet</span>",
|
|
47
|
-
type: "string"
|
|
48
|
-
},
|
|
49
|
-
counter: {
|
|
50
|
-
name: "Teller",
|
|
51
|
-
description: "Teller for antall tegn i inputfeltet",
|
|
52
|
-
type: "boolean",
|
|
53
|
-
default: !1
|
|
54
|
-
},
|
|
55
|
-
counterCurrent: {
|
|
56
|
-
name: "Tellerverdi",
|
|
57
|
-
description: "Tellerens nåværende verdi",
|
|
58
|
-
type: "number"
|
|
59
|
-
},
|
|
60
|
-
counterMaxLength: {
|
|
61
|
-
name: "Maks tegn",
|
|
62
|
-
description: "Maks antall tegn som kan skrives i inputfeltet",
|
|
63
|
-
type: "number"
|
|
64
|
-
},
|
|
65
|
-
optionalTag: {
|
|
66
|
-
name: "Vise valgfritt-merking",
|
|
67
|
-
description: "Viser en merking som indikerer at feltet er valgfritt",
|
|
68
|
-
type: "boolean",
|
|
69
|
-
default: !1
|
|
70
|
-
},
|
|
71
|
-
optionalText: {
|
|
72
|
-
name: "Valgfritt-tekst",
|
|
73
|
-
description: "Tekst som vises i valgfritt-merkingen",
|
|
74
|
-
type: "string",
|
|
75
|
-
default: "Valgfritt"
|
|
76
|
-
},
|
|
77
|
-
requiredTag: {
|
|
78
|
-
name: "Vise påkrevd-merking",
|
|
79
|
-
description: "Viser en merking som indikerer at feltet er påkrevd",
|
|
80
|
-
type: "boolean",
|
|
81
|
-
default: !1
|
|
82
|
-
},
|
|
83
|
-
requiredText: {
|
|
84
|
-
name: "Påkrevd-tekst",
|
|
85
|
-
description: "Tekst som vises i påkrevd-merkingen",
|
|
86
|
-
type: "string",
|
|
87
|
-
default: "Må fylles ut"
|
|
88
|
-
},
|
|
89
|
-
hasError: {
|
|
90
|
-
name: "Feil",
|
|
91
|
-
description: "Indikerer at inputfeltet har en feil",
|
|
92
|
-
type: "boolean",
|
|
93
|
-
default: !1
|
|
94
|
-
},
|
|
95
|
-
errorMessage: {
|
|
96
|
-
name: "Feilmelding",
|
|
97
|
-
description: "Feilmelding som vises i tilknytning til inputfeltet",
|
|
98
|
-
type: "string"
|
|
99
|
-
},
|
|
100
|
-
disabled: {
|
|
101
|
-
name: "Deaktivert",
|
|
102
|
-
description: "Indikerer at inputfeltet er deaktivert",
|
|
103
|
-
type: "boolean",
|
|
104
|
-
default: !1
|
|
105
|
-
},
|
|
106
|
-
inline: {
|
|
107
|
-
name: "Inline",
|
|
108
|
-
description: "Indikerer at inputfeltet skal flyte sammen med sidens innhold",
|
|
109
|
-
type: "boolean",
|
|
110
|
-
default: !1
|
|
111
|
-
},
|
|
112
|
-
ariaDescribedby: {
|
|
113
|
-
name: "aria-describedby",
|
|
114
|
-
description: "Id-en til elementet som beskriver inputfeltet",
|
|
115
|
-
type: "string"
|
|
116
|
-
},
|
|
117
|
-
hasFieldset: {
|
|
118
|
-
name: "Har fieldset",
|
|
119
|
-
description: "Indikerer at inputfeltet er en del av et fieldset",
|
|
120
|
-
type: "boolean",
|
|
121
|
-
default: !1
|
|
122
|
-
},
|
|
123
|
-
useWrapper: {
|
|
124
|
-
name: "Bruk wrapper",
|
|
125
|
-
description: "Indikerer om inputfeltet skal bruke en wrapper",
|
|
126
|
-
type: "boolean",
|
|
127
|
-
default: !0
|
|
128
|
-
}
|
|
129
|
-
}, s = {
|
|
130
|
-
name: B,
|
|
131
|
-
"css-class": "pkt-inputwrapper",
|
|
132
|
-
events: H,
|
|
133
|
-
props: M
|
|
134
|
-
};
|
|
135
|
-
var q = Object.defineProperty, F = Object.getOwnPropertyDescriptor, t = (h, d, l, u) => {
|
|
136
|
-
for (var p = u > 1 ? void 0 : u ? F(d, l) : d, n = h.length - 1, a; n >= 0; n--)
|
|
137
|
-
(a = h[n]) && (p = (u ? a(d, l, p) : a(p)) || p);
|
|
138
|
-
return u && p && q(d, l, p), p;
|
|
16
|
+
})(l) + u[s + 1], u[0]), r: S });
|
|
17
|
+
var B = Object.defineProperty, E = Object.getOwnPropertyDescriptor, e = (u, a, n, l) => {
|
|
18
|
+
for (var s = l > 1 ? void 0 : l ? E(a, n) : a, i = u.length - 1, d; i >= 0; i--)
|
|
19
|
+
(d = u[i]) && (s = (l ? d(a, n, s) : d(s)) || s);
|
|
20
|
+
return l && s && B(a, n, s), s;
|
|
139
21
|
};
|
|
140
|
-
let
|
|
22
|
+
let t = class extends w {
|
|
141
23
|
constructor() {
|
|
142
|
-
super(), this.defaultSlot =
|
|
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);
|
|
143
25
|
}
|
|
144
26
|
render() {
|
|
145
|
-
const
|
|
27
|
+
const u = {
|
|
146
28
|
"pkt-inputwrapper": !0,
|
|
147
29
|
"pkt-inputwrapper--error": this.hasError,
|
|
148
30
|
"pkt-inputwrapper--disabled": this.disabled,
|
|
149
31
|
"pkt-inputwrapper--inline": this.inline
|
|
150
|
-
},
|
|
32
|
+
}, a = {
|
|
151
33
|
"pkt-tag": !0,
|
|
152
34
|
"pkt-tag--small": !0,
|
|
153
35
|
"pkt-tag--thin-text": !0,
|
|
154
36
|
"pkt-tag--blue-light": this.optionalTag,
|
|
155
37
|
"pkt-tag--beige": !this.optionalTag && this.requiredTag
|
|
156
|
-
},
|
|
157
|
-
this.dispatchEvent(
|
|
158
|
-
new CustomEvent("toggleHelpText", {
|
|
159
|
-
bubbles: !0,
|
|
160
|
-
detail: { isOpen: !this.isHelpTextOpen }
|
|
161
|
-
})
|
|
162
|
-
), this.isHelpTextOpen = !this.isHelpTextOpen;
|
|
163
|
-
}, p = {
|
|
164
|
-
"pkt-inputwrapper__helptext": !0,
|
|
165
|
-
"pkt-inputwrapper__helptext-expandable-open": this.isHelpTextOpen,
|
|
166
|
-
"pkt-inputwrapper__helptext-expandable-closed": !this.isHelpTextOpen
|
|
167
|
-
}, n = {
|
|
38
|
+
}, n = this.helptextDropdown !== "", l = {
|
|
168
39
|
"pkt-inputwrapper__label": !0,
|
|
169
40
|
"pkt-inputwrapper__fieldset": this.hasFieldset,
|
|
170
41
|
"pkt-inputwrapper__legend": this.hasFieldset
|
|
171
|
-
},
|
|
172
|
-
>${this.optionalTag ? this.optionalText : this.requiredTag ? this.requiredText :
|
|
173
|
-
>` :
|
|
174
|
-
${this.label} ${
|
|
175
|
-
</legend>` :
|
|
42
|
+
}, s = this.ariaDescribedby ? this.ariaDescribedby : this.helptext ? `${this.forId}-helptext` : h, i = () => this.optionalTag || this.requiredTag ? p`<span class=${c(a)}
|
|
43
|
+
>${this.optionalTag ? this.optionalText : this.requiredTag ? this.requiredText : h}</span
|
|
44
|
+
>` : h, d = () => this.useWrapper ? this.hasFieldset ? p`<legend class="pkt-inputwrapper__legend" id="${this.forId}-label">
|
|
45
|
+
${this.label} ${i()}
|
|
46
|
+
</legend>` : n ? p`<h2>${this.label} ${i()}</h2>` : p`<span>${this.label} ${i()}</span>` : p`<label for="${this.forId}" class="pkt-sr-only" aria-describedby="${s}"
|
|
176
47
|
>${this.label}</label
|
|
177
|
-
>`,
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
>
|
|
186
|
-
<pkt-icon
|
|
187
|
-
class="pkt-btn__icon"
|
|
188
|
-
name="${this.isHelpTextOpen ? "chevron-thin-up" : "chevron-thin-down"}"
|
|
189
|
-
></pkt-icon>
|
|
190
|
-
<span class="pkt-btn__text">${f(this.helptextDropdownButton)}</span>
|
|
191
|
-
</button>
|
|
192
|
-
<div class="${c(p)}">
|
|
193
|
-
${f(this.helptextDropdown)}
|
|
194
|
-
</div>
|
|
195
|
-
${this.hasFieldset ? o : i`<label
|
|
196
|
-
class="pkt-sr-only"
|
|
197
|
-
for="${this.forId}"
|
|
198
|
-
aria-describedby="${a}"
|
|
199
|
-
>${this.label}</label
|
|
200
|
-
>`}
|
|
201
|
-
</div>` : o}</div>` : o, v = () => this.counter ? i`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
|
|
48
|
+
>`, $ = () => this.useWrapper && (this.helptext || this.helptextDropdown) ? p`
|
|
49
|
+
<pkt-helptext
|
|
50
|
+
.forId=${this.forId}
|
|
51
|
+
.helptext=${this.helptext}
|
|
52
|
+
.helptextDropdown=${this.helptextDropdown}
|
|
53
|
+
.helptextDropdownButton=${this.helptextDropdownButton}
|
|
54
|
+
></pkt-helptext>
|
|
55
|
+
` : h, b = () => this.counter ? p`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
|
|
202
56
|
${this.counterCurrent || 0}
|
|
203
|
-
${this.counterMaxLength ? `/${this.counterMaxLength}` :
|
|
204
|
-
</div>` :
|
|
57
|
+
${this.counterMaxLength ? `/${this.counterMaxLength}` : h}
|
|
58
|
+
</div>` : h, g = () => this.hasError && this.errorMessage ? p`<div
|
|
205
59
|
class="pkt-alert pkt-alert--error pkt-alert--compact"
|
|
206
60
|
aria-live="assertive"
|
|
207
61
|
>
|
|
208
62
|
<pkt-icon name="alert-error" class="pkt-alert__icon"></pkt-icon>
|
|
209
|
-
<div class="pkt-alert__text">${
|
|
210
|
-
</div>` :
|
|
211
|
-
${
|
|
212
|
-
<div class="pkt-contents" ${
|
|
213
|
-
${
|
|
214
|
-
`,
|
|
215
|
-
${
|
|
216
|
-
</fieldset>` :
|
|
217
|
-
${
|
|
218
|
-
</div>` :
|
|
219
|
-
class=${c(
|
|
63
|
+
<div class="pkt-alert__text">${T(this.errorMessage)}</div>
|
|
64
|
+
</div>` : h, f = () => p`
|
|
65
|
+
${d()} ${$()}
|
|
66
|
+
<div class="pkt-contents" ${_(this.defaultSlot)}></div>
|
|
67
|
+
${b()} ${g()}
|
|
68
|
+
`, x = () => this.hasFieldset ? p`<fieldset class=${c(l)} aria-describedby="${s}">
|
|
69
|
+
${f()}
|
|
70
|
+
</fieldset>` : n ? p`<div class=${c(l)} aria-describedby="${s}">
|
|
71
|
+
${f()}
|
|
72
|
+
</div>` : p`<label
|
|
73
|
+
class=${c(l)}
|
|
220
74
|
for="${this.forId}"
|
|
221
|
-
aria-describedby="${
|
|
75
|
+
aria-describedby="${s}"
|
|
222
76
|
>
|
|
223
|
-
${
|
|
77
|
+
${f()}
|
|
224
78
|
</label>`;
|
|
225
|
-
return
|
|
79
|
+
return p`<div class=${c(u)}>${x()}</div> `;
|
|
226
80
|
}
|
|
227
81
|
};
|
|
228
|
-
|
|
82
|
+
e([
|
|
229
83
|
r({ type: String, reflect: !0 })
|
|
230
|
-
],
|
|
231
|
-
|
|
84
|
+
], t.prototype, "forId", 2);
|
|
85
|
+
e([
|
|
232
86
|
r({ type: String, reflect: !0 })
|
|
233
|
-
],
|
|
234
|
-
|
|
87
|
+
], t.prototype, "label", 2);
|
|
88
|
+
e([
|
|
235
89
|
r({ type: String, reflect: !0 })
|
|
236
|
-
],
|
|
237
|
-
|
|
90
|
+
], t.prototype, "helptext", 2);
|
|
91
|
+
e([
|
|
238
92
|
r({ type: String, reflect: !0 })
|
|
239
|
-
],
|
|
240
|
-
|
|
93
|
+
], t.prototype, "helptextDropdown", 2);
|
|
94
|
+
e([
|
|
241
95
|
r({ type: String, reflect: !0 })
|
|
242
|
-
],
|
|
243
|
-
|
|
96
|
+
], t.prototype, "helptextDropdownButton", 2);
|
|
97
|
+
e([
|
|
244
98
|
r({ type: Boolean, reflect: !0 })
|
|
245
|
-
],
|
|
246
|
-
|
|
99
|
+
], t.prototype, "counter", 2);
|
|
100
|
+
e([
|
|
247
101
|
r({ type: Number, reflect: !0 })
|
|
248
|
-
],
|
|
249
|
-
|
|
102
|
+
], t.prototype, "counterCurrent", 2);
|
|
103
|
+
e([
|
|
250
104
|
r({ type: Number, reflect: !0 })
|
|
251
|
-
],
|
|
252
|
-
|
|
105
|
+
], t.prototype, "counterMaxLength", 2);
|
|
106
|
+
e([
|
|
253
107
|
r({ type: Boolean, reflect: !0 })
|
|
254
|
-
],
|
|
255
|
-
|
|
108
|
+
], t.prototype, "optionalTag", 2);
|
|
109
|
+
e([
|
|
256
110
|
r({ type: String, reflect: !0 })
|
|
257
|
-
],
|
|
258
|
-
|
|
111
|
+
], t.prototype, "optionalText", 2);
|
|
112
|
+
e([
|
|
259
113
|
r({ type: Boolean, reflect: !0 })
|
|
260
|
-
],
|
|
261
|
-
|
|
114
|
+
], t.prototype, "requiredTag", 2);
|
|
115
|
+
e([
|
|
262
116
|
r({ type: String, reflect: !0 })
|
|
263
|
-
],
|
|
264
|
-
|
|
117
|
+
], t.prototype, "requiredText", 2);
|
|
118
|
+
e([
|
|
265
119
|
r({ type: Boolean, reflect: !0 })
|
|
266
|
-
],
|
|
267
|
-
|
|
120
|
+
], t.prototype, "hasError", 2);
|
|
121
|
+
e([
|
|
268
122
|
r({ type: String, reflect: !0 })
|
|
269
|
-
],
|
|
270
|
-
|
|
123
|
+
], t.prototype, "errorMessage", 2);
|
|
124
|
+
e([
|
|
271
125
|
r({ type: Boolean, reflect: !0 })
|
|
272
|
-
],
|
|
273
|
-
|
|
126
|
+
], t.prototype, "disabled", 2);
|
|
127
|
+
e([
|
|
274
128
|
r({ type: Boolean, reflect: !0 })
|
|
275
|
-
],
|
|
276
|
-
|
|
129
|
+
], t.prototype, "inline", 2);
|
|
130
|
+
e([
|
|
277
131
|
r({ type: String, reflect: !0 })
|
|
278
|
-
],
|
|
279
|
-
|
|
132
|
+
], t.prototype, "ariaDescribedby", 2);
|
|
133
|
+
e([
|
|
280
134
|
r({ type: Boolean, reflect: !0 })
|
|
281
|
-
],
|
|
282
|
-
|
|
135
|
+
], t.prototype, "hasFieldset", 2);
|
|
136
|
+
e([
|
|
283
137
|
r({ type: Boolean, reflect: !0 })
|
|
284
|
-
],
|
|
285
|
-
t([
|
|
286
|
-
|
|
287
|
-
],
|
|
288
|
-
e = t([
|
|
289
|
-
E("pkt-input-wrapper")
|
|
290
|
-
], e);
|
|
138
|
+
], t.prototype, "useWrapper", 2);
|
|
139
|
+
t = e([
|
|
140
|
+
D("pkt-input-wrapper")
|
|
141
|
+
], t);
|
|
291
142
|
export {
|
|
292
|
-
|
|
143
|
+
t as PktInputWrapper
|
|
293
144
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-elements",
|
|
3
|
-
"version": "12.
|
|
3
|
+
"version": "12.10.0",
|
|
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": "391d61a23bb938ee290ddf09a12fdf4c8e8ac52f"
|
|
59
59
|
}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { PktElement } from '../element'
|
|
2
|
+
import { html, nothing } from 'lit'
|
|
3
|
+
import { unsafeHTML } from 'lit/directives/unsafe-html.js'
|
|
4
|
+
import { classMap } from 'lit/directives/class-map.js'
|
|
5
|
+
import { customElement, property, state } from 'lit/decorators.js'
|
|
6
|
+
import { v4 as uuidv4 } from 'uuid'
|
|
7
|
+
import specs from 'componentSpecs/input-wrapper.json'
|
|
8
|
+
import '../icon'
|
|
9
|
+
|
|
10
|
+
@customElement('pkt-helptext')
|
|
11
|
+
export class PktHelptext extends PktElement {
|
|
12
|
+
constructor() {
|
|
13
|
+
super()
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@property({ type: String, reflect: true })
|
|
17
|
+
forId: string = uuidv4()
|
|
18
|
+
|
|
19
|
+
@property({ type: String, reflect: true })
|
|
20
|
+
helptext: string = ''
|
|
21
|
+
|
|
22
|
+
@property({ type: String, reflect: true })
|
|
23
|
+
helptextDropdown: string = ''
|
|
24
|
+
|
|
25
|
+
@property({ type: String, reflect: true })
|
|
26
|
+
helptextDropdownButton: string = specs.props.helptextDropdownButton.default
|
|
27
|
+
|
|
28
|
+
@state() isHelpTextOpen: boolean = false
|
|
29
|
+
|
|
30
|
+
render() {
|
|
31
|
+
const toggleDropdown = () => {
|
|
32
|
+
this.dispatchEvent(
|
|
33
|
+
new CustomEvent('toggleHelpText', {
|
|
34
|
+
bubbles: true,
|
|
35
|
+
detail: { isOpen: !this.isHelpTextOpen },
|
|
36
|
+
}),
|
|
37
|
+
)
|
|
38
|
+
this.isHelpTextOpen = !this.isHelpTextOpen
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
const helptextDropdownClasses = {
|
|
42
|
+
'pkt-inputwrapper__helptext': true,
|
|
43
|
+
'pkt-inputwrapper__helptext-expandable-open': this.isHelpTextOpen,
|
|
44
|
+
'pkt-inputwrapper__helptext-expandable-closed': !this.isHelpTextOpen,
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
const helptextElement = () => {
|
|
48
|
+
if (this.helptext || this.helptextDropdown) {
|
|
49
|
+
return html`<div>
|
|
50
|
+
${this.helptext
|
|
51
|
+
? html`<div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
|
|
52
|
+
${unsafeHTML(this.helptext)}
|
|
53
|
+
</div>`
|
|
54
|
+
: nothing}
|
|
55
|
+
${this.helptextDropdown
|
|
56
|
+
? html`<div class="pkt-inputwrapper__helptext-expandable">
|
|
57
|
+
<button
|
|
58
|
+
class="pkt-link pkt-link--icon-right pkt-btn pkt-btn--small pkt-btn--tertiary pkt-btn--icon-right"
|
|
59
|
+
type="button"
|
|
60
|
+
@click=${toggleDropdown}
|
|
61
|
+
>
|
|
62
|
+
<pkt-icon
|
|
63
|
+
class="pkt-btn__icon"
|
|
64
|
+
name="${this.isHelpTextOpen ? 'chevron-thin-up' : 'chevron-thin-down'}"
|
|
65
|
+
></pkt-icon>
|
|
66
|
+
<span class="pkt-btn__text">${unsafeHTML(this.helptextDropdownButton)}</span>
|
|
67
|
+
</button>
|
|
68
|
+
<div class="${classMap(helptextDropdownClasses)}">
|
|
69
|
+
${unsafeHTML(this.helptextDropdown)}
|
|
70
|
+
</div>
|
|
71
|
+
</div>`
|
|
72
|
+
: nothing}
|
|
73
|
+
</div>`
|
|
74
|
+
} else {
|
|
75
|
+
return nothing
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
return html`${helptextElement()}`
|
|
80
|
+
}
|
|
81
|
+
}
|
package/src/components/index.ts
CHANGED
|
@@ -3,6 +3,7 @@ export { PktCalendar } from './calendar'
|
|
|
3
3
|
export { PktCard } from './card'
|
|
4
4
|
export { PktComponent } from './component-template'
|
|
5
5
|
export { PktDatepicker } from './datepicker'
|
|
6
|
+
export { PktHelptext } from './helptext'
|
|
6
7
|
export { PktIcon } from './icon'
|
|
7
8
|
export { PktInputWrapper } from './input-wrapper'
|
|
8
9
|
export { PktLink } from './link'
|
|
@@ -9,6 +9,7 @@ import { customElement, property } from 'lit/decorators.js'
|
|
|
9
9
|
import { v4 as uuidv4 } from 'uuid'
|
|
10
10
|
import specs from 'componentSpecs/input-wrapper.json'
|
|
11
11
|
import '../icon'
|
|
12
|
+
import '../helptext'
|
|
12
13
|
|
|
13
14
|
@customElement('pkt-input-wrapper')
|
|
14
15
|
export class PktInputWrapper extends PktElement {
|
|
@@ -79,9 +80,6 @@ export class PktInputWrapper extends PktElement {
|
|
|
79
80
|
@property({ type: Boolean, reflect: true })
|
|
80
81
|
useWrapper: boolean = specs.props.useWrapper.default
|
|
81
82
|
|
|
82
|
-
@property({ reflect: false, type: Boolean })
|
|
83
|
-
private isHelpTextOpen: boolean = false
|
|
84
|
-
|
|
85
83
|
wrapperType = this.useWrapper
|
|
86
84
|
? literal`fieldset`
|
|
87
85
|
: this.hasDropdown
|
|
@@ -106,22 +104,6 @@ export class PktInputWrapper extends PktElement {
|
|
|
106
104
|
|
|
107
105
|
const hasDropdown = this.helptextDropdown !== ''
|
|
108
106
|
|
|
109
|
-
const toggleDropdown = () => {
|
|
110
|
-
this.dispatchEvent(
|
|
111
|
-
new CustomEvent('toggleHelpText', {
|
|
112
|
-
bubbles: true,
|
|
113
|
-
detail: { isOpen: !this.isHelpTextOpen },
|
|
114
|
-
}),
|
|
115
|
-
)
|
|
116
|
-
this.isHelpTextOpen = !this.isHelpTextOpen
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
const helptextDropdownClasses = {
|
|
120
|
-
'pkt-inputwrapper__helptext': true,
|
|
121
|
-
'pkt-inputwrapper__helptext-expandable-open': this.isHelpTextOpen,
|
|
122
|
-
'pkt-inputwrapper__helptext-expandable-closed': !this.isHelpTextOpen,
|
|
123
|
-
}
|
|
124
|
-
|
|
125
107
|
const wrapperClasses = {
|
|
126
108
|
'pkt-inputwrapper__label': true,
|
|
127
109
|
'pkt-inputwrapper__fieldset': this.hasFieldset,
|
|
@@ -167,38 +149,15 @@ export class PktInputWrapper extends PktElement {
|
|
|
167
149
|
}
|
|
168
150
|
|
|
169
151
|
const helptextElement = () => {
|
|
170
|
-
if (this.useWrapper && this.helptext) {
|
|
171
|
-
return html
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
type="button"
|
|
180
|
-
@click=${toggleDropdown}
|
|
181
|
-
>
|
|
182
|
-
<pkt-icon
|
|
183
|
-
class="pkt-btn__icon"
|
|
184
|
-
name="${this.isHelpTextOpen ? 'chevron-thin-up' : 'chevron-thin-down'}"
|
|
185
|
-
></pkt-icon>
|
|
186
|
-
<span class="pkt-btn__text">${unsafeHTML(this.helptextDropdownButton)}</span>
|
|
187
|
-
</button>
|
|
188
|
-
<div class="${classMap(helptextDropdownClasses)}">
|
|
189
|
-
${unsafeHTML(this.helptextDropdown)}
|
|
190
|
-
</div>
|
|
191
|
-
${!this.hasFieldset
|
|
192
|
-
? html`<label
|
|
193
|
-
class="pkt-sr-only"
|
|
194
|
-
for="${this.forId}"
|
|
195
|
-
aria-describedby="${describedBy}"
|
|
196
|
-
>${this.label}</label
|
|
197
|
-
>`
|
|
198
|
-
: nothing}
|
|
199
|
-
</div>`
|
|
200
|
-
: nothing
|
|
201
|
-
}</div>`
|
|
152
|
+
if (this.useWrapper && (this.helptext || this.helptextDropdown)) {
|
|
153
|
+
return html`
|
|
154
|
+
<pkt-helptext
|
|
155
|
+
.forId=${this.forId}
|
|
156
|
+
.helptext=${this.helptext}
|
|
157
|
+
.helptextDropdown=${this.helptextDropdown}
|
|
158
|
+
.helptextDropdownButton=${this.helptextDropdownButton}
|
|
159
|
+
></pkt-helptext>
|
|
160
|
+
`
|
|
202
161
|
} else {
|
|
203
162
|
return nothing
|
|
204
163
|
}
|