@proximus/lavender-price 1.0.0-alpha.32

package/dist/index.js

@@ -0,0 +1,87 @@
+import { PxElement as v } from "@proximus/lavender-common";
+const h = '.price{--price-s: var(--px-text-size-l-mobile);--price-m: var(--px-text-size-xl-mobile);--price-l: var(--px-text-size-3xl-mobile);font-family:var(--px-font-family);white-space:nowrap;font-weight:700;color:var(--px-color-txt-primary-default);font-size:var(--price-s)}@media only screen and (min-width: 641px){.price{--price-s: var(--px-text-size-l-tablet);--price-m: var(--px-text-size-xl-tablet);--price-l: var(--px-text-size-3xl-tablet)}}@media only screen and (min-width: 1025px){.price{--price-s: var(--px-text-size-l-desktop);--price-m: var(--px-text-size-xl-desktop);--price-l: var(--px-text-size-3xl-desktop)}}.promo,.free{color:var(--px-color-txt-promo-default)}.neutral{color:var(--px-color-txt-body-default)}.exceeding{color:var(--px-color-txt-error-default)}.disabled{color:var(--px-color-txt-disabled-default)}::slotted([slot="oldprice"]){text-decoration:line-through;color:var(--px-color-txt-body-default);font-size:var(--px-text-size-base-mobile);font-weight:400}@media only screen and (min-width: 641px){{font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1025px){{font-size:var(--px-text-size-base-desktop)}}::slotted([slot="newpromoprice"]){position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}:host([inverted]) .price{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .promo,:host([inverted]) .free{color:var(--px-color-txt-promo-inverted)}:host([inverted]) .neutral{color:var(--px-color-txt-body-inverted)}:host([inverted]) .exceeding{color:var(--px-color-txt-error-inverted)}:host([inverted]) .disabled{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) ::slotted(s){color:var(--px-color-txt-body-inverted)}.price:not(.promo):not(.free) ::slotted(s){display:none}::slotted(.euro){font-size:calc(var(--price-s) * .75)}::slotted(.decimals){font-size:calc(var(--price-s) * .5)}.m{font-size:var(--price-m)}:host([size="m"]) ::slotted(.decimals){font-size:calc(var(--price-m) * .5)}:host([size="m"]) ::slotted(.euro){font-size:calc(var(--price-m) * .75)}.l{font-size:var(--price-l)}:host([size="l"]) ::slotted(.decimals){font-size:calc(var(--price-l) * .5)}:host([size="l"]) ::slotted(.euro){font-size:calc(var(--price-l) * .75)}', c = new CSSStyleSheet();
+c.replaceSync(h);
+const m = [
+  "default",
+  "promo",
+  "free",
+  "neutral",
+  "exceeding",
+  "disabled"
+], b = ["", "s", "m", "l"], a = class a extends v {
+  constructor() {
+    super(c), this.template = () => '<span class="price"><slot name="oldprice"></slot><slot name="newpromoprice"></slot><slot></slot></span>', this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "variant", "size", "inverted"];
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(e) {
+    this.setAttribute("variant", e);
+  }
+  get size() {
+    return this.getAttribute("size");
+  }
+  set size(e) {
+    this.setAttribute("size", e);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(e) {
+    this.setAttribute("inverted", e);
+  }
+  connectedCallback() {
+    this.buildPrice();
+  }
+  attributeChangedCallback(e, t, r) {
+    if (t !== r)
+      switch (e) {
+        case "variant":
+          this.updateAttribute(e, t, r, m);
+          break;
+        case "size":
+          this.updateAttribute(e, t, r, b);
+          break;
+        default:
+          super.attributeChangedCallback(e, t, r);
+          break;
+      }
+  }
+  checkName(e, t) {
+    return e.includes(t);
+  }
+  toggleClass(e, t) {
+    e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(e), t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(t);
+  }
+  updateAttribute(e, t, r, i) {
+    this.toggleClass(t, r), this.checkName(i, r) || console.error(
+      `${r} is not an allowed ${e} value for ${this.$el}`
+    );
+  }
+  buildPrice() {
+    let e = this.innerHTML.trim();
+    const t = this.querySelector('[slot="oldprice"]');
+    let r = "", i = "", s;
+    t && t.innerHTML !== "" ? (t.innerHTML = "€" + t.innerHTML, s = this.querySelector('[slot="newpromoprice"]'), s ? (i = s.outerHTML, e = s.nextSibling.textContent) : e = t.nextSibling.textContent, r = t.outerHTML + " ") : t && t.innerHTML === "" && (e = t.nextSibling.textContent);
+    const p = /^[\d|.|,]+/.test(e);
+    let o = "";
+    p ? o = '<span class="euro">€</span>' : o = "";
+    const l = e.charAt(e.length - 3);
+    if (l === "." || l === ",") {
+      const [d, x] = e.split(l);
+      this.innerHTML = `${r}${i}${o}${d}<span class="decimals">${l}${x}</span>`;
+    } else
+      this.innerHTML = `${r}${i}${o}${e}`;
+  }
+};
+a.nativeName = "span";
+let n = a;
+customElements.define("px-price", n);
+export {
+  n as Price,
+  b as sizeValues,
+  m as variantValues
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@proximus/lavender-price",
+  "version": "1.0.0-alpha.32",
+  "description": "",
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./src/*.css": {
+      "development": "src/*.css"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "scripts": {
+    "build": "rm -rf dist;tsc; vite build",
+    "test": "vitest run --coverage"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "15a231df98020f83813279639a9a7712a5a5e759",
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          "CHANGELOG.md",
+          "package.json",
+          "dist/*.js",
+          "dist/css/**/*.css"
+        ]
+      }
+    }
+  }
+}