@proximus/lavender-separator 2.0.0-alpha.17 → 2.0.0-alpha.173

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 (3) hide show
  1. package/dist/Separator.d.ts +16 -16
  2. package/dist/index.es.js +149 -172
  3. package/package.json +2 -2
package/dist/Separator.d.ts CHANGED
@@ -11,20 +11,20 @@ export declare class Separator extends PxElement<HTMLHRElement> {
11
11
  updateSize(attrName: string, oldValue: string, newValue: string, attrValue: string[]): void;
12
12
  updateColor(attrName: string, oldValue: string, newValue: string, attrValue: string[]): void;
13
13
  updateDirection(attrName: string, oldValue: string, newValue: string, attrValue: string[]): void;
14
- get direction(): string;
15
- set direction(value: string);
16
- get directionMobile(): string;
17
- set directionMobile(value: string);
18
- get directionTablet(): string;
19
- set directionTablet(value: string);
20
- get directionLaptop(): string;
21
- set directionLaptop(value: string);
22
- get directionDesktop(): string;
23
- set directionDesktop(value: string);
24
- get size(): string;
25
- set size(value: string);
26
- get color(): string;
27
- set color(value: string);
28
- get inverted(): string;
29
- set inverted(value: string);
14
+ get direction(): string | null;
15
+ set direction(value: string | null);
16
+ get directionMobile(): string | null;
17
+ set directionMobile(value: string | null);
18
+ get directionTablet(): string | null;
19
+ set directionTablet(value: string | null);
20
+ get directionLaptop(): string | null;
21
+ set directionLaptop(value: string | null);
22
+ get directionDesktop(): string | null;
23
+ set directionDesktop(value: string | null);
24
+ get size(): string | null;
25
+ set size(value: string | null);
26
+ get color(): string | null;
27
+ set color(value: string | null);
28
+ get inverted(): boolean;
29
+ set inverted(value: boolean);
30
30
  }
