@proximus/lavender-icon 2.0.0-alpha.2 → 2.0.0-alpha.200

package/dist/index.es.js

@@ -1,183 +1 @@
-var u = (o) => {
-  throw TypeError(o);
-};
-var p = (o, r, e) => r.has(o) || u("Cannot " + e);
-var s = (o, r, e) => (p(o, r, "read from private field"), e ? e.call(o) : r.get(o)), a = (o, r, e) => r.has(o) ? u("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(o) : r.set(o, e), d = (o, r, e, t) => (p(o, r, "write to private field"), t ? t.call(o, e) : r.set(o, e), e);
-import { WithExtraAttributes as m, iconSizeValuesKC as b } from "@proximus/lavender-common";
-class f extends HTMLElement {
-  constructor() {
-    super();
-  }
-  static get observedAttributes() {
-    return ["name", "src", "type", "format"];
-  }
-  connectedCallback() {
-    if (document.querySelectorAll(
-      `px-icon-set[name="${this.getAttribute("name")}"]`
-    ).length > 1 && (console.warn(
-      "Only one <px-icon-set> component is allowed, self removing"
-    ), this.remove()), this.getAttribute("type") === "font") {
-      const e = document.createElement("style");
-      e.setAttribute("type", "text/css"), e.setAttribute("data-name", this.getAttribute("name")), e.textContent = `
-@font-face {
-  font-family: 'lavender';
-  src:
-    url('${this.getAttribute("src")}') format(${this.getAttribute("format")}),
-  font-weight: normal;
-  font-style: normal;
-  font-display: block;
-}
-      `, document.head.appendChild(e);
-    }
-  }
-  disconnectedCallback() {
-    const r = document.querySelector(
-      `style[data-name="${this.getAttribute("name")}"]`
-    );
-    r && r.remove();
-  }
-}
-customElements.get("px-icon-set") || customElements.define("px-icon-set", f);
-const g = [
-  "Brand",
-  "Accent",
-  "Neutral",
-  "Dimmed",
-  "PurposeSuccess",
-  "PurposeWarning",
-  "PurposeError",
-  "PurposeUnlimited",
-  "PurposePromo",
-  "StateHover",
-  "StateActive",
-  "StateDisabled"
-], x = ["Inherit", ...g].map(
-  (o) => o.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
-), A = ":host{display:inline-flex;flex-direction:column;justify-content:center}svg{font-size:var(--px-size-icon-s);line-height:var(--px-font-line-height-xs);width:1em;height:1em;color:var(--px-color-icon-brand-default)}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.accent{color:var(--px-color-icon-accent-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) svg{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .accent{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .dimmed{color:var(--px-color-icon-dimmed-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}", h = new CSSStyleSheet();
-h.replaceSync(A);
-const z = [
-  "name",
-  "size",
-  "color",
-  "aria-label",
-  "inverted",
-  "from",
-  "disabled"
-];
-var c, n, l;
-class $ extends m {
-  constructor(...e) {
-    var t;
-    super(...e, h);
-    a(this, c);
-    a(this, n);
-    a(this, l, () => `<svg aria-hidden="true">
-      <use xlink:href="#icon-${this.name}"></use>
-    </svg>`);
-    this.shadowRoot.innerHTML = s(this, l).call(this), d(this, n, (t = this.attachInternals) == null ? void 0 : t.call(this)), s(this, n) && (s(this, n).role = "img");
-  }
-  static get observedAttributes() {
-    return [...super.observedAttributes, ...z];
-  }
-  attributeChangedCallback(e, t, i) {
-    if (t !== i)
-      switch (e) {
-        case "name":
-          this.updateName(t, i);
-          break;
-        case "size":
-          this.updateAttribute(e, t, i, b);
-          break;
-        case "color":
-          this.updateAttribute(e, t, i, x);
-          break;
-        case "disabled":
-          this.color = "state-disabled";
-          break;
-        case "aria-label":
-          if (!s(this, n))
-            return;
-          i ? s(this, n).ariaHidden = "false" : s(this, n).ariaHidden = "true";
-          break;
-      }
-  }
-  connectedCallback() {
-    const e = document.querySelectorAll("px-icon-set");
-    e || console.log("<px-icon-set> component not found");
-    for (const t of e) {
-      if (!t.getAttribute("name") || !t.getAttribute("src")) {
-        console.error("Icon name or src not found");
-        continue;
-      }
-      t.getAttribute("name") === this.from && t.getAttribute("type") !== "font" && (d(this, c, t.getAttribute("src")), this.$el.firstElementChild.setAttribute(
-        "xlink:href",
-        `${s(this, c)}#icon-${this.name}`
-      ));
-    }
-    !this.ariaLabel && s(this, n) && (s(this, n).ariaHidden = "true");
-  }
-  updateAttribute(e, t, i, v) {
-    t !== null && t !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${t}`) : this.$el.classList.toggle(t)), i !== null && i !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${i}`) : this.$el.classList.toggle(i)), this.checkName(v, i) || console.error(`${i} is not an allowed ${e} value`);
-  }
-  updateName(e, t) {
-    s(this, c) && this.$el.firstElementChild.setAttribute(
-      "xlink:href",
-      `${s(this, c)}#icon-${t}`
-    );
-  }
-  get $el() {
-    return this.shadowRoot.querySelector("svg");
-  }
-  get name() {
-    return this.getAttribute("name");
-  }
-  set name(e) {
-    this.setAttribute("name", e);
-  }
-  get size() {
-    return this.getAttribute("size");
-  }
-  set size(e) {
-    this.setAttribute("size", e);
-  }
-  get color() {
-    return this.getAttribute("color");
-  }
-  set color(e) {
-    this.setAttribute("color", e);
-  }
-  get arialabel() {
-    return this.getAttribute("aria-label");
-  }
-  set arialabel(e) {
-    this.setAttribute("aria-label", e);
-  }
-  get inverted() {
-    return this.getAttribute("inverted");
-  }
-  set inverted(e) {
-    this.setAttribute("inverted", e);
-  }
-  get from() {
-    return this.getAttribute("from");
-  }
-  set from(e) {
-    this.setAttribute("from", e);
-  }
-  get disabled() {
-    return this.getAttribute("disabled");
-  }
-  set disabled(e) {
-    this.setAttribute("disabled", e);
-  }
-}
-c = new WeakMap(), n = new WeakMap(), l = new WeakMap();
-customElements.get("px-icon") || customElements.define("px-icon", $);
-export {
-  $ as Icon,
-  f as IconSet,
-  g as iconColorValues,
-  x as iconColorValuesKC,
-  z as observedAttributes,
-  h as styleSheet
-};
+export * from "@proximus/lavender-icon-common";