@proximus/lavender-cell 1.4.19-beta.1 → 1.4.20-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/index.es.js +29 -10
  2. package/dist/web-types.json +7 -7
  3. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -2,7 +2,7 @@ import { PxElement as e, WithExtraAttributes as t, booleanPropertyToAttributeSet
2
2
  import "@proximus/lavender-layout";
3
3
  import { checkboxStateValues as c } from "@proximus/lavender-checkbox";
4
4
  import { stateValues as l } from "@proximus/lavender-radio-group";
5
- // src/Common.ts
5
+ //#region src/Common.ts
6
6
  var u = [
7
7
  "",
8
8
  "default",
@@ -20,7 +20,11 @@ function p(e) {
20
20
  e.getAttribute("variant") === "contained" && !e.getAttribute("background-color") && e.setAttribute("background-color", "container-light");
21
21
  }
22
22
  function m(e, t, n) {
23
- r(u, n) ? (t !== null && t !== "" && t !== "default" && e.classList.toggle(t), n !== null && n !== "" && n !== "default" && e.classList.toggle(n)) : a(`"${n}" is not a valid variant value for a cell. Allowed values are: "${u.join("\", \"")}".`);
23
+ if (!r(u, n)) {
24
+ a(`"${n}" is not a valid variant value for a cell. Allowed values are: "${u.join("\", \"")}".`);
25
+ return;
26
+ }
27
+ t !== null && t !== "" && t !== "default" && e.classList.toggle(t), n !== null && n !== "" && n !== "default" && e.classList.toggle(n);
24
28
  }
25
29
  function h(e, t, n, r = []) {
26
30
  n ? (e.setAttribute("inverted", ""), r.forEach((e) => e.setAttribute("inverted", "")), t.forEach((e) => {
@@ -46,7 +50,8 @@ function _(e, t, n, r = [], i = {}) {
46
50
  e.hasAttribute("disabled") && e.removeAttribute("disabled");
47
51
  }), i.ariaEl && i.setAria && i.ariaEl.setAttribute("aria-disabled", "false"), i.ariaEl && i.setTabIndex && (i.ariaEl.tabIndex = 0));
48
52
  }
49
- // src/common.css?inline
53
+ //#endregion
54
+ //#region src/common.css?inline
50
55
  var v = ":host{outline:none;display:block}:is(:host .cell,:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch),:is(:host .cell,:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch) *{box-sizing:border-box}:host .cell,:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{--btn-transition:all .2s ease-in-out 0s;transition:var(--btn-transition);display:block}:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile);width:100%}: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}:is(:host:host(:not([disabled])) .cell-link,: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 screen and (width>=48rem){: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)}:is(:scope:host:host(:not([disabled])) .cell-link,:scope:host:host(:not([disabled])) .cell-button):focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media screen and (width>=64.0625rem){: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)}:is(:scope:host:host(:not([disabled])) .cell-link,: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)}", y = ":host([separator]):after{content:\"\";border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default);width:100%;display:block;position:relative}.cell{color:var(--px-color-text-neutral-default);padding:var(--px-spacing-s-mobile);font-family:var(--px-font-family)}.cell ::slotted([slot=label]){font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title);line-height:var(--px-line-height-ratio-l)}.cell ::slotted([slot=description]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l)}.cell ::slotted([slot=suffix]){text-align:right;font-weight:var(--px-font-weight-title);line-height:var(--px-line-height-ratio-l)}.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 screen and (width<=47.938rem){:host([separator--mobile]):after{content:\"\";border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default);width:100%;display:block;position:relative}.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 screen and (width>=48rem){: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 screen and (width>=48rem) and (width<=64rem){:host([separator--tablet]):after{content:\"\";border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default);width:100%;display:block;position:relative}.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 screen and (width>=64.0625rem){: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 screen and (width>=64.0625rem) and (width<=90rem){:host([separator--laptop]):after{content:\"\";border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default);width:100%;display:block;position:relative}.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 screen and (width>=90.0625rem){:host{display:block}:host([separator--desktop]):after{content:\"\";border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default);width:100%;display:block;position:relative}.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)}", b = new CSSStyleSheet(), x = new CSSStyleSheet();
51
56
  b.replaceSync(v), x.replaceSync(y);
52
57
  var S = ["secondary"], C = [
@@ -252,7 +257,8 @@ var S = ["secondary"], C = [
252
257
  }
253
258
  };
254
259
  customElements.get("px-cell") || customElements.define("px-cell", w);
255
- // src/cell-link.css?inline
260
+ //#endregion
261
+ //#region src/cell-link.css?inline
256
262
  var T = ".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)}", E = new CSSStyleSheet();
257
263
  E.replaceSync(v);
258
264
  var D = new CSSStyleSheet();
@@ -441,7 +447,8 @@ var O = class t extends e {
441
447
  }
442
448
  };
443
449
  customElements.get("px-cell-link") || customElements.define("px-cell-link", O);
444
- // src/cell-button.css?inline
450
+ //#endregion
451
+ //#region src/cell-button.css?inline
445
452
  var k = ".cell-button{text-align:left;font-size:inherit;background:0 0;border:none;padding:0}", A = new CSSStyleSheet();
446
453
  A.replaceSync(v);
447
454
  var j = new CSSStyleSheet();
@@ -619,7 +626,8 @@ var M = class t extends e {
619
626
  }
620
627
  };
621
628
  customElements.get("px-cell-button") || customElements.define("px-cell-button", M);
622
- // src/CellCheckbox.ts
629
+ //#endregion
630
+ //#region src/CellCheckbox.ts
623
631
  var N = new CSSStyleSheet();
624
632
  N.replaceSync(v);
625
633
  var P = [
@@ -730,7 +738,11 @@ var P = [
730
738
  })));
