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

package/dist/Skeleton.d.ts

@@ -10,8 +10,8 @@ export declare class Skeleton extends PxElement<HTMLDivElement> {
     attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
     updateVariant(variant: string): void;
     get $container(): Container;
-    get variant(): string;
-    set variant(value: string);
+    get variant(): string | null;
+    set variant(value: string | null);
     get inverted(): boolean;
     set inverted(value: boolean);
 }

package/dist/custom-elements.json

@@ -0,0 +1,131 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/Skeleton.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "skeletonsVariantValues",
+          "type": {
+            "text": "array"
+          },
+          "default": "[ 'heading-s', 'heading-m', 'heading-l', 'body', 'body-block', 'action-s', 'action-l', 'asset-s', 'asset-l', 'panel', ]"
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Skeleton",
+          "members": [
+            {
+              "kind": "field",
+              "name": "nativeName",
+              "type": {
+                "text": "string"
+              },
+              "static": true,
+              "default": "'div'"
+            },
+            {
+              "kind": "field",
+              "name": "template",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "updateVariant",
+              "parameters": [
+                {
+                  "name": "variant",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "$container",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "variant"
+            },
+            {
+              "kind": "field",
+              "name": "inverted"
+            },
+            {
+              "kind": "field",
+              "name": "innerHTML"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant"
+            },
+            {
+              "name": "inverted"
+            }
+          ],
+          "superclass": {
+            "name": "PxElement",
+            "package": "@proximus/lavender-common"
+          },
+          "tagName": "px-skeleton",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "skeletonsVariantValues",
+          "declaration": {
+            "name": "skeletonsVariantValues",
+            "module": "src/Skeleton.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Skeleton",
+          "declaration": {
+            "name": "Skeleton",
+            "module": "src/Skeleton.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "px-skeleton",
+          "declaration": {
+            "name": "Skeleton",
+            "module": "src/Skeleton.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/Skeleton"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/skeleton.css",
+      "declarations": [],
+      "exports": []
+    }
+  ]
+}

package/dist/index.es.js

@@ -1,82 +1,70 @@
-import { PxElement as l } from "@proximus/lavender-common";
-const d = ":host,:host>*{display:block;box-sizing:border-box}.skeleton-wrapper{display:flex;min-width:40px;flex-direction:column;align-items:flex-start;gap:10px;min-height:16px}.skeleton{border-radius:var(--px-radius-main);background-color:var(--px-color-background-state-disabled-default);align-self:stretch;height:16px;background-image:linear-gradient(-80deg,#0000,#0000 25%,#ffffff3d,#ffffff3d 55%,#0000 75%,#0000);background-size:200% 100%;animation:skeletonLoading 1.5s ease-in-out infinite}[inverted] .skeleton{background-color:var(--px-color-background-state-disabled-inverted);background-image:linear-gradient(-80deg,#fff0,#fff0 25%,#0000001a,#0000001a 55%,#fff0 75%,#fff0)}.skeleton.heading-s,.skeleton.heading-m,.skeleton.heading-l{max-width:240px}.skeleton.heading-s{height:24px}.skeleton.heading-m{height:32px}.skeleton.heading-l{height:40px}.skeleton.body,.skeleton.body-block{width:300px}.skeleton.body,.skeleton.body-block{height:16px}.skeleton.body-block:nth-of-type(3){width:180px}.skeleton.action-s,.skeleton.action-l{height:40px;border-radius:var(--px-radius-pill)}.skeleton.action-s{width:40px}.skeleton.action-l{width:160px}.skeleton.asset-s{width:40px;height:40px}.skeleton.asset-l{width:80px;height:80px}.skeleton.panel{width:300px;height:200px}@keyframes skeletonLoading{0%{background-position-x:150%}40%{background-position-x:-50%}to{background-position-x:-50%}}", a = new CSSStyleSheet();
-a.replaceSync(d);
-const h = [
-  "heading-s",
-  "heading-m",
-  "heading-l",
-  "body",
-  "body-block",
-  "action-s",
-  "action-l",
-  "asset-s",
-  "asset-l",
-  "panel"
-], o = class o extends l {
-  constructor() {
-    super(a), this.template = () => `<div class="skeleton-wrapper">
-  <div class="skeleton" aria-hidden="true"></div>
-  <slot name="skeleton-text"></slot>
-  </div>`, this.shadowRoot.innerHTML = this.template();
-  }
-  static get observedAttributes() {
-    return ["variant", "inverted"];
-  }
-  connectedCallback() {
-    this.hasAttribute("variant") || this.setAttribute("variant", "body");
-    const e = this.shadowRoot.querySelector(
-      'slot[name="skeleton-text"]'
-    );
-    e && e.assignedNodes().length === 0 && console.error(
-      'The "skeleton-text" slot cannot be empty for accessibility. This text will only be visible to screen readers by adding `shown--sr` property to the slot.'
-    );
-  }
-  attributeChangedCallback(e, n, t) {
-    if (n !== t)
-      switch (e) {
-        case "variant":
-          if (this.updateVariant(t), this.$el.querySelector(".skeleton").classList.toggle(`${t}`), t === "body-block") {
-            const r = this.shadowRoot.querySelector(".skeleton-wrapper");
-            Array.from({ length: 2 }, () => {
-              const s = document.createElement("div");
-              return s.className = "skeleton body-block", s.setAttribute("aria-hidden", "true"), s;
-            }).forEach((s) => r.appendChild(s));
-          }
-          break;
-        case "inverted":
-          this.$el.toggleAttribute("inverted", t !== null);
-          break;
-        default:
-          super.attributeChangedCallback(e, n, t);
-          break;
-      }
-  }
-  updateVariant(e) {
-    if (!this.checkName(h, e)) {
-      console.error(`${e} is not a valid variant value`);
-      return;
-    }
-  }
-  get $container() {
-    return this.shadowRoot.querySelector("px-container");
-  }
-  get variant() {
-    return this.getAttribute("variant");
-  }
-  set variant(e) {
-    this.setAttribute("variant", e);
-  }
-  get inverted() {
-    return this.hasAttribute("inverted");
-  }
-  set inverted(e) {
-    e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
-  }
-};
-o.nativeName = "div";
-let i = o;
-customElements.get("px-skeleton") || customElements.define("px-skeleton", i);
-export {
-  i as Skeleton,
-  h as skeletonsVariantValues
+import { PxElement as e, log as t } from "@proximus/lavender-common";
+//#region src/skeleton.css?inline
+var n = ":host,:host>*{box-sizing:border-box;display:block}.skeleton-wrapper{flex-direction:column;align-items:flex-start;gap:10px;min-width:40px;min-height:16px;display:flex}.skeleton{border-radius:var(--px-radius-main);background-color:var(--px-color-background-state-disabled-default);background-image:linear-gradient(-80deg,#0000 0% 25%,#ffffff3d 40% 55%,#0000 75% 100%);background-size:200% 100%;align-self:stretch;height:16px;animation:1.5s ease-in-out infinite skeletonLoading}[inverted] .skeleton{background-color:var(--px-color-background-state-disabled-inverted);background-image:linear-gradient(-80deg,#fff0 0% 25%,#0000001a 40% 55%,#fff0 75% 100%)}.skeleton.heading-s,.skeleton.heading-m,.skeleton.heading-l{max-width:240px}.skeleton.heading-s{height:24px}.skeleton.heading-m{height:32px}.skeleton.heading-l{height:40px}.skeleton.body,.skeleton.body-block{width:300px}.skeleton.body{height:16px}.skeleton.body-block{height:16px}.skeleton.body-block:nth-of-type(3){width:180px}.skeleton.action-s,.skeleton.action-l{border-radius:var(--px-radius-pill);height:40px}.skeleton.action-s{width:40px}.skeleton.action-l{width:160px}.skeleton.asset-s{width:40px;height:40px}.skeleton.asset-l{width:80px;height:80px}.skeleton.panel{width:300px;height:200px}@keyframes skeletonLoading{0%{background-position-x:150%}40%{background-position-x:-50%}to{background-position-x:-50%}}", r = new CSSStyleSheet();
+r.replaceSync(n);
+var i = [
+	"heading-s",
+	"heading-m",
+	"heading-l",
+	"body",
+	"body-block",
+	"action-s",
+	"action-l",
+	"asset-s",
+	"asset-l",
+	"panel"
+], a = class extends e {
+	static {
+		this.nativeName = "div";
+	}
+	constructor() {
+		super(r), this.template = () => "<div class=\"skeleton-wrapper\">\n  <div class=\"skeleton\" aria-hidden=\"true\"></div>\n  <slot name=\"skeleton-text\"></slot>\n  </div>", this.shadowRoot.innerHTML = this.template();
+	}
+	static get observedAttributes() {
+		return ["variant", "inverted"];
+	}
+	connectedCallback() {
+		this.hasAttribute("variant") || this.setAttribute("variant", "body");
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) switch (e) {
+			case "variant":
+				if (this.updateVariant(n), this.$el?.querySelector(".skeleton")?.classList.toggle(`${n}`), n === "body-block") {
+					let e = this.shadowRoot.querySelector(".skeleton-wrapper");
+					Array.from({ length: 2 }, () => {
+						let e = document.createElement("div");
+						return e.className = "skeleton body-block", e.setAttribute("aria-hidden", "true"), e;
+					}).forEach((t) => e?.appendChild(t));
+				}
+				break;
+			case "inverted":
+				this.$el?.toggleAttribute("inverted", n !== null);
+				break;
+			default: super.attributeChangedCallback(e, t, n);
+		}
+	}
+	updateVariant(e) {
+		if (!this.checkName(i, e)) {
+			t(`"${e}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
+			return;
+		}
+	}
+	get $container() {
+		return this.shadowRoot.querySelector("px-container");
+	}
+	get variant() {
+		return this.getAttribute("variant");
+	}
+	set variant(e) {
+		this._updateAttribute("variant", e);
+	}
+	get inverted() {
+		return this.hasAttribute("inverted");
+	}
+	set inverted(e) {
+		this._updateBooleanAttribute("inverted", e);
+	}
 };
+customElements.get("px-skeleton") || customElements.define("px-skeleton", a);
+//#endregion
+export { a as Skeleton, i as skeletonsVariantValues };

package/dist/vscode.css-custom-data.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-css-languageservice/main/docs/customData.schema.json",
+  "version": 1.1,
+  "properties": [],
+  "pseudoElements": []
+}

package/dist/vscode.html-custom-data.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
+  "version": 1.1,
+  "tags": [
+    {
+      "name": "px-skeleton",
+      "description": "\n---\n",
+      "attributes": [
+        { "name": "variant", "values": [] },
+        { "name": "inverted", "values": [] }
+      ],
+      "references": []
+    }
+  ]
+}

package/dist/web-types.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
+  "name": "@proximus/lavender-skeleton",
+  "version": "2.0.0-alpha.200",
+  "description-markup": "markdown",
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "px-skeleton",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            { "name": "variant", "value": { "type": "string" } },
+            { "name": "inverted", "value": { "type": "string" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "$container" },
+              { "name": "variant" },
+              { "name": "inverted" },
+              { "name": "innerHTML" }
+            ],
+            "events": []
+          }
+        }
+      ]
+    },
+    "css": {
+      "properties": [],
+      "pseudo-elements": []
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-skeleton",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.200",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -13,7 +13,7 @@
     "clean": "rm -rf dist",
     "build": "npm run clean && NODE_ENV=development vite build &&  tsc && npm run transform-package-json && npm run wc-manifest",
     "test": "vitest run --coverage",
-    "wc-manifest": "cem analyze --globs \"src/*\" --config ../custom-elements-manifest.config.js  --outdir dist"
+    "wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js  --outdir dist"
   },
   "publishConfig": {
     "access": "public"