@oslokommune/punkt-elements/dist/alert-BEEnTiCb.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`),require(`./button-D-TOBaJB.cjs`);var i={name:`pkt-alert`,react:`PktAlert`,"css-class":`pkt-alert`,"dark-mode":!0,isElement:!0,isPureReact:!0,events:{onClose:{description:`React: Klikk-event for 'Lukk'-knappen`},close:{description:`Vue: Klikk-event for 'Lukk'-knappen`}},props:{title:{name:`Tittel`,description:`Tittelen som vises øverst i på meldingen`,type:`string`,category:`contents`},skin:{name:`Utseende`,description:`Hvordan type melding er dette?`,type:[`info`,`success`,`warning`,`error`],default:`info`,category:`ui`},date:{name:`Sist oppdatert`,description:`Dato som vises nederst i på meldingen`,type:`string`,category:`contents`},ariaLive:{name:`aria-live`,description:`Hvordan skal skjermleseren lese opp meldingen?`,type:[`off`,`polite`,`assertive`],default:`polite`,category:`accessibility`},compact:{name:`Kompakt`,description:`Gjør meldingen mindre`,type:`boolean`,category:`ui`,default:!1},closeAlert:{name:`Vis 'Lukk'-knapp`,description:`Viser 'Lukk'-knappen`,type:`boolean`,default:!1,category:`ui`}},slots:{default:{description:`Innholdet i meldingen`}}},a=class extends n.t{constructor(){super(),this.compact=i.props.compact.default,this.title=``,this.skin=i.props.skin.default,this.ariaLive=i.props.ariaLive.default,this.ariaLiveAttr=null,this.closeAlert=i.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._isClosed=!1}connectedCallback(){super.connectedCallback(),this.ariaLiveAttr=this.getAttribute(`aria-live`)||this.ariaLive}attributeChangedCallback(e,t,n){e===`ariaLive`&&(this.ariaLiveAttr=n),super.attributeChangedCallback(e,t,n)}updated(e){super.updated(e),e.has(`ariaLive`)&&(this.ariaLiveAttr=this.ariaLive),e.has(`_isClosed`)&&r.t(this,`pkt-hide`,this._isClosed)}render(){let r={"pkt-alert":!0,"pkt-alert--compact":this.compact,[`pkt-alert--${this.skin}`]:this.skin,"pkt-hide":this._isClosed},i={"pkt-alert__grid":!0,"pkt-alert__noTitle":!this.title,"pkt-alert__noDate":!this.date};return e.d`
      <div class=${t.t(r)} aria-live=${this.ariaLiveAttr}>
        <div class=${t.t(i)}>
          <pkt-icon
            class="pkt-alert__icon"
            aria-hidden="true"
            name=${this.skin===`info`?`alert-information`:`alert-${this.skin}`}
          ></pkt-icon>

          ${this.closeAlert?e.d`
                <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}
                  >
                    <span class="sr-only">Lukk</span>
                  </pkt-button>
                </div>
              `:e.l}
          ${this.title?e.d`<div class="pkt-alert__title">${this.title}</div>`:e.l}

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

          ${this.date?e.d`<div class="pkt-alert__date">Sist oppdatert: ${this.date}</div>`:e.l}
        </div>
      </div>
    `}};e.r([e.s({type:Boolean,reflect:!1})],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.s({type:String})],a.prototype,`ariaLive`,void 0),e.r([e.s({type:String,reflect:!0,attribute:`aria-live`})],a.prototype,`ariaLiveAttr`,void 0),e.r([e.s({type:Boolean,reflect:!0})],a.prototype,`closeAlert`,void 0),e.r([e.s({type:String,reflect:!0})],a.prototype,`date`,void 0),e.r([e.s({type:String,reflect:!0})],a.prototype,`role`,void 0),e.r([e.o()],a.prototype,`_isClosed`,void 0);try{e.c(`pkt-alert`)(a)}catch{console.warn(`Forsøker å definere <pkt-alert>, 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}});