@justeattakeaway/pie-checkbox-group 0.4.0 → 0.5.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 (9) hide show
  1. package/README.md +7 -2
  2. package/custom-elements.json +42 -14
  3. package/dist/index.d.ts +16 -6
  4. package/dist/index.js +75 -55
  5. package/dist/react.d.ts +16 -6
  6. package/package.json +1 -1
  7. package/src/checkbox-group.scss +19 -18
  8. package/src/defs.ts +0 -5
  9. package/src/index.ts +29 -7
package/README.md CHANGED
@@ -76,12 +76,10 @@ import { PieCheckboxGroup } from '@justeattakeaway/pie-checkbox-group/dist/react
76
76
  | Property | Type | Default | Description |
77
77
  |---|---|---|---|
78
78
  | `name` | string | - | The name associated with the group. |
79
- | `label` | string | - | The label value of the component |
80
79
  | `disabled` | boolean | - | Same as the HTML disabled attribute - indicates whether or not the checkbox group is disabled. |
81
80
  | `assistiveText` | `string` | - | Allows assistive text to be displayed below the checkbox group. |
82
81
  | `status` | `'default'`, `'error'`, `'success'` | `'default'` | The status of the checkbox group / assistive text. If you use `status` you must provide an `assistiveText` prop value for accessibility purposes. |
83
82
 
84
-
85
83
  In your markup or JSX, you can then use these to set the properties for the `pie-checkbox-group` component:
86
84
 
87
85
  ```html
@@ -100,6 +98,13 @@ In your markup or JSX, you can then use these to set the properties for the `pie
100
98
  </PieCheckboxGroup>