package/dist/index.es.js CHANGED
@@ -1,173 +1,150 @@
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 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}}", p = new CSSStyleSheet();
3
- p.replaceSync(b);
4
- const u = [
5
- "",
6
- "default",
7
- "horizontal",
8
- "vertical"
9
- ], g = ["", "default", "none", "s", "m", "l"], v = [
10
- "",
11
- "main",
12
- "brand",
13
- "none",
14
- "neutral",
15
- "purpose-success",
16
- "purpose-warning",
17
- "purpose-error",
18
- "purpose-unlimited",
19
- "state-hover",
20
- "state-active"
21
- ], n = class n extends h {
22
- constructor() {
23
- var r;
24
- super(p);
25
- const t = document.createElement(n.nativeName);
26
- t.classList.add("separator"), this.internals = (r = this.attachInternals) == null ? void 0 : r.call(this), this.shadowRoot.appendChild(t);
27
- }
28
- static get observedAttributes() {
29
- return [
30
- ...super.observedAttributes,
31
- "direction",
32
- "direction--mobile",
33
- "direction--tablet",
34
- "direction--laptop",
35
- "direction--desktop",
36
- "size",
37
- "color",
38
- "inverted"
39
- ];
40
- }
41
- attributeChangedCallback(t, r, e) {
42
- if (r !== e)
43
- switch (t) {
44
- case "direction":
45
- case "direction--mobile":
46
- case "direction--tablet":
47
- case "direction--laptop":
48
- case "direction--desktop":
49
- this.updateDirection(
50
- t,
51
- r,
52
- e,
53
- u
54
- );
55
- break;
56
- case "size":
57
- this.updateSize(t, r, e, g);
58
- break;
59
- case "color":
60
- this.updateColor(t, r, e, v);
61
- break;
62
- default:
63
- super.attributeChangedCallback(t, r, e);
64
- break;
65
- }
66
- }
67
- updateSize(t, r, e, a) {
68
- const o = (i) => {
69
- i !== null && i !== "" && i !== "default" && this.$el.style.setProperty(
70
- "--separator-size",
71
- `var(--px-size-border-${i})`
72
- );
73
- };
74
- this.checkName(a, e) ? (o(r), o(e)) : c(
75
- `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
76
- );
77
- }
78
- updateColor(t, r, e, a) {
79
- const o = (i) => {
80
- i !== null && i !== "" && i !== "default" && (this.$el.style.setProperty(
81
- "--separator-color-default",
82
- `var(--px-color-border-${i}-default)`
83
- ), this.$el.style.setProperty(
84
- "--separator-color-inverted",
85
- `var(--px-color-border-${i}-inverted)`
86
- ));
87
- };
88
- this.checkName(a, e) ? (o(r), o(e)) : c(
89
- `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
90
- );
91
- }
92
- updateDirection(t, r, e, a) {
93
- const o = (i, s) => {
94
- s !== null && s !== "" && s !== "default" && this.$el.classList.add(`separator-direction-${s}--${i}`);
95
- };
96
- if (!this.checkName(a, e))
97
- c(
98
- `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
99
- );
100
- else if (t === "direction")
101
- ["mobile", "tablet", "laptop", "desktop"].forEach((i) => {
102
- Array.from(this.$el.classList).find(
103
- (d) => d.startsWith("separator-direction-") && d.endsWith(`--${i}`)
104
- ) || o(i, e);
105
- });
106
- else {
107
- const i = t.split("--")[1], s = Array.from(this.$el.classList).find(
108
- (d) => d.startsWith("separator-direction-") && d.endsWith(`--${i}`)
109
- );
110
- s ? this.$el.classList.replace(
111
- s,
112
- `separator-direction-${e}--${i}`
113
- ) : o(i, e);
114
- }
115
- }
116
- get direction() {
117
- return this.getAttribute("direction");
118
- }
119
- set direction(t) {
120
- this.setAttribute("direction", t);
121
- }
122
- get directionMobile() {
123
- return this.getAttribute("direction--mobile");
124
- }
125
- set directionMobile(t) {
126
- this.setAttribute("direction--mobile", t);
127
- }
128
- get directionTablet() {
129
- return this.getAttribute("direction--tablet");
130
- }
131
- set directionTablet(t) {
132
- this.setAttribute("direction--tablet", t);
133
- }
134
- get directionLaptop() {
135
- return this.getAttribute("direction--laptop");
136
- }
137
- set directionLaptop(t) {
138
- this.setAttribute("direction--laptop", t);
139
- }
140
- get directionDesktop() {
141
- return this.getAttribute("direction--desktop");
142
- }
143
- set directionDesktop(t) {
144
- this.setAttribute("direction--desktop", t);
145
- }
146
- get size() {
147
- return this.getAttribute("size");
148
- }
149
- set size(t) {
150
- this.setAttribute("size", t);
151
- }
152
- get color() {
153
- return this.getAttribute("color");
154
- }
155
- set color(t) {
156
- this.setAttribute("color", t);
157
- }
158
- get inverted() {
159
- return this.getAttribute("inverted");
160
- }
161
- set inverted(t) {
162
- this.setAttribute("inverted", t);
163
- }
164
- };
165
- n.nativeName = "hr";
166
- let l = n;
167
- customElements.get("px-separator") || customElements.define("px-separator", l);
168
- export {
169
- l as Separator,
170
- v as separatorColorValues,
171
- u as separatorDirectionValues,
172
- g as separatorSizeValues
1
+ import { PxElement as e, log as t } from "@proximus/lavender-common";
2
+ //#region src/separator.css?inline
3
+ var n = ".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;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;margin:0}.separator-direction-horizontal--mobile{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--mobile{width:var(--separator-size);border-width:0 var(--separator-size) 0 0;height:100%}:host([inverted]) .separator{border-color:var(--separator-color-inverted,var(--px-color-border-main-inverted))}@media screen and (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);border-width:0 var(--separator-size) 0 0;height:100%}}@media screen and (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);border-width:0 var(--separator-size) 0 0;height:100%}}@media screen and (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);border-width:0 var(--separator-size) 0 0;height:100%}}", r = new CSSStyleSheet();
4
+ r.replaceSync(n);
5
+ var i = [
6
+ "",
7
+ "default",
8
+ "horizontal",
9
+ "vertical"
10
+ ], a = [
11
+ "",
12
+ "default",
13
+ "none",
14
+ "s",
15
+ "m",
16
+ "l"
17
+ ], o = [
18
+ "",
19
+ "main",
20
+ "brand",
21
+ "none",
22
+ "neutral",
23
+ "purpose-success",
24
+ "purpose-warning",
25
+ "purpose-error",
26
+ "purpose-unlimited",
27
+ "state-hover",
28
+ "state-active"
29
+ ], s = class n extends e {
30
+ static {
31
+ this.nativeName = "hr";
32
+ }
33
+ constructor() {
34
+ super(r);
35
+ let e = document.createElement(n.nativeName);
36
+ e.classList.add("separator"), this.internals = this.attachInternals?.(), this.shadowRoot.appendChild(e);
37
+ }
38
+ static get observedAttributes() {
39
+ return [
40
+ ...super.observedAttributes,
41
+ "direction",
42
+ "direction--mobile",
43
+ "direction--tablet",
44
+ "direction--laptop",
45
+ "direction--desktop",
46
+ "size",
47
+ "color",
48
+ "inverted"
49
+ ];
50
+ }
51
+ attributeChangedCallback(e, t, n) {
52
+ if (t !== n) switch (e) {
53
+ case "direction":
54
+ case "direction--mobile":
55
+ case "direction--tablet":
56
+ case "direction--laptop":
57
+ case "direction--desktop":
58
+ this.updateDirection(e, t, n, i);
59
+ break;
60
+ case "size":
61
+ this.updateSize(e, t, n, a);
62
+ break;
63
+ case "color":
64
+ this.updateColor(e, t, n, o);
65
+ break;
66
+ default: super.attributeChangedCallback(e, t, n);
67
+ }
68
+ }
69
+ updateSize(e, n, r, i) {
70
+ let a = (e) => {
71
+ e !== null && e !== "" && e !== "default" && this.$el.style.setProperty("--separator-size", `var(--px-size-border-${e})`);
72
+ };
73
+ this.checkName(i, r) ? (a(n), a(r)) : t(`"${r}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
74
+ }
75
+ updateColor(e, n, r, i) {
76
+ let a = (e) => {
77
+ e !== null && e !== "" && e !== "default" && (this.$el.style.setProperty("--separator-color-default", `var(--px-color-border-${e}-default)`), this.$el.style.setProperty("--separator-color-inverted", `var(--px-color-border-${e}-inverted)`));
78
+ };
79
+ this.checkName(i, r) ? (a(n), a(r)) : t(`"${r}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
80
+ }
81
+ updateDirection(e, n, r, i) {
82
+ let a = (e, t) => {
83
+ t !== null && t !== "" && t !== "default" && this.$el.classList.add(`separator-direction-${t}--${e}`);
84
+ };
85
+ if (!this.checkName(i, r)) t(`"${r}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
86
+ else if (e === "direction") [
87
+ "mobile",
88
+ "tablet",
89
+ "laptop",
90
+ "desktop"
91
+ ].forEach((e) => {
92
+ Array.from(this.$el.classList).find((t) => t.startsWith("separator-direction-") && t.endsWith(`--${e}`)) || a(e, r);
93
+ });
94
+ else {
95
+ let t = e.split("--")[1], n = Array.from(this.$el.classList).find((e) => e.startsWith("separator-direction-") && e.endsWith(`--${t}`));
96
+ n ? this.$el.classList.replace(n, `separator-direction-${r}--${t}`) : a(t, r);
97
+ }
98
+ }
99
+ get direction() {
100
+ return this.getAttribute("direction");
101
+ }
102
+ set direction(e) {
103
+ this._updateAttribute("direction", e);
104
+ }
105
+ get directionMobile() {
106
+ return this.getAttribute("direction--mobile");
107
+ }
108
+ set directionMobile(e) {
109
+ this._updateAttribute("direction--mobile", e);
110
+ }
111
+ get directionTablet() {
112
+ return this.getAttribute("direction--tablet");
113
+ }
114
+ set directionTablet(e) {
115
+ this._updateAttribute("direction--tablet", e);
116
+ }
117
+ get directionLaptop() {
118
+ return this.getAttribute("direction--laptop");
119
+ }
120
+ set directionLaptop(e) {
121
+ this._updateAttribute("direction--laptop", e);
122
+ }
123
+ get directionDesktop() {
124
+ return this.getAttribute("direction--desktop");
125
+ }
126
+ set directionDesktop(e) {
127
+ this._updateAttribute("direction--desktop", e);
128
+ }
129
+ get size() {
130
+ return this.getAttribute("size");
131
+ }
132
+ set size(e) {
133
+ this._updateAttribute("size", e);
134
+ }
135
+ get color() {
136
+ return this.getAttribute("color");
137
+ }
138
+ set color(e) {
139
+ this._updateAttribute("color", e);
140
+ }
141
+ get inverted() {
142
+ return this.hasAttribute("inverted");
143
+ }
144
+ set inverted(e) {
145
+ this._updateBooleanAttribute("inverted", e);
146
+ }
173
147
  };
148
+ customElements.get("px-separator") || customElements.define("px-separator", s);
149
+ //#endregion
150
+ export { s as Separator, o as separatorColorValues, i as separatorDirectionValues, a as separatorSizeValues };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-separator",
3
- "version": "2.0.0-alpha.17",
3
+ "version": "2.0.0-alpha.173",
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"