@proximus/lavender-heading 1.2.0-alpha.35

package/dist/index.js

@@ -0,0 +1,137 @@
+import { PxElement as g, colorValues as y } from "@proximus/lavender-common";
+const u = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var(--heading-color-default, var(--px-color-txt-primary-default));font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:700}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted, var(--px-color-txt-primary-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-5xl-mobile);line-height:var(--px-line-height-s);font-weight:900}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-4xl-mobile);line-height:var(--px-line-height-s);font-weight:900}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-3xl-mobile);line-height:var(--px-line-height-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-2xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-m-mobile)}.style-subtitle{font-size:var(--px-text-size-xl-mobile);font-weight:300}.style-title-s{font-size:var(--px-text-size-base-mobile)}@media only screen and (min-width: 768px){h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-5xl-tablet)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-4xl-tablet)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-3xl-tablet)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-2xl-tablet)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-l-tablet)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-m-tablet)}.style-title-s{font-size:var(--px-text-size-base-tablet)}.style-subtitle{font-size:var(--px-text-size-xl-tablet)}}@media only screen and (min-width: 1025px){h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-3xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-2xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-m-desktop)}.style-title-s{font-size:var(--px-text-size-base-desktop)}.style-subtitle{font-size:var(--px-text-size-xl-desktop)}}", k = ":host>*:first-child{--font-weight-light: 300;--font-weight-regular: 400;--font-weight-bold: 700;--font-weight-extrabold: 900}.color-inherit{color:inherit}.color-primary{color:var(--px-color-txt-primary-default)}.color-body{color:var(--px-color-txt-body-default)}.color-details{color:var(--px-color-txt-details-default)}.color-hover{color:var(--px-color-txt-hover-default)}.color-disabled{color:var(--px-color-txt-disabled-default)}.color-active{color:var(--px-color-txt-active-default)}.color-promo{color:var(--px-color-txt-promo-default)}.color-success{color:var(--px-color-txt-success-default)}.color-error{color:var(--px-color-txt-error-default)}.color-warning{color:var(--px-color-txt-warning-default)}.color-unlimited{color:var(--px-color-txt-unlimited-default)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-primary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .color-body{color:var(--px-color-txt-body-inverted)}:host([inverted]) .color-details{color:var(--px-color-txt-details-inverted)}:host([inverted]) .color-hover{color:var(--px-color-txt-hover-inverted)}:host([inverted]) .color-disabled{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .color-active{color:var(--px-color-txt-active-inverted)}:host([inverted]) .color-promo{color:var(--px-color-txt-promo-inverted)}:host([inverted]) .color-success{color:var(--px-color-txt-success-inverted)}:host([inverted]) .color-error{color:var(--px-color-txt-error-inverted)}:host([inverted]) .color-warning{color:var(--px-color-txt-warning-inverted)}:host([inverted]) .color-unlimited{color:var(--px-color-txt-unlimited-inverted)}.fontsize-inherit{font-size:inherit;line-height:inherit}.fontsize-xs{font-size:var(--px-text-size-xs-mobile)}.fontsize-s{font-size:var(--px-text-size-s-mobile)}.fontsize-base{font-size:var(--px-text-size-base-mobile)}.fontsize-m{font-size:var(--px-text-size-m-mobile)}.fontsize-l{font-size:var(--px-text-size-l-mobile)}.fontsize-xl{font-size:var(--px-text-size-xl-mobile)}.fontsize-2xl{font-size:var(--px-text-size-2xl-mobile)}.fontsize-3xl{font-size:var(--px-text-size-3xl-mobile);line-height:var(--px-line-height-s)}.fontsize-4xl{font-size:var(--px-text-size-4xl-mobile);line-height:var(--px-line-height-s)}.fontsize-5xl{font-size:var(--px-text-size-5xl-mobile);line-height:var(--px-line-height-s)}.fontsize-6xl{font-size:var(--px-text-size-6xl-mobile);line-height:var(--px-line-height-s)}.fontsize-7xl{font-size:var(--px-text-size-7xl-mobile);line-height:var(--px-line-height-s)}@media only screen and (min-width: 768px){.fontsize-xs{font-size:var(--px-text-size-xs-mobile)}.fontsize-s{font-size:var(--px-text-size-s-mobile)}.fontsize-base{font-size:var(--px-text-size-base-mobile)}.fontsize-m{font-size:var(--px-text-size-m-mobile)}.fontsize-l{font-size:var(--px-text-size-l-mobile)}.fontsize-xl{font-size:var(--px-text-size-xl-mobile)}.fontsize-2xl{font-size:var(--px-text-size-2xl-mobile)}.fontsize-3xl{font-size:var(--px-text-size-3xl-mobile)}.fontsize-4xl{font-size:var(--px-text-size-4xl-mobile)}.fontsize-5xl{font-size:var(--px-text-size-5xl-mobile)}.fontsize-6xl{font-size:var(--px-text-size-6xl-mobile)}.fontsize-7xl{font-size:var(--px-text-size-7xl-mobile)}}@media only screen and (min-width: 1025px){.fontsize-xs{font-size:var(--px-text-size-xs-tablet)}.fontsize-s{font-size:var(--px-text-size-s-tablet)}.fontsize-base{font-size:var(--px-text-size-base-tablet)}.fontsize-m{font-size:var(--px-text-size-m-tablet)}.fontsize-l{font-size:var(--px-text-size-l-tablet)}.fontsize-xl{font-size:var(--px-text-size-xl-tablet)}.fontsize-2xl{font-size:var(--px-text-size-2xl-tablet)}.fontsize-3xl{font-size:var(--px-text-size-3xl-tablet)}.fontsize-4xl{font-size:var(--px-text-size-4xl-tablet)}.fontsize-5xl{font-size:var(--px-text-size-5xl-tablet)}.fontsize-6xl{font-size:var(--px-text-size-6xl-tablet)}.fontsize-7xl{font-size:var(--px-text-size-7xl-tablet)}}@media only screen and (min-width: 1441px){.fontsize-xs{font-size:var(--px-text-size-xs-desktop)}.fontsize-s{font-size:var(--px-text-size-s-desktop)}.fontsize-base{font-size:var(--px-text-size-base-desktop)}.fontsize-m{font-size:var(--px-text-size-m-desktop)}.fontsize-l{font-size:var(--px-text-size-l-desktop)}.fontsize-xl{font-size:var(--px-text-size-xl-desktop)}.fontsize-2xl{font-size:var(--px-text-size-2xl-desktop)}.fontsize-3xl{font-size:var(--px-text-size-3xl-desktop)}.fontsize-4xl{font-size:var(--px-text-size-4xl-desktop)}.fontsize-5xl{font-size:var(--px-text-size-5xl-desktop)}.fontsize-6xl{font-size:var(--px-text-size-6xl-desktop)}.fontsize-7xl{font-size:var(--px-text-size-7xl-desktop)}}.fontweight-inherit{font-weight:inherit}.fontweight-normal{font-weight:var(--font-weight-regular)}.fontweight-bold{font-weight:var(--font-weight-bold)}.fontweight-extrabold{font-weight:var(--font-weight-extrabold)}.fontweight-light{font-weight:var(--font-weight-light)}", b = new CSSStyleSheet();
+b.replaceSync(u);
+const m = new CSSStyleSheet();
+m.replaceSync(k);
+const w = [
+  "",
+  "default",
+  "title-4xl",
+  "title-3xl",
+  "title-2xl",
+  "title-xl",
+  "title-l",
+  "title-m",
+  "title-s",
+  "subtitle"
+];
+class o extends g {
+  template() {
+    return "<slot></slot>";
+  }
+  constructor(t) {
+    super(b, m);
+    const e = document.createElement(t);
+    e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "variant", "color", "inverted"];
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(t) {
+    this.setAttribute("variant", t);
+  }
+  get color() {
+    return this.getAttribute("color");
+  }
+  set color(t) {
+    this.setAttribute("color", t);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(t) {
+    this.setAttribute("inverted", t);
+  }
+  attributeChangedCallback(t, e, i) {
+    if (e !== i)
+      switch (t) {
+        case "variant":
+          this.updateAttribute(t, e, i, w);
+          break;
+        case "color":
+          this.updateColor(e, i, y);
+          break;
+        default:
+          super.attributeChangedCallback(t, e, i);
+          break;
+      }
+  }
+  toggleClass(t, e) {
+    t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`);
+  }
+  checkName(t, e) {
+    return t.includes(e);
+  }
+  updateAttribute(t, e, i, s) {
+    this.checkName(s, i) ? this.toggleClass(e, i) : console.error(`Bad "${t}" value for`, this.$el);
+  }
+  updateColor(t, e, i) {
+    const s = this.inverted === null ? "default" : "inverted";
+    t !== null && t !== "" && t !== "default" && this.$el.style.setProperty(
+      `--heading-color-${s}`,
+      `var(--px-color-txt-${t}-${s})`
+    ), e !== null && e !== "" && e !== "default" && this.$el.style.setProperty(
+      `--heading-color-${s}`,
+      `var(--px-color-txt-${e}-${s})`
+    ), this.checkName(i, e) || console.error("Bad color value for", this.$el);
+  }
+}
+const z = class z extends o {
+  constructor() {
+    super("h1");
+  }
+};
+z.nativeName = "h1";
+let l = z;
+customElements.define("px-h1", l);
+const v = class v extends o {
+  constructor() {
+    super("h2");
+  }
+};
+v.nativeName = "h2";
+let r = v;
+customElements.define("px-h2", r);
+const d = class d extends o {
+  constructor() {
+    super("h3");
+  }
+};
+d.nativeName = "h3";
+let x = d;
+customElements.define("px-h3", x);
+const f = class f extends o {
+  constructor() {
+    super("h4");
+  }
+};
+f.nativeName = "h4";
+let n = f;
+customElements.define("px-h4", n);
+const p = class p extends o {
+  constructor() {
+    super("h5");
+  }
+};
+p.nativeName = "h5";
+let a = p;
+customElements.define("px-h5", a);
+const c = class c extends o {
+  constructor() {
+    super("h6");
+  }
+};
+c.nativeName = "h6";
+let h = c;
+customElements.define("px-h6", h);
+export {
+  l as H1,
+  r as H2,
+  x as H3,
+  n as H4,
+  a as H5,
+  h as H6
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@proximus/lavender-heading",
+  "version": "1.2.0-alpha.35",
+  "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"
+        ]
+      }
+    }
+  }
+}