101
99
  ```
102
100
 
101
+ ## Slots
102
+
103
+ | Slot | Description |
104
+ |---|---|
105
+ | `default` | Pass PieCheckbox components as direct children for the CheckboxGroup. |
106
+ | `label` | Pass PieFormLabel to render the checkbox group label. |
107
+
103
108
  ## Events
104
109
  | Event | Type | Description |
105
110
  |-------|------|-------------|
package/custom-elements.json CHANGED
@@ -93,26 +93,29 @@
93
93
  {
94
94
  "description": "Default slot",
95
95
  "name": ""
96
+ },
97
+ {
98
+ "description": "The label slot",
99
+ "name": "label"
96
100
  }
97
101
  ],
98
102
  "members": [
99
103
  {
100
104
  "kind": "field",
101
- "name": "name",
105
+ "name": "hasLabel",
102
106
  "type": {
103
- "text": "CheckboxGroupProps['name'] | undefined"
107
+ "text": "boolean"
104
108
  },
105
- "privacy": "public",
106
- "attribute": "name"
109
+ "default": "false"
107
110
  },
108
111
  {
109
112
  "kind": "field",
110
- "name": "label",
113
+ "name": "name",
111
114
  "type": {
112
- "text": "CheckboxGroupProps['label'] | undefined"
115
+ "text": "CheckboxGroupProps['name'] | undefined"
113
116
  },
114
117
  "privacy": "public",
115
- "attribute": "label"
118
+ "attribute": "name"
116
119
  },
117
120
  {
118
121
  "kind": "field",
@@ -149,6 +152,13 @@
149
152
  "text": "Array<HTMLElement> | undefined"
150
153
  }
151
154
  },
155
+ {
156
+ "kind": "field",
157
+ "name": "_labelSlot",
158
+ "type": {
159
+ "text": "Array<HTMLElement>"
160
+ }
161
+ },
152
162
  {
153
163
  "kind": "method",
154
164
  "name": "_handleDisabled",
@@ -168,6 +178,31 @@
168
178
  "text": "void"
169
179
  }
170
180
  }
181
+ },
182
+ {
183
+ "kind": "method",
184
+ "name": "handleSlotChange",
185
+ "privacy": "private",
186
+ "parameters": [
187
+ {
188
+ "name": "e",
189
+ "type": {
190
+ "text": "{ target: HTMLSlotElement; }"
191
+ }
192
+ }
193
+ ],
194
+ "description": "Function that updates the local `hasLabel` state in case\nwhen the label slot receives content."
195
+ },
196
+ {
197
+ "kind": "method",
198
+ "name": "renderWrappedLabel",
199
+ "privacy": "private",
200
+ "return": {
201
+ "type": {
202
+ "text": "TemplateResult | typeof nothing"
203
+ }
204
+ },
205
+ "description": "Template for the label slot to correctly wrap it into a legend element when it has content.\nCalled within the main render function."
171
206
  }
172
207
  ],
173
208
  "events": [
@@ -194,13 +229,6 @@
194
229
  },
195
230
  "fieldName": "name"
196
231
  },
197
- {
198
- "name": "label",
199
- "type": {
200
- "text": "CheckboxGroupProps['label'] | undefined"
201
- },
202
- "fieldName": "label"
203
- },
204
232
  {
205
233
  "name": "assistiveText",
206
234
  "type": {
package/dist/index.d.ts CHANGED
@@ -5,17 +5,13 @@ import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
5
5
  import type { LitElement } from 'lit';
6
6
  import type { PropertyValues } from 'lit';
7
7
  import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
8
- import type { TemplateResult } from 'lit-html';
8
+ import type { TemplateResult } from 'lit';
9
9
 
10
10
  export declare interface CheckboxGroupProps {
11
11
  /**
12
12
  * The name associated with the group.
13
13
  */
14
14
  name?: string;
15
- /**
16
- * The label value of the component
17
- */
18
- label?: string;
19
15
  /**
20
16
  * Inline (horizontal) positioning of checkbox items
21
17
  */
@@ -50,19 +46,33 @@ export declare const ON_CHECKBOX_GROUP_ERROR = "pie-checkbox-group-error";
50
46
  /**
51
47
  * @tagname pie-checkbox-group
52
48
  * @slot - Default slot
49
+ * @slot label - The label slot
53
50
  * @event {CustomEvent} pie-checkbox-group-disabled - triggered after the disabled state of the checkbox group changes.
54
51
  * @event {CustomEvent} pie-checkbox-group-error - triggered after the state of the checkbox group changes to error.
55
52
  */
56
53
  export declare class PieCheckboxGroup extends PieCheckboxGroup_base implements CheckboxGroupProps {
54
+ hasLabel: boolean;
57
55
  name?: CheckboxGroupProps['name'];
58
- label?: CheckboxGroupProps['label'];
59
56
  assistiveText?: CheckboxGroupProps['assistiveText'];
60
57
  isInline: boolean;
61
58
  status: "default" | "error" | "success";
62
59
  disabled: boolean;
63
60
  _slottedChildren: Array<HTMLElement> | undefined;
61
+ _labelSlot: Array<HTMLElement>;
64
62
  private _handleDisabled;
65
63
  private _handleStatus;
64
+ /**
65
+ * Function that updates the local `hasLabel` state in case
66
+ * when the label slot receives content.
67
+ * @private
68
+ */
69
+ private handleSlotChange;
70
+ /**
71
+ * Template for the label slot to correctly wrap it into a legend element when it has content.
72
+ * Called within the main render function.
73
+ * @private
74
+ */
75
+ private renderWrappedLabel;
66
76
  protected updated(_changedProperties: PropertyValues<this>): void;
67
77
  render(): TemplateResult<1>;
68
78
  static styles: CSSResult;
package/dist/index.js CHANGED
@@ -1,28 +1,28 @@
1
- import { LitElement as x, html as d, unsafeCSS as g } from "lit";
2
- import { property as r, queryAssignedElements as v } from "lit/decorators.js";
3
- import { FormControlMixin as m, RtlMixin as k, validPropertyValues as y, defineCustomElement as G } from "@justeattakeaway/pie-webc-core";
1
+ import { LitElement as x, html as n, unsafeCSS as g } from "lit";
2
+ import { state as k, property as l, queryAssignedElements as u } from "lit/decorators.js";
3
+ import { FormControlMixin as v, RtlMixin as m, validPropertyValues as y, defineCustomElement as G } from "@justeattakeaway/pie-webc-core";
4
4
  import { ifDefined as b } from "lit/directives/if-defined.js";
5
5
  import { classMap as _ } from "lit/directives/class-map.js";
6
6
  import "@justeattakeaway/pie-assistive-text";
7
- const C = `*,*: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:not(.c-checkboxGroup--inline) ::slotted(pie-checkbox:not(:first-child)){margin-block-start:var(--checkbox-group-offset)}.c-checkboxGroup--inline{display:flex;align-items:flex-start;flex-wrap:wrap}.c-checkboxGroup-label{max-width:100%;white-space:normal;padding:0;font-size:calc(var(--dt-font-body-strong-s-size) * 1px);line-height:calc(var(--dt-font-body-strong-s-line-height) * 1px);font-weight:var(--dt-font-body-strong-s-weight);color:var(--dt-color-content-default);margin-block-end:var(--checkbox-group-label-offset)}.c-checkboxGroup.c-checkboxGroup--inline{margin:calc(-1 * var(--checkbox-group-offset--inline) / 2) calc(-1 * var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline ::slotted(pie-checkbox){margin:calc(var(--checkbox-group-offset--inline) / 2) calc(var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline .c-checkboxGroup-label{margin:0 calc(var(--checkbox-group-offset--inline) / 2) calc(-1 * (var(--checkbox-group-offset--inline) / 2 - var(--checkbox-group-label-offset)))}
8
- `, E = ["default", "success", "error"], w = "pie-checkbox-group-disabled", O = "pie-checkbox-group-error", n = {
7
+ const C = `*,*: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)}
8
+ `, E = ["default", "success", "error"], S = "pie-checkbox-group-disabled", O = "pie-checkbox-group-error", p = {
9
9
  status: "default",
10
10
  disabled: !1,
11
11
  isInline: !1
12
12
  };
13
- var S = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (p, e, t, c) => {
14
- for (var s = c > 1 ? void 0 : c ? $(e, t) : e, a = p.length - 1, l; a >= 0; a--)
15
- (l = p[a]) && (s = (c ? l(e, t, s) : l(s)) || s);
16
- return c && s && S(e, t, s), s;
13
+ var $ = Object.defineProperty, T = Object.getOwnPropertyDescriptor, a = (d, e, t, i) => {
14
+ for (var o = i > 1 ? void 0 : i ? T(e, t) : e, c = d.length - 1, r; c >= 0; c--)
15
+ (r = d[c]) && (o = (i ? r(e, t, o) : r(o)) || o);
16
+ return i && o && $(e, t, o), o;
17
17
  };
18
- const u = "pie-checkbox-group", h = "assistive-text";
19
- class o extends m(k(x)) {
18
+ const f = "pie-checkbox-group", h = "assistive-text";
19
+ class s extends v(m(x)) {
20
20
  constructor() {
21
- super(...arguments), this.isInline = n.isInline, this.status = n.status, this.disabled = n.disabled;
21
+ super(...arguments), this.hasLabel = !1, this.isInline = p.isInline, this.status = p.status, this.disabled = p.disabled;
22
22
  }
23
23
  _handleDisabled() {
24
24
  var e;
25
- (e = this._slottedChildren) == null || e.forEach((t) => t.dispatchEvent(new CustomEvent(w, {
25
+ (e = this._slottedChildren) == null || e.forEach((t) => t.dispatchEvent(new CustomEvent(S, {
26
26
  bubbles: !1,
27
27
  composed: !1,
28
28
  detail: { disabled: this.disabled }
@@ -34,70 +34,90 @@ class o extends m(k(x)) {
34
34
  t.setAttribute("status", this.status), this.status === "error" && this.assistiveText && (t.setAttribute("assistiveText", this.assistiveText), t.dispatchEvent(new CustomEvent(O, { bubbles: !1, composed: !1, detail: { error: !0 } })));
35
35
  });
36
36
  }
37
+ /**
38
+ * Function that updates the local `hasLabel` state in case
39
+ * when the label slot receives content.
40
+ * @private
41
+ */
42
+ handleSlotChange(e) {
43
+ const t = e.target.assignedNodes({ flatten: !0 });
44
+ this.hasLabel = t.length > 0;
45
+ }
46
+ /**
47
+ * Template for the label slot to correctly wrap it into a legend element when it has content.
48
+ * Called within the main render function.
49
+ * @private
50
+ */
51
+ renderWrappedLabel() {
52
+ return this.hasLabel ? n`<legend><slot name='label' @slotchange=${this.handleSlotChange}></slot></legend>` : n`<slot name='label' @slotchange=${this.handleSlotChange}></slot>`;
53
+ }
37
54
  updated(e) {
38
55
  e.has("disabled") && this._handleDisabled(), e.has("status") && this._handleStatus();
39
56
  }
40
57
  render() {
41
58
  const {
42
59
  name: e,
43
- label: t,
44
- isInline: c,
45
- assistiveText: s,
46
- status: a,
47
- disabled: l
48
- } = this, f = {
60
+ isInline: t,
61
+ assistiveText: i,
62
+ status: o,
63
+ disabled: c
64
+ } = this, r = {
49
65
  "c-checkboxGroup": !0,
50
- "c-checkboxGroup--inline": c
66
+ "c-checkboxGroup--inline": t
51
67
  };
52
- return d`
68
+ return n`
53
69
  <fieldset
54
70
  name=${b(e)}
55
- ?disabled=${l}
56
- aria-describedby="${b(s ? h : void 0)}"
71
+ ?disabled=${c}
72
+ aria-describedby="${b(i ? h : void 0)}"
57
73
  data-test-id="pie-checkbox-group"
58
- class="${_(f)}"
74
+ class="${_(r)}"
59
75
  >
60
- ${t && d`<legend class="c-checkboxGroup-label">${t}</legend>`}
76
+ ${this.renderWrappedLabel()}
61
77
  <slot></slot>
62
78
  </fieldset>
63
- ${s && d`
79
+ ${i && n`
64
80
  <pie-assistive-text
65
81
  id="${h}"
66
- variant=${a}
82
+ variant=${o}
83
+ class="c-checkboxGroup-assistiveText"
67
84
  data-test-id="pie-checkbox-group-assistive-text">
68
- ${s}
85
+ ${i}
69
86
  </pie-assistive-text>`}
70
87
  `;
71
88
  }
72
89
  }
73
- o.styles = g(C);
74
- i([
75
- r({ type: String })
76
- ], o.prototype, "name", 2);
77
- i([
78
- r({ type: String })
79
- ], o.prototype, "label", 2);
80
- i([
81
- r({ type: String })
82
- ], o.prototype, "assistiveText", 2);
83
- i([
84
- r({ type: Boolean })
85
- ], o.prototype, "isInline", 2);
86
- i([
87
- r({ type: String }),
88
- y(u, E, n.status)
89
- ], o.prototype, "status", 2);
90
- i([
91
- r({ type: Boolean, reflect: !0 })
92
- ], o.prototype, "disabled", 2);
93
- i([
94
- v({ selector: "pie-checkbox" })
95
- ], o.prototype, "_slottedChildren", 2);
96
- G(u, o);
90
+ s.styles = g(C);
91
+ a([
92
+ k()
93
+ ], s.prototype, "hasLabel", 2);
94
+ a([
95
+ l({ type: String })
96
+ ], s.prototype, "name", 2);
97
+ a([
98
+ l({ type: String })
99
+ ], s.prototype, "assistiveText", 2);
100
+ a([
101
+ l({ type: Boolean })
102
+ ], s.prototype, "isInline", 2);
103
+ a([
104
+ l({ type: String }),
105
+ y(f, E, p.status)
106
+ ], s.prototype, "status", 2);
107
+ a([
108
+ l({ type: Boolean, reflect: !0 })
109
+ ], s.prototype, "disabled", 2);
110
+ a([
111
+ u({ selector: "pie-checkbox" })
112
+ ], s.prototype, "_slottedChildren", 2);
113
+ a([
114
+ u({ slot: "label" })
115
+ ], s.prototype, "_labelSlot", 2);
116
+ G(f, s);
97
117
  export {
98
- w as ON_CHECKBOX_GROUP_DISABLED,
118
+ S as ON_CHECKBOX_GROUP_DISABLED,
99
119
  O as ON_CHECKBOX_GROUP_ERROR,
100
- o as PieCheckboxGroup,
101
- n as defaultProps,
120
+ s as PieCheckboxGroup,
121
+ p as defaultProps,
102
122
  E as statusTypes
103
123
  };
package/dist/react.d.ts CHANGED
@@ -6,17 +6,13 @@ import type { LitElement } from 'lit';
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';
9
- import type { TemplateResult } from 'lit-html';
9
+ import type { TemplateResult } from 'lit';
10
10
 
11
11
  export declare interface CheckboxGroupProps {
12
12
  /**
13
13
  * The name associated with the group.
14
14
  */
15
15
  name?: string;
16
- /**
17
- * The label value of the component
18
- */
19
- label?: string;
20
16
  /**
21
17
  * Inline (horizontal) positioning of checkbox items
22
18
  */
@@ -53,19 +49,33 @@ export declare const PieCheckboxGroup: React_2.ForwardRefExoticComponent<Checkbo
53
49
  /**
54
50
  * @tagname pie-checkbox-group
55
51
  * @slot - Default slot
52
+ * @slot label - The label slot
56
53
  * @event {CustomEvent} pie-checkbox-group-disabled - triggered after the disabled state of the checkbox group changes.
57
54
  * @event {CustomEvent} pie-checkbox-group-error - triggered after the state of the checkbox group changes to error.
58
55
  */
59
56
  declare class PieCheckboxGroup_2 extends PieCheckboxGroup_base implements CheckboxGroupProps {
57
+ hasLabel: boolean;
60
58
  name?: CheckboxGroupProps['name'];
61
- label?: CheckboxGroupProps['label'];
62
59
  assistiveText?: CheckboxGroupProps['assistiveText'];
63
60
  isInline: boolean;
64
61
  status: "default" | "error" | "success";
65
62
  disabled: boolean;
66
63
  _slottedChildren: Array<HTMLElement> | undefined;
64
+ _labelSlot: Array<HTMLElement>;
67
65
  private _handleDisabled;
68
66
  private _handleStatus;
67
+ /**
68
+ * Function that updates the local `hasLabel` state in case
69
+ * when the label slot receives content.
70
+ * @private
71
+ */
72
+ private handleSlotChange;
73
+ /**
74
+ * Template for the label slot to correctly wrap it into a legend element when it has content.
75
+ * Called within the main render function.
76
+ * @private
77
+ */
78
+ private renderWrappedLabel;
69
79
  protected updated(_changedProperties: PropertyValues<this>): void;
70
80
  render(): TemplateResult<1>;
71
81
  static styles: CSSResult;
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.4.0",
4
+ "version": "0.5.0",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
package/src/checkbox-group.scss CHANGED
@@ -14,9 +14,14 @@
14
14
  display: flex;
15
15
  }
16
16
 
17
+ ::slotted(pie-form-label) {
18
+ display: block;
19
+ padding-block-end: var(--checkbox-group-label-offset);
20
+ }
21
+
17
22
  &:not(.c-checkboxGroup--inline) {
18
- ::slotted(pie-checkbox:not(:first-child)) {
19
- margin-block-start: var(--checkbox-group-offset);
23
+ ::slotted(pie-checkbox:not(:last-child)) {
24
+ margin-block-end: var(--checkbox-group-offset);
20
25
  }
21
26
  }
22
27
  }
@@ -28,26 +33,22 @@
28
33
  flex-wrap: wrap;
29
34
  }
30
35
 
31
- .c-checkboxGroup-label {
32
- max-width: 100%;
33
- white-space: normal;
34
- padding: 0;
35
- font-size: p.font-size(--dt-font-body-strong-s-size);
36
- line-height: p.line-height(--dt-font-body-strong-s-line-height);
37
- font-weight: var(--dt-font-body-strong-s-weight);
38
- color: var(--dt-color-content-default);
39
-
40
- margin-block-end: var(--checkbox-group-label-offset);
41
- }
42
-
43
36
  .c-checkboxGroup.c-checkboxGroup--inline {
44
- margin: calc(-1 * var(--checkbox-group-offset--inline) / 2) calc(-1 * var(--checkbox-group-offset--inline) / 2);
37
+ margin: calc(-1 * var(--checkbox-group-offset) / 2) calc(-1 * var(--checkbox-group-offset--inline) / 2);
45
38
 
46
39
  ::slotted(pie-checkbox) {
47
- margin: calc(var(--checkbox-group-offset--inline) / 2) calc(var(--checkbox-group-offset--inline) / 2);
40
+ margin: calc(var(--checkbox-group-offset) / 2) calc(var(--checkbox-group-offset--inline) / 2);
48
41
  }
49
42
 
50
- .c-checkboxGroup-label {
51
- margin: 0 calc(var(--checkbox-group-offset--inline) / 2) calc(-1 * (var(--checkbox-group-offset--inline) / 2 - var(--checkbox-group-label-offset)));
43
+ ::slotted(pie-form-label) {
44
+ margin: 0 calc(var(--checkbox-group-offset--inline) / 2) calc(-1 * (var(--checkbox-group-offset) / 2 - var(--checkbox-group-label-offset)));
45
+ padding-block-end: 0;
52
46
  }
53
47
  }
48
+
49
+ .c-checkboxGroup-assistiveText {
50
+ --checkbox-group-assistive-text-offset: var(--dt-spacing-a);
51
+
52
+ display: block;
53
+ margin-block-start: var(--checkbox-group-assistive-text-offset);
54
+ }
package/src/defs.ts CHANGED
@@ -8,11 +8,6 @@ export interface CheckboxGroupProps {
8
8
  */
9
9
  name?: string;
10
10
 
11
- /**
12
- * The label value of the component
13
- */
14
- label?: string;
15
-
16
11
  /**
17
12
  * Inline (horizontal) positioning of checkbox items
18
13
  */
package/src/index.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
- LitElement, html, unsafeCSS, PropertyValues,
2
+ LitElement, html, unsafeCSS, PropertyValues, nothing, type TemplateResult,
3
3
  } from 'lit';
4
- import { property, queryAssignedElements } from 'lit/decorators.js';
4
+ import { property, queryAssignedElements, state } from 'lit/decorators.js';
5
5
  import {
6
6
  RtlMixin,
7
7
  defineCustomElement,
@@ -29,15 +29,16 @@ const assistiveTextId = 'assistive-text';
29
29
  /**
30
30
  * @tagname pie-checkbox-group
31
31
  * @slot - Default slot
32
+ * @slot label - The label slot
32
33
  * @event {CustomEvent} pie-checkbox-group-disabled - triggered after the disabled state of the checkbox group changes.
33
34
  * @event {CustomEvent} pie-checkbox-group-error - triggered after the state of the checkbox group changes to error.
34
35
  */
35
36
  export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) implements CheckboxGroupProps {
36
- @property({ type: String })
37
- public name?: CheckboxGroupProps['name'];
37
+ @state()
38
+ hasLabel = false;
38
39
 
39
40
  @property({ type: String })
40
- public label?: CheckboxGroupProps['label'];
41
+ public name?: CheckboxGroupProps['name'];
41
42
 
42
43
  @property({ type: String })
43
44
  public assistiveText?: CheckboxGroupProps['assistiveText'];
@@ -54,6 +55,8 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp
54
55
 
55
56
  @queryAssignedElements({ selector: 'pie-checkbox' }) _slottedChildren: Array<HTMLElement> | undefined;
56
57
 
58
+ @queryAssignedElements({ slot: 'label' }) _labelSlot!: Array<HTMLElement>;
59
+
57
60
  private _handleDisabled () : void {
58
61
  this._slottedChildren?.forEach((child) => child.dispatchEvent(new CustomEvent(ON_CHECKBOX_GROUP_DISABLED, {
59
62
  bubbles: false, composed: false, detail: { disabled: this.disabled },
@@ -71,6 +74,25 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp
71
74
  });
72
75
  }
73
76
 
77
+ /**
78
+ * Function that updates the local `hasLabel` state in case
79
+ * when the label slot receives content.
80
+ * @private
81
+ */
82
+ private handleSlotChange (e: { target: HTMLSlotElement; }) {
83
+ const childNodes = e.target.assignedNodes({ flatten: true });
84
+ this.hasLabel = childNodes.length > 0;
85
+ }
86
+
87
+ /**
88
+ * Template for the label slot to correctly wrap it into a legend element when it has content.
89
+ * Called within the main render function.
90
+ * @private
91
+ */
92
+ private renderWrappedLabel (): TemplateResult | typeof nothing {
93
+ return this.hasLabel ? html`<legend><slot name='label' @slotchange=${this.handleSlotChange}></slot></legend>` : html`<slot name='label' @slotchange=${this.handleSlotChange}></slot>`;
94
+ }
95
+
74
96
  protected updated (_changedProperties: PropertyValues<this>): void {
75
97
  if (_changedProperties.has('disabled')) {
76
98
  this._handleDisabled();
@@ -84,7 +106,6 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp
84
106
  render () {
85
107
  const {
86
108
  name,
87
- label,
88
109
  isInline,
89
110
  assistiveText,
90
111
  status,
@@ -104,13 +125,14 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp
104
125
  data-test-id="pie-checkbox-group"
105
126
  class="${classMap(classes)}"
106
127
  >
107
- ${label && html`<legend class="c-checkboxGroup-label">${label}</legend>`}
128
+ ${this.renderWrappedLabel()}
108
129
  <slot></slot>
109
130
  </fieldset>
110
131
  ${assistiveText && html`
111
132
  <pie-assistive-text
112
133
  id="${assistiveTextId}"
113
134
  variant=${status}
135
+ class="c-checkboxGroup-assistiveText"
114
136
  data-test-id="pie-checkbox-group-assistive-text">
115
137
  ${assistiveText}
116
138
  </pie-assistive-text>`}