@proximus/lavender-separator 2.0.0-alpha.100 → 2.0.0-alpha.102

package/dist/index.es.js

@@ -6,7 +6,7 @@ const u = [
   "default",
   "horizontal",
   "vertical"
-], g = ["", "default", "none", "s", "m", "l"], m = [
+], v = ["", "default", "none", "s", "m", "l"], g = [
   "",
   "main",
   "brand",
@@ -54,29 +54,29 @@ const u = [
           );
           break;
         case "size":
-          this.updateSize(t, r, e, g);
+          this.updateSize(t, r, e, v);
           break;
         case "color":
-          this.updateColor(t, r, e, m);
+          this.updateColor(t, r, e, g);
           break;
         default:
           super.attributeChangedCallback(t, r, e);
           break;
       }
   }
-  updateSize(t, r, e, a) {
-    const o = (i) => {
+  updateSize(t, r, e, o) {
+    const s = (i) => {
       i !== null && i !== "" && i !== "default" && this.$el.style.setProperty(
         "--separator-size",
         `var(--px-size-border-${i})`
       );
     };
-    this.checkName(a, e) ? (o(r), o(e)) : c(
-      `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+    this.checkName(o, e) ? (s(r), s(e)) : c(
+      `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
     );
   }
-  updateColor(t, r, e, a) {
-    const o = (i) => {
+  updateColor(t, r, e, o) {
+    const s = (i) => {
       i !== null && i !== "" && i !== "default" && (this.$el.style.setProperty(
         "--separator-color-default",
         `var(--px-color-border-${i}-default)`
@@ -85,32 +85,32 @@ const u = [
         `var(--px-color-border-${i}-inverted)`
       ));
     };
-    this.checkName(a, e) ? (o(r), o(e)) : c(
-      `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+    this.checkName(o, e) ? (s(r), s(e)) : c(
+      `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
     );
   }
-  updateDirection(t, r, e, a) {
-    const o = (i, s) => {
-      s !== null && s !== "" && s !== "default" && this.$el.classList.add(`separator-direction-${s}--${i}`);
+  updateDirection(t, r, e, o) {
+    const s = (i, a) => {
+      a !== null && a !== "" && a !== "default" && this.$el.classList.add(`separator-direction-${a}--${i}`);
     };
-    if (!this.checkName(a, e))
+    if (!this.checkName(o, e))
       c(
-        `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+        `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
       );
     else if (t === "direction")
       ["mobile", "tablet", "laptop", "desktop"].forEach((i) => {
         Array.from(this.$el.classList).find(
           (d) => d.startsWith("separator-direction-") && d.endsWith(`--${i}`)
-        ) || o(i, e);
+        ) || s(i, e);
       });
     else {
-      const i = t.split("--")[1], s = Array.from(this.$el.classList).find(
+      const i = t.split("--")[1], a = Array.from(this.$el.classList).find(
         (d) => d.startsWith("separator-direction-") && d.endsWith(`--${i}`)
       );
-      s ? this.$el.classList.replace(
-        s,
+      a ? this.$el.classList.replace(
+        a,
         `separator-direction-${e}--${i}`
-      ) : o(i, e);
+      ) : s(i, e);
     }
   }
   get direction() {
@@ -167,7 +167,7 @@ let l = n;
 customElements.get("px-separator") || customElements.define("px-separator", l);
 export {
   l as Separator,
-  m as separatorColorValues,
+  g as separatorColorValues,
   u as separatorDirectionValues,
-  g as separatorSizeValues
+  v as separatorSizeValues
 };

package/package.json

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