@oslokommune/punkt-elements/dist/messagebox-D1QeQqb8.cjs

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),n=require(`./element-with-slot-CWoTGA1B.cjs`),r=require(`./classutils-z8YsPlOf.cjs`);require(`./icon-Dr8sfT2X.cjs`);var i={name:`pkt-messagebox`,react:`PktMessagebox`,"css-class":`pkt-messagebox`,isElement:!0,isPureReact:!0,events:{onClose:{description:`React: Event som trigges når meldingsboksen lukkes`},"on-close":{description:`Vue: Event som trigges når meldingsboksen lukkes`}},props:{title:{name:`Tittel`,description:`Tittelen på meldingsboksen`,type:`string`,category:`contents`},skin:{name:`Utseende`,description:`Velg farge på meldingsboksen`,type:[`beige`,`blue`,`red`,`green`],category:`ui`,default:`beige`},compact:{name:`Kompakt`,description:`Gjør meldingsboksen mindre`,type:`boolean`,category:`ui`,default:!1},closable:{name:`Kan lukkes`,description:`Viser lukkeknapp`,type:`boolean`,category:`ui`,default:!1}},slots:{default:{description:`Innholdet i meldingsboksen`}}},a=class extends n.t{constructor(){super(),this.closable=i.props.closable.default,this.compact=i.props.compact.default,this.title=``,this.skin=i.props.skin.default,this._isClosed=!1,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent(`close`,{detail:{origin:e},bubbles:!0})),this.dispatchEvent(new CustomEvent(`on-close`,{detail:{origin:e},bubbles:!0}))},this._isClosed=!1}updated(e){super.updated(e),e.has(`_isClosed`)&&r.t(this,`pkt-hide`,this._isClosed)}render(){return e.d`<div class=${t.t({"pkt-messagebox":!0,"pkt-messagebox--compact":this.compact,[`pkt-messagebox--${this.skin}`]:this.skin,"pkt-messagebox--closable":this.closable,"pkt-hide":this._isClosed})}>
      ${this.closable?e.d`<div class="pkt-messagebox__close">
            <button
              @click=${this.close}
              class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
              aria-label="Lukk"
            >
              <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
            </button>
          </div>`:e.l}
      ${this.title?e.d`<div class="pkt-messagebox__title">${this.title}</div>`:e.l}
      <div class="pkt-messagebox__text">${n.n(this)}</div>
    </div>`}};e.r([e.s({type:Boolean,reflect:!0})],a.prototype,`closable`,void 0),e.r([e.s({type:Boolean,reflect:!0})],a.prototype,`compact`,void 0),e.r([e.s({type:String,reflect:!0})],a.prototype,`title`,void 0),e.r([e.s({type:String,reflect:!0})],a.prototype,`skin`,void 0),e.r([e.o()],a.prototype,`_isClosed`,void 0);try{e.c(`pkt-messagebox`)(a)}catch{console.warn(`Forsøker å definere <pkt-messagebox>, men den er allerede definert`)}var o=a;Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});