@proximus/lavender-status 1.4.17-alpha.7 → 1.4.17-alpha.8
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/Status.d.ts +1 -1
- package/dist/custom-elements.json +7 -9
- package/dist/index.es.js +119 -96
- package/dist/web-types.json +2 -3
- package/package.json +1 -1
package/dist/Status.d.ts
CHANGED
|
@@ -3,8 +3,8 @@ import { PxElement } from '@proximus/lavender-common';
|
|
|
3
3
|
import '@proximus/lavender-layout';
|
|
4
4
|
export declare const statusStateValues: string[];
|
|
5
5
|
export declare class Status extends PxElement<HTMLDivElement> {
|
|
6
|
+
protected static readonly template: HTMLTemplateElement;
|
|
6
7
|
static nativeName: string;
|
|
7
|
-
private template;
|
|
8
8
|
constructor();
|
|
9
9
|
static get observedAttributes(): string[];
|
|
10
10
|
attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
|
|
@@ -19,6 +19,13 @@
|
|
|
19
19
|
"description": "",
|
|
20
20
|
"name": "Status",
|
|
21
21
|
"members": [
|
|
22
|
+
{
|
|
23
|
+
"kind": "field",
|
|
24
|
+
"name": "template",
|
|
25
|
+
"privacy": "protected",
|
|
26
|
+
"static": true,
|
|
27
|
+
"readonly": true
|
|
28
|
+
},
|
|
22
29
|
{
|
|
23
30
|
"kind": "field",
|
|
24
31
|
"name": "nativeName",
|
|
@@ -28,11 +35,6 @@
|
|
|
28
35
|
"static": true,
|
|
29
36
|
"default": "'div'"
|
|
30
37
|
},
|
|
31
|
-
{
|
|
32
|
-
"kind": "field",
|
|
33
|
-
"name": "template",
|
|
34
|
-
"privacy": "private"
|
|
35
|
-
},
|
|
36
38
|
{
|
|
37
39
|
"kind": "method",
|
|
38
40
|
"name": "updateState",
|
|
@@ -103,10 +105,6 @@
|
|
|
103
105
|
{
|
|
104
106
|
"kind": "field",
|
|
105
107
|
"name": "inverted"
|
|
106
|
-
},
|
|
107
|
-
{
|
|
108
|
-
"kind": "field",
|
|
109
|
-
"name": "innerHTML"
|
|
110
108
|
}
|
|
111
109
|
],
|
|
112
110
|
"attributes": [
|
package/dist/index.es.js
CHANGED
|
@@ -1,15 +1,17 @@
|
|
|
1
|
-
import { AttributeBreakpointHandlerDelegate as e, PxElement as t, WithExtraAttributes as n, backgroundColorValues as r, checkName as i,
|
|
1
|
+
import { AttributeBreakpointHandlerDelegate as e, PxElement as t, WithExtraAttributes as n, backgroundColorValues as r, checkName as i, createTemplate as a, gapValues as o, log as s, propertyToAttributeSetter as c, renderTemplate as l } from "@proximus/lavender-common";
|
|
2
2
|
//#region src/status.css?inline
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
var
|
|
3
|
+
var u = ":host,:host>*{box-sizing:border-box;display:block}.status{color:var(--px-color-text-brand-default)}.status ::slotted([slot=label]){font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-s)}.status.success{color:var(--px-color-text-purpose-success-default)}.status.warning,.status.ongoing{color:var(--px-color-text-purpose-warning-default)}.status.error{color:var(--px-color-text-purpose-error-default)}.status.unlimited{color:var(--px-color-text-purpose-unlimited-default)}.status[disabled]{color:var(--px-color-text-state-disabled-default)}:host([inverted]) .status{color:var(--px-color-text-brand-inverted)}:host([inverted]) .status.success{color:var(--px-color-text-purpose-success-inverted)}:host([inverted]) .status.warning,:host([inverted]) .status.ongoing{color:var(--px-color-text-purpose-warning-inverted)}:host([inverted]) .status.error{color:var(--px-color-text-purpose-error-inverted)}:host([inverted]) .status.unlimited{color:var(--px-color-text-purpose-unlimited-inverted)}:host([inverted]) .status[disabled]{color:var(--px-color-text-state-disabled-inverted)}@media screen and (width>=48rem){.status ::slotted([slot=label]){font-size:var(--px-text-size-label-m-tablet)}}@media screen and (width>=64.0625rem){.status ::slotted([slot=label]){font-size:var(--px-text-size-label-m-laptop)}}", d = ":host{--host-gap--mobile:var(--px-spacing-none-mobile);--host-gap--tablet:var(--px-spacing-none-tablet);--host-gap--laptop:var(--px-spacing-none-desktop);--host-gap--desktop:var(--px-spacing-none-desktop);--overflow-x-all:visible;--overflow-x-all-mobile:initial;--overflow-x-all-tablet:initial;--overflow-x-all-laptop:initial;--overflow-x-all-desktop:initial;display:block}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-mobile) - var(--host-gap--mobile))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{--flex-direction--mobile-value:row;--flex-direction--tablet-value:row;--flex-direction--laptop-value:row;--flex-direction--desktop-value:row;--flex-gap--mobile-value:var(--px-spacing-none-mobile);--flex-gap--tablet-value:var(--px-spacing-none-tablet);--flex-gap--laptop-value:var(--px-spacing-none-desktop);--flex-gap--desktop-value:var(--px-spacing-none-desktop);--flex-align-items--mobile-value:stretch;--flex-align-items--tablet-value:stretch;--flex-align-items--laptop-value:stretch;--flex-align-items--desktop-value:stretch;--flex-justify-content--mobile-value:flex-start;--flex-justify-content--tablet-value:flex-start;--flex-justify-content--laptop-value:flex-start;--flex-justify-content--desktop-value:flex-start;--flex-wrap--mobile-value:nowrap;--flex-wrap--tablet-value:nowrap;--flex-wrap--laptop-value:nowrap;--flex-wrap--desktop-value:nowrap;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);width:100%;height:100%;overflow-x:var(--overflow-x-all);display:flex}@media screen and (width<=47.938rem){.flex-container{overflow-x:var(--overflow-x-all-mobile,var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (width>=48rem){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-tablet) - var(--host-gap--tablet))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media screen and (width>=48rem) and (width<=64rem){.flex-container{overflow-x:var(--overflow-x-all-tablet,var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (width>=64.0625rem){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-laptop) - var(--host-gap--laptop))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media screen and (width>=64.0625rem) and (width<=90rem){.flex-container{overflow-x:var(--overflow-x-all-laptop,var(--overflow-x-all))}}@media screen and (width>=90.0625rem){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop,var(--overflow-x-all))}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-desktop) - var(--host-gap--desktop))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}:host(px-vstack) .flex-container{--flex-direction--mobile-value:column!important;--flex-direction--tablet-value:column!important;--flex-direction--laptop-value:column!important;--flex-direction--desktop-value:column!important}:host(px-hstack) .flex-container{--flex-direction--mobile-value:row!important;--flex-direction--tablet-value:row!important;--flex-direction--laptop-value:row!important;--flex-direction--desktop-value:row!important}", f = new CSSStyleSheet();
|
|
4
|
+
f.replaceSync(d);
|
|
5
|
+
var p = document.createElement("template");
|
|
6
|
+
p.innerHTML = "<div class=\"flex-container\"><slot></slot></div>";
|
|
7
|
+
var m = [
|
|
6
8
|
"",
|
|
7
9
|
"default",
|
|
8
10
|
"row",
|
|
9
11
|
"row-reverse",
|
|
10
12
|
"column",
|
|
11
13
|
"column-reverse"
|
|
12
|
-
],
|
|
14
|
+
], h = [
|
|
13
15
|
"",
|
|
14
16
|
"default",
|
|
15
17
|
"stretch",
|
|
@@ -19,7 +21,7 @@ var d = [
|
|
|
19
21
|
"end",
|
|
20
22
|
"center",
|
|
21
23
|
"baseline"
|
|
22
|
-
],
|
|
24
|
+
], g = [
|
|
23
25
|
"",
|
|
24
26
|
"default",
|
|
25
27
|
"flex-start",
|
|
@@ -30,25 +32,23 @@ var d = [
|
|
|
30
32
|
"space-between",
|
|
31
33
|
"space-around",
|
|
32
34
|
"space-evenly"
|
|
33
|
-
],
|
|
35
|
+
], _ = [
|
|
34
36
|
"",
|
|
35
37
|
"default",
|
|
36
38
|
"nowrap",
|
|
37
39
|
"wrap",
|
|
38
40
|
"wrap-reverse"
|
|
39
|
-
],
|
|
41
|
+
], v = [
|
|
40
42
|
"",
|
|
41
43
|
"visible",
|
|
42
44
|
"hidden",
|
|
43
45
|
"scroll",
|
|
44
46
|
"auto"
|
|
45
|
-
],
|
|
47
|
+
], y = class t extends n {
|
|
46
48
|
constructor() {
|
|
47
|
-
super(
|
|
48
|
-
}
|
|
49
|
-
connectedCallback() {
|
|
50
|
-
this.hasAttribute("direction") || (this.direction = "row"), this.hasAttribute("gap") || (this.gap = "none"), this.hasAttribute("align-items") || (this.alignItems = "stretch"), this.hasAttribute("justify-content") || (this.justifyContent = "flex-start"), this.hasAttribute("wrap") || (this.wrap = "nowrap"), this.hasAttribute("overflow-x") || this.overflowXAttributeDelegate.init("visible");
|
|
49
|
+
super(f), this.overflowXAttributeDelegate = new e(this, "overflow-x", (e) => e, "--overflow-x"), this.shadowRoot.firstChild || this.shadowRoot.appendChild(document.importNode(p.content, !0));
|
|
51
50
|
}
|
|
51
|
+
connectedCallback() {}
|
|
52
52
|
static get observedAttributes() {
|
|
53
53
|
return [
|
|
54
54
|
...super.observedAttributes,
|
|
@@ -91,273 +91,293 @@ var d = [
|
|
|
91
91
|
case "gap--tablet":
|
|
92
92
|
case "gap--laptop":
|
|
93
93
|
case "gap--desktop":
|
|
94
|
-
this.updateFlexProperties(e, t, n,
|
|
94
|
+
this.updateFlexProperties(e, t, n, o);
|
|
95
95
|
break;
|
|
96
96
|
case "justify-content":
|
|
97
97
|
case "justify-content--mobile":
|
|
98
98
|
case "justify-content--tablet":
|
|
99
99
|
case "justify-content--laptop":
|
|
100
100
|
case "justify-content--desktop":
|
|
101
|
-
this.updateFlexProperties(e, t, n,
|
|
101
|
+
this.updateFlexProperties(e, t, n, g);
|
|
102
102
|
break;
|
|
103
103
|
case "align-items":
|
|
104
104
|
case "align-items--mobile":
|
|
105
105
|
case "align-items--tablet":
|
|
106
106
|
case "align-items--laptop":
|
|
107
107
|
case "align-items--desktop":
|
|
108
|
-
this.updateFlexProperties(e, t, n,
|
|
108
|
+
this.updateFlexProperties(e, t, n, h);
|
|
109
109
|
break;
|
|
110
110
|
case "wrap":
|
|
111
111
|
case "wrap--mobile":
|
|
112
112
|
case "wrap--tablet":
|
|
113
113
|
case "wrap--laptop":
|
|
114
114
|
case "wrap--desktop":
|
|
115
|
-
this.updateFlexProperties(e, t, n,
|
|
115
|
+
this.updateFlexProperties(e, t, n, _);
|
|
116
116
|
break;
|
|
117
117
|
case "direction":
|
|
118
118
|
case "direction--mobile":
|
|
119
119
|
case "direction--tablet":
|
|
120
120
|
case "direction--laptop":
|
|
121
121
|
case "direction--desktop":
|
|
122
|
-
this.updateFlexProperties(e, t, n,
|
|
122
|
+
this.updateFlexProperties(e, t, n, m);
|
|
123
123
|
break;
|
|
124
124
|
case "overflow-x":
|
|
125
125
|
case "overflow-x--mobile":
|
|
126
126
|
case "overflow-x--tablet":
|
|
127
127
|
case "overflow-x--laptop":
|
|
128
128
|
case "overflow-x--desktop":
|
|
129
|
-
this.updateOverflowX(e, t, n,
|
|
129
|
+
this.updateOverflowX(e, t, n, v);
|
|
130
130
|
break;
|
|
131
131
|
default: super.attributeChangedCallback(e, t, n);
|
|
132
132
|
}
|
|
133
133
|
}
|
|
134
134
|
updateOverflowX(e, t, n, r) {
|
|
135
135
|
if (!i(r, n)) {
|
|
136
|
-
|
|
136
|
+
s(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
|
|
137
137
|
return;
|
|
138
138
|
}
|
|
139
139
|
this.overflowXAttributeDelegate.attributeChangedCallback(e, t, n);
|
|
140
140
|
}
|
|
141
|
-
updateFlexProperties(e,
|
|
142
|
-
this.checkName(
|
|
143
|
-
let
|
|
144
|
-
if (
|
|
145
|
-
this.updateStyle(a, e, t, r), this.updateStyle(a, e, n, r);
|
|
146
|
-
});
|
|
141
|
+
updateFlexProperties(e, n, r, i) {
|
|
142
|
+
r !== null && !this.checkName(i, r) && s(`"${r}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
|
|
143
|
+
let a = e.indexOf("--");
|
|
144
|
+
if (a === -1) for (let n of t.breakpoints) this.getAttribute(`${e}--${n}`) || this.updateStyle(e, n, r, i);
|
|
147
145
|
else {
|
|
148
|
-
let
|
|
149
|
-
this.updateStyle(
|
|
146
|
+
let t = e.slice(0, a), n = e.slice(a + 2);
|
|
147
|
+
this.updateStyle(t, n, r || this.getAttribute(t), i);
|
|
150
148
|
}
|
|
151
149
|
}
|
|
152
150
|
updateStyle(e, t, n, r) {
|
|
153
|
-
|
|
151
|
+
let i = `--flex-${e}--${t}-value`, a = e === "gap";
|
|
152
|
+
if (!n) {
|
|
153
|
+
this.$el.style.removeProperty(i), a && this.style.removeProperty(`--host-gap--${t}`);
|
|
154
|
+
return;
|
|
155
|
+
}
|
|
156
|
+
if (a && r && r.includes(n)) {
|
|
157
|
+
let e = `var(--px-spacing-${n}-${t === "laptop" ? "desktop" : t})`;
|
|
158
|
+
this.$el.style.setProperty(i, e), this.style.setProperty(`--host-gap--${t}`, e);
|
|
159
|
+
} else this.$el.style.setProperty(i, n);
|
|
160
|
+
}
|
|
161
|
+
static {
|
|
162
|
+
this.breakpoints = [
|
|
163
|
+
"mobile",
|
|
164
|
+
"tablet",
|
|
165
|
+
"laptop",
|
|
166
|
+
"desktop"
|
|
167
|
+
];
|
|
154
168
|
}
|
|
155
169
|
get direction() {
|
|
156
|
-
return this.getAttribute("direction");
|
|
170
|
+
return this.getAttribute("direction") ?? "row";
|
|
157
171
|
}
|
|
158
172
|
set direction(e) {
|
|
159
|
-
|
|
173
|
+
c(this, "direction", e);
|
|
160
174
|
}
|
|
161
175
|
get directionMobile() {
|
|
162
176
|
return this.getAttribute("direction--mobile");
|
|
163
177
|
}
|
|
164
178
|
set directionMobile(e) {
|
|
165
|
-
|
|
179
|
+
c(this, "direction--mobile", e);
|
|
166
180
|
}
|
|
167
181
|
get directionTablet() {
|
|
168
182
|
return this.getAttribute("direction--tablet");
|
|
169
183
|
}
|
|
170
184
|
set directionTablet(e) {
|
|
171
|
-
|
|
185
|
+
c(this, "direction--tablet", e);
|
|
172
186
|
}
|
|
173
187
|
get directionLaptop() {
|
|
174
188
|
return this.getAttribute("direction--laptop");
|
|
175
189
|
}
|
|
176
190
|
set directionLaptop(e) {
|
|
177
|
-
|
|
191
|
+
c(this, "direction--laptop", e);
|
|
178
192
|
}
|
|
179
193
|
get directionDesktop() {
|
|
180
194
|
return this.getAttribute("direction--desktop");
|
|
181
195
|
}
|
|
182
196
|
set directionDesktop(e) {
|
|
183
|
-
|
|
197
|
+
c(this, "direction--desktop", e);
|
|
184
198
|
}
|
|
185
199
|
get gap() {
|
|
186
|
-
return this.getAttribute("gap");
|
|
200
|
+
return this.getAttribute("gap") ?? "none";
|
|
187
201
|
}
|
|
188
202
|
set gap(e) {
|
|
189
|
-
|
|
203
|
+
c(this, "gap", e);
|
|
190
204
|
}
|
|
191
205
|
get gapMobile() {
|
|
192
206
|
return this.getAttribute("gap--mobile");
|
|
193
207
|
}
|
|
194
208
|
set gapMobile(e) {
|
|
195
|
-
|
|
209
|
+
c(this, "gap--mobile", e);
|
|
196
210
|
}
|
|
197
211
|
get gapTablet() {
|
|
198
212
|
return this.getAttribute("gap--tablet");
|
|
199
213
|
}
|
|
200
214
|
set gapTablet(e) {
|
|
201
|
-
|
|
215
|
+
c(this, "gap--tablet", e);
|
|
202
216
|
}
|
|
203
217
|
get gapLaptop() {
|
|
204
218
|
return this.getAttribute("gap--laptop");
|
|
205
219
|
}
|
|
206
220
|
set gapLaptop(e) {
|
|
207
|
-
|
|
221
|
+
c(this, "gap--laptop", e);
|
|
208
222
|
}
|
|
209
223
|
get gapDesktop() {
|
|
210
224
|
return this.getAttribute("gap--desktop");
|
|
211
225
|
}
|
|
212
226
|
set gapDesktop(e) {
|
|
213
|
-
|
|
227
|
+
c(this, "gap--desktop", e);
|
|
214
228
|
}
|
|
215
229
|
get justifyContent() {
|
|
216
|
-
return this.getAttribute("justify-content");
|
|
230
|
+
return this.getAttribute("justify-content") ?? "flex-start";
|
|
217
231
|
}
|
|
218
232
|
set justifyContent(e) {
|
|
219
|
-
|
|
233
|
+
c(this, "justify-content", e);
|
|
220
234
|
}
|
|
221
235
|
get justifyContentMobile() {
|
|
222
236
|
return this.getAttribute("justify-content--mobile");
|
|
223
237
|
}
|
|
224
238
|
set justifyContentMobile(e) {
|
|
225
|
-
|
|
239
|
+
c(this, "justify-content--mobile", e);
|
|
226
240
|
}
|
|
227
241
|
get justifyContentTablet() {
|
|
228
242
|
return this.getAttribute("justify-content--tablet");
|
|
229
243
|
}
|
|
230
244
|
set justifyContentTablet(e) {
|
|
231
|
-
|
|
245
|
+
c(this, "justify-content--tablet", e);
|
|
232
246
|
}
|
|
233
247
|
get justifyContentLaptop() {
|
|
234
248
|
return this.getAttribute("justify-content--laptop");
|
|
235
249
|
}
|
|
236
250
|
set justifyContentLaptop(e) {
|
|
237
|
-
|
|
251
|
+
c(this, "justify-content--laptop", e);
|
|
238
252
|
}
|
|
239
253
|
get justifyContentDesktop() {
|
|
240
254
|
return this.getAttribute("justify-content--desktop");
|
|
241
255
|
}
|
|
242
256
|
set justifyContentDesktop(e) {
|
|
243
|
-
|
|
257
|
+
c(this, "justify-content--desktop", e);
|
|
244
258
|
}
|
|
245
259
|
get alignItems() {
|
|
246
|
-
return this.getAttribute("align-items");
|
|
260
|
+
return this.getAttribute("align-items") ?? "stretch";
|
|
247
261
|
}
|
|
248
262
|
set alignItems(e) {
|
|
249
|
-
|
|
263
|
+
c(this, "align-items", e);
|
|
250
264
|
}
|
|
251
265
|
get alignItemsMobile() {
|
|
252
266
|
return this.getAttribute("align-items--mobile");
|
|
253
267
|
}
|
|
254
268
|
set alignItemsMobile(e) {
|
|
255
|
-
|
|
269
|
+
c(this, "align-items--mobile", e);
|
|
256
270
|
}
|
|
257
271
|
get alignItemsTablet() {
|
|
258
272
|
return this.getAttribute("align-items--tablet");
|
|
259
273
|
}
|
|
260
274
|
set alignItemsTablet(e) {
|
|
261
|
-
|
|
275
|
+
c(this, "align-items--tablet", e);
|
|
262
276
|
}
|
|
263
277
|
get alignItemsLaptop() {
|
|
264
278
|
return this.getAttribute("align-items--laptop");
|
|
265
279
|
}
|
|
266
280
|
set alignItemsLaptop(e) {
|
|
267
|
-
|
|
281
|
+
c(this, "align-items--laptop", e);
|
|
268
282
|
}
|
|
269
283
|
get alignItemsDesktop() {
|
|
270
284
|
return this.getAttribute("align-items--desktop");
|
|
271
285
|
}
|
|
272
286
|
set alignItemsDesktop(e) {
|
|
273
|
-
|
|
287
|
+
c(this, "align-items--desktop", e);
|
|
274
288
|
}
|
|
275
289
|
get wrap() {
|
|
276
|
-
return this.getAttribute("wrap");
|
|
290
|
+
return this.getAttribute("wrap") ?? "nowrap";
|
|
277
291
|
}
|
|
278
292
|
set wrap(e) {
|
|
279
|
-
|
|
293
|
+
c(this, "wrap", e);
|
|
280
294
|
}
|
|
281
295
|
get wrapMobile() {
|
|
282
296
|
return this.getAttribute("wrap--mobile");
|
|
283
297
|
}
|
|
284
298
|
set wrapMobile(e) {
|
|
285
|
-
|
|
299
|
+
c(this, "wrap--mobile", e);
|
|
286
300
|
}
|
|
287
301
|
get wrapTablet() {
|
|
288
302
|
return this.getAttribute("wrap--tablet");
|
|
289
303
|
}
|
|
290
304
|
set wrapTablet(e) {
|
|
291
|
-
|
|
305
|
+
c(this, "wrap--tablet", e);
|
|
292
306
|
}
|
|
293
307
|
get wrapLaptop() {
|
|
294
308
|
return this.getAttribute("wrap--laptop");
|
|
295
309
|
}
|
|
296
310
|
set wrapLaptop(e) {
|
|
297
|
-
|
|
311
|
+
c(this, "wrap--laptop", e);
|
|
298
312
|
}
|
|
299
313
|
get wrapDesktop() {
|
|
300
314
|
return this.getAttribute("wrap--desktop");
|
|
301
315
|
}
|
|
302
316
|
set wrapDesktop(e) {
|
|
303
|
-
|
|
317
|
+
c(this, "wrap--desktop", e);
|
|
304
318
|
}
|
|
305
319
|
get overflowX() {
|
|
306
|
-
return this.getAttribute("overflow-x");
|
|
320
|
+
return this.getAttribute("overflow-x") ?? "visible";
|
|
307
321
|
}
|
|
308
322
|
set overflowX(e) {
|
|
309
|
-
|
|
323
|
+
c(this, "overflow-x", e);
|
|
310
324
|
}
|
|
311
325
|
get overflowXMobile() {
|
|
312
326
|
return this.getAttribute("overflow-x--mobile");
|
|
313
327
|
}
|
|
314
328
|
set overflowXMobile(e) {
|
|
315
|
-
|
|
329
|
+
c(this, "overflow-x--mobile", e);
|
|
316
330
|
}
|
|
317
331
|
get overflowXTablet() {
|
|
318
332
|
return this.getAttribute("overflow-x--tablet");
|
|
319
333
|
}
|
|
320
334
|
set overflowXTablet(e) {
|
|
321
|
-
|
|
335
|
+
c(this, "overflow-x--tablet", e);
|
|
322
336
|
}
|
|
323
337
|
get overflowXLaptop() {
|
|
324
338
|
return this.getAttribute("overflow-x--laptop");
|
|
325
339
|
}
|
|
326
340
|
set overflowXLaptop(e) {
|
|
327
|
-
|
|
341
|
+
c(this, "overflow-x--laptop", e);
|
|
328
342
|
}
|
|
329
343
|
get overflowXDesktop() {
|
|
330
344
|
return this.getAttribute("overflow-x--desktop");
|
|
331
345
|
}
|
|
332
346
|
set overflowXDesktop(e) {
|
|
333
|
-
|
|
347
|
+
c(this, "overflow-x--desktop", e);
|
|
334
348
|
}
|
|
335
349
|
get $el() {
|
|
336
|
-
return this.shadowRoot.
|
|
350
|
+
return this.shadowRoot.firstElementChild;
|
|
337
351
|
}
|
|
338
352
|
};
|
|
339
|
-
customElements.get("px-stack") || customElements.define("px-stack",
|
|
340
|
-
var
|
|
341
|
-
|
|
342
|
-
|
|
353
|
+
customElements.get("px-stack") || customElements.define("px-stack", y);
|
|
354
|
+
var b = (e) => e === "direction" || e.startsWith("direction--"), x = class extends y {
|
|
355
|
+
get direction() {
|
|
356
|
+
return "column";
|
|
343
357
|
}
|
|
344
|
-
|
|
345
|
-
|
|
358
|
+
set direction(e) {
|
|
359
|
+
c(this, "direction", e);
|
|
360
|
+
}
|
|
361
|
+
attributeChangedCallback(e, t, n) {
|
|
362
|
+
b(e) || super.attributeChangedCallback(e, t, n);
|
|
346
363
|
}
|
|
347
364
|
};
|
|
348
|
-
customElements.get("px-vstack") || customElements.define("px-vstack",
|
|
349
|
-
var
|
|
350
|
-
|
|
351
|
-
|
|
365
|
+
customElements.get("px-vstack") || customElements.define("px-vstack", x);
|
|
366
|
+
var S = class extends y {
|
|
367
|
+
get direction() {
|
|
368
|
+
return "row";
|
|
352
369
|
}
|
|
353
|
-
|
|
354
|
-
|
|
370
|
+
set direction(e) {
|
|
371
|
+
c(this, "direction", e);
|
|
372
|
+
}
|
|
373
|
+
attributeChangedCallback(e, t, n) {
|
|
374
|
+
b(e) || super.attributeChangedCallback(e, t, n);
|
|
355
375
|
}
|
|
356
376
|
};
|
|
357
|
-
customElements.get("px-hstack") || customElements.define("px-hstack",
|
|
377
|
+
customElements.get("px-hstack") || customElements.define("px-hstack", S);
|
|
358
378
|
//#endregion
|
|
359
379
|
//#region ../Layout/src/Spacer.ts
|
|
360
|
-
var
|
|
380
|
+
var C = class extends HTMLElement {
|
|
361
381
|
constructor() {
|
|
362
382
|
super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
|
|
363
383
|
}
|
|
@@ -403,14 +423,14 @@ var y = class extends HTMLElement {
|
|
|
403
423
|
e ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
|
|
404
424
|
}
|
|
405
425
|
};
|
|
406
|
-
customElements.get("px-spacer") || customElements.define("px-spacer",
|
|
426
|
+
customElements.get("px-spacer") || customElements.define("px-spacer", C);
|
|
407
427
|
//#endregion
|
|
408
428
|
//#region ../Layout/src/Page.css?inline
|
|
409
|
-
var
|
|
410
|
-
|
|
411
|
-
var
|
|
429
|
+
var w = ":host{box-sizing:border-box;display:block}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", T = new CSSStyleSheet();
|
|
430
|
+
T.replaceSync(w);
|
|
431
|
+
var E = class extends n {
|
|
412
432
|
constructor() {
|
|
413
|
-
super(
|
|
433
|
+
super(T), this.template = () => `
|
|
414
434
|
<px-container border-radius="none" padding="none">
|
|
415
435
|
<px-vstack>
|
|
416
436
|
<px-container id="header-container" border-radius="none">
|
|
@@ -503,7 +523,7 @@ var S = class extends n {
|
|
|
503
523
|
</px-container>
|
|
504
524
|
</px-vstack>
|
|
505
525
|
</px-container>
|
|
506
|
-
`, this.shadowRoot
|
|
526
|
+
`, l(this.shadowRoot, this.template());
|
|
507
527
|
}
|
|
508
528
|
static get observedAttributes() {
|
|
509
529
|
return [
|
|
@@ -590,12 +610,12 @@ var S = class extends n {
|
|
|
590
610
|
this.$headerContainer.paddingLeft = e, this.$headerContainer.paddingRight = e, this.$bodyContainer.paddingLeft = e, this.$bodyContainer.paddingRight = e, this.$contactContainer.paddingLeft = e, this.$contactContainer.paddingRight = e, this.$footerContainer.paddingLeft = e, this.$footerContainer.paddingRight = e, this.$imageContainer.paddingLeft = e, this.$imageContainer.paddingRight = e;
|
|
591
611
|
}
|
|
592
612
|
};
|
|
593
|
-
customElements.get("px-page") === void 0 && customElements.define("px-page",
|
|
613
|
+
customElements.get("px-page") === void 0 && customElements.define("px-page", E);
|
|
594
614
|
//#endregion
|
|
595
615
|
//#region src/Status.ts
|
|
596
|
-
var
|
|
597
|
-
|
|
598
|
-
var
|
|
616
|
+
var D = new CSSStyleSheet();
|
|
617
|
+
D.replaceSync(u);
|
|
618
|
+
var O = [
|
|
599
619
|
"",
|
|
600
620
|
"info",
|
|
601
621
|
"success",
|
|
@@ -603,12 +623,15 @@ var w = [
|
|
|
603
623
|
"error",
|
|
604
624
|
"ongoing",
|
|
605
625
|
"unlimited"
|
|
606
|
-
],
|
|
626
|
+
], k = class e extends t {
|
|
627
|
+
static {
|
|
628
|
+
this.template = a("<div class=\"status\"><px-hstack gap=\"2xs\" align-items=\"flex-start\"><px-icon name=\"information_fill\" from=\"lavender\" size=\"s\" color=\"brand\"></px-icon><slot name=\"label\"></slot></px-hstack></div>");
|
|
629
|
+
}
|
|
607
630
|
static {
|
|
608
631
|
this.nativeName = "div";
|
|
609
632
|
}
|
|
610
633
|
constructor() {
|
|
611
|
-
super(
|
|
634
|
+
super(D), l(this.shadowRoot, e.template);
|
|
612
635
|
}
|
|
613
636
|
static get observedAttributes() {
|
|
614
637
|
return [
|
|
@@ -653,8 +676,8 @@ var w = [
|
|
|
653
676
|
}
|
|
654
677
|
}
|
|
655
678
|
updateState(e) {
|
|
656
|
-
if (!this.checkName(
|
|
657
|
-
|
|
679
|
+
if (!this.checkName(O, e)) {
|
|
680
|
+
s(`"${e}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${O.join("\", \"")}".`);
|
|
658
681
|
return;
|
|
659
682
|
}
|
|
660
683
|
let t = {
|
|
@@ -747,6 +770,6 @@ var w = [
|
|
|
747
770
|
this._updateBooleanAttribute("inverted", e);
|
|
748
771
|
}
|
|
749
772
|
};
|
|
750
|
-
customElements.get("px-status") || customElements.define("px-status",
|
|
773
|
+
customElements.get("px-status") || customElements.define("px-status", k);
|
|
751
774
|
//#endregion
|
|
752
|
-
export {
|
|
775
|
+
export { k as Status, O as statusStateValues };
|
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@proximus/lavender-status",
|
|
4
|
-
"version": "1.4.17-alpha.
|
|
4
|
+
"version": "1.4.17-alpha.8",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -33,8 +33,7 @@
|
|
|
33
33
|
{ "name": "iconOnlyTablet" },
|
|
34
34
|
{ "name": "iconOnlyLaptop" },
|
|
35
35
|
{ "name": "disabled" },
|
|
36
|
-
{ "name": "inverted" }
|
|
37
|
-
{ "name": "innerHTML" }
|
|
36
|
+
{ "name": "inverted" }
|
|
38
37
|
],
|
|
39
38
|
"events": []
|
|
40
39
|
}
|