@justeattakeaway/pie-checkbox-group 0.7.11 → 0.8.0

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 (6) hide show
  1. package/custom-elements.json +2 -2
  2. package/dist/index.d.ts +2 -2
  3. package/dist/index.js +70 -57
  4. package/dist/react.d.ts +2 -2
  5. package/package.json +7 -6
  6. package/src/index.ts +3 -2
package/custom-elements.json CHANGED
@@ -254,8 +254,8 @@
254
254
  }
255
255
  ],
256
256
  "superclass": {
257
- "name": "LitElement",
258
- "package": "lit"
257
+ "name": "PieElement",
258
+ "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
259
259
  },
260
260
  "tagName": "pie-checkbox-group",
261
261
  "customElement": true
package/dist/index.d.ts CHANGED
@@ -2,7 +2,7 @@ import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
2
  import type { CSSResult } from 'lit';
3
3
  import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
4
4
  import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
5
- import type { LitElement } from 'lit';
5
+ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
6
6
  import type { PropertyValues } from 'lit';
7
7
  import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
8
8
  import type { TemplateResult } from 'lit';
@@ -77,7 +77,7 @@ export declare class PieCheckboxGroup extends PieCheckboxGroup_base implements C
77
77
  static styles: CSSResult;
78
78
  }
79
79
 
80
- declare const PieCheckboxGroup_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
80
+ declare const PieCheckboxGroup_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof PieElement;
81
81
 
82
82
  export declare const statusTypes: readonly ["default", "success", "error"];
83
83
 
package/dist/index.js CHANGED
@@ -1,25 +1,38 @@
1
- import { LitElement as x, html as n, unsafeCSS as g } from "lit";
2
- import { state as k, property as c, queryAssignedElements as m } from "lit/decorators.js";
3
- import { FormControlMixin as v, RtlMixin as y, validPropertyValues as _, defineCustomElement as G } from "@justeattakeaway/pie-webc-core";
1
+ import { LitElement as g, html as p, unsafeCSS as v } from "lit";
2
+ import { property as l, state as k, queryAssignedElements as m } from "lit/decorators.js";
3
+ import { FormControlMixin as y, RtlMixin as _, validPropertyValues as G, defineCustomElement as C } from "@justeattakeaway/pie-webc-core";
4
4
  import { ifDefined as b } from "lit/directives/if-defined.js";
5
- import { classMap as C } from "lit/directives/class-map.js";
5
+ import { classMap as E } from "lit/directives/class-map.js";
6
6
  import "@justeattakeaway/pie-assistive-text";
