@oslokommune/punkt-elements/dist/tag-DWtajZk6.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`);require(`./icon-Dr8sfT2X.cjs`);const r=require(`./if-defined-XKOD_t_V.cjs`);var i={name:`pkt-tag`,react:`PktTag`,"css-class":`pkt-tag`,isElement:!0,"dark-mode":!0,props:{size:{name:`Størrelse`,description:`Størrelsen på taggen`,required:!1,default:`medium`,type:[`small`,`medium`,`large`],category:`ui`},iconName:{name:`Ikon`,description:`Navnet på ikonet som skal vises i taggen`,type:`icon`,required:!1,category:`ui`},skin:{name:`Utseende`,description:`Utseendet til taggen`,required:!1,default:`blue`,type:[`blue`,`blue-light`,`blue-dark`,`green`,`red`,`beige`,`yellow`,`gray`],category:`ui`},closeTag:{name:`Lukk tag`,description:`Skal taggen ha en lukkeknapp?`,type:`boolean`,required:!1,default:!1,category:`ui`},textStyle:{name:`Tekststil`,description:`Stilen på teksten i taggen`,required:!1,default:`normal-text`,type:[`thin-text`,`normal-text`],category:`ui`},type:{name:`Type, dersom lukkeknapp`,description:`Type tag, brukes for å spesifisere om det er en knapp, submit eller reset`,required:!1,default:`button`,type:[`button`,`submit`,`reset`],category:`tech`},ariaLabel:{name:`aria-label`,description:`aria-label for taggen, brukes for tilgjengelighet`,type:`string`,required:!1,category:`accessibility`}},slots:{default:{description:`Teksten til tag`}}},a=class extends n.t{constructor(){super(),this.closeTag=i.props.closeTag.default,this.size=i.props.size.default,this.skin=i.props.skin.default,this.textStyle=null,this.iconName=void 0,this.type=i.props.type.default,this.ariaLabel=null,this.buttonTabindex=void 0,this._isClosed=!1,this._ariaDescription=null,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent(`close`,{detail:{origin:e},bubbles:!1,composed:!0})),this.dispatchEvent(new CustomEvent(`on-close`,{detail:{origin:e},bubbles:!1,composed:!0}))},this._isClosed=!1}firstUpdated(e){if(super.firstUpdated(e),this.closeTag&&!this.ariaLabel){let e=this.querySelector(`button span, .pkt-tag > span`)?.textContent?.trim();e&&(this._ariaDescription=`Klikk for å fjerne ${e}`)}}render(){let i={"pkt-tag":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle},a={"pkt-tag":!0,"pkt-btn":!0,"pkt-btn--tertiary":!0,[`pkt-tag--${this.textStyle}`]:!!this.textStyle,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,"pkt-btn--icons-right-and-left":this.closeTag&&!!this.iconName,"pkt-hide":this._isClosed};return this.closeTag?e.d`
        <button
          class=${t.t(a)}
          type=${this.type}
          tabindex=${r.t(this.buttonTabindex)}
          @click=${this.close}
          aria-label=${r.t(this.ariaLabel||void 0)}
          aria-description=${r.t(this._ariaDescription||void 0)}
        >
          ${this.iconName&&e.d`<pkt-icon
            class="pkt-tag__icon"
            name=${this.iconName}
            aria-hidden="true"
          ></pkt-icon>`}
          <span>${n.n(this)}</span>
          <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
        </button>
      `:e.d`
        <span class=${t.t(i)}>
          ${this.iconName&&e.d`<pkt-icon
            class="pkt-tag__icon"
            name=${this.iconName}
            aria-hidden="true"
          ></pkt-icon>`}
          <span>${n.n(this)}</span>
        </span>
      `}};e.r([e.s({type:Boolean,reflect:!0})],a.prototype,`closeTag`,void 0),e.r([e.s({type:String,reflect:!0})],a.prototype,`size`,void 0),e.r([e.s({type:String,reflect:!0})],a.prototype,`skin`,void 0),e.r([e.s({type:String,reflect:!0})],a.prototype,`textStyle`,void 0),e.r([e.s({type:String,reflect:!0})],a.prototype,`iconName`,void 0),e.r([e.s({type:String})],a.prototype,`type`,void 0),e.r([e.s({type:String})],a.prototype,`ariaLabel`,void 0),e.r([e.s({type:Number,attribute:`button-tabindex`})],a.prototype,`buttonTabindex`,void 0),e.r([e.o()],a.prototype,`_isClosed`,void 0),e.r([e.o()],a.prototype,`_ariaDescription`,void 0);try{e.c(`pkt-tag`)(a)}catch{console.warn(`Forsøker å definere <pkt-tag>, 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}});