@oslokommune/punkt-elements
Version:
Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo
112 lines (111 loc) • 5.81 kB
JavaScript
import { c as e, d as t, l as n, r, s as i } from "./element-cZ85T_aa.js";
import { t as a } from "./class-map-C8HuhNzZ.js";
import { n as o, t as s } from "./ref-RS8Uv6uC.js";
import { t as c } from "./input-element-B1ciW1N2.js";
//#region src/components/checkbox/checkbox.ts
var l = class extends c {
constructor(...e) {
super(...e), this.inputRef = s(), this.value = "", this.checkHelptext = null, this.defaultChecked = !1, this.hasTile = !1, this.isSwitch = !1, this.labelPosition = "right", this.hideLabel = !1, this.checked = null, this.indeterminate = !1, this.type = "checkbox", this.tagText = null, this.optionalTag = !1, this.optionalText = "Valgfritt", this.requiredTag = !1, this.requiredText = "Må fylles ut";
}
connectedCallback() {
super.connectedCallback();
}
attributeChangedCallback(e, t, n) {
e === "defaultChecked" && !this.checked && (this.checked = this.defaultChecked), e === "checked" && (this.checked = this.checked === "" || this.checked === "true" || this.checked === !0, this.inputRef.value && (this.inputRef.value.checked = this.checked)), e === "indeterminate" && (this.indeterminate = this.indeterminate === "" || this.indeterminate === "true" || this.indeterminate === !0, this.inputRef.value && (this.inputRef.value.indeterminate = this.indeterminate)), super.attributeChangedCallback(e, t, n);
}
firstUpdated(e) {
e.has("defaultChecked") && !this.checked && (this.checked = this.defaultChecked), this.inputRef.value && (this.inputRef.value.indeterminate = this.indeterminate === "" || this.indeterminate === "true" || this.indeterminate === !0), super.firstUpdated(e);
}
updated(e) {
e.has("defaultChecked") && !this.checked && (this.checked = this.defaultChecked), e.has("checked") && this.inputRef.value && (this.inputRef.value.checked = this.checked === "" || this.checked === "true" || this.checked === !0), e.has("indeterminate") && this.inputRef.value && (this.inputRef.value.indeterminate = this.indeterminate === "" || this.indeterminate === "true" || this.indeterminate === !0), super.updated(e);
}
render() {
let e = a({
"pkt-input-check__input": !0,
"pkt-input-check__input--tile": this.hasTile,
"pkt-input-check__input--tile-disabled": this.disabled && this.hasTile
}), r = a({
"pkt-input-check__input-checkbox": !0,
"pkt-input-check__input-checkbox--error": this.hasError
}), i = a({
"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", c = () => t`
${this.tagText ? t`<span class=${s + " pkt-tag--gray"}>${this.tagText}</span>` : n}
${this.optionalTag ? t`<span class=${s + " pkt-tag--blue-light"}>${this.optionalText}</span>` : n}
${this.requiredTag ? t`<span class=${s + " pkt-tag--beige"}>${this.requiredText}</span>` : n}
`, l = () => t`
<label class=${i} for=${this.id + "-internal"}>
${this.label} ${c()}
${this.checkHelptext ? t`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>` : n}
</label>
`;
return t`
<div class="pkt-input-check">
<div class=${e}>
${this.labelPosition === "left" ? l() : n}
<input
id=${this.id + "-internal"}
class=${r}
type="checkbox"
?disabled=${this.disabled}
name=${this.name + "-internal"}
${o(this.inputRef)}
=${this.handleChange}
=${this.handleClick}
=${this.onBlur}
=${this.onFocus}
?checked=${this.checked}
role=${this.isSwitch ? "switch" : "checkbox"}
/>
${this.labelPosition === "right" ? l() : n}
</div>
</div>
`;
}
handleClick(e) {
if (this.disabled) return e.preventDefault(), e.stopImmediatePropagation(), !1;
}
handleChange(e) {
if (this.disabled) return e.preventDefault(), e.stopImmediatePropagation(), !1;
this.toggleChecked(e);
}
toggleChecked(e) {
if (this.disabled) {
e.preventDefault(), e.stopImmediatePropagation();
return;
}
let t = e.target;
if (t && t.disabled) {
e.preventDefault(), e.stopImmediatePropagation();
return;
}
e.stopImmediatePropagation(), this.touched = !0, this.inputRef.value && (this.checked = this.inputRef.value.matches(":checked"), this.valueChecked(this.checked));
}
};
r([i({
type: String,
reflect: !0
})], l.prototype, "value", void 0), r([i({ type: String })], l.prototype, "checkHelptext", void 0), r([i({ type: Boolean })], l.prototype, "defaultChecked", void 0), r([i({ type: Boolean })], l.prototype, "hasTile", void 0), r([i({ type: Boolean })], l.prototype, "isSwitch", void 0), r([i({ type: String })], l.prototype, "labelPosition", void 0), r([i({ type: Boolean })], l.prototype, "hideLabel", void 0), r([i({
type: Boolean,
reflect: !0
})], l.prototype, "checked", void 0), r([i({
type: Boolean,
reflect: !0
})], l.prototype, "indeterminate", void 0), r([i({
type: String,
reflect: !0
})], l.prototype, "type", void 0), r([i({ type: String })], l.prototype, "tagText", void 0), r([i({ type: Boolean })], l.prototype, "optionalTag", void 0), r([i({ type: String })], l.prototype, "optionalText", void 0), r([i({ type: Boolean })], l.prototype, "requiredTag", void 0), r([i({ type: String })], l.prototype, "requiredText", void 0);
try {
e("pkt-checkbox")(l);
} catch {
console.warn("Forsøker å definere <pkt-checkbox>, men den er allerede definert");
}
//#endregion
//#region src/components/checkbox/index.ts
var u = l;
//#endregion
export { l as n, u as t };