@proximus/lavender-status-card 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/StatusCard.d.ts +5 -5
- package/dist/index.es.js +153 -135
- package/package.json +1 -1
package/dist/StatusCard.d.ts
CHANGED
|
@@ -18,12 +18,12 @@ export declare class StatusCard extends PxElement<HTMLDivElement> {
|
|
|
18
18
|
get $statusIcon(): Icon;
|
|
19
19
|
get $container(): Container;
|
|
20
20
|
get $children(): NodeListOf<Element>;
|
|
21
|
-
get state(): string
|
|
22
|
-
set state(value: string
|
|
21
|
+
get state(): string;
|
|
22
|
+
set state(value: string);
|
|
23
23
|
get inverted(): boolean;
|
|
24
24
|
set inverted(value: boolean);
|
|
25
|
-
get statusIconAriaLabel(): string
|
|
26
|
-
set statusIconAriaLabel(value: string
|
|
25
|
+
get statusIconAriaLabel(): string;
|
|
26
|
+
set statusIconAriaLabel(value: string);
|
|
27
27
|
get backgroundColor(): string | null;
|
|
28
|
-
set backgroundColor(value: string
|
|
28
|
+
set backgroundColor(value: string);
|
|
29
29
|
}
|
package/dist/index.es.js
CHANGED
|
@@ -1,137 +1,155 @@
|
|
|
1
|
-
import { PxElement as
|
|
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
|
-
|
|
1
|
+
import { PxElement as c, log as i } from "@proximus/lavender-common";
|
|
2
|
+
const d = ':host,:host>*{display:block;box-sizing:border-box}px-container{height:100%}.status-card{position:relative}.status-card:before{content:"";position:absolute;display:block;border-left:5px solid var(--px-color-border-brand-default);height:100%;left:0;top:0;border-radius:var(--px-radius-main) 0 0 var(--px-radius-main)}.status-card.success:before{border-color:var(--px-color-border-purpose-success-default)}.status-card.warning:before,.status-card.ongoing:before{border-color:var(--px-color-border-purpose-warning-default)}.status-card.error:before{border-color:var(--px-color-border-purpose-error-default)}::slotted([slot="title"]){display:block;font-size:var(--px-text-size-heading-s-mobile);font-weight:var(--px-font-weight-title);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default)}:host([inverted]) .status-card:before{border-color:var(--px-color-border-brand-inverted)}:host([inverted]) .status-card.success:before{border-color:var(--px-color-border-purpose-success-inverted)}:host([inverted]) .status-card.warning:before,:host([inverted]) .status-card.ongoing:before{border-color:var(--px-color-border-purpose-warning-inverted)}:host([inverted]) .status-card.error:before{border-color:var(--px-color-border-purpose-error-inverted)}:host([inverted]) ::slotted([slot="title"]){color:var(--px-color-text-neutral-inverted)}@media screen and (min-width: 48rem){::slotted([slot="title"]){font-size:var(--px-text-size-heading-s-tablet)}}@media screen and (min-width: 64.0625rem){::slotted([slot="title"]){font-size:var(--px-text-size-heading-s-laptop)}}', l = new CSSStyleSheet();
|
|
3
|
+
l.replaceSync(d);
|
|
4
|
+
const n = [
|
|
5
|
+
"",
|
|
6
|
+
"info",
|
|
7
|
+
"success",
|
|
8
|
+
"warning",
|
|
9
|
+
"error",
|
|
10
|
+
"ongoing"
|
|
11
|
+
], u = [
|
|
12
|
+
"",
|
|
13
|
+
"container-light",
|
|
14
|
+
"container-default"
|
|
15
|
+
], b = "px.lavender.modal.close", a = class a extends c {
|
|
16
|
+
constructor() {
|
|
17
|
+
super(l), this.template = () => `<div class="status-card">
|
|
18
|
+
<px-container padding="s" background-color="container-default">
|
|
19
|
+
<px-hstack gap="s" align-items="flex-start">
|
|
20
|
+
<px-icon name="information_fill" from="lavender" size="l" color="brand"></px-icon>
|
|
21
|
+
<px-vstack gap="s" grow="1">
|
|
22
|
+
<px-vstack gap="xs">
|
|
23
|
+
<slot name="title"></slot>
|
|
24
|
+
<slot></slot>
|
|
25
|
+
</px-vstack>
|
|
26
|
+
<slot name="action"></slot>
|
|
27
|
+
</px-vstack>
|
|
28
|
+
<slot name="close-button"></slot>
|
|
29
|
+
</px-hstack>
|
|
30
|
+
</px-container>
|
|
31
|
+
</div>`, this.shadowRoot.innerHTML = this.template();
|
|
32
|
+
}
|
|
33
|
+
static get observedAttributes() {
|
|
34
|
+
return [
|
|
35
|
+
...super.observedAttributes,
|
|
36
|
+
"state",
|
|
37
|
+
"inverted",
|
|
38
|
+
"status-icon-aria-label",
|
|
39
|
+
"background-color"
|
|
40
|
+
];
|
|
41
|
+
}
|
|
42
|
+
connectedCallback() {
|
|
43
|
+
this.$closeButtonSlot.addEventListener("click", () => {
|
|
44
|
+
this.close();
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
attributeChangedCallback(t, r, e) {
|
|
48
|
+
if (r !== e)
|
|
49
|
+
switch (t) {
|
|
50
|
+
case "state":
|
|
51
|
+
this.updateState(e), this.$el.classList.toggle(`${e}`);
|
|
52
|
+
break;
|
|
53
|
+
case "inverted":
|
|
54
|
+
for (let o = 0; o < this.$children.length; o++)
|
|
55
|
+
this.$children[o].hasAttribute("inverted") || this.$children[o].toggleAttribute("inverted");
|
|
56
|
+
this.$el.toggleAttribute("inverted", e !== null), this.$container.toggleAttribute("inverted", e !== null), this.$statusIcon.toggleAttribute("inverted", e !== null);
|
|
57
|
+
break;
|
|
58
|
+
case "status-icon-aria-label":
|
|
59
|
+
this.statusIconAriaLabel ? this.$statusIcon.setAttribute(
|
|
60
|
+
"aria-label",
|
|
61
|
+
this.statusIconAriaLabel
|
|
62
|
+
) : this.$statusIcon.removeAttribute("aria-label");
|
|
63
|
+
break;
|
|
64
|
+
case "background-color":
|
|
65
|
+
this.backgroundColor && this.updateBackgroundColor(
|
|
66
|
+
e,
|
|
67
|
+
u
|
|
68
|
+
);
|
|
69
|
+
break;
|
|
70
|
+
default:
|
|
71
|
+
super.attributeChangedCallback(t, r, e);
|
|
72
|
+
break;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
updateBackgroundColor(t, r) {
|
|
76
|
+
if (!this.checkName(r, t)) {
|
|
77
|
+
i(
|
|
78
|
+
`"${t}" is not a valid background-color value for ${this.tagName.toLowerCase()}.
|
|
79
|
+
Allowed values are: "${r.join('", "')}".`
|
|
80
|
+
);
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
83
|
+
t === null || t === "" ? this.$container.setAttribute("background-color", "container-default") : this.$container.setAttribute("background-color", t);
|
|
84
|
+
}
|
|
85
|
+
updateState(t) {
|
|
86
|
+
if (!this.checkName(n, t)) {
|
|
87
|
+
i(
|
|
88
|
+
`"${t}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join('", "')}".`
|
|
89
|
+
);
|
|
90
|
+
return;
|
|
91
|
+
}
|
|
92
|
+
const r = {
|
|
93
|
+
info: { name: "information_fill", color: "brand" },
|
|
94
|
+
success: { name: "checkmark_fill", color: "purpose-success" },
|
|
95
|
+
warning: { name: "exclamation_mark_fill", color: "purpose-warning" },
|
|
96
|
+
error: { name: "minus_fill", color: "purpose-error" },
|
|
97
|
+
ongoing: { name: "clock_fill", color: "purpose-warning" }
|
|
98
|
+
}, { name: e, color: o } = r[t] || r.info;
|
|
99
|
+
this.$statusIcon.name = e, this.$statusIcon.color = o;
|
|
100
|
+
}
|
|
101
|
+
close() {
|
|
102
|
+
this.remove(), this.dispatchEvent(
|
|
103
|
+
new CustomEvent(b, {
|
|
104
|
+
bubbles: !0,
|
|
105
|
+
composed: !0
|
|
106
|
+
})
|
|
107
|
+
);
|
|
108
|
+
}
|
|
109
|
+
get $closeButtonSlot() {
|
|
110
|
+
return this.shadowRoot.querySelector(
|
|
111
|
+
'slot[name="close-button"]'
|
|
112
|
+
);
|
|
113
|
+
}
|
|
114
|
+
get $statusIcon() {
|
|
115
|
+
return this.shadowRoot.querySelector("px-icon");
|
|
116
|
+
}
|
|
117
|
+
get $container() {
|
|
118
|
+
return this.shadowRoot.querySelector("px-container");
|
|
119
|
+
}
|
|
120
|
+
get $children() {
|
|
121
|
+
return this.querySelectorAll("px-status-card > *");
|
|
122
|
+
}
|
|
123
|
+
get state() {
|
|
124
|
+
return this.getAttribute("state");
|
|
125
|
+
}
|
|
126
|
+
set state(t) {
|
|
127
|
+
this.setAttribute("state", t);
|
|
128
|
+
}
|
|
129
|
+
get inverted() {
|
|
130
|
+
return this.hasAttribute("inverted");
|
|
131
|
+
}
|
|
132
|
+
set inverted(t) {
|
|
133
|
+
t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
134
|
+
}
|
|
135
|
+
get statusIconAriaLabel() {
|
|
136
|
+
return this.getAttribute("status-icon-aria-label");
|
|
137
|
+
}
|
|
138
|
+
set statusIconAriaLabel(t) {
|
|
139
|
+
t ? this.setAttribute("status-icon-aria-label", t) : this.removeAttribute("status-icon-aria-label");
|
|
140
|
+
}
|
|
141
|
+
get backgroundColor() {
|
|
142
|
+
return this.getAttribute("background-color");
|
|
143
|
+
}
|
|
144
|
+
set backgroundColor(t) {
|
|
145
|
+
t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
|
|
146
|
+
}
|
|
134
147
|
};
|
|
148
|
+
a.nativeName = "div";
|
|
149
|
+
let s = a;
|
|
135
150
|
customElements.get("px-status-card") || customElements.define("px-status-card", s);
|
|
136
|
-
|
|
137
|
-
|
|
151
|
+
export {
|
|
152
|
+
s as StatusCard,
|
|
153
|
+
u as statusCardBackgroundColorValues,
|
|
154
|
+
n as statusCardStateValues
|
|
155
|
+
};
|