731
739
  }
732
740
  handleCheckboxPositionChange(e) {
733
- this.checkName(P, e) ? this.$checkbox && (e === "" || e === "left" ? this.$checkbox.setAttribute("slot", "prefix") : e === "right" && this.$checkbox.setAttribute("slot", "action-indicator")) : a(`"${e}" is not a valid position value for ${this.tagName.toLowerCase()}. Allowed values are: "${P.join("\", \"")}".`);
741
+ if (!this.checkName(P, e)) {
742
+ a(`"${e}" is not a valid position value for ${this.tagName.toLowerCase()}. Allowed values are: "${P.join("\", \"")}".`);
743
+ return;
744
+ }
745
+ this.$checkbox && (e === "" || e === "left" ? this.$checkbox.setAttribute("slot", "prefix") : e === "right" && this.$checkbox.setAttribute("slot", "action-indicator"));
734
746
  }
735
747
  static get formAssociated() {
736
748
  return !0;
@@ -886,7 +898,8 @@ var P = [
886
898
  }
887
899
  };
888
900
  customElements.get("px-cell-checkbox") || customElements.define("px-cell-checkbox", F);
889
- // src/CellSwitch.ts
901
+ //#endregion
902
+ //#region src/CellSwitch.ts
890
903
  var I = new CSSStyleSheet();
891
904
  I.replaceSync(v);
892
905
  var L = class e extends t {
@@ -1126,7 +1139,8 @@ var L = class e extends t {
1126
1139
  }
1127
1140
  };
1128
1141
  customElements.get("px-cell-switch") || customElements.define("px-cell-switch", L);
1129
- // src/CellRadio.ts
1142
+ //#endregion
1143
+ //#region src/CellRadio.ts
1130
1144
  var R = new CSSStyleSheet();
1131
1145
  R.replaceSync(v);
1132
1146
  var z = [
@@ -1237,7 +1251,11 @@ var z = [
1237
1251
  })));
1238
1252
  }
