@justeattakeaway/pie-checkbox-group 1.2.1 → 1.2.2
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.
- package/README.md +2 -34
- package/dist/index.js +20 -20
- package/package.json +2 -2
- package/src/checkbox-group.scss +0 -4
package/README.md
CHANGED
|
@@ -109,41 +109,9 @@ import { PieFormLabel } from '@justeattakeaway/pie-webc/react/form-label.js';
|
|
|
109
109
|
|
|
110
110
|
### List items in a checkbox group
|
|
111
111
|
|
|
112
|
-
For a list-style layout (each option on its own row with primary and secondary text, and dividers between rows), wrap each `pie-checkbox` in a
|
|
112
|
+
For a list-style layout (each option on its own row with primary and secondary text, and dividers between rows), wrap each `pie-checkbox` in a `pie-list-item` with `interactionType="checkbox"` and place them inside the group. The checkbox goes in the item's `leading` (or `trailing`) slot, and you provide the label through the item's `primaryText` rather than as the checkbox's content.
|
|
113
113
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
- the item takes a `presentation` role, so the group still owns its checkbox descendants directly;
|
|
117
|
-
- the item's `primaryText` becomes the checkbox's accessible name, and its `secondaryText` and `metaText` its description (applied to the checkbox's internal input), so you do not pass label text to the checkbox itself;
|
|
118
|
-
- the visible item text is hidden from assistive technology so it is not announced twice;
|
|
119
|
-
- clicking anywhere on a row toggles that row's checkbox.
|
|
120
|
-
|
|
121
|
-
Set `disabled` on a `pie-list-item` to disable that row (alongside the checkbox's own `disabled`); disabling the group disables every row.
|
|
122
|
-
|
|
123
|
-
The group lays the items out as a single divided list; selection is independent per checkbox, exactly as in a standard checkbox group.
|
|
124
|
-
|
|
125
|
-
```js
|
|
126
|
-
import '@justeattakeaway/pie-webc/components/checkbox-group.js';
|
|
127
|
-
import '@justeattakeaway/pie-webc/components/checkbox.js';
|
|
128
|
-
import '@justeattakeaway/pie-webc/components/list-item.js';
|
|
129
|
-
```
|
|
130
|
-
|
|
131
|
-
```html
|
|
132
|
-
<pie-checkbox-group>
|
|
133
|
-
<pie-list-item selection-type="checkbox" primaryText="Cheese" secondaryText="Extra mature" metaText="Free">
|
|
134
|
-
<pie-checkbox slot="leading" name="cheese"></pie-checkbox>
|
|
135
|
-
</pie-list-item>
|
|
136
|
-
<pie-list-item selection-type="checkbox" primaryText="Pepperoni" secondaryText="Spicy">
|
|
137
|
-
<pie-checkbox slot="leading" name="pepperoni"></pie-checkbox>
|
|
138
|
-
</pie-list-item>
|
|
139
|
-
<pie-list-item selection-type="checkbox" disabled primaryText="Mushrooms">
|
|
140
|
-
<pie-checkbox slot="leading" name="mushrooms" disabled></pie-checkbox>
|
|
141
|
-
</pie-list-item>
|
|
142
|
-
<pie-list-item selection-type="checkbox" primaryText="Olives" metaText="£0.50">
|
|
143
|
-
<pie-checkbox slot="leading" name="olives"></pie-checkbox>
|
|
144
|
-
</pie-list-item>
|
|
145
|
-
</pie-checkbox-group>
|
|
146
|
-
```
|
|
114
|
+
For full usage details and code examples, see the [`pie-list` documentation](https://webc.pie.design/?path=/docs/components-list--overview).
|
|
147
115
|
|
|
148
116
|
## Questions and Support
|
|
149
117
|
|
package/dist/index.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { state as
|
|
1
|
+
import { LitElement as k, isServer as m, html as p, unsafeCSS as C } from "lit";
|
|
2
|
+
import { state as y, property as d } from "lit/decorators.js";
|
|
3
3
|
import { FormControlMixin as _, RtlMixin as G, parentDisabledContext as E, validPropertyValues as S, safeCustomElement as O } from "@justeattakeaway/pie-webc-core";
|
|
4
4
|
import { ifDefined as v } from "lit/directives/if-defined.js";
|
|
5
5
|
import { classMap as P } from "lit/directives/class-map.js";
|
|
6
6
|
import "@justeattakeaway/pie-assistive-text";
|
|
7
|
-
const u = class u extends
|
|
7
|
+
const u = class u extends k {
|
|
8
8
|
willUpdate() {
|
|
9
9
|
this.getAttribute("v") || this.setAttribute("v", u.v);
|
|
10
10
|
}
|
|
11
11
|
};
|
|
12
|
-
u.v = "1.2.
|
|
12
|
+
u.v = "1.2.2";
|
|
13
13
|
let x = u;
|
|
14
14
|
/**
|
|
15
15
|
* @license
|
|
@@ -69,12 +69,12 @@ class $ extends T {
|
|
|
69
69
|
var i, c;
|
|
70
70
|
super(e.context !== void 0 ? e.initialValue : o), this.onContextRequest = (r) => {
|
|
71
71
|
if (r.context !== this.context) return;
|
|
72
|
-
const
|
|
73
|
-
|
|
72
|
+
const l = r.contextTarget ?? r.composedPath()[0];
|
|
73
|
+
l !== this.host && (r.stopPropagation(), this.addCallback(r.callback, l, r.subscribe));
|
|
74
74
|
}, this.onProviderRequest = (r) => {
|
|
75
75
|
if (r.context !== this.context || (r.contextTarget ?? r.composedPath()[0]) === this.host) return;
|
|
76
|
-
const
|
|
77
|
-
for (const [b, { consumerHost: f }] of this.subscriptions)
|
|
76
|
+
const l = /* @__PURE__ */ new Set();
|
|
77
|
+
for (const [b, { consumerHost: f }] of this.subscriptions) l.has(b) || (l.add(b), f.dispatchEvent(new w(this.context, f, b, !0)));
|
|
78
78
|
r.stopPropagation();
|
|
79
79
|
}, this.host = t, e.context !== void 0 ? this.context = e.context : this.context = e, this.attachListeners(), (c = (i = this.host).addController) == null || c.call(i, this);
|
|
80
80
|
}
|
|
@@ -85,12 +85,12 @@ class $ extends T {
|
|
|
85
85
|
this.host.dispatchEvent(new L(this.context, this.host));
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
|
-
const R = "*,*:after,*:before{box-sizing:inherit}:host{display:block}
|
|
88
|
+
const R = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.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)}", D = ["default", "success", "error"], q = "pie-checkbox-group-disabled", A = "pie-checkbox-group-error", h = {
|
|
89
89
|
status: "default",
|
|
90
90
|
disabled: !1,
|
|
91
91
|
isInline: !1
|
|
92
92
|
};
|
|
93
|
-
var I = Object.defineProperty, V = Object.getOwnPropertyDescriptor,
|
|
93
|
+
var I = Object.defineProperty, V = Object.getOwnPropertyDescriptor, n = (s, t, e, o) => {
|
|
94
94
|
for (var i = o > 1 ? void 0 : o ? V(t, e) : t, c = s.length - 1, r; c >= 0; c--)
|
|
95
95
|
(r = s[c]) && (i = (o ? r(t, e, i) : r(i)) || i);
|
|
96
96
|
return o && i && I(t, e, i), i;
|
|
@@ -98,7 +98,7 @@ var I = Object.defineProperty, V = Object.getOwnPropertyDescriptor, l = (s, t, e
|
|
|
98
98
|
const B = "pie-checkbox-group", g = "assistive-text";
|
|
99
99
|
let a = class extends _(G(x)) {
|
|
100
100
|
constructor() {
|
|
101
|
-
super(...arguments), this._hasLabel = !1, this.isInline = h.isInline, this.status = h.status, this.disabled = h.disabled, this._disabledProvider =
|
|
101
|
+
super(...arguments), this._hasLabel = !1, this.isInline = h.isInline, this.status = h.status, this.disabled = h.disabled, this._disabledProvider = m ? void 0 : new $(this, { context: E, initialValue: h.disabled });
|
|
102
102
|
}
|
|
103
103
|
/**
|
|
104
104
|
* The checkboxes in the group. This uses a subtree query rather than immediate slotted
|
|
@@ -173,27 +173,27 @@ let a = class extends _(G(x)) {
|
|
|
173
173
|
`;
|
|
174
174
|
}
|
|
175
175
|
};
|
|
176
|
-
a.styles =
|
|
177
|
-
|
|
178
|
-
|
|
176
|
+
a.styles = C(R);
|
|
177
|
+
n([
|
|
178
|
+
y()
|
|
179
179
|
], a.prototype, "_hasLabel", 2);
|
|
180
|
-
|
|
180
|
+
n([
|
|
181
181
|
d({ type: String, reflect: !0 })
|
|
182
182
|
], a.prototype, "name", 2);
|
|
183
|
-
|
|
183
|
+
n([
|
|
184
184
|
d({ type: String })
|
|
185
185
|
], a.prototype, "assistiveText", 2);
|
|
186
|
-
|
|
186
|
+
n([
|
|
187
187
|
d({ type: Boolean })
|
|
188
188
|
], a.prototype, "isInline", 2);
|
|
189
|
-
|
|
189
|
+
n([
|
|
190
190
|
d({ type: String }),
|
|
191
191
|
S(B, D, h.status)
|
|
192
192
|
], a.prototype, "status", 2);
|
|
193
|
-
|
|
193
|
+
n([
|
|
194
194
|
d({ type: Boolean, reflect: !0 })
|
|
195
195
|
], a.prototype, "disabled", 2);
|
|
196
|
-
a =
|
|
196
|
+
a = n([
|
|
197
197
|
O("pie-checkbox-group")
|
|
198
198
|
], a);
|
|
199
199
|
export {
|
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": "1.2.
|
|
4
|
+
"version": "1.2.2",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@justeattakeaway/pie-checkbox": "1.4.1",
|
|
47
47
|
"@justeattakeaway/pie-components-config": "0.21.3",
|
|
48
|
-
"@justeattakeaway/pie-css": "1.3.
|
|
48
|
+
"@justeattakeaway/pie-css": "1.3.3",
|
|
49
49
|
"@justeattakeaway/pie-monorepo-utils": "0.9.8"
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
package/src/checkbox-group.scss
CHANGED
|
@@ -2,10 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
:host {
|
|
4
4
|
display: block;
|
|
5
|
-
|
|
6
|
-
// Applies the divider between adjacent `pie-list-item`s when checkboxes are wrapped in them.
|
|
7
|
-
// Direct-child checkboxes are unaffected (the selector only matches `pie-list-item`).
|
|
8
|
-
@include p.list-item-divider;
|
|
9
5
|
}
|
|
10
6
|
|
|
11
7
|
.c-checkboxGroup {
|