7
- const E = "*,*:after,*:before{box-sizing:inherit}.c-checkboxGroup{--checkbox-group-offset: var(--dt-spacing-c);--checkbox-group-offset--inline: var(--dt-spacing-e);--checkbox-group-label-offset: var(--dt-spacing-a);margin:0;padding:0;border:0;min-width:0}.c-checkboxGroup ::slotted(pie-checkbox){display:flex}.c-checkboxGroup ::slotted(pie-form-label){display:block;padding-block-end:var(--checkbox-group-label-offset)}.c-checkboxGroup:not(.c-checkboxGroup--inline) ::slotted(pie-checkbox:not(:last-child)){margin-block-end:var(--checkbox-group-offset)}.c-checkboxGroup--inline{display:flex;align-items:flex-start;flex-wrap:wrap}.c-checkboxGroup.c-checkboxGroup--inline{margin:calc(-1 * var(--checkbox-group-offset) / 2) calc(-1 * var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline ::slotted(pie-checkbox){margin:calc(var(--checkbox-group-offset) / 2) calc(var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline ::slotted(pie-form-label){margin:0 calc(var(--checkbox-group-offset--inline) / 2) calc(-1 * (var(--checkbox-group-offset) / 2 - var(--checkbox-group-label-offset)));padding-block-end:0}.c-checkboxGroup-assistiveText{--checkbox-group-assistive-text-offset: var(--dt-spacing-a);display:block;margin-block-start:var(--checkbox-group-assistive-text-offset)}", S = ["default", "success", "error"], $ = "pie-checkbox-group-disabled", T = "pie-checkbox-group-error", p = {
7
+ var S = Object.defineProperty, $ = (c, e, o, n) => {
8
+ for (var t = void 0, i = c.length - 1, a; i >= 0; i--)
9
+ (a = c[i]) && (t = a(e, o, t) || t);
10
+ return t && S(e, o, t), t;
11
+ };
12
+ class f extends g {
13
+ constructor() {
14
+ super(...arguments), this.v = "0.8.0";
15
+ }
16
+ }
17
+ $([
18
+ l({ type: String, reflect: !0 })
19
+ ], f.prototype, "v");
20
+ const O = "*,*:after,*:before{box-sizing:inherit}.c-checkboxGroup{--checkbox-group-offset: var(--dt-spacing-c);--checkbox-group-offset--inline: var(--dt-spacing-e);--checkbox-group-label-offset: var(--dt-spacing-a);margin:0;padding:0;border:0;min-width:0}.c-checkboxGroup ::slotted(pie-checkbox){display:flex}.c-checkboxGroup ::slotted(pie-form-label){display:block;padding-block-end:var(--checkbox-group-label-offset)}.c-checkboxGroup:not(.c-checkboxGroup--inline) ::slotted(pie-checkbox:not(:last-child)){margin-block-end:var(--checkbox-group-offset)}.c-checkboxGroup--inline{display:flex;align-items:flex-start;flex-wrap:wrap}.c-checkboxGroup.c-checkboxGroup--inline{margin:calc(-1 * var(--checkbox-group-offset) / 2) calc(-1 * var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline ::slotted(pie-checkbox){margin:calc(var(--checkbox-group-offset) / 2) calc(var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline ::slotted(pie-form-label){margin:0 calc(var(--checkbox-group-offset--inline) / 2) calc(-1 * (var(--checkbox-group-offset) / 2 - var(--checkbox-group-label-offset)));padding-block-end:0}.c-checkboxGroup-assistiveText{--checkbox-group-assistive-text-offset: var(--dt-spacing-a);display:block;margin-block-start:var(--checkbox-group-assistive-text-offset)}", T = ["default", "success", "error"], L = "pie-checkbox-group-disabled", I = "pie-checkbox-group-error", d = {
8
21
  status: "default",
9
22
  disabled: !1,
10
23
  isInline: !1
11
24
  };
12
- var L = Object.defineProperty, o = (h, e, i, r) => {
13
- for (var s = void 0, a = h.length - 1, l; a >= 0; a--)
14
- (l = h[a]) && (s = l(e, i, s) || s);
15
- return s && L(e, i, s), s;
25
+ var P = Object.defineProperty, r = (c, e, o, n) => {
26
+ for (var t = void 0, i = c.length - 1, a; i >= 0; i--)
27
+ (a = c[i]) && (t = a(e, o, t) || t);
28
+ return t && P(e, o, t), t;
16
29
  };
17
- const f = "pie-checkbox-group", u = "assistive-text", d = class d extends v(y(x)) {
30
+ const x = "pie-checkbox-group", u = "assistive-text", h = class h extends y(_(f)) {
18
31
  constructor() {
19
- super(...arguments), this._hasLabel = !1, this.isInline = p.isInline, this.status = p.status, this.disabled = p.disabled;
32
+ super(...arguments), this._hasLabel = !1, this.isInline = d.isInline, this.status = d.status, this.disabled = d.disabled;
20
33
  }
21
34
  _handleDisabled() {
22
- this._slottedChildren.forEach((e) => e.dispatchEvent(new CustomEvent($, {
35
+ this._slottedChildren.forEach((e) => e.dispatchEvent(new CustomEvent(L, {
23
36
  bubbles: !1,
24
37
  composed: !1,
25
38
  detail: { disabled: this.disabled }
@@ -27,7 +40,7 @@ const f = "pie-checkbox-group", u = "assistive-text", d = class d extends v(y(x)
27
40
  }
28
41
  _handleStatus() {
29
42
  this._slottedChildren.forEach((e) => {
30
- e.setAttribute("status", this.status), this.status === "error" && this.assistiveText && (e.setAttribute("assistiveText", this.assistiveText), e.dispatchEvent(new CustomEvent(T, { bubbles: !1, composed: !1, detail: { error: !0 } })));
43
+ e.setAttribute("status", this.status), this.status === "error" && this.assistiveText && (e.setAttribute("assistiveText", this.assistiveText), e.dispatchEvent(new CustomEvent(I, { bubbles: !1, composed: !1, detail: { error: !0 } })));
31
44
  });
32
45
  }
33
46
  /**
@@ -36,8 +49,8 @@ const f = "pie-checkbox-group", u = "assistive-text", d = class d extends v(y(x)
36
49
  * @private
37
50
  */
38
51
  handleSlotChange(e) {
39
- const i = e.target.assignedNodes({ flatten: !0 });
40
- this._hasLabel = i.length > 0;
52
+ const o = e.target.assignedNodes({ flatten: !0 });
53
+ this._hasLabel = o.length > 0;
41
54
  }
42
55
  /**
43
56
  * Template for the label slot to correctly wrap it into a legend element when it has content.
@@ -45,7 +58,7 @@ const f = "pie-checkbox-group", u = "assistive-text", d = class d extends v(y(x)
45
58
  * @private
46
59
  */
47
60
  renderWrappedLabel() {
48
- return this._hasLabel ? n`<legend><slot name='label' @slotchange=${this.handleSlotChange}></slot></legend>` : n`<slot name='label' @slotchange=${this.handleSlotChange}></slot>`;
61
+ return this._hasLabel ? p`<legend><slot name='label' @slotchange=${this.handleSlotChange}></slot></legend>` : p`<slot name='label' @slotchange=${this.handleSlotChange}></slot>`;
49
62
  }
50
63
  updated(e) {
51
64
  e.has("disabled") && this._handleDisabled(), e.has("status") && this._handleStatus();
@@ -53,65 +66,65 @@ const f = "pie-checkbox-group", u = "assistive-text", d = class d extends v(y(x)
53
66
  render() {
54
67
  const {
55
68
  name: e,
56
- isInline: i,
57
- assistiveText: r,
58
- status: s,
59
- disabled: a
60
- } = this, l = {
69
+ isInline: o,
70
+ assistiveText: n,
71
+ status: t,
72
+ disabled: i
73
+ } = this, a = {
61
74
  "c-checkboxGroup": !0,
62
- "c-checkboxGroup--inline": i
75
+ "c-checkboxGroup--inline": o
63
76
  };
64
- return n`
77
+ return p`
65
78
  <fieldset
66
79
  name=${b(e)}
67
- ?disabled=${a}
68
- aria-describedby="${b(r ? u : void 0)}"
80
+ ?disabled=${i}
81
+ aria-describedby="${b(n ? u : void 0)}"
69
82
  data-test-id="pie-checkbox-group-fieldset"
70
- class="${C(l)}"
83
+ class="${E(a)}"
71
84
  >
72
85
  ${this.renderWrappedLabel()}
73
86
  <slot></slot>
74
87
  </fieldset>
75
- ${r && n`
88
+ ${n && p`
76
89
  <pie-assistive-text
77
90
  id="${u}"
78
- variant=${s}
91
+ variant=${t}
79
92
  class="c-checkboxGroup-assistiveText"
80
93
  data-test-id="pie-checkbox-group-assistive-text">
81
- ${r}
94
+ ${n}
82
95
  </pie-assistive-text>`}
83
96
  `;
84
97
  }
85
98
  };
86
- d.styles = g(E);
87
- let t = d;
88
- o([
99
+ h.styles = v(O);
100
+ let s = h;
101
+ r([
89
102
  k()
90
- ], t.prototype, "_hasLabel");
91
- o([
92
- c({ type: String })
93
- ], t.prototype, "name");
94
- o([
95
- c({ type: String })
96
- ], t.prototype, "assistiveText");
97
- o([
98
- c({ type: Boolean })
99
- ], t.prototype, "isInline");
100
- o([
101
- c({ type: String }),
102
- _(f, S, p.status)
103
- ], t.prototype, "status");
104
- o([
105
- c({ type: Boolean, reflect: !0 })
106
- ], t.prototype, "disabled");
107
- o([
103
+ ], s.prototype, "_hasLabel");
104
+ r([
105
+ l({ type: String })
106
+ ], s.prototype, "name");
107
+ r([
108
+ l({ type: String })
109
+ ], s.prototype, "assistiveText");
110
+ r([
111
+ l({ type: Boolean })
112
+ ], s.prototype, "isInline");
113
+ r([
114
+ l({ type: String }),
115
+ G(x, T, d.status)
116
+ ], s.prototype, "status");
117
+ r([
118
+ l({ type: Boolean, reflect: !0 })
119
+ ], s.prototype, "disabled");
120
+ r([
108
121
  m({ selector: "pie-checkbox" })
109
- ], t.prototype, "_slottedChildren");
110
- G(f, t);
122
+ ], s.prototype, "_slottedChildren");
123
+ C(x, s);
111
124
  export {
112
- $ as ON_CHECKBOX_GROUP_DISABLED,
113
- T as ON_CHECKBOX_GROUP_ERROR,
114
- t as PieCheckboxGroup,
115
- p as defaultProps,
116
- S as statusTypes
125
+ L as ON_CHECKBOX_GROUP_DISABLED,
126
+ I as ON_CHECKBOX_GROUP_ERROR,
127
+ s as PieCheckboxGroup,
128
+ d as defaultProps,
129
+ T as statusTypes
117
130
  };
package/dist/react.d.ts CHANGED
@@ -2,7 +2,7 @@ import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
2
  import type { CSSResult } from 'lit';
3
3
  import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
4
4
  import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
5
- import type { LitElement } from 'lit';
5
+ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
6
6
  import type { PropertyValues } from 'lit';
7
7
  import * as React_2 from 'react';
8
8
  import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
@@ -80,7 +80,7 @@ declare class PieCheckboxGroup_2 extends PieCheckboxGroup_base implements Checkb
80
80
  static styles: CSSResult;
81
81
  }
82
82
 
83
- declare const PieCheckboxGroup_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
83
+ declare const PieCheckboxGroup_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof PieElement;
84
84
 
85
85
  declare type PieCheckboxGroupEvents = {
86
86
  onPieCheckboxGroupDisabled?: (event: CustomEvent) => void;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-checkbox-group",
3
3
  "description": "PIE Design System Checkbox Group built using Web Components",
4
- "version": "0.7.11",
4
+ "version": "0.8.0",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -39,14 +39,15 @@
39
39
  "license": "Apache-2.0",
40
40
  "devDependencies": {
41
41
  "@custom-elements-manifest/analyzer": "0.9.0",
42
- "@justeattakeaway/pie-checkbox": "0.14.1",
43
- "@justeattakeaway/pie-components-config": "0.18.0",
44
- "@justeattakeaway/pie-css": "0.15.1",
42
+ "@justeattakeaway/pie-checkbox": "0.15.0",
43
+ "@justeattakeaway/pie-components-config": "0.19.0",
44
+ "@justeattakeaway/pie-css": "0.16.0",
45
+ "@justeattakeaway/pie-monorepo-utils": "0.5.0",
45
46
  "cem-plugin-module-file-extensions": "0.0.5"
46
47
  },
47
48
  "dependencies": {
48
- "@justeattakeaway/pie-assistive-text": "0.8.4",
49
- "@justeattakeaway/pie-webc-core": "0.24.2"
49
+ "@justeattakeaway/pie-assistive-text": "0.9.0",
50
+ "@justeattakeaway/pie-webc-core": "0.25.0"
50
51
  },
51
52
  "volta": {
52
53
  "extends": "../../../package.json"
package/src/index.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import {
2
- LitElement, html, unsafeCSS, type PropertyValues, type TemplateResult,
2
+ html, unsafeCSS, type PropertyValues, type TemplateResult,
3
3
  } from 'lit';
4
+ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
4
5
  import { property, queryAssignedElements, state } from 'lit/decorators.js';
5
6
  import {
6
7
  RtlMixin,
@@ -33,7 +34,7 @@ const assistiveTextId = 'assistive-text';
33
34
  * @event {CustomEvent} pie-checkbox-group-disabled - triggered after the disabled state of the checkbox group changes.
34
35
  * @event {CustomEvent} pie-checkbox-group-error - triggered after the state of the checkbox group changes to error.
35
36
  */
36
- export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) implements CheckboxGroupProps {
37
+ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(PieElement)) implements CheckboxGroupProps {
37
38
  @state()
38
39
  private _hasLabel = false;
39
40