@proximus/lavender-list 2.0.0-alpha.203 → 2.0.0-alpha.204

package/dist/List.d.ts

@@ -2,8 +2,8 @@ import { PxElement } from '@proximus/lavender-common';
 export declare const listVariantValues: string[];
 export declare class List extends PxElement<HTMLDivElement> {
     #private;
+    protected static readonly template: HTMLTemplateElement;
     static nativeName: string;
-    private template;
     constructor();
     static get observedAttributes(): string[];
     connectedCallback(): void;

package/dist/ListItem.d.ts

@@ -1,8 +1,8 @@
 import { PxElement } from '@proximus/lavender-common';
 export declare const LIST_ITEM_CONNECTED_EVENT = "px-list-item-connected";
 export declare class ListItem extends PxElement<HTMLDivElement> {
+    protected static readonly template: HTMLTemplateElement;
     static nativeName: string;
-    private template;
     constructor();
     connectedCallback(): void;
     static get observedAttributes(): string[];

package/dist/custom-elements.json

@@ -19,6 +19,13 @@
           "description": "",
           "name": "List",
           "members": [
+            {
+              "kind": "field",
+              "name": "template",
+              "privacy": "protected",
+              "static": true,
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "nativeName",
@@ -28,11 +35,6 @@
               "static": true,
               "default": "'div'"
             },
-            {
-              "kind": "method",
-              "name": "template",
-              "privacy": "private"
-            },
             {
               "kind": "method",
               "name": "#syncChildren",
@@ -88,10 +90,6 @@
             {
               "kind": "field",
               "name": "variant"
-            },
-            {
-              "kind": "field",
-              "name": "innerHTML"
             }
           ],
           "attributes": [
@@ -154,6 +152,13 @@
           "description": "",
           "name": "ListItem",
           "members": [
+            {
+              "kind": "field",
+              "name": "template",
+              "privacy": "protected",
+              "static": true,
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "nativeName",
@@ -163,11 +168,6 @@
               "static": true,
               "default": "'div'"
             },
-            {
-              "kind": "method",
-              "name": "template",
-              "privacy": "private"
-            },
             {
               "kind": "field",
               "name": "$children",
@@ -176,10 +176,6 @@
             {
               "kind": "field",
               "name": "inverted"
-            },
-            {
-              "kind": "field",
-              "name": "innerHTML"
             }
           ],
           "events": [

package/dist/index.es.js

@@ -522,21 +522,39 @@ function y(e, t, n, r = "", i, a = e) {
 	return o.replaceSync(s), o;
 }
 //#endregion
+//#region ../common/src/template.ts
+var b = /* @__PURE__ */ new Map(), x = 500;
+function S(e) {
+	let t = document.createElement("template");
+	return t.innerHTML = e, t;
+}
+function C(e) {
+	return S(e);
+}
+function w(e) {
+	let t = b.get(e);
+	return t || (t = S(e), b.size < x && b.set(e, t)), t;
+}
+function T(e, t) {
+	let n = typeof t == "string" ? w(t) : t;
+	e.replaceChildren(document.importNode(n.content, !0));
+}
+//#endregion
 //#region src/listitem.css?inline
-var b = ".list-item{gap:var(--px-spacing-xs-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default);align-items:flex-start;display:flex}.list-item[inverted]{color:var(--px-color-text-neutral-inverted)}:is(:host([variant=ul]),:host([variant=ol])) .list-item{margin-left:var(--px-spacing-default-mobile);display:list-item}:host([variant=ul]) .list-item{list-style-type:disc}:host([variant=ol]) .list-item{counter-set:list-item var(--item-index,0);list-style-type:decimal}@media screen and (width>=48rem){.list-item{gap:var(--px-spacing-xs-tablet)}}@media screen and (width>=64.0625rem){.list-item{gap:var(--px-spacing-xs-laptop)}}@media screen and (width>=90.0625rem){.list-item{gap:var(--px-spacing-xs-desktop)}}", x = new CSSStyleSheet();
-x.replaceSync(b);
-var S = "px-list-item-connected", C = class extends u {
+var E = ".list-item{gap:var(--px-spacing-xs-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default);align-items:flex-start;display:flex}.list-item[inverted]{color:var(--px-color-text-neutral-inverted)}:is(:host([variant=ul]),:host([variant=ol])) .list-item{margin-left:var(--px-spacing-default-mobile);display:list-item}:host([variant=ul]) .list-item{list-style-type:disc}:host([variant=ol]) .list-item{counter-set:list-item var(--item-index,0);list-style-type:decimal}@media screen and (width>=48rem){.list-item{gap:var(--px-spacing-xs-tablet)}}@media screen and (width>=64.0625rem){.list-item{gap:var(--px-spacing-xs-laptop)}}@media screen and (width>=90.0625rem){.list-item{gap:var(--px-spacing-xs-desktop)}}", D = new CSSStyleSheet();
+D.replaceSync(E);
+var O = "px-list-item-connected", k = class e extends u {
 	static {
-		this.nativeName = "div";
+		this.template = C("<div class=\"list-item\" role=\"listitem\"><slot name=\"icon\"></slot><slot name=\"label\"></slot></div>");
 	}
-	template() {
-		return "\n      <div class=\"list-item\" role=\"listitem\">\n        <slot name=\"icon\"></slot>\n        <slot name=\"label\"></slot>\n      </div>\n    ";
+	static {
+		this.nativeName = "div";
 	}
 	constructor() {
-		super(x), this.shadowRoot.innerHTML = this.template();
+		super(D), T(this.shadowRoot, e.template);
 	}
 	connectedCallback() {
-		this.dispatchEvent(new CustomEvent(S, {
+		this.dispatchEvent(new CustomEvent(O, {
 			bubbles: !0,
 			composed: !0
 		}));
@@ -561,30 +579,30 @@ var S = "px-list-item-connected", C = class extends u {
 		e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
 	}
 };
-customElements.get("px-list-item") || customElements.define("px-list-item", C);
+customElements.get("px-list-item") || customElements.define("px-list-item", k);
 //#endregion
 //#region src/List.ts
-var w = new CSSStyleSheet();
-w.replaceSync(e);
-var T = [
+var A = new CSSStyleSheet();
+A.replaceSync(e);
+var j = [
 	"",
 	"ul",
 	"ol"
-], E = y("gap", (e, t, n) => `:host([${e}${n ? `--${n}` : ""}='${t}']) .list`, g, "px-spacing", "--list-gap"), D = class extends u {
+], M = y("gap", (e, t, n) => `:host([${e}${n ? `--${n}` : ""}='${t}']) .list`, g, "px-spacing", "--list-gap"), N = class e extends u {
 	static {
-		this.nativeName = "div";
+		this.template = C("<div class=\"list\" role=\"list\"><slot></slot></div>");
 	}
-	template() {
-		return "\n      <div class=\"list\" role=\"list\">\n        <slot></slot>\n      </div>\n    ";
+	static {
+		this.nativeName = "div";
 	}
 	constructor() {
-		super(w, E), this.shadowRoot.innerHTML = this.template();
+		super(A, M), T(this.shadowRoot, e.template);
 	}
 	static get observedAttributes() {
 		return ["inverted", "variant"];
 	}
 	connectedCallback() {
-		this.gap ||= "xs", this.addEventListener(S, () => {
+		this.gap ||= "xs", this.addEventListener(O, () => {
 			this.#e();
 		}), this.#e();
 	}
@@ -608,7 +626,7 @@ var T = [
 				this.isConnected && this.#t();
 				break;
 			case "variant":
-				this.checkName(T, n) || c(`"${n}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${T.join("\", \"")}".`), this.isConnected && this.#n(n), super.attributeChangedCallback(e, t, n);
+				this.checkName(j, n) || c(`"${n}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${j.join("\", \"")}".`), this.isConnected && this.#n(n), super.attributeChangedCallback(e, t, n);
 				break;
 			default: super.attributeChangedCallback(e, t, n);
 		}
@@ -659,6 +677,6 @@ var T = [
 		this._updateAttribute("variant", e);
 	}
 };
-customElements.get("px-list") || customElements.define("px-list", D);
+customElements.get("px-list") || customElements.define("px-list", N);
 //#endregion
-export { S as LIST_ITEM_CONNECTED_EVENT, D as List, C as ListItem, T as listVariantValues };
+export { O as LIST_ITEM_CONNECTED_EVENT, N as List, k as ListItem, j as listVariantValues };

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@proximus/lavender-list",
-  "version": "2.0.0-alpha.203",
+  "version": "2.0.0-alpha.204",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -24,8 +24,7 @@
               { "name": "gapTablet" },
               { "name": "gapLaptop" },
               { "name": "gapDesktop" },
-              { "name": "variant" },
-              { "name": "innerHTML" }
+              { "name": "variant" }
             ],
             "events": []
           }
@@ -39,11 +38,7 @@
             { "name": "LIST_ITEM_CONNECTED_EVENT", "type": "CustomEvent" }
           ],
           "js": {
-            "properties": [
-              { "name": "$children" },
-              { "name": "inverted" },
-              { "name": "innerHTML" }
-            ],
+            "properties": [{ "name": "$children" }, { "name": "inverted" }],
             "events": [
               { "name": "LIST_ITEM_CONNECTED_EVENT", "type": "CustomEvent" }
             ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-list",
-  "version": "2.0.0-alpha.203",
+  "version": "2.0.0-alpha.204",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",