@justeattakeaway/pie-checkbox 1.0.22 → 1.1.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.
- package/README.md +21 -0
- package/custom-elements.json +43 -1
- package/dist/index.d.ts +14 -0
- package/dist/index.js +101 -85
- package/dist/react.d.ts +14 -0
- package/dist/react.js +7 -5
- package/package.json +3 -3
- package/src/checkbox.scss +25 -0
- package/src/defs.ts +15 -0
- package/src/index.ts +15 -1
package/README.md
CHANGED
|
@@ -44,6 +44,8 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
|
|
|
44
44
|
| `indeterminate` | `-` | Indicates whether the checkbox visually shows a horizontal line in the box instead of a check/tick. It has no impact on whether the checkbox's value is used in a form submission. That is decided by the checked state, regardless of the indeterminate state. | `false` |
|
|
45
45
|
| `assistiveText` | `-` | Allows assistive text to be displayed below the checkbox element. | `-` |
|
|
46
46
|
| `status` | `"default"`, `"error"`, `"success"` | The status of the checkbox component / assistive text. If you use `status` you must provide an `assistiveText` prop value for accessibility purposes. | `"default"` |
|
|
47
|
+
| `labelPosition` | `"trailing"`, `"leading"` | The position of the label relative to the checkbox input. `trailing` places the label after the checkbox, `leading` places it before. | `"trailing"` |
|
|
48
|
+
| `labelFit` | `"hug"`, `"fill"` | Controls how the label container is sized. `hug` wraps the content, `fill` stretches to fill the available width. | `"hug"` |
|
|
47
49
|
|
|
48
50
|
### Slots
|
|
49
51
|
|
|
@@ -122,6 +124,19 @@ import '@justeattakeaway/pie-webc/components/checkbox.js';
|
|
|
122
124
|
<pie-checkbox name="mycheckbox" aria-label="Label"></pie-checkbox>
|
|
123
125
|
```
|
|
124
126
|
|
|
127
|
+
**Label positioning and fit:**
|
|
128
|
+
|
|
129
|
+
```html
|
|
130
|
+
<!-- Leading label (label appears before the checkbox) -->
|
|
131
|
+
<pie-checkbox name="mycheckbox" labelPosition="leading">Label</pie-checkbox>
|
|
132
|
+
|
|
133
|
+
<!-- Fill label (label container stretches to fill available width) -->
|
|
134
|
+
<pie-checkbox name="mycheckbox" labelFit="fill">Label</pie-checkbox>
|
|
135
|
+
|
|
136
|
+
<!-- Combined leading + fill -->
|
|
137
|
+
<pie-checkbox name="mycheckbox" labelPosition="leading" labelFit="fill">Label</pie-checkbox>
|
|
138
|
+
```
|
|
139
|
+
|
|
125
140
|
**For React Applications:**
|
|
126
141
|
|
|
127
142
|
```jsx
|
|
@@ -131,6 +146,12 @@ import { PieCheckbox } from '@justeattakeaway/pie-webc/react/checkbox.js';
|
|
|
131
146
|
|
|
132
147
|
// Always use aria-label if you are not passing a label
|
|
133
148
|
<PieCheckbox name="mycheckbox" aria-label="Label"></PieCheckbox>
|
|
149
|
+
|
|
150
|
+
// Leading label
|
|
151
|
+
<PieCheckbox name="mycheckbox" labelPosition="leading">Label</PieCheckbox>
|
|
152
|
+
|
|
153
|
+
// Fill label
|
|
154
|
+
<PieCheckbox name="mycheckbox" labelFit="fill">Label</PieCheckbox>
|
|
134
155
|
```
|
|
135
156
|
|
|
136
157
|
### Rich Label Slot Content
|
package/custom-elements.json
CHANGED
|
@@ -20,13 +20,29 @@
|
|
|
20
20
|
},
|
|
21
21
|
"default": "['default', 'success', 'error']"
|
|
22
22
|
},
|
|
23
|
+
{
|
|
24
|
+
"kind": "variable",
|
|
25
|
+
"name": "labelPositions",
|
|
26
|
+
"type": {
|
|
27
|
+
"text": "['leading', 'trailing']"
|
|
28
|
+
},
|
|
29
|
+
"default": "['leading', 'trailing']"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"kind": "variable",
|
|
33
|
+
"name": "labelFits",
|
|
34
|
+
"type": {
|
|
35
|
+
"text": "['hug', 'fill']"
|
|
36
|
+
},
|
|
37
|
+
"default": "['hug', 'fill']"
|
|
38
|
+
},
|
|
23
39
|
{
|
|
24
40
|
"kind": "variable",
|
|
25
41
|
"name": "defaultProps",
|
|
26
42
|
"type": {
|
|
27
43
|
"text": "DefaultProps"
|
|
28
44
|
},
|
|
29
|
-
"default": "{\n // a default value for the html <input type=\"checkbox\" /> value attribute.\n // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n value: 'on',\n disabled: false,\n defaultChecked: false,\n checked: false,\n indeterminate: false,\n required: false,\n status: 'default',\n}"
|
|
45
|
+
"default": "{\n // a default value for the html <input type=\"checkbox\" /> value attribute.\n // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n value: 'on',\n disabled: false,\n defaultChecked: false,\n checked: false,\n indeterminate: false,\n required: false,\n status: 'default',\n labelPosition: 'trailing',\n labelFit: 'hug',\n}"
|
|
30
46
|
}
|
|
31
47
|
],
|
|
32
48
|
"exports": [
|
|
@@ -38,6 +54,22 @@
|
|
|
38
54
|
"module": "src/defs.js"
|
|
39
55
|
}
|
|
40
56
|
},
|
|
57
|
+
{
|
|
58
|
+
"kind": "js",
|
|
59
|
+
"name": "labelPositions",
|
|
60
|
+
"declaration": {
|
|
61
|
+
"name": "labelPositions",
|
|
62
|
+
"module": "src/defs.js"
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"kind": "js",
|
|
67
|
+
"name": "labelFits",
|
|
68
|
+
"declaration": {
|
|
69
|
+
"name": "labelFits",
|
|
70
|
+
"module": "src/defs.js"
|
|
71
|
+
}
|
|
72
|
+
},
|
|
41
73
|
{
|
|
42
74
|
"kind": "js",
|
|
43
75
|
"name": "defaultProps",
|
|
@@ -149,6 +181,16 @@
|
|
|
149
181
|
"name": "status",
|
|
150
182
|
"privacy": "public"
|
|
151
183
|
},
|
|
184
|
+
{
|
|
185
|
+
"kind": "field",
|
|
186
|
+
"name": "labelPosition",
|
|
187
|
+
"privacy": "public"
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
"kind": "field",
|
|
191
|
+
"name": "labelFit",
|
|
192
|
+
"privacy": "public"
|
|
193
|
+
},
|
|
152
194
|
{
|
|
153
195
|
"kind": "field",
|
|
154
196
|
"name": "_abortController",
|
package/dist/index.d.ts
CHANGED
|
@@ -43,12 +43,24 @@ export declare interface CheckboxProps {
|
|
|
43
43
|
* The status of the checkbox component / assistive text. Can be default, success or error.
|
|
44
44
|
*/
|
|
45
45
|
status?: typeof statusTypes[number];
|
|
46
|
+
/**
|
|
47
|
+
* The position of the label relative to the checkbox input.
|
|
48
|
+
*/
|
|
49
|
+
labelPosition?: typeof labelPositions[number];
|
|
50
|
+
/**
|
|
51
|
+
* Controls how the label container is sized. `hug` wraps the content, `fill` stretches to fill available width.
|
|
52
|
+
*/
|
|
53
|
+
labelFit?: typeof labelFits[number];
|
|
46
54
|
}
|
|
47
55
|
|
|
48
56
|
export declare type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, 'name' | 'assistiveText'>>;
|
|
49
57
|
|
|
50
58
|
export declare const defaultProps: DefaultProps;
|
|
51
59
|
|
|
60
|
+
export declare const labelFits: readonly ["hug", "fill"];
|
|
61
|
+
|
|
62
|
+
export declare const labelPositions: readonly ["leading", "trailing"];
|
|
63
|
+
|
|
52
64
|
/**
|
|
53
65
|
* @tagname pie-checkbox
|
|
54
66
|
* @slot - Default slot
|
|
@@ -68,6 +80,8 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxPro
|
|
|
68
80
|
private _checkbox;
|
|
69
81
|
assistiveText: CheckboxProps['assistiveText'];
|
|
70
82
|
status: "default" | "success" | "error";
|
|
83
|
+
labelPosition: "leading" | "trailing";
|
|
84
|
+
labelFit: "hug" | "fill";
|
|
71
85
|
private _abortController;
|
|
72
86
|
connectedCallback(): void;
|
|
73
87
|
disconnectedCallback(): void;
|
package/dist/index.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { classMap as
|
|
3
|
-
import { state as u, property as i, query as
|
|
4
|
-
import { ifDefined as
|
|
5
|
-
import { live as
|
|
6
|
-
import { DelegatesFocusMixin as
|
|
1
|
+
import { LitElement as E, nothing as B, html as f, unsafeCSS as S } from "lit";
|
|
2
|
+
import { classMap as y } from "lit/directives/class-map.js";
|
|
3
|
+
import { state as u, property as i, query as D } from "lit/decorators.js";
|
|
4
|
+
import { ifDefined as w } from "lit/directives/if-defined.js";
|
|
5
|
+
import { live as q } from "lit/directives/live.js";
|
|
6
|
+
import { DelegatesFocusMixin as z, FormControlMixin as H, wrapNativeEvent as T, validPropertyValues as g, safeCustomElement as O } from "@justeattakeaway/pie-webc-core";
|
|
7
7
|
import "@justeattakeaway/pie-assistive-text";
|
|
8
|
-
const k = class k extends
|
|
8
|
+
const k = class k extends E {
|
|
9
9
|
willUpdate() {
|
|
10
10
|
this.getAttribute("v") || this.setAttribute("v", k.v);
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
|
-
k.v = "1.0
|
|
13
|
+
k.v = "1.1.0";
|
|
14
14
|
let p = k;
|
|
15
|
-
const H = '*,*:after,*:before{box-sizing:inherit}:host{display:block}@keyframes checkboxCheck{0%{width:0;height:0;border-color:#fff;transform:translateZ(0) rotate(45deg)}33%{width:8px;height:0;transform:translateZ(0) rotate(45deg)}to{width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,1px) rotate(45deg)}}@keyframes scaleDown{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes scaleUp{0%{transform:scale(0)}33%{transform:scale(.5)}to{transform:scale(1)}}.c-checkbox-tick{content:"";display:flex;flex:0 0 auto;width:var(--checkbox-width);height:var(--checkbox-height);margin:var(--checkbox-margin);border:1px solid var(--checkbox-border-color);border-radius:var(--checkbox-radius);background-color:var(--checkbox-bg-color)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick{transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.is-animated{animation:scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.is-disabled{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox-tick.c-checkbox-tick--status-error{--checkbox-border-color: var(--dt-color-support-error)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.is-animated.is-checked{animation:scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.is-checked:not(.is-disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.is-checked.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.is-checked:before{content:"";position:relative;top:55%;left:14%;border-right:2px solid transparent;border-bottom:2px solid transparent;transform:rotate(45deg);transform-origin:0% 100%}@media (prefers-reduced-motion: reduce){.c-checkbox-tick.is-checked:before{animation-duration:1ms!important;animation-delay:0!important;animation-iteration-count:1!important;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}@media only percy{.c-checkbox-tick.is-checked:before{animation:none;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}.c-checkbox-tick.is-checked.is-animated:before{animation:checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards}.c-checkbox-tick.is-checked:not(.is-animated):before{width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}.c-checkbox-tick.is-checked:dir(rtl):before{left:unset;right:50%}.c-checkbox-tick.is-indeterminate:not(.is-disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.is-indeterminate.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.is-indeterminate:after{width:16px}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.is-indeterminate:after{transition:width var(--dt-motion-timing-100) var(--checkbox-motion-easing) var(--dt-motion-timing-100)}}.c-checkbox-text{display:inline;flex:1 1 auto;align-self:center;min-width:0;margin-inline-start:var(--checkbox-gap);white-space:normal;color:var(--checkbox-content-color);font-family:var(--checkbox-font-family);font-size:var(--checkbox-font-size);line-height:var(--checkbox-line-height);font-weight:var(--checkbox-font-weight)}.c-checkbox-tick:after{content:"";position:relative;top:47%;left:14%;width:0;height:2px;background-color:#fff}.c-checkbox-tick:dir(rtl):after{left:unset;right:14%}.c-checkbox{--checkbox-height: 24px;--checkbox-width: 24px;--checkbox-radius: var(--dt-radius-rounded-a);--checkbox-margin: 1px;--checkbox-gap: var(--dt-spacing-b);--checkbox-font-family: var(--dt-font-body-l-family);--checkbox-font-size: calc(var(--dt-font-body-l-size) * 1px);--checkbox-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--checkbox-font-weight: var(--dt-font-body-l-weight);--checkbox-bg-color: var(--dt-color-container-default);--checkbox-border-color: var(--dt-color-border-form);--checkbox-content-color: var(--dt-color-content-default-solid);--checkbox-motion-easing: var(--dt-motion-easing-persistent-functional);display:flex;flex-direction:column}.c-checkbox input{display:block;position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(1px);white-space:nowrap}.c-checkbox label{display:flex;max-width:100%;white-space:nowrap;cursor:pointer}.c-checkbox:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) );transition:background-color var(--dt-motion-timing-200) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-200) var(--checkbox-motion-easing)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}.c-checkbox:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) );transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox:active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-checkbox.is-disabled label{cursor:not-allowed}.c-checkbox input:focus-visible+label .c-checkbox-tick{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-checkbox.is-disabled:hover .c-checkbox-tick,.c-checkbox.is-disabled:active .c-checkbox-tick{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) )}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}.c-checkbox.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) )}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--status-error:active{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-checkbox.is-checked:not(.is-disabled):hover .c-checkbox-tick,.c-checkbox.is-indeterminate:not(.is-disabled):hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.is-checked:not(.is-disabled):hover .c-checkbox-tick,.c-checkbox.is-indeterminate:not(.is-disabled):hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.is-checked.c-checkbox--status-error:hover .c-checkbox-tick,.c-checkbox.is-indeterminate.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.is-checked.c-checkbox--status-error:hover .c-checkbox-tick,.c-checkbox.is-indeterminate.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.is-checked:not(.is-disabled):active .c-checkbox-tick,.c-checkbox.is-indeterminate:not(.is-disabled):active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.is-checked:not(.is-disabled):active .c-checkbox-tick,.c-checkbox.is-indeterminate:not(.is-disabled):active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.is-checked.c-checkbox--status-error:active .c-checkbox-tick,.c-checkbox.is-indeterminate.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.is-checked.c-checkbox--status-error:active .c-checkbox-tick,.c-checkbox.is-indeterminate.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-error));--checkbox-border-color: var(--checkbox-bg-color)}}', T = ["default", "success", "error"], a = {
|
|
15
|
+
const j = '*,*:after,*:before{box-sizing:inherit}:host{display:block}@keyframes checkboxCheck{0%{width:0;height:0;border-color:#fff;transform:translateZ(0) rotate(45deg)}33%{width:8px;height:0;transform:translateZ(0) rotate(45deg)}to{width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,1px) rotate(45deg)}}@keyframes scaleDown{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes scaleUp{0%{transform:scale(0)}33%{transform:scale(.5)}to{transform:scale(1)}}.c-checkbox-tick{content:"";display:flex;flex:0 0 auto;width:var(--checkbox-width);height:var(--checkbox-height);margin:var(--checkbox-margin);border:1px solid var(--checkbox-border-color);border-radius:var(--checkbox-radius);background-color:var(--checkbox-bg-color)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick{transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.is-animated{animation:scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.is-disabled{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox-tick.c-checkbox-tick--status-error{--checkbox-border-color: var(--dt-color-support-error)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.is-animated.is-checked{animation:scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.is-checked:not(.is-disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.is-checked.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.is-checked:before{content:"";position:relative;top:55%;left:14%;border-right:2px solid transparent;border-bottom:2px solid transparent;transform:rotate(45deg);transform-origin:0% 100%}@media (prefers-reduced-motion: reduce){.c-checkbox-tick.is-checked:before{animation-duration:1ms!important;animation-delay:0!important;animation-iteration-count:1!important;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}@media only percy{.c-checkbox-tick.is-checked:before{animation:none;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}.c-checkbox-tick.is-checked.is-animated:before{animation:checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards}.c-checkbox-tick.is-checked:not(.is-animated):before{width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}.c-checkbox-tick.is-checked:dir(rtl):before{left:unset;right:50%}.c-checkbox-tick.is-indeterminate:not(.is-disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.is-indeterminate.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.is-indeterminate:after{width:16px}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.is-indeterminate:after{transition:width var(--dt-motion-timing-100) var(--checkbox-motion-easing) var(--dt-motion-timing-100)}}.c-checkbox-text{display:inline;flex:1 1 auto;align-self:center;min-width:0;margin-inline-start:var(--checkbox-gap);white-space:normal;color:var(--checkbox-content-color);font-family:var(--checkbox-font-family);font-size:var(--checkbox-font-size);line-height:var(--checkbox-line-height);font-weight:var(--checkbox-font-weight)}.c-checkbox-tick:after{content:"";position:relative;top:47%;left:14%;width:0;height:2px;background-color:#fff}.c-checkbox-tick:dir(rtl):after{left:unset;right:14%}.c-checkbox{--checkbox-height: 24px;--checkbox-width: 24px;--checkbox-radius: var(--dt-radius-rounded-a);--checkbox-margin: 1px;--checkbox-gap: var(--dt-spacing-b);--checkbox-font-family: var(--dt-font-body-l-family);--checkbox-font-size: calc(var(--dt-font-body-l-size) * 1px);--checkbox-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--checkbox-font-weight: var(--dt-font-body-l-weight);--checkbox-bg-color: var(--dt-color-container-default);--checkbox-border-color: var(--dt-color-border-form);--checkbox-content-color: var(--dt-color-content-default-solid);--checkbox-motion-easing: var(--dt-motion-easing-persistent-functional);display:flex;flex-direction:column;align-items:flex-start}.c-checkbox input{display:block;position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(1px);white-space:nowrap}.c-checkbox label{display:flex;max-width:100%;white-space:nowrap;cursor:pointer}.c-checkbox.c-checkbox--leading label{flex-direction:row-reverse}.c-checkbox.c-checkbox--leading .c-checkbox-text{margin-inline-start:0;margin-inline-end:var(--checkbox-gap)}.c-checkbox.c-checkbox--fill{align-items:stretch}.c-checkbox.c-checkbox--fill label{justify-content:space-between}.c-checkbox.c-checkbox--fill .c-checkbox-text{flex:0 1 auto}.c-checkbox:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) );transition:background-color var(--dt-motion-timing-200) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-200) var(--checkbox-motion-easing)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}.c-checkbox:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) );transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox:active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-checkbox.is-disabled label{cursor:not-allowed}.c-checkbox input:focus-visible+label .c-checkbox-tick{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-checkbox.is-disabled:hover .c-checkbox-tick,.c-checkbox.is-disabled:active .c-checkbox-tick{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) )}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}.c-checkbox.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) )}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--status-error:active{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-checkbox.is-checked:not(.is-disabled):hover .c-checkbox-tick,.c-checkbox.is-indeterminate:not(.is-disabled):hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.is-checked:not(.is-disabled):hover .c-checkbox-tick,.c-checkbox.is-indeterminate:not(.is-disabled):hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.is-checked.c-checkbox--status-error:hover .c-checkbox-tick,.c-checkbox.is-indeterminate.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.is-checked.c-checkbox--status-error:hover .c-checkbox-tick,.c-checkbox.is-indeterminate.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.is-checked:not(.is-disabled):active .c-checkbox-tick,.c-checkbox.is-indeterminate:not(.is-disabled):active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.is-checked:not(.is-disabled):active .c-checkbox-tick,.c-checkbox.is-indeterminate:not(.is-disabled):active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.is-checked.c-checkbox--status-error:active .c-checkbox-tick,.c-checkbox.is-indeterminate.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.is-checked.c-checkbox--status-error:active .c-checkbox-tick,.c-checkbox.is-indeterminate.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-error));--checkbox-border-color: var(--checkbox-bg-color)}}', I = ["default", "success", "error"], L = ["leading", "trailing"], M = ["hug", "fill"], r = {
|
|
16
16
|
// a default value for the html <input type="checkbox" /> value attribute.
|
|
17
17
|
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
|
|
18
18
|
value: "on",
|
|
@@ -21,26 +21,28 @@ const H = '*,*:after,*:before{box-sizing:inherit}:host{display:block}@keyframes
|
|
|
21
21
|
checked: !1,
|
|
22
22
|
indeterminate: !1,
|
|
23
23
|
required: !1,
|
|
24
|
-
status: "default"
|
|
24
|
+
status: "default",
|
|
25
|
+
labelPosition: "trailing",
|
|
26
|
+
labelFit: "hug"
|
|
25
27
|
};
|
|
26
|
-
var
|
|
27
|
-
for (var
|
|
28
|
-
(d =
|
|
29
|
-
return
|
|
28
|
+
var U = Object.defineProperty, V = Object.getOwnPropertyDescriptor, c = (e, t, l, s) => {
|
|
29
|
+
for (var a = s > 1 ? void 0 : s ? V(t, l) : t, n = e.length - 1, d; n >= 0; n--)
|
|
30
|
+
(d = e[n]) && (a = (s ? d(t, l, a) : d(a)) || a);
|
|
31
|
+
return s && a && U(t, l, a), a;
|
|
30
32
|
};
|
|
31
|
-
const
|
|
32
|
-
let
|
|
33
|
+
const m = "pie-checkbox", _ = "assistive-text";
|
|
34
|
+
let o = class extends z(H(p)) {
|
|
33
35
|
constructor() {
|
|
34
|
-
super(...arguments), this._disabledByParent = !1, this._visuallyHiddenError = !1, this._isAnimationAllowed = !1, this.value =
|
|
36
|
+
super(...arguments), this._disabledByParent = !1, this._visuallyHiddenError = !1, this._isAnimationAllowed = !1, this.value = r.value, this.checked = r.checked, this.defaultChecked = r.defaultChecked, this.disabled = r.disabled, this.required = r.required, this.indeterminate = r.indeterminate, this.status = r.status, this.labelPosition = r.labelPosition, this.labelFit = r.labelFit;
|
|
35
37
|
}
|
|
36
38
|
connectedCallback() {
|
|
37
39
|
super.connectedCallback(), this._abortController = new AbortController();
|
|
38
|
-
const { signal:
|
|
39
|
-
this.addEventListener("pie-checkbox-group-disabled", (
|
|
40
|
-
this._disabledByParent =
|
|
41
|
-
}, { signal:
|
|
42
|
-
this._visuallyHiddenError =
|
|
43
|
-
}, { signal:
|
|
40
|
+
const { signal: e } = this._abortController;
|
|
41
|
+
this.addEventListener("pie-checkbox-group-disabled", (t) => {
|
|
42
|
+
this._disabledByParent = t.detail.disabled;
|
|
43
|
+
}, { signal: e }), this.addEventListener("pie-checkbox-group-error", (t) => {
|
|
44
|
+
this._visuallyHiddenError = t.detail.error;
|
|
45
|
+
}, { signal: e });
|
|
44
46
|
}
|
|
45
47
|
disconnectedCallback() {
|
|
46
48
|
super.disconnectedCallback(), this._abortController.abort();
|
|
@@ -64,8 +66,8 @@ let e = class extends P(D(p)) {
|
|
|
64
66
|
* or because the disabled state changed on a <fieldset> that's an ancestor of this element.
|
|
65
67
|
* @param disabled - The latest disabled state of the input.
|
|
66
68
|
*/
|
|
67
|
-
formDisabledCallback(
|
|
68
|
-
this.disabled =
|
|
69
|
+
formDisabledCallback(e) {
|
|
70
|
+
this.disabled = e;
|
|
69
71
|
}
|
|
70
72
|
updated() {
|
|
71
73
|
this._handleFormAssociation();
|
|
@@ -74,11 +76,11 @@ let e = class extends P(D(p)) {
|
|
|
74
76
|
* Captures the native change event and wraps it in a custom event.
|
|
75
77
|
* @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
|
|
76
78
|
*/
|
|
77
|
-
_handleChange(
|
|
78
|
-
const { checked:
|
|
79
|
-
this.checked =
|
|
80
|
-
const
|
|
81
|
-
this.dispatchEvent(
|
|
79
|
+
_handleChange(e) {
|
|
80
|
+
const { checked: t } = e == null ? void 0 : e.currentTarget;
|
|
81
|
+
this.checked = t, this._isAnimationAllowed || (this._isAnimationAllowed = !0);
|
|
82
|
+
const l = T(e);
|
|
83
|
+
this.dispatchEvent(l), this._handleFormAssociation();
|
|
82
84
|
}
|
|
83
85
|
/**
|
|
84
86
|
* Called when the form that contains this component is reset.
|
|
@@ -89,117 +91,131 @@ let e = class extends P(D(p)) {
|
|
|
89
91
|
if (this.checked === this.defaultChecked)
|
|
90
92
|
return;
|
|
91
93
|
this.checked = this.defaultChecked;
|
|
92
|
-
const
|
|
93
|
-
this.dispatchEvent(
|
|
94
|
+
const e = new Event("change", { bubbles: !0, composed: !0 });
|
|
95
|
+
this.dispatchEvent(e), this._handleFormAssociation();
|
|
94
96
|
}
|
|
95
97
|
render() {
|
|
96
98
|
const {
|
|
97
|
-
checked:
|
|
98
|
-
value:
|
|
99
|
-
name:
|
|
100
|
-
disabled:
|
|
101
|
-
_disabledByParent:
|
|
99
|
+
checked: e,
|
|
100
|
+
value: t,
|
|
101
|
+
name: l,
|
|
102
|
+
disabled: s,
|
|
103
|
+
_disabledByParent: a,
|
|
102
104
|
_visuallyHiddenError: n,
|
|
103
105
|
_isAnimationAllowed: d,
|
|
104
|
-
required:
|
|
106
|
+
required: C,
|
|
105
107
|
indeterminate: x,
|
|
106
108
|
assistiveText: v,
|
|
107
|
-
status:
|
|
108
|
-
|
|
109
|
+
status: h,
|
|
110
|
+
labelPosition: A,
|
|
111
|
+
labelFit: $
|
|
112
|
+
} = this, b = s || a, F = {
|
|
109
113
|
"c-checkbox": !0,
|
|
110
|
-
[`c-checkbox--status-${
|
|
111
|
-
"is-disabled":
|
|
112
|
-
"is-checked":
|
|
113
|
-
"is-indeterminate": x && !
|
|
114
|
-
|
|
114
|
+
[`c-checkbox--status-${h}`]: !b,
|
|
115
|
+
"is-disabled": b,
|
|
116
|
+
"is-checked": e,
|
|
117
|
+
"is-indeterminate": x && !e,
|
|
118
|
+
"c-checkbox--leading": A === "leading",
|
|
119
|
+
"c-checkbox--fill": $ === "fill"
|
|
120
|
+
}, P = {
|
|
115
121
|
"c-checkbox-tick": !0,
|
|
116
|
-
[`c-checkbox-tick--status-${
|
|
117
|
-
"is-disabled":
|
|
118
|
-
"is-checked":
|
|
119
|
-
"is-indeterminate": x && !
|
|
122
|
+
[`c-checkbox-tick--status-${h}`]: !b,
|
|
123
|
+
"is-disabled": b,
|
|
124
|
+
"is-checked": e,
|
|
125
|
+
"is-indeterminate": x && !e,
|
|
120
126
|
"is-animated": d
|
|
121
127
|
};
|
|
122
|
-
return
|
|
128
|
+
return f`
|
|
123
129
|
<div
|
|
124
|
-
class="${
|
|
130
|
+
class="${y(F)}">
|
|
125
131
|
<input
|
|
126
132
|
type="checkbox"
|
|
127
133
|
id="inputId"
|
|
128
|
-
.value=${
|
|
129
|
-
.checked=${
|
|
130
|
-
name=${
|
|
131
|
-
?disabled=${
|
|
132
|
-
?required=${
|
|
134
|
+
.value=${t}
|
|
135
|
+
.checked=${q(e)}
|
|
136
|
+
name=${w(l)}
|
|
137
|
+
?disabled=${b}
|
|
138
|
+
?required=${C}
|
|
133
139
|
.indeterminate=${x}
|
|
134
|
-
aria-invalid=${
|
|
135
|
-
aria-describedby=${
|
|
140
|
+
aria-invalid=${h === "error" ? "true" : "false"}
|
|
141
|
+
aria-describedby=${w(v ? _ : void 0)}
|
|
136
142
|
@change=${this._handleChange}
|
|
137
143
|
data-test-id="pie-checkbox-input"
|
|
138
144
|
/>
|
|
139
145
|
<label for="inputId" data-test-id="pie-checkbox-label">
|
|
140
146
|
<span
|
|
141
|
-
class="${
|
|
147
|
+
class="${y(P)}"></span>
|
|
142
148
|
<span class="c-checkbox-text">
|
|
143
149
|
<slot></slot>
|
|
144
150
|
</span>
|
|
145
151
|
</label>
|
|
146
|
-
${v ?
|
|
152
|
+
${v ? f`
|
|
147
153
|
<pie-assistive-text
|
|
148
|
-
id="${
|
|
149
|
-
variant=${
|
|
154
|
+
id="${_}"
|
|
155
|
+
variant=${h}
|
|
150
156
|
?isVisuallyHidden=${n}
|
|
151
157
|
data-test-id="pie-checkbox-assistive-text">
|
|
152
158
|
${v}
|
|
153
|
-
</pie-assistive-text>` :
|
|
159
|
+
</pie-assistive-text>` : B}
|
|
154
160
|
</div>`;
|
|
155
161
|
}
|
|
156
162
|
};
|
|
157
|
-
|
|
163
|
+
o.styles = S(j);
|
|
158
164
|
c([
|
|
159
165
|
u()
|
|
160
|
-
],
|
|
166
|
+
], o.prototype, "_disabledByParent", 2);
|
|
161
167
|
c([
|
|
162
168
|
u()
|
|
163
|
-
],
|
|
169
|
+
], o.prototype, "_visuallyHiddenError", 2);
|
|
164
170
|
c([
|
|
165
171
|
u()
|
|
166
|
-
],
|
|
172
|
+
], o.prototype, "_isAnimationAllowed", 2);
|
|
167
173
|
c([
|
|
168
174
|
i({ type: String })
|
|
169
|
-
],
|
|
175
|
+
], o.prototype, "value", 2);
|
|
170
176
|
c([
|
|
171
177
|
i({ type: String, reflect: !0 })
|
|
172
|
-
],
|
|
178
|
+
], o.prototype, "name", 2);
|
|
173
179
|
c([
|
|
174
180
|
i({ type: Boolean, reflect: !0 })
|
|
175
|
-
],
|
|
181
|
+
], o.prototype, "checked", 2);
|
|
176
182
|
c([
|
|
177
183
|
i({ type: Boolean, reflect: !0 })
|
|
178
|
-
],
|
|
184
|
+
], o.prototype, "defaultChecked", 2);
|
|
179
185
|
c([
|
|
180
186
|
i({ type: Boolean, reflect: !0 })
|
|
181
|
-
],
|
|
187
|
+
], o.prototype, "disabled", 2);
|
|
182
188
|
c([
|
|
183
189
|
i({ type: Boolean, reflect: !0 })
|
|
184
|
-
],
|
|
190
|
+
], o.prototype, "required", 2);
|
|
185
191
|
c([
|
|
186
192
|
i({ type: Boolean, reflect: !0 })
|
|
187
|
-
],
|
|
193
|
+
], o.prototype, "indeterminate", 2);
|
|
188
194
|
c([
|
|
189
|
-
|
|
190
|
-
],
|
|
195
|
+
D('input[type="checkbox"]')
|
|
196
|
+
], o.prototype, "_checkbox", 2);
|
|
191
197
|
c([
|
|
192
198
|
i({ type: String })
|
|
193
|
-
],
|
|
199
|
+
], o.prototype, "assistiveText", 2);
|
|
194
200
|
c([
|
|
195
201
|
i({ type: String }),
|
|
196
|
-
|
|
197
|
-
],
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
202
|
+
g(m, I, r.status)
|
|
203
|
+
], o.prototype, "status", 2);
|
|
204
|
+
c([
|
|
205
|
+
i({ type: String, reflect: !0 }),
|
|
206
|
+
g(m, L, r.labelPosition)
|
|
207
|
+
], o.prototype, "labelPosition", 2);
|
|
208
|
+
c([
|
|
209
|
+
i({ type: String, reflect: !0 }),
|
|
210
|
+
g(m, M, r.labelFit)
|
|
211
|
+
], o.prototype, "labelFit", 2);
|
|
212
|
+
o = c([
|
|
213
|
+
O("pie-checkbox")
|
|
214
|
+
], o);
|
|
201
215
|
export {
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
216
|
+
o as PieCheckbox,
|
|
217
|
+
r as defaultProps,
|
|
218
|
+
M as labelFits,
|
|
219
|
+
L as labelPositions,
|
|
220
|
+
I as statusTypes
|
|
205
221
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -44,12 +44,24 @@ export declare interface CheckboxProps {
|
|
|
44
44
|
* The status of the checkbox component / assistive text. Can be default, success or error.
|
|
45
45
|
*/
|
|
46
46
|
status?: typeof statusTypes[number];
|
|
47
|
+
/**
|
|
48
|
+
* The position of the label relative to the checkbox input.
|
|
49
|
+
*/
|
|
50
|
+
labelPosition?: typeof labelPositions[number];
|
|
51
|
+
/**
|
|
52
|
+
* Controls how the label container is sized. `hug` wraps the content, `fill` stretches to fill available width.
|
|
53
|
+
*/
|
|
54
|
+
labelFit?: typeof labelFits[number];
|
|
47
55
|
}
|
|
48
56
|
|
|
49
57
|
export declare type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, 'name' | 'assistiveText'>>;
|
|
50
58
|
|
|
51
59
|
export declare const defaultProps: DefaultProps;
|
|
52
60
|
|
|
61
|
+
export declare const labelFits: readonly ["hug", "fill"];
|
|
62
|
+
|
|
63
|
+
export declare const labelPositions: readonly ["leading", "trailing"];
|
|
64
|
+
|
|
53
65
|
export declare const PieCheckbox: React_2.ForwardRefExoticComponent<React_2.PropsWithChildren<Omit<React_2.PropsWithoutRef<CheckboxProps>, "children">> & React_2.RefAttributes<PieCheckbox_2> & PieCheckboxEvents & ReactBaseType>;
|
|
54
66
|
|
|
55
67
|
/**
|
|
@@ -71,6 +83,8 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
|
|
|
71
83
|
private _checkbox;
|
|
72
84
|
assistiveText: CheckboxProps['assistiveText'];
|
|
73
85
|
status: "default" | "success" | "error";
|
|
86
|
+
labelPosition: "leading" | "trailing";
|
|
87
|
+
labelFit: "hug" | "fill";
|
|
74
88
|
private _abortController;
|
|
75
89
|
connectedCallback(): void;
|
|
76
90
|
disconnectedCallback(): void;
|
package/dist/react.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as e from "react";
|
|
2
2
|
import { createComponent as o } from "@lit/react";
|
|
3
3
|
import { PieCheckbox as t } from "./index.js";
|
|
4
|
-
import { defaultProps as p, statusTypes as
|
|
4
|
+
import { defaultProps as n, labelFits as p, labelPositions as b, statusTypes as h } from "./index.js";
|
|
5
5
|
const a = o({
|
|
6
6
|
displayName: "PieCheckbox",
|
|
7
7
|
elementClass: t,
|
|
@@ -11,9 +11,11 @@ const a = o({
|
|
|
11
11
|
onChange: "change"
|
|
12
12
|
// when checked state is changed.
|
|
13
13
|
}
|
|
14
|
-
}),
|
|
14
|
+
}), i = a;
|
|
15
15
|
export {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
i as PieCheckbox,
|
|
17
|
+
n as defaultProps,
|
|
18
|
+
p as labelFits,
|
|
19
|
+
b as labelPositions,
|
|
20
|
+
h as statusTypes
|
|
19
21
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-checkbox",
|
|
3
3
|
"description": "PIE Design System Checkbox built using Web Components",
|
|
4
|
-
"version": "1.0
|
|
4
|
+
"version": "1.1.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -45,10 +45,10 @@
|
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@justeattakeaway/pie-components-config": "0.21.1",
|
|
47
47
|
"@justeattakeaway/pie-css": "1.1.1",
|
|
48
|
-
"@justeattakeaway/pie-monorepo-utils": "0.9.
|
|
48
|
+
"@justeattakeaway/pie-monorepo-utils": "0.9.1"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"@justeattakeaway/pie-assistive-text": "0.11.
|
|
51
|
+
"@justeattakeaway/pie-assistive-text": "0.11.29",
|
|
52
52
|
"@justeattakeaway/pie-webc-core": "14.0.1"
|
|
53
53
|
},
|
|
54
54
|
"volta": {
|
package/src/checkbox.scss
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
display: block;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
+
|
|
7
8
|
@keyframes checkboxCheck {
|
|
8
9
|
0% {
|
|
9
10
|
width: 0;
|
|
@@ -222,6 +223,7 @@
|
|
|
222
223
|
|
|
223
224
|
display: flex;
|
|
224
225
|
flex-direction: column;
|
|
226
|
+
align-items: flex-start;
|
|
225
227
|
|
|
226
228
|
input {
|
|
227
229
|
display: block;
|
|
@@ -241,6 +243,29 @@
|
|
|
241
243
|
cursor: pointer;
|
|
242
244
|
}
|
|
243
245
|
|
|
246
|
+
&.c-checkbox--leading {
|
|
247
|
+
label {
|
|
248
|
+
flex-direction: row-reverse;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.c-checkbox-text {
|
|
252
|
+
margin-inline-start: 0;
|
|
253
|
+
margin-inline-end: var(--checkbox-gap);
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
&.c-checkbox--fill {
|
|
258
|
+
align-items: stretch;
|
|
259
|
+
|
|
260
|
+
label {
|
|
261
|
+
justify-content: space-between;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.c-checkbox-text {
|
|
265
|
+
flex: 0 1 auto;
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
|
|
244
269
|
&:hover {
|
|
245
270
|
.c-checkbox-tick {
|
|
246
271
|
--checkbox-bg-color: hsl(
|
package/src/defs.ts
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
2
2
|
|
|
3
3
|
export const statusTypes = ['default', 'success', 'error'] as const;
|
|
4
|
+
export const labelPositions = ['leading', 'trailing'] as const;
|
|
5
|
+
export const labelFits = ['hug', 'fill'] as const;
|
|
6
|
+
|
|
4
7
|
export interface CheckboxProps {
|
|
5
8
|
/**
|
|
6
9
|
* The value of the checkbox (used as a key/value pair in HTML forms with `name`).
|
|
@@ -47,6 +50,16 @@ export interface CheckboxProps {
|
|
|
47
50
|
* The status of the checkbox component / assistive text. Can be default, success or error.
|
|
48
51
|
*/
|
|
49
52
|
status?: typeof statusTypes[number];
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
* The position of the label relative to the checkbox input.
|
|
56
|
+
*/
|
|
57
|
+
labelPosition?: typeof labelPositions[number];
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* Controls how the label container is sized. `hug` wraps the content, `fill` stretches to fill available width.
|
|
61
|
+
*/
|
|
62
|
+
labelFit?: typeof labelFits[number];
|
|
50
63
|
}
|
|
51
64
|
|
|
52
65
|
export type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, 'name' | 'assistiveText'>>;
|
|
@@ -61,4 +74,6 @@ export const defaultProps: DefaultProps = {
|
|
|
61
74
|
indeterminate: false,
|
|
62
75
|
required: false,
|
|
63
76
|
status: 'default',
|
|
77
|
+
labelPosition: 'trailing',
|
|
78
|
+
labelFit: 'hug',
|
|
64
79
|
};
|
package/src/index.ts
CHANGED
|
@@ -15,7 +15,9 @@ import {
|
|
|
15
15
|
import '@justeattakeaway/pie-assistive-text';
|
|
16
16
|
|
|
17
17
|
import styles from './checkbox.scss?inline';
|
|
18
|
-
import {
|
|
18
|
+
import {
|
|
19
|
+
type CheckboxProps, defaultProps, statusTypes, labelPositions, labelFits,
|
|
20
|
+
} from './defs';
|
|
19
21
|
|
|
20
22
|
// Valid values available to consumers
|
|
21
23
|
export * from './defs';
|
|
@@ -70,6 +72,14 @@ export class PieCheckbox extends DelegatesFocusMixin(FormControlMixin(PieElement
|
|
|
70
72
|
@validPropertyValues(componentSelector, statusTypes, defaultProps.status)
|
|
71
73
|
public status = defaultProps.status;
|
|
72
74
|
|
|
75
|
+
@property({ type: String, reflect: true })
|
|
76
|
+
@validPropertyValues(componentSelector, labelPositions, defaultProps.labelPosition)
|
|
77
|
+
public labelPosition = defaultProps.labelPosition;
|
|
78
|
+
|
|
79
|
+
@property({ type: String, reflect: true })
|
|
80
|
+
@validPropertyValues(componentSelector, labelFits, defaultProps.labelFit)
|
|
81
|
+
public labelFit = defaultProps.labelFit;
|
|
82
|
+
|
|
73
83
|
private _abortController!: AbortController;
|
|
74
84
|
|
|
75
85
|
connectedCallback () : void {
|
|
@@ -168,6 +178,8 @@ export class PieCheckbox extends DelegatesFocusMixin(FormControlMixin(PieElement
|
|
|
168
178
|
indeterminate,
|
|
169
179
|
assistiveText,
|
|
170
180
|
status,
|
|
181
|
+
labelPosition,
|
|
182
|
+
labelFit,
|
|
171
183
|
} = this;
|
|
172
184
|
|
|
173
185
|
const componentDisabled = disabled || _disabledByParent;
|
|
@@ -178,6 +190,8 @@ export class PieCheckbox extends DelegatesFocusMixin(FormControlMixin(PieElement
|
|
|
178
190
|
'is-disabled': componentDisabled,
|
|
179
191
|
'is-checked': checked,
|
|
180
192
|
'is-indeterminate': indeterminate && !checked,
|
|
193
|
+
'c-checkbox--leading': labelPosition === 'leading',
|
|
194
|
+
'c-checkbox--fill': labelFit === 'fill',
|
|
181
195
|
};
|
|
182
196
|
|
|
183
197
|
const labelClasses = {
|