@oslokommune/punkt-elements/dist/tag-BWm6s48d.js

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { e as u } from "./class-map-BpTj9gtz.js";
import { P as m, x as l, n as r, a as g } from "./element-CgEWt74-.js";
import { r as k } from "./state-Bo2bck5_.js";
import { P as y } from "./pkt-slot-controller-BPGj-LC5.js";
import { e as b, n as f } from "./ref-BBYSqgeW.js";
import "./icon-CC1js8eR.js";
import { o as d } from "./if-defined-CmuO4Vz9.js";
const _ = {
  closeTag: {
    default: !1
  },
  size: {
    default: "medium"
  },
  skin: {
    default: "blue"
  },
  type: {
    default: "button"
  }
}, n = {
  props: _
};
var $ = Object.defineProperty, S = Object.getOwnPropertyDescriptor, e = (s, i, p, o) => {
  for (var a = o > 1 ? void 0 : o ? S(i, p) : i, c = s.length - 1, h; c >= 0; c--)
    (h = s[c]) && (a = (o ? h(i, p, a) : h(a)) || a);
  return o && a && $(i, p, a), a;
};
let t = class extends m {
  constructor() {
    super(), this.defaultSlot = b(), this.closeTag = n.props.closeTag.default, this.size = n.props.size.default, this.skin = n.props.skin.default, this.textStyle = null, this.iconName = void 0, this.type = n.props.type.default, this.ariaLabel = null, this._isClosed = !1, this._ariaDescription = null, this.close = (s) => {
      this._isClosed = !0, this.dispatchEvent(
        new CustomEvent("close", { detail: { origin: s }, bubbles: !0, composed: !0 })
      ), this.dispatchEvent(
        new CustomEvent("on-close", { detail: { origin: s }, bubbles: !0, composed: !0 })
      );
    }, this.slotController = new y(this, this.defaultSlot), this._isClosed = !1;
  }
  /**
   * Lifecycle
   */
  firstUpdated(s) {
    var i, p;
    if (super.firstUpdated(s), this.closeTag && !this.ariaLabel) {
      const o = (p = (i = this.defaultSlot.value) == null ? void 0 : i.textContent) == null ? void 0 : p.trim();
      o && (this._ariaDescription = `Klikk for å fjerne ${o}`);
    }
  }
  render() {
    const s = {
      "pkt-tag": !0,
      [`pkt-tag--${this.size}`]: !!this.size,
      [`pkt-tag--${this.skin}`]: !!this.skin,
      [`pkt-tag--${this.textStyle}`]: !!this.textStyle
    }, i = {
      "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 ? l`
        <button
          class=${u(i)}
          type=${this.type}
          @click=${this.close}
          aria-label=${d(this.ariaLabel || void 0)}
          aria-description=${d(this._ariaDescription || void 0)}
        >
          ${this.iconName && l`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
          <span ${f(this.defaultSlot)}></span>
          <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
        </button>
      ` : l`
        <span class=${u(s)}>
          ${this.iconName && l`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
          <span ${f(this.defaultSlot)}></span>
        </span>
      `;
  }
};
e([
  r({ type: Boolean, reflect: !0 })
], t.prototype, "closeTag", 2);
e([
  r({ type: String, reflect: !0 })
], t.prototype, "size", 2);
e([
  r({ type: String, reflect: !0 })
], t.prototype, "skin", 2);
e([
  r({ type: String, reflect: !0 })
], t.prototype, "textStyle", 2);
e([
  r({ type: String, reflect: !0 })
], t.prototype, "iconName", 2);
e([
  r({ type: String })
], t.prototype, "type", 2);
e([
  r({ type: String })
], t.prototype, "ariaLabel", 2);
e([
  k()
], t.prototype, "_isClosed", 2);
e([
  k()
], t.prototype, "_ariaDescription", 2);
t = e([
  g("pkt-tag")
], t);
export {
  t as P
};