@oslokommune/punkt-elements
Version:
Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo
13 lines (12 loc) • 2.33 kB
JavaScript
"use strict";const e=require("./element-6DBpyGQm.cjs"),u=require("./pkt-slot-controller-BzddBp7z.cjs"),n=require("./ref-iJtiv3o2.cjs"),b=require("./class-map-BBG2gMX4.cjs"),d=require("./state-DPobt-Yz.cjs");require("./icon-B_ryAy4Q.cjs");const k=require("./classutils-BwNK82ZQ.cjs"),h={skin:{default:"beige"},compact:{default:!1},closable:{default:!1}},p={props:h};var f=Object.defineProperty,x=Object.getOwnPropertyDescriptor,o=(i,t,a,l)=>{for(var s=l>1?void 0:l?x(t,a):t,r=i.length-1,c;r>=0;r--)(c=i[r])&&(s=(l?c(t,a,s):c(s))||s);return l&&s&&f(t,a,s),s};exports.PktMessagebox=class extends e.PktElement{constructor(){super(),this.defaultSlot=n.e(),this.closable=p.props.closable.default,this.compact=p.props.compact.default,this.title="",this.skin=p.props.skin.default,this._isClosed=!1,this.close=t=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:t},bubbles:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:t},bubbles:!0}))},this.slotController=new u.PktSlotController(this,this.defaultSlot),this._isClosed=!1}updated(t){super.updated(t),t.has("_isClosed")&&k.updateClassAttribute(this,"pkt-hide",this._isClosed)}render(){const t={"pkt-messagebox":!0,"pkt-messagebox--compact":this.compact,[`pkt-messagebox--${this.skin}`]:this.skin,"pkt-messagebox--closable":this.closable,"pkt-hide":this._isClosed};return e.x`<div class=${b.e(t)}>
${this.closable?e.x`<div class="pkt-messagebox__close">
<button
=${this.close}
class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
>
<pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
</button>
</div>`:e.E}
${this.title?e.x`<div class="pkt-messagebox__title">${this.title}</div>`:e.E}
<div class="pkt-messagebox__text" ${n.n(this.defaultSlot)}></div>
</div>`}};o([e.n({type:Boolean,reflect:!0})],exports.PktMessagebox.prototype,"closable",2);o([e.n({type:Boolean,reflect:!0})],exports.PktMessagebox.prototype,"compact",2);o([e.n({type:String,reflect:!0})],exports.PktMessagebox.prototype,"title",2);o([e.n({type:String,reflect:!0})],exports.PktMessagebox.prototype,"skin",2);o([d.r()],exports.PktMessagebox.prototype,"_isClosed",2);exports.PktMessagebox=o([e.t("pkt-messagebox")],exports.PktMessagebox);