@proximus/lavender-separator 2.0.0-alpha.11 → 2.0.0-alpha.110

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.es.js +40 -34
  2. package/package.json +2 -2
package/dist/index.es.js CHANGED
@@ -1,12 +1,12 @@
1
- import { PxElement as p } from "@proximus/lavender-common";
2
- const h = ".separator{--separator-size: var(--px-size-border-m);--separator-direction--mobile-border-width: var(--separator-size) 0 0;--separator-direction--mobile-width: initial;--separator-direction--mobile-height: initial;clear:both;margin:0;border-style:solid;border-color:var( --separator-color-default, var(--px-color-border-main-default) );border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-horizontal--mobile{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--mobile{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}:host([inverted]) .separator{border-color:var( --separator-color-inverted, var(--px-color-border-main-inverted) )}@media only screen and (min-width: 768px){.separator-direction-horizontal--tablet{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--tablet{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 1025px){.separator-direction-horizontal--laptop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--laptop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 1441px){.separator-direction-horizontal--desktop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--desktop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}", l = new CSSStyleSheet();
3
- l.replaceSync(h);
4
- const b = [
1
+ import { PxElement as h, log as c } from "@proximus/lavender-common";
2
+ const b = ".separator{--separator-size: var(--px-size-border-m);--separator-direction--mobile-border-width: var(--separator-size) 0 0;--separator-direction--mobile-width: initial;--separator-direction--mobile-height: initial;clear:both;margin:0;border-style:solid;border-color:var( --separator-color-default, var(--px-color-border-main-default) );border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-horizontal--mobile{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--mobile{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}:host([inverted]) .separator{border-color:var( --separator-color-inverted, var(--px-color-border-main-inverted) )}@media screen and (min-width: 48rem){.separator-direction-horizontal--tablet{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--tablet{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media screen and (min-width: 64.0625rem){.separator-direction-horizontal--laptop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--laptop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media screen and (min-width: 90.0625rem){.separator-direction-horizontal--desktop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--desktop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}", p = new CSSStyleSheet();
3
+ p.replaceSync(b);
4
+ const u = [
5
5
  "",
6
6
  "default",
7
7
  "horizontal",
8
8
  "vertical"
9
- ], u = ["", "default", "none", "s", "m", "l"], v = [
9
+ ], v = ["", "default", "none", "s", "m", "l"], g = [
10
10
  "",
11
11
  "main",
12
12
  "brand",
@@ -18,11 +18,11 @@ const b = [
18
18
  "purpose-unlimited",
19
19
  "state-hover",
20
20
  "state-active"
21
- ], c = class c extends p {
21
+ ], n = class n extends h {
22
22
  constructor() {
23
23
  var r;
24
- super(l);
25
- const t = document.createElement(this.nativeName);
24
+ super(p);
25
+ const t = document.createElement(n.nativeName);
26
26
  t.classList.add("separator"), this.internals = (r = this.attachInternals) == null ? void 0 : r.call(this), this.shadowRoot.appendChild(t);
27
27
  }
28
28
  static get observedAttributes() {
@@ -50,31 +50,33 @@ const b = [
50
50
  t,
51
51
  r,
52
52
  e,
53
- b
53
+ u
54
54
  );
55
55
  break;
56
56
  case "size":
57
- this.updateSize(t, r, e, u);
57
+ this.updateSize(t, r, e, v);
58
58
  break;
59
59
  case "color":
60
- this.updateColor(t, r, e, v);
60
+ this.updateColor(t, r, e, g);
61
61
  break;
62
62
  default:
63
63
  super.attributeChangedCallback(t, r, e);
64
64
  break;
65
65
  }
66
66
  }
67
- updateSize(t, r, e, a) {
68
- const o = (i) => {
67
+ updateSize(t, r, e, o) {
68
+ const s = (i) => {
69
69
  i !== null && i !== "" && i !== "default" && this.$el.style.setProperty(
70
70
  "--separator-size",
71
71
  `var(--px-size-border-${i})`
72
72
  );
73
73
  };
74
- this.checkName(a, e) ? (o(r), o(e)) : console.error(`${e} is not a valid value for ${t}`);
74
+ this.checkName(o, e) ? (s(r), s(e)) : c(
75
+ `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
76
+ );
75
77
  }
76
- updateColor(t, r, e, a) {
77
- const o = (i) => {
78
+ updateColor(t, r, e, o) {
79
+ const s = (i) => {
78
80
  i !== null && i !== "" && i !== "default" && (this.$el.style.setProperty(
79
81
  "--separator-color-default",
80
82
  `var(--px-color-border-${i}-default)`
@@ -83,28 +85,32 @@ const b = [
83
85
  `var(--px-color-border-${i}-inverted)`
84
86
  ));
85
87
  };
86
- this.checkName(a, e) ? (o(r), o(e)) : console.error(`${e} is not a valid value for ${t}`);
88
+ this.checkName(o, e) ? (s(r), s(e)) : c(
89
+ `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
90
+ );
87
91
  }
88
- updateDirection(t, r, e, a) {
89
- const o = (i, s) => {
90
- s !== null && s !== "" && s !== "default" && this.$el.classList.add(`separator-direction-${s}--${i}`);
92
+ updateDirection(t, r, e, o) {
93
+ const s = (i, a) => {
94
+ a !== null && a !== "" && a !== "default" && this.$el.classList.add(`separator-direction-${a}--${i}`);
91
95
  };
92
- if (!this.checkName(a, e))
93
- console.error(`${e} is not a valid value for ${t}`);
96
+ if (!this.checkName(o, e))
97
+ c(
98
+ `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
99
+ );
94
100
  else if (t === "direction")
95
101
  ["mobile", "tablet", "laptop", "desktop"].forEach((i) => {
96
102
  Array.from(this.$el.classList).find(
97
103
  (d) => d.startsWith("separator-direction-") && d.endsWith(`--${i}`)
98
- ) || o(i, e);
104
+ ) || s(i, e);
99
105
  });
100
106
  else {
101
- const i = t.split("--")[1], s = Array.from(this.$el.classList).find(
107
+ const i = t.split("--")[1], a = Array.from(this.$el.classList).find(
102
108
  (d) => d.startsWith("separator-direction-") && d.endsWith(`--${i}`)
103
109
  );
104
- s ? this.$el.classList.replace(
105
- s,
110
+ a ? this.$el.classList.replace(
111
+ a,
106
112
  `separator-direction-${e}--${i}`
107
- ) : o(i, e);
113
+ ) : s(i, e);
108
114
  }
109
115
  }
110
116
  get direction() {
@@ -156,12 +162,12 @@ const b = [
156
162
  this.setAttribute("inverted", t);
157
163
  }
158
164
  };
159
- c.nativeName = "hr";
160
- let n = c;
161
- customElements.get("px-separator") || customElements.define("px-separator", n);
165
+ n.nativeName = "hr";
166
+ let l = n;
167
+ customElements.get("px-separator") || customElements.define("px-separator", l);
162
168
  export {
163
- n as Separator,
164
- v as separatorColorValues,
165
- b as separatorDirectionValues,
166
- u as separatorSizeValues
169
+ l as Separator,
170
+ g as separatorColorValues,
171
+ u as separatorDirectionValues,
172
+ v as separatorSizeValues
167
173
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-separator",
3
- "version": "2.0.0-alpha.11",
3
+ "version": "2.0.0-alpha.110",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",
@@ -13,7 +13,7 @@
13
13
  "clean": "rm -rf dist",
14
14
  "build": "npm run clean && NODE_ENV=development vite build && tsc && npm run transform-package-json && npm run wc-manifest",
15
15
  "test": "vitest run --coverage",
16
- "wc-manifest": "cem analyze --globs \"src/*\" --config ../custom-elements-manifest.config.js --outdir dist"
16
+ "wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js --outdir dist"
17
17
  },
18
18
  "publishConfig": {
19
19
  "access": "public"