@oslokommune/punkt-elements/dist/alert-BH0lJ2ny.cjs

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

"use strict";const c=require("./class-map-BBG2gMX4.cjs"),t=require("./element-6DBpyGQm.cjs"),d=require("./state-DPobt-Yz.cjs"),h=require("./pkt-slot-controller-BzddBp7z.cjs"),u=require("./ref-iJtiv3o2.cjs"),k=require("./classutils-BwNK82ZQ.cjs");require("./icon-B_ryAy4Q.cjs");const v={skin:{default:"info"},ariaLive:{default:"polite"},compact:{default:!1},closeAlert:{default:!1}},a={props:v};var f=Object.defineProperty,_=Object.getOwnPropertyDescriptor,i=(o,e,s,l)=>{for(var r=l>1?void 0:l?_(e,s):e,p=o.length-1,n;p>=0;p--)(n=o[p])&&(r=(l?n(e,s,r):n(r))||r);return l&&r&&f(e,s,r),r};exports.PktAlert=class extends t.PktElement{constructor(){super(),this.defaultSlot=u.e(),this.compact=a.props.compact.default,this.title="",this.skin=a.props.skin.default,this.ariaLive=a.props.ariaLive.default,this["aria-live"]=null,this.closeAlert=a.props.closeAlert.default,this.date=null,this.role="status",this._isClosed=!1,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:e},bubbles:!0,composed:!0}))},this.slotController=new h.PktSlotController(this,this.defaultSlot),this._isClosed=!1}connectedCallback(){super.connectedCallback(),this["aria-live"]=this.getAttribute("aria-live")||this.ariaLive}attributeChangedCallback(e,s,l){e==="ariaLive"&&(this["aria-live"]=l),super.attributeChangedCallback(e,s,l)}updated(e){super.updated(e),e.has("ariaLive")&&(this["aria-live"]=this.ariaLive),e.has("_isClosed")&&k.updateClassAttribute(this,"pkt-hide",this._isClosed)}render(){const e={"pkt-alert":!0,"pkt-alert--compact":this.compact,[`pkt-alert--${this.skin}`]:this.skin,"pkt-hide":this._isClosed},s={"pkt-alert__grid":!0,"pkt-alert__noTitle":!this.title,"pkt-alert__noDate":!this.date};return t.x`
      <div class=${c.e(e)} aria-live=${this["aria-live"]}>
        <div class=${c.e(s)}>
          <pkt-icon
            class="pkt-alert__icon"
            aria-hidden="true"
            name=${this.skin==="info"?"alert-information":`alert-${this.skin}`}
          ></pkt-icon>

          ${this.closeAlert?t.x`
                <div class="pkt-alert__close">
                  <pkt-button
                    tabindex="0"
                    aria-label="close"
                    size=${this.compact?"small":"medium"}
                    type="button"
                    skin="tertiary"
                    iconName="close"
                    variant="icon-only"
                    @click=${this.close}
                  >
                  </pkt-button>
                </div>
              `:t.E}
          ${this.title?t.x`<div class="pkt-alert__title">${this.title}</div>`:t.E}

          <div class="pkt-alert__text" ${u.n(this.defaultSlot)}></div>

          ${this.date?t.x`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>`:t.E}
        </div>
      </div>
    `}};i([t.n({type:Boolean,reflect:!1})],exports.PktAlert.prototype,"compact",2);i([t.n({type:String,reflect:!0})],exports.PktAlert.prototype,"title",2);i([t.n({type:String,reflect:!0})],exports.PktAlert.prototype,"skin",2);i([t.n({type:String})],exports.PktAlert.prototype,"ariaLive",2);i([t.n({type:String,reflect:!0})],exports.PktAlert.prototype,"aria-live",2);i([t.n({type:Boolean,reflect:!0})],exports.PktAlert.prototype,"closeAlert",2);i([t.n({type:String,reflect:!0})],exports.PktAlert.prototype,"date",2);i([t.n({type:String,reflect:!0})],exports.PktAlert.prototype,"role",2);i([d.r()],exports.PktAlert.prototype,"_isClosed",2);exports.PktAlert=i([t.t("pkt-alert")],exports.PktAlert);