1239
1253
  handleRadioPositionChange(e) {
1240
- this.checkName(z, e) ? this.$radio && (e === "" || e === "left" ? this.$radio.setAttribute("slot", "prefix") : e === "right" && this.$radio.setAttribute("slot", "action-indicator")) : a(`"${e}" is not a valid position value for ${this.tagName.toLowerCase()}. Allowed values are: "${z.join("\", \"")}".`);
1254
+ if (!this.checkName(z, e)) {
1255
+ a(`"${e}" is not a valid position value for ${this.tagName.toLowerCase()}. Allowed values are: "${z.join("\", \"")}".`);
1256
+ return;
1257
+ }
1258
+ this.$radio && (e === "" || e === "left" ? this.$radio.setAttribute("slot", "prefix") : e === "right" && this.$radio.setAttribute("slot", "action-indicator"));
1241
1259
  }
1242
1260
  static get formAssociated() {
1243
1261
  return !0;
@@ -1393,4 +1411,5 @@ var z = [
1393
1411
  }
1394
1412
  };
1395
1413
  customElements.get("px-cell-radio") || customElements.define("px-cell-radio", B);
1414
+ //#endregion
1396
1415
  export { w as Cell, M as CellButton, F as CellCheckbox, O as CellLink, B as CellRadio, L as CellSwitch, P as cellCheckboxPosition, z as cellRadioPosition, C as radiusValues, S as suffixButtonIconVariantValues };
package/dist/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
3
3
  "name": "@proximus/lavender-cell",
4
- "version": "1.4.19-beta.1",
4
+ "version": "1.4.20-alpha.1",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "px-cell",
11
- "description": "\n---\n",
11
+ "description": "\n\n---\n",
12
12
  "doc-url": "",
13
13
  "attributes": [
14
14
  { "name": "inverted", "value": { "type": "string" } },
@@ -55,7 +55,7 @@
55
55
  },
56
56
  {
57
57
  "name": "px-cell-button",
58
- "description": "A cell component that acts as a button.\n---\n",
58
+ "description": "A cell component that acts as a button.\n\n---\n",
59
59
  "doc-url": "",
60
60
  "attributes": [
61
61
  { "name": "inverted", "value": { "type": "string" } },
@@ -120,7 +120,7 @@
120
120
  },
121
121
  {
122
122
  "name": "px-cell-checkbox",
123
- "description": "\n---\n\n\n### **Events:**\n - **change**",
123
+ "description": "\n\n---\n\n\n### **Events:**\n - **change**",
124
124
  "doc-url": "",
125
125
  "attributes": [
126
126
  { "name": "inverted", "value": { "type": "string" } },
@@ -179,7 +179,7 @@
179
179
  },
180
180
  {
181
181
  "name": "px-cell-link",
182
- "description": "\n---\n",
182
+ "description": "\n\n---\n",
183
183
  "doc-url": "",
184
184
  "attributes": [
185
185
  { "name": "inverted", "value": { "type": "string" } },
@@ -232,7 +232,7 @@
232
232
  },
233
233
  {
234
234
  "name": "px-cell-radio",
235
- "description": "\n---\n\n\n### **Events:**\n - **change**",
235
+ "description": "\n\n---\n\n\n### **Events:**\n - **change**",
236
236
  "doc-url": "",
237
237
  "attributes": [
238
238
  { "name": "inverted", "value": { "type": "string" } },
@@ -290,7 +290,7 @@
290
290
  },
291
291
  {
292
292
  "name": "px-cell-switch",
293
- "description": "\n---\n\n\n### **Events:**\n - **change**",
293
+ "description": "\n\n---\n\n\n### **Events:**\n - **change**",
294
294
  "doc-url": "",
295
295
  "attributes": [
296
296
  { "name": "inverted", "value": { "type": "string" } },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-cell",
3
- "version": "1.4.19-beta.1",
3
+ "version": "1.4.20-alpha.1",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",