@proximus/lavender-separator 1.0.0-alpha.12
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.
- package/dist/index.js +142 -0
- package/package.json +40 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
import { PxElement as n } from "@proximus/lavender-common";
|
|
2
|
+
const c = ".separator{--separator-size: var(--px-border-m);--px-separator-color: var(--px-color-border-main-default);--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(--px-separator-color);border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_horizontal{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_vertical{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}@media only screen and (min-width: 0px) and (max-width: 767px){.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}}@media only screen and (min-width: 768px) and (max-width: 1024px){.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) and (max-width: 1440px){.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}}:host([inverted]) .separator{--px-separator-color: var(--px-color-border-main-inverted)}", d = new CSSStyleSheet();
|
|
3
|
+
d.replaceSync(c);
|
|
4
|
+
const l = ["", "default", "horizontal", "vertical"], h = ["", "none", "s", "m", "l"], p = [
|
|
5
|
+
"",
|
|
6
|
+
"contrasted",
|
|
7
|
+
"action-hover",
|
|
8
|
+
"action-active",
|
|
9
|
+
"none",
|
|
10
|
+
"success",
|
|
11
|
+
"error",
|
|
12
|
+
"warning",
|
|
13
|
+
"unlimited"
|
|
14
|
+
], s = class s extends n {
|
|
15
|
+
constructor() {
|
|
16
|
+
super(d);
|
|
17
|
+
const t = document.createElement(this.nativeName);
|
|
18
|
+
t.classList.add("separator"), this.shadowRoot.appendChild(t);
|
|
19
|
+
}
|
|
20
|
+
static get observedAttributes() {
|
|
21
|
+
return [
|
|
22
|
+
...super.observedAttributes,
|
|
23
|
+
"direction",
|
|
24
|
+
"direction-mobile",
|
|
25
|
+
"direction-tablet",
|
|
26
|
+
"direction-laptop",
|
|
27
|
+
"direction-desktop",
|
|
28
|
+
"size",
|
|
29
|
+
"color",
|
|
30
|
+
"inverted"
|
|
31
|
+
];
|
|
32
|
+
}
|
|
33
|
+
get direction() {
|
|
34
|
+
return this.getAttribute("direction");
|
|
35
|
+
}
|
|
36
|
+
set direction(t) {
|
|
37
|
+
this.setAttribute("direction", t);
|
|
38
|
+
}
|
|
39
|
+
get directionMobile() {
|
|
40
|
+
return this.getAttribute("direction-mobile");
|
|
41
|
+
}
|
|
42
|
+
set directionMobile(t) {
|
|
43
|
+
this.setAttribute("direction-mobile", t);
|
|
44
|
+
}
|
|
45
|
+
get directionTablet() {
|
|
46
|
+
return this.getAttribute("direction-tablet");
|
|
47
|
+
}
|
|
48
|
+
set directionTablet(t) {
|
|
49
|
+
this.setAttribute("direction-tablet", t);
|
|
50
|
+
}
|
|
51
|
+
get directionLaptop() {
|
|
52
|
+
return this.getAttribute("direction-laptop");
|
|
53
|
+
}
|
|
54
|
+
set directionLaptop(t) {
|
|
55
|
+
this.setAttribute("direction-laptop", t);
|
|
56
|
+
}
|
|
57
|
+
get directionDesktop() {
|
|
58
|
+
return this.getAttribute("direction-desktop");
|
|
59
|
+
}
|
|
60
|
+
set directionDesktop(t) {
|
|
61
|
+
this.setAttribute("direction-desktop", t);
|
|
62
|
+
}
|
|
63
|
+
get size() {
|
|
64
|
+
return this.getAttribute("size");
|
|
65
|
+
}
|
|
66
|
+
set size(t) {
|
|
67
|
+
this.setAttribute("size", t);
|
|
68
|
+
}
|
|
69
|
+
get color() {
|
|
70
|
+
return this.getAttribute("color");
|
|
71
|
+
}
|
|
72
|
+
set color(t) {
|
|
73
|
+
this.setAttribute("color", t);
|
|
74
|
+
}
|
|
75
|
+
get inverted() {
|
|
76
|
+
return this.getAttribute("inverted");
|
|
77
|
+
}
|
|
78
|
+
set inverted(t) {
|
|
79
|
+
this.setAttribute("inverted", t);
|
|
80
|
+
}
|
|
81
|
+
attributeChangedCallback(t, e, i) {
|
|
82
|
+
if (e !== i)
|
|
83
|
+
switch (t) {
|
|
84
|
+
case "direction":
|
|
85
|
+
case "direction-mobile":
|
|
86
|
+
case "direction-tablet":
|
|
87
|
+
case "direction-laptop":
|
|
88
|
+
case "direction-desktop":
|
|
89
|
+
this.updateDirection(t, i);
|
|
90
|
+
break;
|
|
91
|
+
case "size":
|
|
92
|
+
this.updateSize(i, h);
|
|
93
|
+
break;
|
|
94
|
+
case "color":
|
|
95
|
+
this.updateColor(i, p);
|
|
96
|
+
break;
|
|
97
|
+
default:
|
|
98
|
+
super.attributeChangedCallback(t, e, i);
|
|
99
|
+
break;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
checkName(t, e) {
|
|
103
|
+
return t.includes(e);
|
|
104
|
+
}
|
|
105
|
+
updateSize(t, e) {
|
|
106
|
+
this.checkName(e, t) ? this.$el.style.setProperty(
|
|
107
|
+
"--separator-size",
|
|
108
|
+
`var(--px-border-${t})`
|
|
109
|
+
) : (console.error("Bad size value for", this.$el), this.$el.style.setProperty("--separator-size", "var(--px-border-m)"));
|
|
110
|
+
}
|
|
111
|
+
updateColor(t, e) {
|
|
112
|
+
this.checkName(e, t) ? this.$el.style.setProperty(
|
|
113
|
+
"--px-separator-color",
|
|
114
|
+
`var(--px-color-border-${t}-${this.inverted === null ? "default" : "inverted"})`
|
|
115
|
+
) : (console.error("Bad color value for", this.$el), this.$el.style.setProperty(
|
|
116
|
+
"--px-separator-color",
|
|
117
|
+
`var(--px-color-border-main-${this.inverted === null ? "default" : "inverted"})`
|
|
118
|
+
));
|
|
119
|
+
}
|
|
120
|
+
updateDirection(t, e) {
|
|
121
|
+
if (!this.checkName(l, e))
|
|
122
|
+
console.error(`Bad "${t}" value for`, this.$el);
|
|
123
|
+
else if (t === "direction")
|
|
124
|
+
this.$el.classList.add(`separator_direction_${e}`);
|
|
125
|
+
else {
|
|
126
|
+
const i = this.$el.classList, o = t.split("-")[1];
|
|
127
|
+
for (let r = 0; r < i.length; r++)
|
|
128
|
+
i[r].includes(o) ? this.$el.classList.replace(
|
|
129
|
+
i[r],
|
|
130
|
+
`separator_direction_${e}--${o}`
|
|
131
|
+
) : this.$el.classList.add(
|
|
132
|
+
`separator_direction_${e}--${o}`
|
|
133
|
+
);
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
};
|
|
137
|
+
s.nativeName = "hr";
|
|
138
|
+
let a = s;
|
|
139
|
+
customElements.define("px-separator", a);
|
|
140
|
+
export {
|
|
141
|
+
a as Separator
|
|
142
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@proximus/lavender-separator",
|
|
3
|
+
"version": "1.0.0-alpha.12",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"exports": {
|
|
7
|
+
".": {
|
|
8
|
+
"types": "./src/index.ts",
|
|
9
|
+
"development": "./src/index.ts",
|
|
10
|
+
"default": "./dist/index.js"
|
|
11
|
+
},
|
|
12
|
+
"./src/*.css": {
|
|
13
|
+
"development": "src/*.css"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"type": "module",
|
|
20
|
+
"scripts": {
|
|
21
|
+
"build": "rm -rf dist;tsc; vite build",
|
|
22
|
+
"test": "vitest run --coverage"
|
|
23
|
+
},
|
|
24
|
+
"publishConfig": {
|
|
25
|
+
"access": "public"
|
|
26
|
+
},
|
|
27
|
+
"gitHead": "15a231df98020f83813279639a9a7712a5a5e759",
|
|
28
|
+
"lerna": {
|
|
29
|
+
"command": {
|
|
30
|
+
"publish": {
|
|
31
|
+
"assets": [
|
|
32
|
+
"CHANGELOG.md",
|
|
33
|
+
"package.json",
|
|
34
|
+
"dist/*.js",
|
|
35
|
+
"dist/css/**/*.css"
|
|
36
|
+
]
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|