@oslokommune/punkt-elements
Version:
Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo
66 lines (65 loc) • 2.65 kB
JavaScript
import { c as e, d as t, l as n, o as r, r as i, s as a } from "./element-cZ85T_aa.js";
import { t as o } from "./class-map-C8HuhNzZ.js";
import { n as s, t as c } from "./element-with-slot-4J2o3SeU.js";
import { r as l } from "./icon-Co72KtgF.js";
import { n as u } from "./utils-BOOZ0ppt.js";
import { t as d } from "./input-wrapper-DwSsP39J.js";
//#region src/components/helptext/helptext.ts
var f = class extends c {
constructor(...e) {
super(...e), this.forId = u(), this.helptext = "", this.helptextDropdown = "", this.helptextDropdownButton = d.props.helptextDropdownButton.default, this.isHelpTextOpen = !1;
}
render() {
return t`${t`<div class="${o({
"pkt-inputwrapper__helptext-container": !0,
"pkt-inputwrapper__has-helptext": this.helptext || this.helptextDropdown || this.hasSlotContent()
})}">
<div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
<div class="pkt-contents" name="helptext">${s(this)}</div>
${this.helptext && l(this.helptext)}
</div>
${this.helptextDropdown ? t`<div class="pkt-inputwrapper__helptext-expandable">
<button
class="pkt-link pkt-link--icon-right pkt-btn pkt-btn--small pkt-btn--tertiary pkt-btn--icon-right"
type="button"
@click=${() => {
let e = !this.isHelpTextOpen;
this.isHelpTextOpen = e, this.dispatchEvent(new CustomEvent("toggleHelpText", {
bubbles: !0,
detail: { isOpen: e }
}));
}}
>
<pkt-icon
class="pkt-btn__icon"
name="${this.isHelpTextOpen ? "chevron-thin-up" : "chevron-thin-down"}"
></pkt-icon>
<span class="pkt-btn__text">${l(this.helptextDropdownButton)}</span>
</button>
<div
class="${o({
"pkt-inputwrapper__helptext": !0,
"pkt-inputwrapper__helptext-expandable-open": this.isHelpTextOpen,
"pkt-inputwrapper__helptext-expandable-closed": !this.isHelpTextOpen
})}"
>
${l(this.helptextDropdown)}
</div>
</div>` : n}
</div>`}`;
}
};
i([a({
type: String,
reflect: !0
})], f.prototype, "forId", void 0), i([a({ type: String })], f.prototype, "helptext", void 0), i([a({ type: String })], f.prototype, "helptextDropdown", void 0), i([a({ type: String })], f.prototype, "helptextDropdownButton", void 0), i([r()], f.prototype, "isHelpTextOpen", void 0);
try {
e("pkt-helptext")(f);
} catch {
console.warn("Forsøker å definere <pkt-helptext>, men den er allerede definert");
}
//#endregion
//#region src/components/helptext/index.ts
var p = f;
//#endregion
export { f as n, p as t };