@proximus/lavender-status 1.4.3-alpha.1 → 1.4.3-alpha.2
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.es.js +17 -17
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { PxElement as n, log as a } from "@proximus/lavender-common";
|
|
2
|
-
const c =
|
|
3
|
-
|
|
2
|
+
const c = ':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 only screen and (min-width: 768px){.status ::slotted([slot="label"]){font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1025px){.status ::slotted([slot="label"]){font-size:var(--px-text-size-label-m-desktop)}}', r = new CSSStyleSheet();
|
|
3
|
+
r.replaceSync(c);
|
|
4
4
|
const u = [
|
|
5
5
|
"",
|
|
6
6
|
"info",
|
|
@@ -9,12 +9,12 @@ const u = [
|
|
|
9
9
|
"error",
|
|
10
10
|
"ongoing",
|
|
11
11
|
"unlimited"
|
|
12
|
-
],
|
|
12
|
+
], l = class l extends n {
|
|
13
13
|
constructor() {
|
|
14
|
-
super(
|
|
14
|
+
super(r), this.template = () => `
|
|
15
15
|
<div class="status">
|
|
16
16
|
<px-hstack gap="2xs" align-items="flex-start">
|
|
17
|
-
<px-icon name="information_fill" from="lavender" size="
|
|
17
|
+
<px-icon name="information_fill" from="lavender" size="s" color="brand"></px-icon>
|
|
18
18
|
<slot name="label"></slot>
|
|
19
19
|
</px-hstack>
|
|
20
20
|
</div>`, this.shadowRoot.innerHTML = this.template();
|
|
@@ -31,8 +31,8 @@ const u = [
|
|
|
31
31
|
"icon-aria-label"
|
|
32
32
|
];
|
|
33
33
|
}
|
|
34
|
-
attributeChangedCallback(t,
|
|
35
|
-
if (
|
|
34
|
+
attributeChangedCallback(t, s, e) {
|
|
35
|
+
if (s !== e)
|
|
36
36
|
switch (t) {
|
|
37
37
|
case "state":
|
|
38
38
|
this.updateState(e), this.$el.classList.toggle(`${e}`);
|
|
@@ -56,12 +56,12 @@ const u = [
|
|
|
56
56
|
this.$el.toggleAttribute("disabled", e !== null), this.$statusIcon.color = "state-disabled";
|
|
57
57
|
break;
|
|
58
58
|
case "inverted":
|
|
59
|
-
for (let
|
|
60
|
-
this.$children[
|
|
59
|
+
for (let i = 0; i < this.$children.length; i++)
|
|
60
|
+
this.$children[i].hasAttribute("inverted") || this.$children[i].toggleAttribute("inverted");
|
|
61
61
|
this.$el.toggleAttribute("inverted", e !== null), this.$statusIcon.toggleAttribute("inverted", e !== null);
|
|
62
62
|
break;
|
|
63
63
|
default:
|
|
64
|
-
super.attributeChangedCallback(t,
|
|
64
|
+
super.attributeChangedCallback(t, s, e);
|
|
65
65
|
break;
|
|
66
66
|
}
|
|
67
67
|
}
|
|
@@ -72,20 +72,20 @@ const u = [
|
|
|
72
72
|
);
|
|
73
73
|
return;
|
|
74
74
|
}
|
|
75
|
-
const
|
|
75
|
+
const s = {
|
|
76
76
|
info: { name: "information_fill", color: "brand" },
|
|
77
77
|
success: { name: "checkmark_fill", color: "purpose-success" },
|
|
78
78
|
warning: { name: "exclamation_mark_fill", color: "purpose-warning" },
|
|
79
79
|
error: { name: "minus_fill", color: "purpose-error" },
|
|
80
80
|
ongoing: { name: "clock_fill", color: "purpose-warning" },
|
|
81
81
|
unlimited: { name: "infinity_fill", color: "purpose-unlimited" }
|
|
82
|
-
}, { name: e, color:
|
|
83
|
-
this.$statusIcon.name = e, this.$statusIcon.color =
|
|
82
|
+
}, { name: e, color: i } = s[t] || s.info;
|
|
83
|
+
this.$statusIcon.name = e, this.$statusIcon.color = i;
|
|
84
84
|
}
|
|
85
85
|
updateIconOnly(t) {
|
|
86
86
|
var e;
|
|
87
|
-
const
|
|
88
|
-
this.$label.setAttribute(`shown--sr${
|
|
87
|
+
const s = t ? `--${t}` : "";
|
|
88
|
+
this.$label.setAttribute(`shown--sr${s}`, ""), (t === "laptop" || t === null) && this.$statusIcon.setAttribute(
|
|
89
89
|
"title",
|
|
90
90
|
((e = this.$label.textContent) == null ? void 0 : e.trim()) || ""
|
|
91
91
|
);
|
|
@@ -148,8 +148,8 @@ const u = [
|
|
|
148
148
|
t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
149
149
|
}
|
|
150
150
|
};
|
|
151
|
-
|
|
152
|
-
let o =
|
|
151
|
+
l.nativeName = "div";
|
|
152
|
+
let o = l;
|
|
153
153
|
customElements.get("px-status") || customElements.define("px-status", o);
|
|
154
154
|
export {
|
|
155
155
|
o as Status,
|