@proximus/lavender-cell 1.4.1 → 1.4.3-alpha.1

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/CellButton.d.ts +1 -0
  2. package/dist/index.es.js +98 -90
  3. package/package.json +1 -1
package/dist/CellButton.d.ts CHANGED
@@ -3,6 +3,7 @@ import '@proximus/lavender-layout';
3
3
  import { Cell } from '@proximus/lavender-cell';
4
4
  export declare class CellButton extends PxElement<HTMLButtonElement> {
5
5
  static nativeName: string;
6
+ static accessorExclusions: string[];
6
7
  private template;
7
8
  constructor();
8
9
  connectedCallback(): void;
package/dist/index.es.js CHANGED
@@ -1,4 +1,4 @@
1
- import { checkName as u, PxElement as v, WithExtraAttributes as g } from "@proximus/lavender-common";
1
+ import { checkName as p, log as l, PxElement as m, WithExtraAttributes as A } from "@proximus/lavender-common";
2
2
  import "@proximus/lavender-layout";
3
3
  import { checkboxStateValues as q } from "@proximus/lavender-checkbox";
4
4
  import { stateValues as M } from "@proximus/lavender-radio-group";
@@ -7,20 +7,20 @@ const R = ["", "default", "naked", "contained"], z = [
7
7
  "container-light",
8
8
  "container-default"
9
9
  ];
10
- function l(r) {
10
+ function c(r) {
11
11
  r.hasAttribute("width") || r.setAttribute("width", "s"), r.setAttribute("border-radius", "pill");
12
12
  }
13
- function c(r) {
13
+ function d(r) {
14
14
  r.getAttribute("variant") === "contained" && !r.getAttribute("background-color") && r.setAttribute("background-color", "container-light");
15
15
  }
16
16
  function P(r, t, e) {
17
- if (!u(R, e)) {
18
- console.error(`${e} is not an allowed variant value.`);
17
+ if (!p(R, e)) {
18
+ l(`${e} is not an allowed variant value.`);
19
19
  return;
20
20
  }
21
21
  t !== null && t !== "" && t !== "default" && r.classList.toggle(t), e !== null && e !== "" && e !== "default" && r.classList.toggle(e);
22
22
  }
23
- function d(r, t, e, s = []) {
23
+ function u(r, t, e, s = []) {
24
24
  e ? (r.setAttribute("inverted", ""), s.forEach((i) => i.setAttribute("inverted", "")), t.forEach((i) => {
25
25
  i.hasAttribute("inverted") || i.setAttribute("inverted", "");
26
26
  })) : (r.removeAttribute("inverted"), s.forEach((i) => i.removeAttribute("inverted")), t.forEach((i) => {
@@ -28,8 +28,10 @@ function d(r, t, e, s = []) {
28
28
  }));
29
29
  }
30
30
  function B(r, t, e, s, i) {
31
- if (!u(i, s)) {
32
- console.error(`${s} is not an allowed ${t} value`);
31
+ if (!p(i, s)) {
32
+ l(
33
+ `${s} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
34
+ );
33
35
  return;
34
36
  }
35
37
  const a = (o) => {
@@ -50,10 +52,10 @@ function $(r, t, e, s = [], i = {}) {
50
52
  a.hasAttribute("disabled") && a.removeAttribute("disabled");
51
53
  }), i.ariaEl && i.setAria && i.ariaEl.setAttribute("aria-disabled", "false"), i.ariaEl && i.setTabIndex && (i.ariaEl.tabIndex = 0));
52
54
  }
53
- const n = ":host{display:block;outline:none}:host .cell,:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{display:block;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}:host .cell,:host .cell *,:host .cell-link,:host .cell-link *,:host .cell-button,:host .cell-button *,:host .cell-checkbox,:host .cell-checkbox *,:host .cell-radio,:host .cell-radio *,:host .cell-switch,:host .cell-switch *{box-sizing:border-box}:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{width:100%;outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}:host .cell-link,:host .cell-button{cursor:pointer}:host .cell-checkbox,:host .cell-radio,:host .cell-switch{cursor:default}:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host(:not([disabled])) .cell-link:focus-visible,:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host([disabled]) .cell-link,:host:host([disabled]) .cell-button,:host:host([disabled]) .cell-checkbox,:host:host([disabled]) .cell-radio,:host:host([disabled]) .cell-switch{cursor:default;pointer-events:none}@media only screen and (min-width: 768px){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])) .cell-link:focus-visible,:scope:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 1025px){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])) .cell-link:focus-visible,:scope:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .cell-link,:host([inverted]) .cell-button,:host([inverted]) .cell-checkbox,:host([inverted]) .cell-radio,:host([inverted]) .cell-switch{outline-color:var(--px-color-border-focus-outline-inverted)}", H = ':host([separator]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.cell{color:var(--px-color-text-neutral-default);padding:var(--px-spacing-s-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title)}.cell ::slotted([slot="description"]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-m-mobile)}.cell ::slotted([slot="suffix"]){text-align:right;font-weight:var(--px-font-weight-title)}.cell[compact]{padding-block:var(--px-spacing-xs-mobile)}:host([hoverable]:not([disabled])) .cell{cursor:pointer;text-decoration:none}:host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-color-background-state-hover-default)}:host([hoverable][disabled]) .cell{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}.contained{background-color:var( --cell-contained-background-color-default, var(--px-color-background-container-light-default) )}:host([hoverable]) .contained{border:var(--px-size-border-m) solid transparent}:host([hoverable]:hover:not([disabled])) .contained{background-color:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default)}:host([hoverable][disabled]) .contained{background-color:var(--px-color-background-state-disabled-default)}@media only screen and (max-width: 47.9375em){:host([separator--mobile]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--mobile, var(--px-radius-main) )}}@media only screen and (min-width: 48em){:host{display:block}.cell{padding:var(--px-padding-s-tablet)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-tablet)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-tablet)}.cell[compact]{padding-block:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 48em) and (max-width: 64em){:host([separator--tablet]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--tablet, var(--px-radius-main) )}}@media only screen and (min-width: 64.0625em){:host{display:block}.cell{padding:var(--px-spacing-s-laptop)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-laptop)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-laptop)}.cell[compact]{padding-block:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){:host([separator--laptop]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--laptop, var(--px-radius-main) )}}@media only screen and (min-width: 90.0625em){:host{display:block}:host([separator--desktop]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.cell{padding:var(--px-spacing-s-desktop)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-desktop)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-desktop)}.cell[compact]{padding-block:var(--px-spacing-xs-desktop)}.contained{border-radius:var( --cell-contained-border-radius-top-left--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--desktop, var(--px-radius-main) )}}:host([inverted]):after{border-bottom-color:var(--px-color-border-main-inverted)}:host([inverted]) .cell{color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted]):host([hoverable][disabled]) .cell{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]):host([hoverable][disabled]) .contained{background-color:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .contained{background-color:var( --cell-contained-background-color-inverted, var(--px-color-background-container-light-inverted) )}:host([inverted]):host([hoverable]:hover:not([disabled])) .contained{background-color:var( --px-color-background-state-hover-bordered-inverted );border-color:var(--px-color-border-state-hover-inverted)}', S = new CSSStyleSheet(), C = new CSSStyleSheet();
54
- S.replaceSync(n);
55
- C.replaceSync(H);
56
- const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], k = class k extends v {
55
+ const n = ":host{display:block;outline:none}:host .cell,:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{display:block;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}:host .cell,:host .cell *,:host .cell-link,:host .cell-link *,:host .cell-button,:host .cell-button *,:host .cell-checkbox,:host .cell-checkbox *,:host .cell-radio,:host .cell-radio *,:host .cell-switch,:host .cell-switch *{box-sizing:border-box}:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{width:100%;outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}:host .cell-link,:host .cell-button{cursor:pointer}:host .cell-checkbox,:host .cell-radio,:host .cell-switch{cursor:default}:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host(:not([disabled])) .cell-link:focus-visible,:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host([disabled]) .cell-link,:host:host([disabled]) .cell-button,:host:host([disabled]) .cell-checkbox,:host:host([disabled]) .cell-radio,:host:host([disabled]) .cell-switch{cursor:default;pointer-events:none}@media only screen and (min-width: 768px){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])) .cell-link:focus-visible,:scope:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 1025px){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])) .cell-link:focus-visible,:scope:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .cell-link,:host([inverted]) .cell-button,:host([inverted]) .cell-checkbox,:host([inverted]) .cell-radio,:host([inverted]) .cell-switch{outline-color:var(--px-color-border-focus-outline-inverted)}", H = ':host([separator]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.cell{color:var(--px-color-text-neutral-default);padding:var(--px-spacing-s-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title)}.cell ::slotted([slot="description"]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-m-mobile)}.cell ::slotted([slot="suffix"]){text-align:right;font-weight:var(--px-font-weight-title)}.cell[compact]{padding-block:var(--px-spacing-xs-mobile)}:host([hoverable]:not([disabled])) .cell{cursor:pointer;text-decoration:none}:host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-color-background-state-hover-default)}:host([hoverable][disabled]) .cell{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}.contained{background-color:var( --cell-contained-background-color-default, var(--px-color-background-container-light-default) )}:host([hoverable]) .contained{border:var(--px-size-border-m) solid transparent}:host([hoverable]:hover:not([disabled])) .contained{background-color:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default)}:host([hoverable][disabled]) .contained{background-color:var(--px-color-background-state-disabled-default)}@media only screen and (max-width: 47.9375em){:host([separator--mobile]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--mobile, var(--px-radius-main) )}}@media only screen and (min-width: 48em){:host{display:block}.cell{padding:var(--px-padding-s-tablet)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-tablet)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-tablet)}.cell[compact]{padding-block:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 48em) and (max-width: 64em){:host([separator--tablet]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--tablet, var(--px-radius-main) )}}@media only screen and (min-width: 64.0625em){:host{display:block}.cell{padding:var(--px-spacing-s-laptop)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-laptop)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-laptop)}.cell[compact]{padding-block:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){:host([separator--laptop]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--laptop, var(--px-radius-main) )}}@media only screen and (min-width: 90.0625em){:host{display:block}:host([separator--desktop]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.cell{padding:var(--px-spacing-s-desktop)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-desktop)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-desktop)}.cell[compact]{padding-block:var(--px-spacing-xs-desktop)}.contained{border-radius:var( --cell-contained-border-radius-top-left--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--desktop, var(--px-radius-main) )}}:host([inverted]):after{border-bottom-color:var(--px-color-border-main-inverted)}:host([inverted]) .cell{color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted]):host([hoverable][disabled]) .cell{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]):host([hoverable][disabled]) .contained{background-color:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .contained{background-color:var( --cell-contained-background-color-inverted, var(--px-color-background-container-light-inverted) )}:host([inverted]):host([hoverable]:hover:not([disabled])) .contained{background-color:var( --px-color-background-state-hover-bordered-inverted );border-color:var(--px-color-border-state-hover-inverted)}', C = new CSSStyleSheet(), S = new CSSStyleSheet();
56
+ C.replaceSync(n);
57
+ S.replaceSync(H);
58
+ const F = ["secondary"], _ = ["", "default", "top", "bottom", "none"], x = class x extends m {
57
59
  template() {
58
60
  return `
59
61
  <px-hstack gap="s" justify-content="space-between" align-items="center">
@@ -75,14 +77,14 @@ const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], k = class
75
77
  `;
76
78
  }
77
79
  constructor() {
78
- super(C, S);
79
- const t = document.createElement(this.nativeName);
80
+ super(S, C);
81
+ const t = document.createElement("div");
80
82
  t.classList.add("cell"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
81
83
  }
82
84
  connectedCallback() {
83
- if (super.connectedCallback(), this.$slotVisual) {
85
+ if (this.$slotVisual) {
84
86
  const t = this.querySelector('px-img[slot="visual"]');
85
- t && l(t);
87
+ t && c(t);
86
88
  }
87
89
  if (this.$slotSuffix) {
88
90
  const t = this.querySelectorAll(
@@ -92,7 +94,7 @@ const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], k = class
92
94
  this.configureSlotSuffixButtonIcon(i);
93
95
  }), s && (this.$suffixContainer.gap = "s", this.$suffixContainer.direction = "row", this.$suffixContainer.alignItems = "center");
94
96
  }
95
- c(this);
97
+ d(this);
96
98
  }
97
99
  static get observedAttributes() {
98
100
  return [
@@ -129,7 +131,7 @@ const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], k = class
129
131
  case "radius--tablet":
130
132
  case "radius--laptop":
131
133
  case "radius--desktop":
132
- this.updateRadius(t, e, s, F);
134
+ this.updateRadius(t, e, s, _);
133
135
  break;
134
136
  case "background-color":
135
137
  B(
@@ -146,29 +148,27 @@ const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], k = class
146
148
  }
147
149
  }
148
150
  configureSlotSuffixButtonIcon(t) {
149
- t.hasAttribute("variant") ? u(
150
- x,
151
+ t.hasAttribute("variant") && p(
152
+ F,
151
153
  t.getAttribute("variant")
152
- ) || (console.error(
153
- `Wrong button-icon variant value for suffix. Allowed values are: ${x.join(
154
- ", "
155
- )}.`
156
- ), t.setAttribute("variant", "secondary")) : t.setAttribute("variant", "secondary");
154
+ ) || t.setAttribute("variant", "secondary");
157
155
  }
158
156
  updateRadius(t, e, s, i) {
159
- if (!u(i, s)) {
160
- console.error(`${s} is not a valid ${t} value`);
157
+ if (!p(i, s)) {
158
+ l(
159
+ `${s} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
160
+ );
161
161
  return;
162
162
  }
163
163
  const a = t.includes("--"), o = [];
164
164
  if (!a)
165
165
  this.separatorMobile || o.push("mobile"), this.separatorTablet || o.push("tablet"), this.separatorLaptop || o.push("laptop"), this.separatorDesktop || o.push("desktop");
166
166
  else {
167
- const h = t.split("--")[1];
168
- o.push(h);
167
+ const b = t.split("--")[1];
168
+ o.push(b);
169
169
  }
170
- o.forEach((h) => {
171
- e !== null && e !== "" && e !== "default" && this.updateStyle(h, e), s !== null && s !== "" && s !== "default" && this.updateStyle(h, s);
170
+ o.forEach((b) => {
171
+ e !== null && e !== "" && e !== "default" && this.updateStyle(b, e), s !== null && s !== "" && s !== "default" && this.updateStyle(b, s);
172
172
  });
173
173
  }
174
174
  updateStyle(t, e) {
@@ -283,14 +283,14 @@ const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], k = class
283
283
  t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
284
284
  }
285
285
  };
286
- k.nativeName = "div";
287
- let b = k;
288
- customElements.get("px-cell") || customElements.define("px-cell", b);
289
- const _ = '.cell-link{text-decoration:none}.cell-link[noicon=""] px-icon{display:none}.cell-link px-icon{color:var(--px-color-icon-brand-default)}.cell-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-default)}[compact] .cell-link{padding-block:var(--px-spacing-xs-mobile)}:host([inverted]) .cell-link px-icon{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .cell-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-inverted)}', y = new CSSStyleSheet();
286
+ x.nativeName = "div";
287
+ let f = x;
288
+ customElements.get("px-cell") || customElements.define("px-cell", f);
289
+ const O = '.cell-link{text-decoration:none}.cell-link[noicon=""] px-icon{display:none}.cell-link px-icon{color:var(--px-color-icon-brand-default)}.cell-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-default)}[compact] .cell-link{padding-block:var(--px-spacing-xs-mobile)}:host([inverted]) .cell-link px-icon{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .cell-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-inverted)}', y = new CSSStyleSheet();
290
290
  y.replaceSync(n);
291
291
  const w = new CSSStyleSheet();
292
- w.replaceSync(_);
293
- const m = class m extends v {
292
+ w.replaceSync(O);
293
+ const g = class g extends m {
294
294
  template() {
295
295
  return `
296
296
  <px-cell hoverable>
@@ -310,18 +310,18 @@ const m = class m extends v {
310
310
  }
311
311
  constructor() {
312
312
  super(w, y);
313
- const t = document.createElement(this.nativeName);
313
+ const t = document.createElement(g.nativeName);
314
314
  t.classList.add("cell-link"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
315
315
  }
316
316
  connectedCallback() {
317
- if (super.connectedCallback(), this.$slotVisual) {
317
+ if (this.$slotVisual) {
318
318
  const e = this.querySelector('px-img[slot="visual"]');
319
- e && l(e);
319
+ e && c(e);
320
320
  }
321
321
  this.hasAttribute("target") && this.getAttribute("target") === "_blank" && (this.$pxIcon.setAttribute("name", "target_blank"), this.$pxIcon.setAttribute(
322
322
  "aria-label",
323
323
  this.targetBlankAriaLabel ? this.targetBlankAriaLabel : "Opens in a new tab"
324
- )), c(this);
324
+ )), d(this);
325
325
  }
326
326
  static get observedAttributes() {
327
327
  return [
@@ -352,7 +352,7 @@ const m = class m extends v {
352
352
  this.$cell.variant = this.variant;
353
353
  break;
354
354
  case "inverted":
355
- d(this.$cell, this.$children, this.inverted, [
355
+ u(this.$cell, this.$children, this.inverted, [
356
356
  this.$pxIcon
357
357
  ]);
358
358
  break;
@@ -497,14 +497,14 @@ const m = class m extends v {
497
497
  t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
498
498
  }
499
499
  };
500
- m.nativeName = "a";
501
- let p = m;
502
- customElements.get("px-cell-link") || customElements.define("px-cell-link", p);
500
+ g.nativeName = "a";
501
+ let v = g;
502
+ customElements.get("px-cell-link") || customElements.define("px-cell-link", v);
503
503
  const j = ".cell-button{padding:0;background:none;border:none;text-align:left;font-size:inherit}", E = new CSSStyleSheet();
504
504
  E.replaceSync(n);
505
505
  const D = new CSSStyleSheet();
506
506
  D.replaceSync(j);
507
- const A = class A extends v {
507
+ const h = class h extends m {
508
508
  template() {
509
509
  return `
510
510
  <px-cell hoverable>
@@ -517,15 +517,15 @@ const A = class A extends v {
517
517
  }
518
518
  constructor() {
519
519
  super(D, E);
520
- const t = document.createElement(this.nativeName);
520
+ const t = document.createElement(h.nativeName);
521
521
  t.classList.add("cell-button"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
522
522
  }
523
523
  connectedCallback() {
524
- if (super.connectedCallback(), this.$slotVisual) {
524
+ if (this.$slotVisual) {
525
525
  const t = this.querySelector('px-img[slot="visual"]');
526
- t && l(t);
526
+ t && c(t);
527
527
  }
528
- c(this);
528
+ d(this);
529
529
  }
530
530
  static get observedAttributes() {
531
531
  return [
@@ -554,7 +554,7 @@ const A = class A extends v {
554
554
  this.$cell.variant = this.variant;
555
555
  break;
556
556
  case "inverted":
557
- d(this.$cell, this.$children, this.inverted);
557
+ u(this.$cell, this.$children, this.inverted);
558
558
  break;
559
559
  case "disabled":
560
560
  $(this.$cell, this.$children, this.disabled, [], {
@@ -682,18 +682,18 @@ const A = class A extends v {
682
682
  t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
683
683
  }
684
684
  };
685
- A.nativeName = "button";
686
- let f = A;
687
- customElements.get("px-cell-button") || customElements.define("px-cell-button", f);
685
+ h.nativeName = "button", h.accessorExclusions = ["disabled"];
686
+ let k = h;
687
+ customElements.get("px-cell-button") || customElements.define("px-cell-button", k);
688
688
  const L = new CSSStyleSheet();
689
689
  L.replaceSync(n);
690
- const O = ["", "left", "right"];
691
- class W extends g {
690
+ const W = ["", "left", "right"];
691
+ class G extends A {
692
692
  template() {
693
693
  return `
694
694
  <div class="cell-checkbox">
695
695
  <px-cell hoverable>
696
- <px-checkbox slot="prefix" aria-hidden="true" tabindex="-1" ${this.name ? 'name="${this.name"' : ""} ${this.value ? 'value="${this.value"' : ""}></px-checkbox>
696
+ <px-checkbox slot="prefix" inert ${this.name ? 'name="${this.name"' : ""} ${this.value ? 'value="${this.value"' : ""}></px-checkbox>
697
697
  <slot name="visual" slot="visual"></slot>
698
698
  <slot name="label" slot="label"></slot>
699
699
  <slot name="description" slot="description"></slot>
@@ -708,7 +708,7 @@ class W extends g {
708
708
  connectedCallback() {
709
709
  if (this.$slotVisual) {
710
710
  const t = this.querySelector('px-img[slot="visual"]');
711
- t && l(t);
711
+ t && c(t);
712
712
  }
713
713
  this.addEventListener("mouseover", () => {
714
714
  this.$checkbox.setAttribute("hover", "");
@@ -722,7 +722,7 @@ class W extends g {
722
722
  }
723
723
  }), this.addEventListener("click", (t) => {
724
724
  this.checked = !this.checked, t.stopPropagation(), t.preventDefault();
725
- }), this.hasAttribute("checked") && (this.checked = !0), c(this);
725
+ }), this.hasAttribute("checked") && (this.checked = !0), d(this);
726
726
  }
727
727
  static get observedAttributes() {
728
728
  return [
@@ -755,7 +755,7 @@ class W extends g {
755
755
  this.$cell.variant = this.variant;
756
756
  break;
757
757
  case "inverted":
758
- d(this.$cell, this.$children, this.inverted, [
758
+ u(this.$cell, this.$children, this.inverted, [
759
759
  this.$checkbox
760
760
  ]);
761
761
  break;
@@ -785,7 +785,9 @@ class W extends g {
785
785
  if (this.checkName(q, s))
786
786
  this.$checkbox.setAttribute("state", s);
787
787
  else {
788
- console.error(`${s} is not a valid state value`);
788
+ l(
789
+ `${s} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
790
+ );
789
791
  return;
790
792
  }
791
793
  break;
@@ -815,8 +817,10 @@ class W extends g {
815
817
  ));
816
818
  }
817
819
  handleCheckboxPositionChange(t) {
818
- if (!this.checkName(O, t)) {
819
- console.error(`${t} is not a valid position value`);
820
+ if (!this.checkName(W, t)) {
821
+ l(
822
+ `${t} is not an allowed position value for ${this.tagName.toLowerCase()}`
823
+ );
820
824
  return;
821
825
  }
822
826
  this.$checkbox && (t === "" || t === "left" ? this.$checkbox.setAttribute("slot", "prefix") : t === "right" && this.$checkbox.setAttribute("slot", "action-indicator"));
@@ -974,15 +978,15 @@ class W extends g {
974
978
  t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
975
979
  }
976
980
  }
977
- customElements.get("px-cell-checkbox") || customElements.define("px-cell-checkbox", W);
981
+ customElements.get("px-cell-checkbox") || customElements.define("px-cell-checkbox", G);
978
982
  const I = new CSSStyleSheet();
979
983
  I.replaceSync(n);
980
- class G extends g {
984
+ class J extends A {
981
985
  template() {
982
986
  return `
983
987
  <div class="cell-switch">
984
988
  <px-cell hoverable>
985
- <px-switch slot="action-indicator" aria-hidden="true" tabindex="-1"></px-switch>
989
+ <px-switch slot="action-indicator" inert></px-switch>
986
990
  <slot name="visual" slot="visual"></slot>
987
991
  <slot name="label" slot="label"></slot>
988
992
  <slot name="description" slot="description"></slot>
@@ -997,7 +1001,7 @@ class G extends g {
997
1001
  connectedCallback() {
998
1002
  if (this.$slotVisual) {
999
1003
  const t = this.querySelector('px-img[slot="visual"]');
1000
- t && l(t);
1004
+ t && c(t);
1001
1005
  }
1002
1006
  this.addEventListener("mouseover", () => {
1003
1007
  this.$switch.setAttribute("hover", "");
@@ -1011,7 +1015,7 @@ class G extends g {
1011
1015
  }
1012
1016
  }), this.addEventListener("click", (t) => {
1013
1017
  this.checked = !this.checked, t.stopPropagation(), t.preventDefault();
1014
- }), this.hasAttribute("checked") && (this.checked = !0), c(this);
1018
+ }), this.hasAttribute("checked") && (this.checked = !0), d(this);
1015
1019
  }
1016
1020
  static get observedAttributes() {
1017
1021
  return [
@@ -1042,7 +1046,7 @@ class G extends g {
1042
1046
  this.$cell.variant = this.variant;
1043
1047
  break;
1044
1048
  case "inverted":
1045
- d(this.$cell, this.$children, this.inverted, [
1049
+ u(this.$cell, this.$children, this.inverted, [
1046
1050
  this.$switch
1047
1051
  ]);
1048
1052
  break;
@@ -1236,16 +1240,16 @@ class G extends g {
1236
1240
  t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
1237
1241
  }
1238
1242
  }
1239
- customElements.get("px-cell-switch") || customElements.define("px-cell-switch", G);
1243
+ customElements.get("px-cell-switch") || customElements.define("px-cell-switch", J);
1240
1244
  const T = new CSSStyleSheet();
1241
1245
  T.replaceSync(n);
1242
- const J = ["", "left", "right"];
1243
- class K extends g {
1246
+ const K = ["", "left", "right"];
1247
+ class Q extends A {
1244
1248
  template() {
1245
1249
  return `
1246
1250
  <div class="cell-radio">
1247
1251
  <px-cell hoverable>
1248
- <px-radio slot="prefix" aria-hidden="true" tabindex="-1"></px-radio>
1252
+ <px-radio slot="prefix" inert></px-radio>
1249
1253
  <slot name="visual" slot="visual"></slot>
1250
1254
  <slot name="label" slot="label"></slot>
1251
1255
  <slot name="description" slot="description"></slot>
@@ -1261,7 +1265,7 @@ class K extends g {
1261
1265
  var t;
1262
1266
  if (this.tabIndex = ((t = this.parentElement) == null ? void 0 : t.firstElementChild) === this ? 0 : -1, this.$slotVisual) {
1263
1267
  const e = this.querySelector('px-img[slot="visual"]');
1264
- e && l(e);
1268
+ e && c(e);
1265
1269
  }
1266
1270
  this.addEventListener("mouseover", () => {
1267
1271
  this.$radio.setAttribute("hover", "");
@@ -1275,7 +1279,7 @@ class K extends g {
1275
1279
  }
1276
1280
  }), this.addEventListener("click", (e) => {
1277
1281
  this.checked || (this.checked = !0), e.stopPropagation(), e.preventDefault();
1278
- }), this.hasAttribute("checked") && (this.checked = !0), c(this);
1282
+ }), this.hasAttribute("checked") && (this.checked = !0), d(this);
1279
1283
  }
1280
1284
  static get observedAttributes() {
1281
1285
  return [
@@ -1308,7 +1312,7 @@ class K extends g {
1308
1312
  this.$cell.variant = this.variant;
1309
1313
  break;
1310
1314
  case "inverted":
1311
- d(this.$cell, this.$children, this.inverted, [
1315
+ u(this.$cell, this.$children, this.inverted, [
1312
1316
  this.$radio
1313
1317
  ]);
1314
1318
  break;
@@ -1338,7 +1342,9 @@ class K extends g {
1338
1342
  if (this.checkName(M, s))
1339
1343
  this.$radio.setAttribute("state", s);
1340
1344
  else {
1341
- console.error(`${s} is not a valid state value`);
1345
+ l(
1346
+ `${s} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1347
+ );
1342
1348
  return;
1343
1349
  }
1344
1350
  break;
@@ -1368,8 +1374,10 @@ class K extends g {
1368
1374
  ));
1369
1375
  }
1370
1376
  handleRadioPositionChange(t) {
1371
- if (!this.checkName(J, t)) {
1372
- console.error(`${t} is not a valid position value`);
1377
+ if (!this.checkName(K, t)) {
1378
+ l(
1379
+ `${t} is not an allowed position value for ${this.tagName.toLowerCase()}`
1380
+ );
1373
1381
  return;
1374
1382
  }
1375
1383
  this.$radio && (t === "" || t === "left" ? this.$radio.setAttribute("slot", "prefix") : t === "right" && this.$radio.setAttribute("slot", "action-indicator"));
@@ -1527,16 +1535,16 @@ class K extends g {
1527
1535
  t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
1528
1536
  }
1529
1537
  }
1530
- customElements.get("px-cell-radio") || customElements.define("px-cell-radio", K);
1538
+ customElements.get("px-cell-radio") || customElements.define("px-cell-radio", Q);
1531
1539
  export {
1532
- b as Cell,
1533
- f as CellButton,
1534
- W as CellCheckbox,
1535
- p as CellLink,
1536
- K as CellRadio,
1537
- G as CellSwitch,
1538
- O as cellCheckboxPosition,
1539
- J as cellRadioPosition,
1540
- F as radiusValues,
1541
- x as suffixButtonIconVariantValues
1540
+ f as Cell,
1541
+ k as CellButton,
1542
+ G as CellCheckbox,
1543
+ v as CellLink,
1544
+ Q as CellRadio,
1545
+ J as CellSwitch,
1546
+ W as cellCheckboxPosition,
1547
+ K as cellRadioPosition,
1548
+ _ as radiusValues,
1549
+ F as suffixButtonIconVariantValues
1542
1550
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-cell",
3
- "version": "1.4.1",
3
+ "version": "1.4.3-alpha.1",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",