@proximus/lavender-status-card 2.0.0-alpha.16 → 2.0.0-alpha.161

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 +4 -0
  2. package/dist/index.es.js +57 -24
  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,6 +11,7 @@ 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;
@@ -22,4 +24,6 @@ export declare class StatusCard extends PxElement<HTMLDivElement> {
22
24
  set inverted(value: boolean);
23
25
  get statusIconAriaLabel(): string;
24
26
  set statusIconAriaLabel(value: string);
27
+ get backgroundColor(): string | null;
28
+ set backgroundColor(value: string);
25
29
  }
package/dist/index.es.js CHANGED
@@ -1,17 +1,21 @@
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 = [
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-desktop)}}@media screen and (min-width: 64.0625rem){::slotted([slot="title"]){font-size:var(--px-text-size-heading-s-desktop)}}', l = new CSSStyleSheet();
3
+ l.replaceSync(d);
4
+ const n = [
5
5
  "",
6
6
  "info",
7
7
  "success",
8
8
  "warning",
9
9
  "error",
10
10
  "ongoing"
11
- ], u = "px.lavender.modal.close", a = class a extends n {
11
+ ], u = [
12
+ "",
13
+ "container-light",
14
+ "container-default"
15
+ ], b = "px.lavender.modal.close", a = class a extends c {
12
16
  constructor() {
13
- super(i), this.template = () => `<div class="status-card">
14
- <px-container background-color="container-default" padding="s">
17
+ super(l), this.template = () => `<div class="status-card">
18
+ <px-container padding="s" background-color="container-default">
15
19
  <px-hstack gap="s" align-items="flex-start">
16
20
  <px-icon name="information_fill" from="lavender" size="l" color="brand"></px-icon>
17
21
  <px-vstack gap="s" grow="1">
@@ -27,22 +31,28 @@ const d = [
27
31
  </div>`, this.shadowRoot.innerHTML = this.template();
28
32
  }
29
33
  static get observedAttributes() {
30
- return ["state", "inverted", "status-icon-aria-label"];
34
+ return [
35
+ ...super.observedAttributes,
36
+ "state",
37
+ "inverted",
38
+ "status-icon-aria-label",
39
+ "background-color"
40
+ ];
31
41
  }
32
42
  connectedCallback() {
33
43
  this.$closeButtonSlot.addEventListener("click", () => {
34
44
  this.close();
35
45
  });
36
46
  }
37
- attributeChangedCallback(t, s, e) {
38
- if (s !== e)
47
+ attributeChangedCallback(t, r, e) {
48
+ if (r !== e)
39
49
  switch (t) {
40
50
  case "state":
41
51
  this.updateState(e), this.$el.classList.toggle(`${e}`);
42
52
  break;
43
53
  case "inverted":
44
- for (let r = 0; r < this.$children.length; r++)
45
- this.$children[r].hasAttribute("inverted") || this.$children[r].toggleAttribute("inverted");
54
+ for (let o = 0; o < this.$children.length; o++)
55
+ this.$children[o].hasAttribute("inverted") || this.$children[o].toggleAttribute("inverted");
46
56
  this.$el.toggleAttribute("inverted", e !== null), this.$container.toggleAttribute("inverted", e !== null), this.$statusIcon.toggleAttribute("inverted", e !== null);
47
57
  break;
48
58
  case "status-icon-aria-label":
@@ -51,30 +61,46 @@ const d = [
51
61
  this.statusIconAriaLabel
52
62
  ) : this.$statusIcon.removeAttribute("aria-label");
53
63
  break;
64
+ case "background-color":
65
+ this.backgroundColor && this.updateBackgroundColor(
66
+ e,
67
+ u
68
+ );
69
+ break;
54
70
  default:
55
- super.attributeChangedCallback(t, s, e);
71
+ super.attributeChangedCallback(t, r, e);
56
72
  break;
57
73
  }
58
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
+ }
59
85
  updateState(t) {
60
- if (!this.checkName(d, t)) {
61
- l(
62
- `${t} is not an allowed state value for ${this.tagName.toLowerCase()}`
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('", "')}".`
63
89
  );
64
90
  return;
65
91
  }
66
- const s = {
92
+ const r = {
67
93
  info: { name: "information_fill", color: "brand" },
68
94
  success: { name: "checkmark_fill", color: "purpose-success" },
69
95
  warning: { name: "exclamation_mark_fill", color: "purpose-warning" },
70
96
  error: { name: "minus_fill", color: "purpose-error" },
71
97
  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;
98
+ }, { name: e, color: o } = r[t] || r.info;
99
+ this.$statusIcon.name = e, this.$statusIcon.color = o;
74
100
  }
75
101
  close() {
76
102
  this.remove(), this.dispatchEvent(
77
- new CustomEvent(u, {
103
+ new CustomEvent(b, {
78
104
  bubbles: !0,
79
105
  composed: !0
80
106
  })
@@ -112,11 +138,18 @@ const d = [
112
138
  set statusIconAriaLabel(t) {
113
139
  t ? this.setAttribute("status-icon-aria-label", t) : this.removeAttribute("status-icon-aria-label");
114
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
+ }
115
147
  };
116
148
  a.nativeName = "div";
117
- let o = a;
118
- customElements.get("px-status-card") || customElements.define("px-status-card", o);
149
+ let s = a;
150
+ customElements.get("px-status-card") || customElements.define("px-status-card", s);
119
151
  export {
120
- o as StatusCard,
121
- d as statusCardStateValues
152
+ s as StatusCard,
153
+ u as statusCardBackgroundColorValues,
154
+ n as statusCardStateValues
122
155
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-status-card",
3
- "version": "2.0.0-alpha.16",
3
+ "version": "2.0.0-alpha.161",
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"