@proximus/lavender-icon-common 1.0.0-alpha.1

package/dist/index.es.js

@@ -0,0 +1,183 @@
+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-accent-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-accent-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
+};

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@proximus/lavender-icon-common",
+  "version": "1.0.0-alpha.1",
+  "description": "",
+  "main": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "npm run clean && vite build && npm run transform-package-json && npm run wc-manifest",
+    "test": "vitest run --coverage",
+    "transform-package-json": "node ../../../../scripts/tranformPackageJson.js package.json dist/far/away",
+    "wc-manifest": "cem analyze --globs \"src/*\" --config ../custom-elements-manifest.config.js  --outdir dist"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "customElements": "dist/custom-elements.json",
+  "web-types": "./dist/web-types.json"
+}