@oslokommune/punkt-elements
Version:
Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo
120 lines (119 loc) • 6.42 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 "./element-with-slot-4J2o3SeU.js";
import "./alert-ePJuDtmm.js";
import { r as c } from "./icon-Co72KtgF.js";
import { t as l } from "./if-defined-Cjj8qN-Z.js";
import { n as u } from "./utils-BOOZ0ppt.js";
import { t as d } from "./booleanish-CRaKZ75t.js";
import { t as f } from "./input-wrapper-DwSsP39J.js";
import "./helptext-BdqoW19r.js";
import { t as p } from "./focus-modality-controller-pzSZkDkH.js";
//#region src/components/input-wrapper/input-wrapper.ts
var m = class extends s {
constructor(...e) {
super(...e), this.forId = u(), this.label = "", this.helptext = null, this.helptextDropdown = null, this.helptextDropdownButton = null, this.counter = f.props.counter.default, this.counterCurrent = 0, this.counterMaxLength = 0, this.counterError = null, this.counterPosition = "bottom", this.optionalTag = f.props.optionalTag.default, this.optionalText = f.props.optionalText.default, this.requiredTag = f.props.requiredTag.default, this.requiredText = f.props.requiredText.default, this.tagText = null, this.hasError = f.props.hasError.default, this.errorMessage = "", this.disabled = f.props.disabled.default, this.inline = f.props.inline.default, this.ariaDescribedby = void 0, this.hasFieldset = f.props.hasFieldset.default, this.role = "group", this.useWrapper = f.props.useWrapper.default, this.focusModality = new p(this, ".pkt-inputwrapper");
}
updated(e) {
super.updated(e);
}
render() {
let e = {
"pkt-inputwrapper": !0,
"pkt-inputwrapper--error": this.hasError,
"pkt-inputwrapper--disabled": this.disabled,
"pkt-inputwrapper--inline": this.inline
}, r = "pkt-tag pkt-tag--small pkt-tag--thin-text", i = this.ariaDescribedby ? this.ariaDescribedby : this.helptext ? `${this.forId}-helptext` : n, s = () => t`
${this.tagText ? t`<span class=${r + " pkt-tag--gray"}>${this.tagText}</span>` : n}
${this.optionalTag ? t`<span class=${r + " pkt-tag--blue-light"}>${this.optionalText}</span>` : n}
${this.requiredTag ? t`<span class=${r + " pkt-tag--beige"}>${this.requiredText}</span>` : n}
`, u = () => this.useWrapper ? this.hasFieldset ? t`<legend
class="pkt-inputwrapper__legend"
id="${this.forId}-label"
=${this.handleLabelClick}
>
${this.label} ${s()}
</legend>` : t`<label
class="pkt-inputwrapper__label"
for="${this.forId}"
aria-describedby="${i}"
id="${this.forId}-label"
=${this.handleLabelClick}
>${this.label}${s()}</label
>` : t`<label
for="${this.forId}"
class="pkt-sr-only"
aria-describedby="${i}"
id="${this.forId}-label"
>
${this.label}
</label>`, d = () => t`
<pkt-helptext
class="${l(this.useWrapper ? void 0 : "pkt-hide")}"
.forId=${this.forId}
.helptext=${this.helptext}
.helptextDropdown=${this.helptextDropdown}
.helptextDropdownButton=${this.helptextDropdownButton || f.props.helptextDropdownButton.default}
=${(e) => {
this.toggleDropdown(e);
}}
>${o(this, "helptext")}</pkt-helptext
>
`, p = () => this.counter ? t`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
${this.counterError ? this.counterError : n} ${this.counterCurrent || 0}
${this.counterMaxLength ? `/${this.counterMaxLength}` : n}
</div>` : n, m = () => this.hasError && this.errorMessage ? t`<pkt-alert
skin="error"
compact
id=${`${this.forId}-error`}
aria-live="assertive"
aria-atomic="true"
>
${c(this.errorMessage)}
</pkt-alert>` : n, h = () => t`
${u()}
${d()}
${this.counterPosition === "top" ? p() : n}
<div class="pkt-contents">${o(this)}</div>
${this.counterPosition === "bottom" ? p() : n}
${m()}
`;
return t`<div class=${a(e)}>${this.hasFieldset ? t`<fieldset class="pkt-inputwrapper__fieldset" aria-describedby="${i}">
${h()}
</fieldset>` : t`<div class="pkt-inputwrapper__fieldset">${h()}</div>`}</div> `;
}
toggleDropdown(e) {
this.dispatchEvent(new CustomEvent("toggleHelpText", {
bubbles: !1,
detail: { isOpen: e.detail.isOpen }
}));
}
handleLabelClick() {
this.dispatchEvent(new CustomEvent("labelClick", {
bubbles: !0,
composed: !0,
detail: "label clicked"
}));
}
};
r([i({ type: String })], m.prototype, "forId", void 0), r([i({ type: String })], m.prototype, "label", void 0), r([i({ type: String })], m.prototype, "helptext", void 0), r([i({ type: String })], m.prototype, "helptextDropdown", void 0), r([i({ type: String })], m.prototype, "helptextDropdownButton", void 0), r([i({ type: Boolean })], m.prototype, "counter", void 0), r([i({ type: Number })], m.prototype, "counterCurrent", void 0), r([i({ type: Number })], m.prototype, "counterMaxLength", void 0), r([i({ type: String })], m.prototype, "counterError", void 0), r([i({
type: String,
reflect: !1
})], m.prototype, "counterPosition", void 0), r([i({ type: Boolean })], m.prototype, "optionalTag", void 0), r([i({ type: String })], m.prototype, "optionalText", void 0), r([i({ type: Boolean })], m.prototype, "requiredTag", void 0), r([i({ type: String })], m.prototype, "requiredText", void 0), r([i({ type: String })], m.prototype, "tagText", void 0), r([i({ type: Boolean })], m.prototype, "hasError", void 0), r([i({ type: String })], m.prototype, "errorMessage", void 0), r([i({ type: Boolean })], m.prototype, "disabled", void 0), r([i({ type: Boolean })], m.prototype, "inline", void 0), r([i({ type: String })], m.prototype, "ariaDescribedby", void 0), r([i({ type: Boolean })], m.prototype, "hasFieldset", void 0), r([i({
type: String,
reflect: !0
})], m.prototype, "role", void 0), r([i({
type: Boolean,
reflect: !0,
converter: d
})], m.prototype, "useWrapper", void 0);
try {
e("pkt-input-wrapper")(m);
} catch {
console.warn("Forsøker å definere <pkt-input-wrapper>, men den er allerede definert");
}
//#endregion
//#region src/components/input-wrapper/index.ts
var h = m;
//#endregion
export { m as n, h as t };