@oslokommune/punkt-elements 13.4.1 → 13.4.2
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 +17 -0
- package/dist/{card-uccD6Pnv.cjs → card-BUITGoqX.cjs} +10 -10
- package/dist/{card-BI1NZONj.js → card-Dtw26f7i.js} +96 -76
- package/dist/checkbox-Gn7Wtk9h.cjs +31 -0
- package/dist/checkbox-ym7z6cpt.js +142 -0
- package/dist/{combobox-BhcqC30d.cjs → combobox-DjO0RMUB.cjs} +1 -1
- package/dist/{combobox-D9dGKWuZ.js → combobox-yE4aYhTi.js} +1 -1
- package/dist/index.d.ts +3 -0
- package/dist/pkt-card.cjs +1 -1
- package/dist/pkt-card.js +1 -1
- package/dist/pkt-checkbox.cjs +1 -1
- package/dist/pkt-checkbox.js +1 -1
- package/dist/pkt-combobox.cjs +1 -1
- package/dist/pkt-combobox.js +1 -1
- package/dist/pkt-index.cjs +1 -1
- package/dist/pkt-index.js +3 -3
- package/package.json +2 -2
- package/src/components/card/card.test.ts +592 -0
- package/src/components/card/card.ts +24 -1
- package/src/components/checkbox/checkbox.test.ts +535 -0
- package/src/components/checkbox/checkbox.ts +44 -1
- package/src/components/combobox/combobox.test.ts +737 -0
- package/src/components/combobox/combobox.ts +1 -1
- package/dist/checkbox-CTRbpbye.js +0 -120
- package/dist/checkbox-wJ26voZd.cjs +0 -30
|
@@ -184,7 +184,7 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
|
|
|
184
184
|
this._options = [...this.options]
|
|
185
185
|
}
|
|
186
186
|
|
|
187
|
-
if (changedProperties.has('options')
|
|
187
|
+
if (changedProperties.has('options')) {
|
|
188
188
|
// If options change, we need to update _options, but we need to preserve userAdded values
|
|
189
189
|
const userAddedValues = this._options.filter((option) => option.userAdded)
|
|
190
190
|
// Filter out userAddedValues that are overridden by this.options
|
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
import { E as n, x as c, n as i, a as d } from "./element-CgEWt74-.js";
|
|
2
|
-
import { P as k } from "./input-element-NnrDmp4r.js";
|
|
3
|
-
import { e as b, n as f } from "./ref-BBYSqgeW.js";
|
|
4
|
-
import { e as u } from "./class-map-BpTj9gtz.js";
|
|
5
|
-
var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, e = (s, h, p, a) => {
|
|
6
|
-
for (var l = a > 1 ? void 0 : a ? y(h, p) : h, o = s.length - 1, r; o >= 0; o--)
|
|
7
|
-
(r = s[o]) && (l = (a ? r(h, p, l) : r(l)) || l);
|
|
8
|
-
return a && l && g(h, p, l), l;
|
|
9
|
-
};
|
|
10
|
-
let t = class extends k {
|
|
11
|
-
constructor() {
|
|
12
|
-
super(...arguments), this.inputRef = b(), this.value = "", this.checkHelptext = null, this.defaultChecked = !1, this.hasTile = !1, this.isSwitch = !1, this.labelPosition = "right", this.hideLabel = !1, this.checked = null, this.type = "checkbox", this.tagText = null, this.optionalTag = !1, this.optionalText = "Valgfritt", this.requiredTag = !1, this.requiredText = "Må fylles ut";
|
|
13
|
-
}
|
|
14
|
-
connectedCallback() {
|
|
15
|
-
super.connectedCallback();
|
|
16
|
-
}
|
|
17
|
-
attributeChangedCallback(s, h, p) {
|
|
18
|
-
s === "defaultChecked" && !this.checked && (this.checked = this.defaultChecked), s === "checked" && (this.checked = this.checked === "" || this.checked === "true" || this.checked === !0), super.attributeChangedCallback(s, h, p);
|
|
19
|
-
}
|
|
20
|
-
firstUpdated(s) {
|
|
21
|
-
s.has("defaultChecked") && !this.checked && (this.checked = this.defaultChecked), super.firstUpdated(s);
|
|
22
|
-
}
|
|
23
|
-
render() {
|
|
24
|
-
const s = u({
|
|
25
|
-
"pkt-input-check__input": !0,
|
|
26
|
-
"pkt-input-check__input--tile": this.hasTile,
|
|
27
|
-
"pkt-input-check__input--tile-disabled": this.disabled && this.hasTile
|
|
28
|
-
}), h = u({
|
|
29
|
-
"pkt-input-check__input-checkbox": !0,
|
|
30
|
-
"pkt-input-check__input-checkbox--error": this.hasError
|
|
31
|
-
}), p = u({
|
|
32
|
-
"pkt-input-check__input-label": !0,
|
|
33
|
-
"pkt-input-check__input-label--disabled": this.disabled,
|
|
34
|
-
"pkt-input-check__input-label--left": this.labelPosition === "left",
|
|
35
|
-
"pkt-input-check__input-label--right": this.labelPosition === "right",
|
|
36
|
-
"pkt-sr-only": this.hideLabel
|
|
37
|
-
}), a = "pkt-tag pkt-tag--small pkt-tag--thin-text", l = () => c`
|
|
38
|
-
${this.tagText ? c`<span class=${a + " pkt-tag--gray"}>${this.tagText}</span>` : n}
|
|
39
|
-
${this.optionalTag ? c`<span class=${a + " pkt-tag--blue-light"}>${this.optionalText}</span>` : n}
|
|
40
|
-
${this.requiredTag ? c`<span class=${a + " pkt-tag--beige"}>${this.requiredText}</span>` : n}
|
|
41
|
-
`, o = () => c`
|
|
42
|
-
<label class=${p} for=${this.id + "-internal"}>
|
|
43
|
-
${this.label} ${l()}
|
|
44
|
-
${this.checkHelptext ? c`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>` : n}
|
|
45
|
-
</label>
|
|
46
|
-
`;
|
|
47
|
-
return c`
|
|
48
|
-
<div class="pkt-input-check">
|
|
49
|
-
<div class=${s}>
|
|
50
|
-
${this.labelPosition === "left" ? o() : n}
|
|
51
|
-
<input
|
|
52
|
-
id=${this.id + "-internal"}
|
|
53
|
-
class=${h}
|
|
54
|
-
type="checkbox"
|
|
55
|
-
?disabled=${this.disabled}
|
|
56
|
-
name=${this.name + "-internal"}
|
|
57
|
-
${f(this.inputRef)}
|
|
58
|
-
@change=${this.toggleChecked}
|
|
59
|
-
@blur=${this.onBlur}
|
|
60
|
-
@focus=${this.onFocus}
|
|
61
|
-
?checked=${this.checked}
|
|
62
|
-
role=${this.isSwitch ? "switch" : "checkbox"}
|
|
63
|
-
/>
|
|
64
|
-
${this.labelPosition === "right" ? o() : n}
|
|
65
|
-
</div>
|
|
66
|
-
</div>
|
|
67
|
-
`;
|
|
68
|
-
}
|
|
69
|
-
toggleChecked(s) {
|
|
70
|
-
s.stopImmediatePropagation(), this.touched = !0, this.inputRef.value && (this.checked = this.inputRef.value.matches(":checked"), this.valueChecked(this.checked));
|
|
71
|
-
}
|
|
72
|
-
};
|
|
73
|
-
e([
|
|
74
|
-
i({ type: String, reflect: !0 })
|
|
75
|
-
], t.prototype, "value", 2);
|
|
76
|
-
e([
|
|
77
|
-
i({ type: String })
|
|
78
|
-
], t.prototype, "checkHelptext", 2);
|
|
79
|
-
e([
|
|
80
|
-
i({ type: Boolean })
|
|
81
|
-
], t.prototype, "defaultChecked", 2);
|
|
82
|
-
e([
|
|
83
|
-
i({ type: Boolean })
|
|
84
|
-
], t.prototype, "hasTile", 2);
|
|
85
|
-
e([
|
|
86
|
-
i({ type: Boolean })
|
|
87
|
-
], t.prototype, "isSwitch", 2);
|
|
88
|
-
e([
|
|
89
|
-
i({ type: String })
|
|
90
|
-
], t.prototype, "labelPosition", 2);
|
|
91
|
-
e([
|
|
92
|
-
i({ type: Boolean })
|
|
93
|
-
], t.prototype, "hideLabel", 2);
|
|
94
|
-
e([
|
|
95
|
-
i({ type: Boolean, reflect: !0 })
|
|
96
|
-
], t.prototype, "checked", 2);
|
|
97
|
-
e([
|
|
98
|
-
i({ type: String, reflect: !0 })
|
|
99
|
-
], t.prototype, "type", 2);
|
|
100
|
-
e([
|
|
101
|
-
i({ type: String })
|
|
102
|
-
], t.prototype, "tagText", 2);
|
|
103
|
-
e([
|
|
104
|
-
i({ type: Boolean })
|
|
105
|
-
], t.prototype, "optionalTag", 2);
|
|
106
|
-
e([
|
|
107
|
-
i({ type: String })
|
|
108
|
-
], t.prototype, "optionalText", 2);
|
|
109
|
-
e([
|
|
110
|
-
i({ type: Boolean })
|
|
111
|
-
], t.prototype, "requiredTag", 2);
|
|
112
|
-
e([
|
|
113
|
-
i({ type: String })
|
|
114
|
-
], t.prototype, "requiredText", 2);
|
|
115
|
-
t = e([
|
|
116
|
-
d("pkt-checkbox")
|
|
117
|
-
], t);
|
|
118
|
-
export {
|
|
119
|
-
t as P
|
|
120
|
-
};
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
"use strict";const t=require("./element-6DBpyGQm.cjs"),k=require("./input-element-C4xJoM-X.cjs"),n=require("./ref-iJtiv3o2.cjs"),o=require("./class-map-BBG2gMX4.cjs");var r=Object.defineProperty,u=Object.getOwnPropertyDescriptor,i=(p,e,c,h)=>{for(var s=h>1?void 0:h?u(e,c):e,a=p.length-1,l;a>=0;a--)(l=p[a])&&(s=(h?l(e,c,s):l(s))||s);return h&&s&&r(e,c,s),s};exports.PktCheckbox=class extends k.PktInputElement{constructor(){super(...arguments),this.inputRef=n.e(),this.value="",this.checkHelptext=null,this.defaultChecked=!1,this.hasTile=!1,this.isSwitch=!1,this.labelPosition="right",this.hideLabel=!1,this.checked=null,this.type="checkbox",this.tagText=null,this.optionalTag=!1,this.optionalText="Valgfritt",this.requiredTag=!1,this.requiredText="Må fylles ut"}connectedCallback(){super.connectedCallback()}attributeChangedCallback(e,c,h){e==="defaultChecked"&&!this.checked&&(this.checked=this.defaultChecked),e==="checked"&&(this.checked=this.checked===""||this.checked==="true"||this.checked===!0),super.attributeChangedCallback(e,c,h)}firstUpdated(e){e.has("defaultChecked")&&!this.checked&&(this.checked=this.defaultChecked),super.firstUpdated(e)}render(){const e=o.e({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),c=o.e({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),h=o.e({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--disabled":this.disabled,"pkt-input-check__input-label--left":this.labelPosition==="left","pkt-input-check__input-label--right":this.labelPosition==="right","pkt-sr-only":this.hideLabel}),s="pkt-tag pkt-tag--small pkt-tag--thin-text",a=()=>t.x`
|
|
2
|
-
${this.tagText?t.x`<span class=${s+" pkt-tag--gray"}>${this.tagText}</span>`:t.E}
|
|
3
|
-
${this.optionalTag?t.x`<span class=${s+" pkt-tag--blue-light"}>${this.optionalText}</span>`:t.E}
|
|
4
|
-
${this.requiredTag?t.x`<span class=${s+" pkt-tag--beige"}>${this.requiredText}</span>`:t.E}
|
|
5
|
-
`,l=()=>t.x`
|
|
6
|
-
<label class=${h} for=${this.id+"-internal"}>
|
|
7
|
-
${this.label} ${a()}
|
|
8
|
-
${this.checkHelptext?t.x`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>`:t.E}
|
|
9
|
-
</label>
|
|
10
|
-
`;return t.x`
|
|
11
|
-
<div class="pkt-input-check">
|
|
12
|
-
<div class=${e}>
|
|
13
|
-
${this.labelPosition==="left"?l():t.E}
|
|
14
|
-
<input
|
|
15
|
-
id=${this.id+"-internal"}
|
|
16
|
-
class=${c}
|
|
17
|
-
type="checkbox"
|
|
18
|
-
?disabled=${this.disabled}
|
|
19
|
-
name=${this.name+"-internal"}
|
|
20
|
-
${n.n(this.inputRef)}
|
|
21
|
-
@change=${this.toggleChecked}
|
|
22
|
-
@blur=${this.onBlur}
|
|
23
|
-
@focus=${this.onFocus}
|
|
24
|
-
?checked=${this.checked}
|
|
25
|
-
role=${this.isSwitch?"switch":"checkbox"}
|
|
26
|
-
/>
|
|
27
|
-
${this.labelPosition==="right"?l():t.E}
|
|
28
|
-
</div>
|
|
29
|
-
</div>
|
|
30
|
-
`}toggleChecked(e){e.stopImmediatePropagation(),this.touched=!0,this.inputRef.value&&(this.checked=this.inputRef.value.matches(":checked"),this.valueChecked(this.checked))}};i([t.n({type:String,reflect:!0})],exports.PktCheckbox.prototype,"value",2);i([t.n({type:String})],exports.PktCheckbox.prototype,"checkHelptext",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"defaultChecked",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"hasTile",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"isSwitch",2);i([t.n({type:String})],exports.PktCheckbox.prototype,"labelPosition",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"hideLabel",2);i([t.n({type:Boolean,reflect:!0})],exports.PktCheckbox.prototype,"checked",2);i([t.n({type:String,reflect:!0})],exports.PktCheckbox.prototype,"type",2);i([t.n({type:String})],exports.PktCheckbox.prototype,"tagText",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"optionalTag",2);i([t.n({type:String})],exports.PktCheckbox.prototype,"optionalText",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"requiredTag",2);i([t.n({type:String})],exports.PktCheckbox.prototype,"requiredText",2);exports.PktCheckbox=i([t.t("pkt-checkbox")],exports.PktCheckbox);
|