@proximus/lavender-status 1.4.14-beta.3 → 1.4.14
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 +5 -6
- package/dist/index.es.js +155 -750
- package/package.json +1 -1
package/dist/Status.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Icon } from '@proximus/lavender-icon';
|
|
2
2
|
import { PxElement } from '@proximus/lavender-common';
|
|
3
|
-
import '@proximus/lavender-layout';
|
|
4
3
|
export declare const statusStateValues: string[];
|
|
5
4
|
export declare class Status extends PxElement<HTMLDivElement> {
|
|
6
5
|
static nativeName: string;
|
|
@@ -13,10 +12,10 @@ export declare class Status extends PxElement<HTMLDivElement> {
|
|
|
13
12
|
get $label(): HTMLSpanElement;
|
|
14
13
|
get $statusIcon(): Icon;
|
|
15
14
|
get $children(): NodeListOf<Element>;
|
|
16
|
-
get state(): string
|
|
17
|
-
set state(value: string
|
|
18
|
-
get iconAriaLabel(): string
|
|
19
|
-
set iconAriaLabel(value: string
|
|
15
|
+
get state(): string;
|
|
16
|
+
set state(value: string);
|
|
17
|
+
get iconAriaLabel(): string;
|
|
18
|
+
set iconAriaLabel(value: string);
|
|
20
19
|
get iconOnly(): boolean;
|
|
21
20
|
set iconOnly(value: boolean);
|
|
22
21
|
get iconOnlyMobile(): boolean;
|
package/dist/index.es.js
CHANGED
|
@@ -1,752 +1,157 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
],
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
updateStyle(e, t, n, r) {
|
|
153
|
-
n && (e === "gap" && r && r.includes(n) ? (this.$el.style.setProperty(`--flex-${e}--${t}-value`, `var(--px-spacing-${n}-${t === "laptop" ? "desktop" : t})`), this.style.setProperty(`--host-gap--${t}`, `var(--px-spacing-${n}-${t === "laptop" ? "desktop" : t})`)) : this.$el.style.setProperty(`--flex-${e}--${t}-value`, n));
|
|
154
|
-
}
|
|
155
|
-
get direction() {
|
|
156
|
-
return this.getAttribute("direction");
|
|
157
|
-
}
|
|
158
|
-
set direction(e) {
|
|
159
|
-
s(this, "direction", e);
|
|
160
|
-
}
|
|
161
|
-
get directionMobile() {
|
|
162
|
-
return this.getAttribute("direction--mobile");
|
|
163
|
-
}
|
|
164
|
-
set directionMobile(e) {
|
|
165
|
-
s(this, "direction--mobile", e);
|
|
166
|
-
}
|
|
167
|
-
get directionTablet() {
|
|
168
|
-
return this.getAttribute("direction--tablet");
|
|
169
|
-
}
|
|
170
|
-
set directionTablet(e) {
|
|
171
|
-
s(this, "direction--tablet", e);
|
|
172
|
-
}
|
|
173
|
-
get directionLaptop() {
|
|
174
|
-
return this.getAttribute("direction--laptop");
|
|
175
|
-
}
|
|
176
|
-
set directionLaptop(e) {
|
|
177
|
-
s(this, "direction--laptop", e);
|
|
178
|
-
}
|
|
179
|
-
get directionDesktop() {
|
|
180
|
-
return this.getAttribute("direction--desktop");
|
|
181
|
-
}
|
|
182
|
-
set directionDesktop(e) {
|
|
183
|
-
s(this, "direction--desktop", e);
|
|
184
|
-
}
|
|
185
|
-
get gap() {
|
|
186
|
-
return this.getAttribute("gap");
|
|
187
|
-
}
|
|
188
|
-
set gap(e) {
|
|
189
|
-
s(this, "gap", e);
|
|
190
|
-
}
|
|
191
|
-
get gapMobile() {
|
|
192
|
-
return this.getAttribute("gap--mobile");
|
|
193
|
-
}
|
|
194
|
-
set gapMobile(e) {
|
|
195
|
-
s(this, "gap--mobile", e);
|
|
196
|
-
}
|
|
197
|
-
get gapTablet() {
|
|
198
|
-
return this.getAttribute("gap--tablet");
|
|
199
|
-
}
|
|
200
|
-
set gapTablet(e) {
|
|
201
|
-
s(this, "gap--tablet", e);
|
|
202
|
-
}
|
|
203
|
-
get gapLaptop() {
|
|
204
|
-
return this.getAttribute("gap--laptop");
|
|
205
|
-
}
|
|
206
|
-
set gapLaptop(e) {
|
|
207
|
-
s(this, "gap--laptop", e);
|
|
208
|
-
}
|
|
209
|
-
get gapDesktop() {
|
|
210
|
-
return this.getAttribute("gap--desktop");
|
|
211
|
-
}
|
|
212
|
-
set gapDesktop(e) {
|
|
213
|
-
s(this, "gap--desktop", e);
|
|
214
|
-
}
|
|
215
|
-
get justifyContent() {
|
|
216
|
-
return this.getAttribute("justify-content");
|
|
217
|
-
}
|
|
218
|
-
set justifyContent(e) {
|
|
219
|
-
s(this, "justify-content", e);
|
|
220
|
-
}
|
|
221
|
-
get justifyContentMobile() {
|
|
222
|
-
return this.getAttribute("justify-content--mobile");
|
|
223
|
-
}
|
|
224
|
-
set justifyContentMobile(e) {
|
|
225
|
-
s(this, "justify-content--mobile", e);
|
|
226
|
-
}
|
|
227
|
-
get justifyContentTablet() {
|
|
228
|
-
return this.getAttribute("justify-content--tablet");
|
|
229
|
-
}
|
|
230
|
-
set justifyContentTablet(e) {
|
|
231
|
-
s(this, "justify-content--tablet", e);
|
|
232
|
-
}
|
|
233
|
-
get justifyContentLaptop() {
|
|
234
|
-
return this.getAttribute("justify-content--laptop");
|
|
235
|
-
}
|
|
236
|
-
set justifyContentLaptop(e) {
|
|
237
|
-
s(this, "justify-content--laptop", e);
|
|
238
|
-
}
|
|
239
|
-
get justifyContentDesktop() {
|
|
240
|
-
return this.getAttribute("justify-content--desktop");
|
|
241
|
-
}
|
|
242
|
-
set justifyContentDesktop(e) {
|
|
243
|
-
s(this, "justify-content--desktop", e);
|
|
244
|
-
}
|
|
245
|
-
get alignItems() {
|
|
246
|
-
return this.getAttribute("align-items");
|
|
247
|
-
}
|
|
248
|
-
set alignItems(e) {
|
|
249
|
-
s(this, "align-items", e);
|
|
250
|
-
}
|
|
251
|
-
get alignItemsMobile() {
|
|
252
|
-
return this.getAttribute("align-items--mobile");
|
|
253
|
-
}
|
|
254
|
-
set alignItemsMobile(e) {
|
|
255
|
-
s(this, "align-items--mobile", e);
|
|
256
|
-
}
|
|
257
|
-
get alignItemsTablet() {
|
|
258
|
-
return this.getAttribute("align-items--tablet");
|
|
259
|
-
}
|
|
260
|
-
set alignItemsTablet(e) {
|
|
261
|
-
s(this, "align-items--tablet", e);
|
|
262
|
-
}
|
|
263
|
-
get alignItemsLaptop() {
|
|
264
|
-
return this.getAttribute("align-items--laptop");
|
|
265
|
-
}
|
|
266
|
-
set alignItemsLaptop(e) {
|
|
267
|
-
s(this, "align-items--laptop", e);
|
|
268
|
-
}
|
|
269
|
-
get alignItemsDesktop() {
|
|
270
|
-
return this.getAttribute("align-items--desktop");
|
|
271
|
-
}
|
|
272
|
-
set alignItemsDesktop(e) {
|
|
273
|
-
s(this, "align-items--desktop", e);
|
|
274
|
-
}
|
|
275
|
-
get wrap() {
|
|
276
|
-
return this.getAttribute("wrap");
|
|
277
|
-
}
|
|
278
|
-
set wrap(e) {
|
|
279
|
-
s(this, "wrap", e);
|
|
280
|
-
}
|
|
281
|
-
get wrapMobile() {
|
|
282
|
-
return this.getAttribute("wrap--mobile");
|
|
283
|
-
}
|
|
284
|
-
set wrapMobile(e) {
|
|
285
|
-
s(this, "wrap--mobile", e);
|
|
286
|
-
}
|
|
287
|
-
get wrapTablet() {
|
|
288
|
-
return this.getAttribute("wrap--tablet");
|
|
289
|
-
}
|
|
290
|
-
set wrapTablet(e) {
|
|
291
|
-
s(this, "wrap--tablet", e);
|
|
292
|
-
}
|
|
293
|
-
get wrapLaptop() {
|
|
294
|
-
return this.getAttribute("wrap--laptop");
|
|
295
|
-
}
|
|
296
|
-
set wrapLaptop(e) {
|
|
297
|
-
s(this, "wrap--laptop", e);
|
|
298
|
-
}
|
|
299
|
-
get wrapDesktop() {
|
|
300
|
-
return this.getAttribute("wrap--desktop");
|
|
301
|
-
}
|
|
302
|
-
set wrapDesktop(e) {
|
|
303
|
-
s(this, "wrap--desktop", e);
|
|
304
|
-
}
|
|
305
|
-
get overflowX() {
|
|
306
|
-
return this.getAttribute("overflow-x");
|
|
307
|
-
}
|
|
308
|
-
set overflowX(e) {
|
|
309
|
-
s(this, "overflow-x", e);
|
|
310
|
-
}
|
|
311
|
-
get overflowXMobile() {
|
|
312
|
-
return this.getAttribute("overflow-x--mobile");
|
|
313
|
-
}
|
|
314
|
-
set overflowXMobile(e) {
|
|
315
|
-
s(this, "overflow-x--mobile", e);
|
|
316
|
-
}
|
|
317
|
-
get overflowXTablet() {
|
|
318
|
-
return this.getAttribute("overflow-x--tablet");
|
|
319
|
-
}
|
|
320
|
-
set overflowXTablet(e) {
|
|
321
|
-
s(this, "overflow-x--tablet", e);
|
|
322
|
-
}
|
|
323
|
-
get overflowXLaptop() {
|
|
324
|
-
return this.getAttribute("overflow-x--laptop");
|
|
325
|
-
}
|
|
326
|
-
set overflowXLaptop(e) {
|
|
327
|
-
s(this, "overflow-x--laptop", e);
|
|
328
|
-
}
|
|
329
|
-
get overflowXDesktop() {
|
|
330
|
-
return this.getAttribute("overflow-x--desktop");
|
|
331
|
-
}
|
|
332
|
-
set overflowXDesktop(e) {
|
|
333
|
-
s(this, "overflow-x--desktop", e);
|
|
334
|
-
}
|
|
335
|
-
get $el() {
|
|
336
|
-
return this.shadowRoot.querySelector(".flex-container");
|
|
337
|
-
}
|
|
1
|
+
import { PxElement as a, log as c } from "@proximus/lavender-common";
|
|
2
|
+
const u = ':host,:host>*{display:block;box-sizing:border-box}.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-l)}.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 (min-width: 48rem){.status ::slotted([slot="label"]){font-size:var(--px-text-size-label-m-tablet)}}@media screen and (min-width: 64.0625rem){.status ::slotted([slot="label"]){font-size:var(--px-text-size-label-m-laptop)}}', n = new CSSStyleSheet();
|
|
3
|
+
n.replaceSync(u);
|
|
4
|
+
const l = [
|
|
5
|
+
"",
|
|
6
|
+
"info",
|
|
7
|
+
"success",
|
|
8
|
+
"warning",
|
|
9
|
+
"error",
|
|
10
|
+
"ongoing",
|
|
11
|
+
"unlimited"
|
|
12
|
+
], r = class r extends a {
|
|
13
|
+
constructor() {
|
|
14
|
+
super(n), this.template = () => `
|
|
15
|
+
<div class="status">
|
|
16
|
+
<px-hstack gap="2xs" align-items="flex-start">
|
|
17
|
+
<px-icon name="information_fill" from="lavender" size="s" color="brand"></px-icon>
|
|
18
|
+
<slot name="label"></slot>
|
|
19
|
+
</px-hstack>
|
|
20
|
+
</div>`, this.shadowRoot.innerHTML = this.template();
|
|
21
|
+
}
|
|
22
|
+
static get observedAttributes() {
|
|
23
|
+
return [
|
|
24
|
+
"state",
|
|
25
|
+
"icon-only",
|
|
26
|
+
"icon-only--mobile",
|
|
27
|
+
"icon-only--tablet",
|
|
28
|
+
"icon-only--laptop",
|
|
29
|
+
"disabled",
|
|
30
|
+
"inverted",
|
|
31
|
+
"icon-aria-label"
|
|
32
|
+
];
|
|
33
|
+
}
|
|
34
|
+
attributeChangedCallback(t, s, e) {
|
|
35
|
+
if (s !== e)
|
|
36
|
+
switch (t) {
|
|
37
|
+
case "state":
|
|
38
|
+
this.updateState(e), this.$el.classList.toggle(`${e}`);
|
|
39
|
+
break;
|
|
40
|
+
case "icon-aria-label":
|
|
41
|
+
this.$statusIcon.setAttribute("aria-label", e);
|
|
42
|
+
break;
|
|
43
|
+
case "icon-only":
|
|
44
|
+
this.updateIconOnly(null);
|
|
45
|
+
break;
|
|
46
|
+
case "icon-only--mobile":
|
|
47
|
+
this.updateIconOnly("mobile");
|
|
48
|
+
break;
|
|
49
|
+
case "icon-only--tablet":
|
|
50
|
+
this.updateIconOnly("tablet");
|
|
51
|
+
break;
|
|
52
|
+
case "icon-only--laptop":
|
|
53
|
+
this.updateIconOnly("laptop");
|
|
54
|
+
break;
|
|
55
|
+
case "disabled":
|
|
56
|
+
this.$el.toggleAttribute("disabled", e !== null), this.$statusIcon.color = "state-disabled";
|
|
57
|
+
break;
|
|
58
|
+
case "inverted":
|
|
59
|
+
for (let i = 0; i < this.$children.length; i++)
|
|
60
|
+
this.$children[i].hasAttribute("inverted") || this.$children[i].toggleAttribute("inverted");
|
|
61
|
+
this.$el.toggleAttribute("inverted", e !== null), this.$statusIcon.toggleAttribute("inverted", e !== null);
|
|
62
|
+
break;
|
|
63
|
+
default:
|
|
64
|
+
super.attributeChangedCallback(t, s, e);
|
|
65
|
+
break;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
updateState(t) {
|
|
69
|
+
if (!this.checkName(l, t)) {
|
|
70
|
+
c(
|
|
71
|
+
`"${t}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${l.join('", "')}".`
|
|
72
|
+
);
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
const s = {
|
|
76
|
+
info: { name: "information_fill", color: "brand" },
|
|
77
|
+
success: { name: "checkmark_fill", color: "purpose-success" },
|
|
78
|
+
warning: { name: "exclamation_mark_fill", color: "purpose-warning" },
|
|
79
|
+
error: { name: "minus_fill", color: "purpose-error" },
|
|
80
|
+
ongoing: { name: "clock_fill", color: "purpose-warning" },
|
|
81
|
+
unlimited: { name: "infinity_fill", color: "purpose-unlimited" }
|
|
82
|
+
}, { name: e, color: i } = s[t] || s.info;
|
|
83
|
+
this.$statusIcon.name = e, this.$statusIcon.color = i;
|
|
84
|
+
}
|
|
85
|
+
updateIconOnly(t) {
|
|
86
|
+
var e;
|
|
87
|
+
const s = t ? `--${t}` : "";
|
|
88
|
+
this.$label.setAttribute(`shown--sr${s}`, ""), (t === "laptop" || t === null) && this.$statusIcon.setAttribute(
|
|
89
|
+
"title",
|
|
90
|
+
((e = this.$label.textContent) == null ? void 0 : e.trim()) || ""
|
|
91
|
+
);
|
|
92
|
+
}
|
|
93
|
+
get $label() {
|
|
94
|
+
return this.querySelector('[slot="label"]');
|
|
95
|
+
}
|
|
96
|
+
get $statusIcon() {
|
|
97
|
+
return this.shadowRoot.querySelector("px-icon");
|
|
98
|
+
}
|
|
99
|
+
get $children() {
|
|
100
|
+
return this.querySelectorAll("px-status > *");
|
|
101
|
+
}
|
|
102
|
+
get state() {
|
|
103
|
+
return this.getAttribute("state");
|
|
104
|
+
}
|
|
105
|
+
set state(t) {
|
|
106
|
+
this.setAttribute("state", t);
|
|
107
|
+
}
|
|
108
|
+
get iconAriaLabel() {
|
|
109
|
+
return this.getAttribute("icon-aria-label");
|
|
110
|
+
}
|
|
111
|
+
set iconAriaLabel(t) {
|
|
112
|
+
this.setAttribute("icon-aria-label", t);
|
|
113
|
+
}
|
|
114
|
+
get iconOnly() {
|
|
115
|
+
return this.hasAttribute("icon-only");
|
|
116
|
+
}
|
|
117
|
+
set iconOnly(t) {
|
|
118
|
+
t ? this.setAttribute("icon-only", "") : this.removeAttribute("icon-only");
|
|
119
|
+
}
|
|
120
|
+
get iconOnlyMobile() {
|
|
121
|
+
return this.hasAttribute("icon-only--mobile");
|
|
122
|
+
}
|
|
123
|
+
set iconOnlyMobile(t) {
|
|
124
|
+
t ? this.setAttribute("icon-only--mobile", "") : this.removeAttribute("icon-only--mobile");
|
|
125
|
+
}
|
|
126
|
+
get iconOnlyTablet() {
|
|
127
|
+
return this.hasAttribute("icon-only--tablet");
|
|
128
|
+
}
|
|
129
|
+
set iconOnlyTablet(t) {
|
|
130
|
+
t ? this.setAttribute("icon-only--tablet", "") : this.removeAttribute("icon-only--tablet");
|
|
131
|
+
}
|
|
132
|
+
get iconOnlyLaptop() {
|
|
133
|
+
return this.hasAttribute("icon-only--laptop");
|
|
134
|
+
}
|
|
135
|
+
set iconOnlyLaptop(t) {
|
|
136
|
+
t ? this.setAttribute("icon-only--laptop", "") : this.removeAttribute("icon-only--laptop");
|
|
137
|
+
}
|
|
138
|
+
get disabled() {
|
|
139
|
+
return this.hasAttribute("disabled");
|
|
140
|
+
}
|
|
141
|
+
set disabled(t) {
|
|
142
|
+
t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
|
|
143
|
+
}
|
|
144
|
+
get inverted() {
|
|
145
|
+
return this.hasAttribute("inverted");
|
|
146
|
+
}
|
|
147
|
+
set inverted(t) {
|
|
148
|
+
t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
149
|
+
}
|
|
338
150
|
};
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
|
|
346
|
-
}
|
|
151
|
+
r.nativeName = "div";
|
|
152
|
+
let o = r;
|
|
153
|
+
customElements.get("px-status") || customElements.define("px-status", o);
|
|
154
|
+
export {
|
|
155
|
+
o as Status,
|
|
156
|
+
l as statusStateValues
|
|
347
157
|
};
|
|
348
|
-
customElements.get("px-vstack") || customElements.define("px-vstack", _);
|
|
349
|
-
var v = class extends g {
|
|
350
|
-
constructor() {
|
|
351
|
-
super();
|
|
352
|
-
}
|
|
353
|
-
connectedCallback() {
|
|
354
|
-
super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
|
|
355
|
-
}
|
|
356
|
-
};
|
|
357
|
-
customElements.get("px-hstack") || customElements.define("px-hstack", v);
|
|
358
|
-
//#endregion
|
|
359
|
-
//#region ../Layout/src/Spacer.ts
|
|
360
|
-
var y = class extends HTMLElement {
|
|
361
|
-
constructor() {
|
|
362
|
-
super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
|
|
363
|
-
}
|
|
364
|
-
static get observedAttributes() {
|
|
365
|
-
return ["grow", "nogap"];
|
|
366
|
-
}
|
|
367
|
-
attributeChangedCallback(e, t, n) {
|
|
368
|
-
e === "grow" && (this.growValue = n || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
|
|
369
|
-
}
|
|
370
|
-
connectedCallback() {
|
|
371
|
-
this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.nogap && this.parentElement && (this.resizeObserver = new ResizeObserver(() => {
|
|
372
|
-
this.handleSizeChange();
|
|
373
|
-
}), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck());
|
|
374
|
-
}
|
|
375
|
-
disconnectedCallback() {
|
|
376
|
-
this.resizeObserver?.disconnect(), this.recheckHandle &&= (cancelAnimationFrame(this.recheckHandle), void 0);
|
|
377
|
-
}
|
|
378
|
-
get grow() {
|
|
379
|
-
return this.getAttribute("grow");
|
|
380
|
-
}
|
|
381
|
-
set grow(e) {
|
|
382
|
-
this.setAttribute("grow", `${e}`);
|
|
383
|
-
}
|
|
384
|
-
scheduleRecheck() {
|
|
385
|
-
this.recheckHandle && cancelAnimationFrame(this.recheckHandle), this.recheckHandle = requestAnimationFrame(() => {
|
|
386
|
-
this.recheckHandle = void 0, this.recalculateVisibility();
|
|
387
|
-
});
|
|
388
|
-
}
|
|
389
|
-
recalculateVisibility() {
|
|
390
|
-
this.isConnected && (this.style.display = "", this.style.flexGrow = this.growValue, this.handleSizeChange());
|
|
391
|
-
}
|
|
392
|
-
handleSizeChange() {
|
|
393
|
-
let e = this.getBoundingClientRect(), t = e.width === 0 && !this.isVertical || e.height === 0 && this.isVertical;
|
|
394
|
-
this.isZeroSized !== t && (this.isZeroSized = t, this.updateParticipation());
|
|
395
|
-
}
|
|
396
|
-
updateParticipation() {
|
|
397
|
-
this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
|
|
398
|
-
}
|
|
399
|
-
get nogap() {
|
|
400
|
-
return this.hasAttribute("nogap");
|
|
401
|
-
}
|
|
402
|
-
set nogap(e) {
|
|
403
|
-
e ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
|
|
404
|
-
}
|
|
405
|
-
};
|
|
406
|
-
customElements.get("px-spacer") || customElements.define("px-spacer", y);
|
|
407
|
-
//#endregion
|
|
408
|
-
//#region ../Layout/src/Page.css?inline
|
|
409
|
-
var b = ":host{box-sizing:border-box;display:block}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", x = new CSSStyleSheet();
|
|
410
|
-
x.replaceSync(b);
|
|
411
|
-
var S = class extends n {
|
|
412
|
-
constructor() {
|
|
413
|
-
super(x), this.template = () => `
|
|
414
|
-
<px-container border-radius="none" padding="none">
|
|
415
|
-
<px-vstack>
|
|
416
|
-
<px-container id="header-container" border-radius="none">
|
|
417
|
-
<px-hstack>
|
|
418
|
-
<px-spacer></px-spacer>
|
|
419
|
-
<px-vstack
|
|
420
|
-
id="header-vstack-container"
|
|
421
|
-
gap="s"
|
|
422
|
-
grow="${this.grow}"
|
|
423
|
-
basis="${this.basis}"
|
|
424
|
-
>
|
|
425
|
-
<slot name="header-container"></slot>
|
|
426
|
-
</px-vstack>
|
|
427
|
-
<px-spacer></px-spacer>
|
|
428
|
-
</px-hstack>
|
|
429
|
-
</px-container>
|
|
430
|
-
<px-container
|
|
431
|
-
id="image-container"
|
|
432
|
-
border-radius="none"
|
|
433
|
-
padding="none"
|
|
434
|
-
padding-top="xl"
|
|
435
|
-
id="image-box"
|
|
436
|
-
background-size="cover"
|
|
437
|
-
background-position="top center"
|
|
438
|
-
padding-bottom="xl"
|
|
439
|
-
border-radius="none"
|
|
440
|
-
bgimg="${this.backgroundImage}"
|
|
441
|
-
>
|
|
442
|
-
<px-hstack>
|
|
443
|
-
<px-spacer></px-spacer>
|
|
444
|
-
<px-vstack grow="${this.grow}" basis="${this.basis}">
|
|
445
|
-
<slot name="image-container"></slot>
|
|
446
|
-
</px-vstack>
|
|
447
|
-
<px-spacer></px-spacer>
|
|
448
|
-
</px-hstack>
|
|
449
|
-
</px-container>
|
|
450
|
-
<px-container
|
|
451
|
-
id="body-container"
|
|
452
|
-
id="main"
|
|
453
|
-
background-color="${this.backgroundColor}"
|
|
454
|
-
padding="none"
|
|
455
|
-
padding-top="xl"
|
|
456
|
-
padding-bottom="xl"
|
|
457
|
-
>
|
|
458
|
-
<px-hstack>
|
|
459
|
-
<px-spacer></px-spacer>
|
|
460
|
-
<px-vstack
|
|
461
|
-
id="body-vstack-container"
|
|
462
|
-
gap="l"
|
|
463
|
-
grow="${this.grow}"
|
|
464
|
-
basis="${this.basis}"
|
|
465
|
-
>
|
|
466
|
-
<slot name="body-container"></slot>
|
|
467
|
-
</px-vstack>
|
|
468
|
-
<px-spacer></px-spacer>
|
|
469
|
-
</px-hstack>
|
|
470
|
-
</px-container>
|
|
471
|
-
<px-container
|
|
472
|
-
id="contact-container"
|
|
473
|
-
border-radius="none"
|
|
474
|
-
id="main"
|
|
475
|
-
background-color="surface-default"
|
|
476
|
-
padding="none"
|
|
477
|
-
padding-top="xl"
|
|
478
|
-
padding-bottom="xl"
|
|
479
|
-
>
|
|
480
|
-
<px-hstack>
|
|
481
|
-
<px-spacer></px-spacer>
|
|
482
|
-
<px-vstack gap="l" grow="${this.grow}" basis="${this.basis}">
|
|
483
|
-
<slot name="contact-container"></slot>
|
|
484
|
-
</px-vstack>
|
|
485
|
-
<px-spacer></px-spacer>
|
|
486
|
-
</px-hstack>
|
|
487
|
-
</px-container>
|
|
488
|
-
<px-container
|
|
489
|
-
id="footer-container"
|
|
490
|
-
background-color="none"
|
|
491
|
-
border-radius="none"
|
|
492
|
-
style="background-color: rgb(108, 66, 156)"
|
|
493
|
-
padding-top="xl"
|
|
494
|
-
padding-bottom="xl"
|
|
495
|
-
>
|
|
496
|
-
<px-hstack>
|
|
497
|
-
<px-spacer></px-spacer>
|
|
498
|
-
<px-vstack gap="l" grow="${this.grow}" basis="${this.basis}">
|
|
499
|
-
<slot name="footer-container"></slot>
|
|
500
|
-
</px-vstack>
|
|
501
|
-
<px-spacer></px-spacer>
|
|
502
|
-
</px-hstack>
|
|
503
|
-
</px-container>
|
|
504
|
-
</px-vstack>
|
|
505
|
-
</px-container>
|
|
506
|
-
`, this.shadowRoot.innerHTML = this.template();
|
|
507
|
-
}
|
|
508
|
-
static get observedAttributes() {
|
|
509
|
-
return [
|
|
510
|
-
...super.observedAttributes,
|
|
511
|
-
"background-image",
|
|
512
|
-
"gap",
|
|
513
|
-
"background-color",
|
|
514
|
-
"padding-vertical",
|
|
515
|
-
"padding-horizontal"
|
|
516
|
-
];
|
|
517
|
-
}
|
|
518
|
-
get $wideImage() {
|
|
519
|
-
return this.shadowRoot.querySelector("#image-box");
|
|
520
|
-
}
|
|
521
|
-
get $bodyVStackContainer() {
|
|
522
|
-
return this.shadowRoot.querySelector("#header-vstack-container");
|
|
523
|
-
}
|
|
524
|
-
get $bodyContainer() {
|
|
525
|
-
return this.shadowRoot.querySelector("#body-container");
|
|
526
|
-
}
|
|
527
|
-
get $contactContainer() {
|
|
528
|
-
return this.shadowRoot.querySelector("#contact-container");
|
|
529
|
-
}
|
|
530
|
-
get $footerContainer() {
|
|
531
|
-
return this.shadowRoot.querySelector("#footer-container");
|
|
532
|
-
}
|
|
533
|
-
get $headerContainer() {
|
|
534
|
-
return this.shadowRoot.querySelector("#header-container");
|
|
535
|
-
}
|
|
536
|
-
get $imageContainer() {
|
|
537
|
-
return this.shadowRoot.querySelector("#image-container");
|
|
538
|
-
}
|
|
539
|
-
get backgroundImage() {
|
|
540
|
-
return this.getAttribute("background-image");
|
|
541
|
-
}
|
|
542
|
-
get $main() {
|
|
543
|
-
return this.shadowRoot.querySelector("#main");
|
|
544
|
-
}
|
|
545
|
-
get backgroundColor() {
|
|
546
|
-
return this.getAttribute("background-color") || "none";
|
|
547
|
-
}
|
|
548
|
-
get paddingVertical() {
|
|
549
|
-
return this.getAttribute("padding-vertical");
|
|
550
|
-
}
|
|
551
|
-
get paddingHorizontal() {
|
|
552
|
-
return this.getAttribute("padding-horizontal");
|
|
553
|
-
}
|
|
554
|
-
set paddingVertical(e) {
|
|
555
|
-
this.setAttribute("padding-vertical", `${e}`);
|
|
556
|
-
}
|
|
557
|
-
set paddingHorizontal(e) {
|
|
558
|
-
this.setAttribute("padding-horizontal", `${e}`);
|
|
559
|
-
}
|
|
560
|
-
get gap() {
|
|
561
|
-
return this.getAttribute("gap");
|
|
562
|
-
}
|
|
563
|
-
connectedCallback() {
|
|
564
|
-
this.handlePaddingVerticalChange(this.paddingVertical), this.handlePaddingHorizontalChange(this.paddingHorizontal);
|
|
565
|
-
}
|
|
566
|
-
attributeChangedCallback(e, t, n) {
|
|
567
|
-
if (t !== n) switch (e) {
|
|
568
|
-
case "background-image":
|
|
569
|
-
this.$imageContainer.setAttribute("background-image", n);
|
|
570
|
-
break;
|
|
571
|
-
case "gap":
|
|
572
|
-
this.$bodyVStackContainer.setAttribute("gap", n);
|
|
573
|
-
break;
|
|
574
|
-
case "background-color":
|
|
575
|
-
this.$bodyContainer.setAttribute("background-color", r.indexOf(n) > 0 ? n : "none");
|
|
576
|
-
break;
|
|
577
|
-
case "padding-vertical":
|
|
578
|
-
this.handlePaddingVerticalChange(n);
|
|
579
|
-
break;
|
|
580
|
-
case "padding-horizontal":
|
|
581
|
-
this.handlePaddingHorizontalChange(n);
|
|
582
|
-
break;
|
|
583
|
-
default: super.attributeChangedCallback(e, t, n);
|
|
584
|
-
}
|
|
585
|
-
}
|
|
586
|
-
handlePaddingVerticalChange(e) {
|
|
587
|
-
this.$bodyContainer.paddingTop = e, this.$bodyContainer.paddingBottom = e;
|
|
588
|
-
}
|
|
589
|
-
handlePaddingHorizontalChange(e) {
|
|
590
|
-
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
|
-
}
|
|
592
|
-
};
|
|
593
|
-
customElements.get("px-page") === void 0 && customElements.define("px-page", S);
|
|
594
|
-
//#endregion
|
|
595
|
-
//#region src/Status.ts
|
|
596
|
-
var C = new CSSStyleSheet();
|
|
597
|
-
C.replaceSync(c);
|
|
598
|
-
var w = [
|
|
599
|
-
"",
|
|
600
|
-
"info",
|
|
601
|
-
"success",
|
|
602
|
-
"warning",
|
|
603
|
-
"error",
|
|
604
|
-
"ongoing",
|
|
605
|
-
"unlimited"
|
|
606
|
-
], T = class extends t {
|
|
607
|
-
static {
|
|
608
|
-
this.nativeName = "div";
|
|
609
|
-
}
|
|
610
|
-
constructor() {
|
|
611
|
-
super(C), this.template = () => "\n<div class=\"status\">\n <px-hstack gap=\"2xs\" align-items=\"flex-start\">\n <px-icon name=\"information_fill\" from=\"lavender\" size=\"s\" color=\"brand\"></px-icon>\n <slot name=\"label\"></slot>\n </px-hstack>\n</div>", this.shadowRoot.innerHTML = this.template();
|
|
612
|
-
}
|
|
613
|
-
static get observedAttributes() {
|
|
614
|
-
return [
|
|
615
|
-
"state",
|
|
616
|
-
"icon-only",
|
|
617
|
-
"icon-only--mobile",
|
|
618
|
-
"icon-only--tablet",
|
|
619
|
-
"icon-only--laptop",
|
|
620
|
-
"disabled",
|
|
621
|
-
"inverted",
|
|
622
|
-
"icon-aria-label"
|
|
623
|
-
];
|
|
624
|
-
}
|
|
625
|
-
attributeChangedCallback(e, t, n) {
|
|
626
|
-
if (t !== n) switch (e) {
|
|
627
|
-
case "state":
|
|
628
|
-
this.updateState(n), this.$el.classList.toggle(`${n}`);
|
|
629
|
-
break;
|
|
630
|
-
case "icon-aria-label":
|
|
631
|
-
this.$statusIcon.setAttribute("aria-label", n);
|
|
632
|
-
break;
|
|
633
|
-
case "icon-only":
|
|
634
|
-
this.updateIconOnly(null);
|
|
635
|
-
break;
|
|
636
|
-
case "icon-only--mobile":
|
|
637
|
-
this.updateIconOnly("mobile");
|
|
638
|
-
break;
|
|
639
|
-
case "icon-only--tablet":
|
|
640
|
-
this.updateIconOnly("tablet");
|
|
641
|
-
break;
|
|
642
|
-
case "icon-only--laptop":
|
|
643
|
-
this.updateIconOnly("laptop");
|
|
644
|
-
break;
|
|
645
|
-
case "disabled":
|
|
646
|
-
this.$el.toggleAttribute("disabled", n !== null), this.$statusIcon.color = "state-disabled";
|
|
647
|
-
break;
|
|
648
|
-
case "inverted":
|
|
649
|
-
for (let e = 0; e < this.$children.length; e++) this.$children[e].hasAttribute("inverted") || this.$children[e].toggleAttribute("inverted");
|
|
650
|
-
this.$el.toggleAttribute("inverted", n !== null), this.$statusIcon.toggleAttribute("inverted", n !== null);
|
|
651
|
-
break;
|
|
652
|
-
default: super.attributeChangedCallback(e, t, n);
|
|
653
|
-
}
|
|
654
|
-
}
|
|
655
|
-
updateState(e) {
|
|
656
|
-
if (!this.checkName(w, e)) {
|
|
657
|
-
o(`"${e}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${w.join("\", \"")}".`);
|
|
658
|
-
return;
|
|
659
|
-
}
|
|
660
|
-
let t = {
|
|
661
|
-
info: {
|
|
662
|
-
name: "information_fill",
|
|
663
|
-
color: "brand"
|
|
664
|
-
},
|
|
665
|
-
success: {
|
|
666
|
-
name: "checkmark_fill",
|
|
667
|
-
color: "purpose-success"
|
|
668
|
-
},
|
|
669
|
-
warning: {
|
|
670
|
-
name: "exclamation_mark_fill",
|
|
671
|
-
color: "purpose-warning"
|
|
672
|
-
},
|
|
673
|
-
error: {
|
|
674
|
-
name: "minus_fill",
|
|
675
|
-
color: "purpose-error"
|
|
676
|
-
},
|
|
677
|
-
ongoing: {
|
|
678
|
-
name: "clock_fill",
|
|
679
|
-
color: "purpose-warning"
|
|
680
|
-
},
|
|
681
|
-
unlimited: {
|
|
682
|
-
name: "infinity_fill",
|
|
683
|
-
color: "purpose-unlimited"
|
|
684
|
-
}
|
|
685
|
-
}, { name: n, color: r } = t[e] || t.info;
|
|
686
|
-
this.$statusIcon.name = n, this.$statusIcon.color = r;
|
|
687
|
-
}
|
|
688
|
-
updateIconOnly(e) {
|
|
689
|
-
let t = e ? `--${e}` : "";
|
|
690
|
-
this.$label.setAttribute(`shown--sr${t}`, ""), (e === "laptop" || e === null) && this.$statusIcon.setAttribute("title", this.$label.textContent?.trim() || "");
|
|
691
|
-
}
|
|
692
|
-
get $label() {
|
|
693
|
-
return this.querySelector("[slot=\"label\"]");
|
|
694
|
-
}
|
|
695
|
-
get $statusIcon() {
|
|
696
|
-
return this.shadowRoot.querySelector("px-icon");
|
|
697
|
-
}
|
|
698
|
-
get $children() {
|
|
699
|
-
return this.querySelectorAll("px-status > *");
|
|
700
|
-
}
|
|
701
|
-
get state() {
|
|
702
|
-
return this.getAttribute("state");
|
|
703
|
-
}
|
|
704
|
-
set state(e) {
|
|
705
|
-
this._updateAttribute("state", e);
|
|
706
|
-
}
|
|
707
|
-
get iconAriaLabel() {
|
|
708
|
-
return this.getAttribute("icon-aria-label");
|
|
709
|
-
}
|
|
710
|
-
set iconAriaLabel(e) {
|
|
711
|
-
this._updateAttribute("icon-aria-label", e);
|
|
712
|
-
}
|
|
713
|
-
get iconOnly() {
|
|
714
|
-
return this.hasAttribute("icon-only");
|
|
715
|
-
}
|
|
716
|
-
set iconOnly(e) {
|
|
717
|
-
this._updateBooleanAttribute("icon-only", e);
|
|
718
|
-
}
|
|
719
|
-
get iconOnlyMobile() {
|
|
720
|
-
return this.hasAttribute("icon-only--mobile");
|
|
721
|
-
}
|
|
722
|
-
set iconOnlyMobile(e) {
|
|
723
|
-
this._updateBooleanAttribute("icon-only--mobile", e);
|
|
724
|
-
}
|
|
725
|
-
get iconOnlyTablet() {
|
|
726
|
-
return this.hasAttribute("icon-only--tablet");
|
|
727
|
-
}
|
|
728
|
-
set iconOnlyTablet(e) {
|
|
729
|
-
this._updateBooleanAttribute("icon-only--tablet", e);
|
|
730
|
-
}
|
|
731
|
-
get iconOnlyLaptop() {
|
|
732
|
-
return this.hasAttribute("icon-only--laptop");
|
|
733
|
-
}
|
|
734
|
-
set iconOnlyLaptop(e) {
|
|
735
|
-
this._updateBooleanAttribute("icon-only--laptop", e);
|
|
736
|
-
}
|
|
737
|
-
get disabled() {
|
|
738
|
-
return this.hasAttribute("disabled");
|
|
739
|
-
}
|
|
740
|
-
set disabled(e) {
|
|
741
|
-
this._updateBooleanAttribute("disabled", e);
|
|
742
|
-
}
|
|
743
|
-
get inverted() {
|
|
744
|
-
return this.hasAttribute("inverted");
|
|
745
|
-
}
|
|
746
|
-
set inverted(e) {
|
|
747
|
-
this._updateBooleanAttribute("inverted", e);
|
|
748
|
-
}
|
|
749
|
-
};
|
|
750
|
-
customElements.get("px-status") || customElements.define("px-status", T);
|
|
751
|
-
//#endregion
|
|
752
|
-
export { T as Status, w as statusStateValues };
|