@proximus/lavender-status-card 2.0.0-alpha.18 → 2.0.0-alpha.181

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.
Files changed (3) hide show
  1. package/dist/StatusCard.d.ts +8 -4
  2. package/dist/index.es.js +136 -121
  3. package/package.json +2 -2
package/dist/StatusCard.d.ts CHANGED
@@ -3,6 +3,7 @@ import { Container } from '@proximus/lavender-container';
3
3
  import { Icon } from '@proximus/lavender-icon';
4
4
  import { PxElement } from '@proximus/lavender-common';
5
5
  export declare const statusCardStateValues: string[];
6
+ export declare const statusCardBackgroundColorValues: string[];
6
7
  export declare class StatusCard extends PxElement<HTMLDivElement> {
7
8
  static nativeName: string;
8
9
  private template;
@@ -10,16 +11,19 @@ export declare class StatusCard extends PxElement<HTMLDivElement> {
10
11
  static get observedAttributes(): string[];
11
12
  connectedCallback(): void;
12
13
  attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
14
+ updateBackgroundColor(newValue: string, allowedValues: string[]): void;
13
15
  updateState(state: string): void;
14
16
  close(): void;
15
17
  get $closeButtonSlot(): ButtonIcon;
16
18
  get $statusIcon(): Icon;
17
19
  get $container(): Container;
18
20
  get $children(): NodeListOf<Element>;
19
- get state(): string;
20
- set state(value: string);
21
+ get state(): string | null;
22
+ set state(value: string | null);
21
23
  get inverted(): boolean;
22
24
  set inverted(value: boolean);
23
- get statusIconAriaLabel(): string;
24
- set statusIconAriaLabel(value: string);
25
+ get statusIconAriaLabel(): string | null;
26
+ set statusIconAriaLabel(value: string | null);
27
+ get backgroundColor(): string | null;
28
+ set backgroundColor(value: string | null);
25
29
  }
package/dist/index.es.js CHANGED
@@ -1,122 +1,137 @@
1
- import { PxElement as n, log as l } from "@proximus/lavender-common";
2
- const c = ':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 only screen and (min-width: 768px){::slotted([slot="title"]){font-size:var(--px-text-size-heading-s-desktop)}}@media only screen and (min-width: 1025px){::slotted([slot="title"]){font-size:var(--px-text-size-heading-s-desktop)}}', i = new CSSStyleSheet();
3
- i.replaceSync(c);
4
- const d = [
5
- "",
6
- "info",
7
- "success",
8
- "warning",
9
- "error",
10
- "ongoing"
11
- ], u = "px.lavender.modal.close", a = class a extends n {
12
- constructor() {
13
- super(i), this.template = () => `<div class="status-card">
14
- <px-container background-color="container-default" padding="s">
15
- <px-hstack gap="s" align-items="flex-start">
16
- <px-icon name="information_fill" from="lavender" size="l" color="brand"></px-icon>
17
- <px-vstack gap="s" grow="1">
18
- <px-vstack gap="xs">
19
- <slot name="title"></slot>
20
- <slot></slot>
21
- </px-vstack>
22
- <slot name="action"></slot>
23
- </px-vstack>
24
- <slot name="close-button"></slot>
25
- </px-hstack>
26
- </px-container>
27
- </div>`, this.shadowRoot.innerHTML = this.template();
28
- }
29
- static get observedAttributes() {
30
- return ["state", "inverted", "status-icon-aria-label"];
31
- }
32
- connectedCallback() {
33
- this.$closeButtonSlot.addEventListener("click", () => {
34
- this.close();
35
- });
36
- }
37
- attributeChangedCallback(t, s, e) {
38
- if (s !== e)
39
- switch (t) {
40
- case "state":
41
- this.updateState(e), this.$el.classList.toggle(`${e}`);
42
- break;
43
- case "inverted":
44
- for (let r = 0; r < this.$children.length; r++)
45
- this.$children[r].hasAttribute("inverted") || this.$children[r].toggleAttribute("inverted");
46
- this.$el.toggleAttribute("inverted", e !== null), this.$container.toggleAttribute("inverted", e !== null), this.$statusIcon.toggleAttribute("inverted", e !== null);
47
- break;
48
- case "status-icon-aria-label":
49
- this.statusIconAriaLabel ? this.$statusIcon.setAttribute(
50
- "aria-label",
51
- this.statusIconAriaLabel
52
- ) : this.$statusIcon.removeAttribute("aria-label");
53
- break;
54
- default:
55
- super.attributeChangedCallback(t, s, e);
56
- break;
57
- }
58
- }
59
- updateState(t) {
60
- if (!this.checkName(d, t)) {
61
- l(
62
- `${t} is not an allowed state value for ${this.tagName.toLowerCase()}`
63
- );
64
- return;
65
- }
66
- const s = {
67
- info: { name: "information_fill", color: "brand" },
68
- success: { name: "checkmark_fill", color: "purpose-success" },
69
- warning: { name: "exclamation_mark_fill", color: "purpose-warning" },
70
- error: { name: "minus_fill", color: "purpose-error" },
71
- ongoing: { name: "clock_fill", color: "purpose-warning" }
72
- }, { name: e, color: r } = s[t] || s.info;
73
- this.$statusIcon.name = e, this.$statusIcon.color = r;
74
- }
75
- close() {
76
- this.remove(), this.dispatchEvent(
77
- new CustomEvent(u, {
78
- bubbles: !0,
79
- composed: !0
80
- })
81
- );
82
- }
83
- get $closeButtonSlot() {
84
- return this.shadowRoot.querySelector(
85
- 'slot[name="close-button"]'
86
- );
87
- }
88
- get $statusIcon() {
89
- return this.shadowRoot.querySelector("px-icon");
90
- }
91
- get $container() {
92
- return this.shadowRoot.querySelector("px-container");
93
- }
94
- get $children() {
95
- return this.querySelectorAll("px-status-card > *");
96
- }
97
- get state() {
98
- return this.getAttribute("state");
99
- }
100
- set state(t) {
101
- this.setAttribute("state", t);
102
- }
103
- get inverted() {
104
- return this.hasAttribute("inverted");
105
- }
106
- set inverted(t) {
107
- t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
108
- }
109
- get statusIconAriaLabel() {
110
- return this.getAttribute("status-icon-aria-label");
111
- }
112
- set statusIconAriaLabel(t) {
113
- t ? this.setAttribute("status-icon-aria-label", t) : this.removeAttribute("status-icon-aria-label");
114
- }
115
- };
116
- a.nativeName = "div";
117
- let o = a;
118
- customElements.get("px-status-card") || customElements.define("px-status-card", o);
119
- export {
120
- o as StatusCard,
121
- d as statusCardStateValues
1
+ import { PxElement as e, log as t } from "@proximus/lavender-common";
2
+ //#region src/statuscard.css?inline
3
+ var n = ":host,:host>*{box-sizing:border-box;display:block}px-container{height:100%}.status-card{position:relative}.status-card:before{content:\"\";border-left:5px solid var(--px-color-border-brand-default);border-radius:var(--px-radius-main) 0 0 var(--px-radius-main);height:100%;display:block;position:absolute;top:0;left:0}.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]){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);display:block}: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 (width<=47.938rem){.status-card-content{margin-top:3px}}@media screen and (width>=48rem){::slotted([slot=title]){font-size:var(--px-text-size-heading-s-desktop)}}@media screen and (width>=64.0625rem){::slotted([slot=title]){font-size:var(--px-text-size-heading-s-desktop)}}", r = new CSSStyleSheet();
4
+ r.replaceSync(n);
5
+ var i = [
6
+ "",
7
+ "info",
8
+ "success",
9
+ "warning",
10
+ "error",
11
+ "ongoing"
12
+ ], a = [
13
+ "",
14
+ "container-light",
15
+ "container-default"
16
+ ], o = "px.lavender.modal.close", s = class extends e {
17
+ static {
18
+ this.nativeName = "div";
19
+ }
20
+ constructor() {
21
+ super(r), this.template = () => "<div class=\"status-card\">\n <px-container padding=\"s\" background-color=\"container-default\">\n <px-hstack gap=\"s\" align-items=\"flex-start\">\n <px-icon name=\"information_fill\" from=\"lavender\" size=\"m\" color=\"brand\"></px-icon>\n <px-vstack gap=\"s\" grow=\"1\" class=\"status-card-content\">\n <px-vstack gap=\"xs\">\n <slot name=\"title\"></slot>\n <slot></slot>\n </px-vstack>\n <slot name=\"action\"></slot>\n </px-vstack>\n <slot name=\"close-button\"></slot>\n </px-hstack>\n </px-container>\n</div>", this.shadowRoot.innerHTML = this.template();
22
+ }
23
+ static get observedAttributes() {
24
+ return [
25
+ ...super.observedAttributes,
26
+ "state",
27
+ "inverted",
28
+ "status-icon-aria-label",
29
+ "background-color"
30
+ ];
31
+ }
32
+ connectedCallback() {
33
+ this.$closeButtonSlot.addEventListener("click", () => {
34
+ this.close();
35
+ });
36
+ }
37
+ attributeChangedCallback(e, t, n) {
38
+ if (t !== n) switch (e) {
39
+ case "state":
40
+ this.updateState(n), this.$el.classList.toggle(`${n}`);
41
+ break;
42
+ case "inverted":
43
+ for (let e = 0; e < this.$children.length; e++) this.$children[e].hasAttribute("inverted") || this.$children[e].toggleAttribute("inverted");
44
+ this.$el.toggleAttribute("inverted", n !== null), this.$container.toggleAttribute("inverted", n !== null), this.$statusIcon.toggleAttribute("inverted", n !== null);
45
+ break;
46
+ case "status-icon-aria-label":
47
+ this.statusIconAriaLabel ? this.$statusIcon.setAttribute("aria-label", this.statusIconAriaLabel) : this.$statusIcon.removeAttribute("aria-label");
48
+ break;
49
+ case "background-color":
50
+ this.backgroundColor && this.updateBackgroundColor(n, a);
51
+ break;
52
+ default: super.attributeChangedCallback(e, t, n);
53
+ }
54
+ }
55
+ updateBackgroundColor(e, n) {
56
+ if (!this.checkName(n, e)) {
57
+ t(`"${e}" is not a valid background-color value for ${this.tagName.toLowerCase()}.
58
+ Allowed values are: "${n.join("\", \"")}".`);
59
+ return;
60
+ }
61
+ e === null || e === "" ? this.$container.setAttribute("background-color", "container-default") : this.$container.setAttribute("background-color", e);
62
+ }
63
+ updateState(e) {
64
+ if (!this.checkName(i, e)) {
65
+ t(`"${e}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
66
+ return;
67
+ }
68
+ let n = {
69
+ info: {
70
+ name: "information_fill",
71
+ color: "brand"
72
+ },
73
+ success: {
74
+ name: "checkmark_fill",
75
+ color: "purpose-success"
76
+ },
77
+ warning: {
78
+ name: "exclamation_mark_fill",
79
+ color: "purpose-warning"
80
+ },
81
+ error: {
82
+ name: "minus_fill",
83
+ color: "purpose-error"
84
+ },
85
+ ongoing: {
86
+ name: "clock_fill",
87
+ color: "purpose-warning"
88
+ }
89
+ }, { name: r, color: a } = n[e] || n.info;
90
+ this.$statusIcon.name = r, this.$statusIcon.color = a;
91
+ }
92
+ close() {
93
+ this.remove(), this.dispatchEvent(new CustomEvent(o, {
94
+ bubbles: !0,
95
+ composed: !0
96
+ }));
97
+ }
98
+ get $closeButtonSlot() {
99
+ return this.shadowRoot.querySelector("slot[name=\"close-button\"]");
100
+ }
101
+ get $statusIcon() {
102
+ return this.shadowRoot.querySelector("px-icon");
103
+ }
104
+ get $container() {
105
+ return this.shadowRoot.querySelector("px-container");
106
+ }
107
+ get $children() {
108
+ return this.querySelectorAll("px-status-card > *");
109
+ }
110
+ get state() {
111
+ return this.getAttribute("state");
112
+ }
113
+ set state(e) {
114
+ this._updateAttribute("state", e);
115
+ }
116
+ get inverted() {
117
+ return this.hasAttribute("inverted");
118
+ }
119
+ set inverted(e) {
120
+ this._updateBooleanAttribute("inverted", e);
121
+ }
122
+ get statusIconAriaLabel() {
123
+ return this.getAttribute("status-icon-aria-label");
124
+ }
125
+ set statusIconAriaLabel(e) {
126
+ this._updateAttribute("status-icon-aria-label", e);
127
+ }
128
+ get backgroundColor() {
129
+ return this.getAttribute("background-color");
130
+ }
131
+ set backgroundColor(e) {
132
+ this._updateAttribute("background-color", e);
133
+ }
122
134
  };
135
+ customElements.get("px-status-card") || customElements.define("px-status-card", s);
136
+ //#endregion
137
+ export { s as StatusCard, a as statusCardBackgroundColorValues, i as statusCardStateValues };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-status-card",
3
- "version": "2.0.0-alpha.18",
3
+ "version": "2.0.0-alpha.181",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",
@@ -13,7 +13,7 @@
13
13
  "clean": "rm -rf dist",
14
14
  "build": "npm run clean && NODE_ENV=development vite build && tsc && npm run transform-package-json && npm run wc-manifest",
15
15
  "test": "vitest run --coverage",
16
- "wc-manifest": "cem analyze --globs \"src/*\" --config ../custom-elements-manifest.config.js --outdir dist"
16
+ "wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js --outdir dist"
17
17
  },
18
18
  "publishConfig": {
19
19
  "access": "public"