@justeattakeaway/pie-select 0.3.0 → 0.4.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/custom-elements.json +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +78 -65
- package/dist/react.d.ts +2 -2
- package/package.json +5 -4
- package/src/index.ts +2 -1
package/custom-elements.json
CHANGED
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
|
|
5
|
+
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
6
6
|
import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
7
7
|
import type { TemplateResult } from 'lit';
|
|
8
8
|
|
|
@@ -69,7 +69,7 @@ export declare class PieSelect extends PieSelect_base implements SelectProps {
|
|
|
69
69
|
static styles: CSSResult;
|
|
70
70
|
}
|
|
71
71
|
|
|
72
|
-
declare const PieSelect_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof
|
|
72
|
+
declare const PieSelect_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof PieElement;
|
|
73
73
|
|
|
74
74
|
declare interface SelectOptionGroupProps {
|
|
75
75
|
/**
|
package/dist/index.js
CHANGED
|
@@ -1,26 +1,39 @@
|
|
|
1
|
-
import { LitElement as b, html as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import { ifDefined as
|
|
5
|
-
import { classMap as
|
|
6
|
-
import { live as
|
|
1
|
+
import { LitElement as b, html as p, nothing as $, unsafeCSS as I } from "lit";
|
|
2
|
+
import { property as a, query as f, queryAssignedElements as k, state as z } from "lit/decorators.js";
|
|
3
|
+
import { FormControlMixin as C, RtlMixin as w, wrapNativeEvent as S, validPropertyValues as m, defineCustomElement as L } from "@justeattakeaway/pie-webc-core";
|
|
4
|
+
import { ifDefined as h } from "lit/directives/if-defined.js";
|
|
5
|
+
import { classMap as T } from "lit/directives/class-map.js";
|
|
6
|
+
import { live as E } from "lit/directives/live.js";
|
|
7
7
|
import "@justeattakeaway/pie-icons-webc/dist/IconChevronDown.js";
|
|
8
8
|
import "@justeattakeaway/pie-assistive-text";
|
|
9
|
-
|
|
9
|
+
var A = Object.defineProperty, F = (n, t, e, d) => {
|
|
10
|
+
for (var s = void 0, i = n.length - 1, l; i >= 0; i--)
|
|
11
|
+
(l = n[i]) && (s = l(t, e, s) || s);
|
|
12
|
+
return s && A(t, e, s), s;
|
|
13
|
+
};
|
|
14
|
+
class x extends b {
|
|
15
|
+
constructor() {
|
|
16
|
+
super(...arguments), this.v = "0.4.0";
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
F([
|
|
20
|
+
a({ type: String, reflect: !0 })
|
|
21
|
+
], x.prototype, "v");
|
|
22
|
+
const V = "*,*:after,*:before{box-sizing:inherit}.c-select{--select-padding-block: var(--dt-spacing-c);--select-padding-inline-start: var(--dt-spacing-d);--select-padding-inline-end: var(--dt-spacing-h);--select-background-color: var(--dt-color-container-default);--select-text-color: var(--dt-color-content-default);--select-border-color: var(--dt-color-border-form);--select-font-size: calc(var(--dt-font-body-l-size) * 1px);--select-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--select-height: 48px;--select-cursor: pointer;position:relative;color:var(--select-text-color);font-size:var(--select-font-size);line-height:var(--select-line-height)}.c-select select{height:var(--select-height);width:100%;border:1px solid var(--select-border-color);border-radius:var(--dt-radius-rounded-c);padding-inline-start:var(--select-padding-inline-start);padding-inline-end:var(--select-padding-inline-end);padding-block-start:var(--select-padding-block);padding-block-end:var(--select-padding-block);background-color:var(--select-background-color);font-size:inherit;line-height:inherit;color:inherit;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--select-cursor)}.c-select select:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-select.c-select--small{--select-padding-block: var(--dt-spacing-b);--select-height: 40px}.c-select.c-select--large{--select-padding-block: var(--dt-spacing-d);--select-height: 56px}.c-select.c-select--error{--select-border-color: var(--dt-color-support-error)}.c-select.c-select--withLeadingIcon{--select-padding-inline-start: calc(var(--dt-spacing-h) - var(--dt-spacing-a))}.c-select ::slotted([slot=leadingIcon]),.c-select .c-select-trailingIcon{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none}.c-select:not(.is-disabled) ::slotted([slot=leadingIcon]),.c-select:not(.is-disabled) .c-select-trailingIcon{color:var(--dt-color-content-subdued)}.c-select ::slotted([slot=leadingIcon]){--icon-display-override: block;--icon-size-override: 24px;inset-inline-start:var(--dt-spacing-d)}.c-select .c-select-trailingIcon{inset-inline-end:var(--dt-spacing-d)}@media (hover: hover){.c-select:hover{--select-background-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))))}@supports (background-color: color-mix(in srgb,black,white)){.c-select:hover{--select-background-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}}.c-select.is-disabled{--select-background-color: var(--dt-color-disabled-01);--select-border-color: var(--dt-color-disabled-01);--select-text-color: var(--dt-color-content-disabled);--select-cursor: auto}", O = ["small", "medium", "large"], P = ["default", "error"], c = {
|
|
10
23
|
size: "medium",
|
|
11
24
|
status: "default",
|
|
12
25
|
disabled: !1,
|
|
13
26
|
options: []
|
|
14
27
|
};
|
|
15
|
-
var
|
|
16
|
-
for (var
|
|
17
|
-
(
|
|
18
|
-
return
|
|
28
|
+
var R = Object.defineProperty, o = (n, t, e, d) => {
|
|
29
|
+
for (var s = void 0, i = n.length - 1, l; i >= 0; i--)
|
|
30
|
+
(l = n[i]) && (s = l(t, e, s) || s);
|
|
31
|
+
return s && R(t, e, s), s;
|
|
19
32
|
};
|
|
20
|
-
const g = "pie-select",
|
|
33
|
+
const g = "pie-select", v = "assistive-text", u = class u extends C(w(x)) {
|
|
21
34
|
constructor() {
|
|
22
|
-
super(...arguments), this.size =
|
|
23
|
-
const e =
|
|
35
|
+
super(...arguments), this.size = c.size, this.disabled = c.disabled, this.status = c.status, this.options = c.options, this._hasLeadingIcon = !1, this._handleChange = (t) => {
|
|
36
|
+
const e = S(t);
|
|
24
37
|
this.dispatchEvent(e), this._internals.setFormValue(this._select.value);
|
|
25
38
|
};
|
|
26
39
|
}
|
|
@@ -60,16 +73,16 @@ const g = "pie-select", u = "assistive-text", h = class h extends I(k(b)) {
|
|
|
60
73
|
* @returns A template result with the rendered options
|
|
61
74
|
*/
|
|
62
75
|
renderChildren(t) {
|
|
63
|
-
return
|
|
64
|
-
${t.map((e) => e.tag === "optgroup" ?
|
|
76
|
+
return p`
|
|
77
|
+
${t.map((e) => e.tag === "optgroup" ? p`
|
|
65
78
|
<optgroup
|
|
66
79
|
?disabled="${e.disabled}"
|
|
67
|
-
label="${
|
|
80
|
+
label="${h(e.label)}">
|
|
68
81
|
${this.renderChildren(e.options)}
|
|
69
82
|
</optgroup>
|
|
70
|
-
` :
|
|
83
|
+
` : p`
|
|
71
84
|
<option
|
|
72
|
-
.value="${
|
|
85
|
+
.value="${E(e.value)}"
|
|
73
86
|
?disabled="${e.disabled}"
|
|
74
87
|
?selected="${e.selected}">
|
|
75
88
|
${e.text}
|
|
@@ -82,45 +95,45 @@ const g = "pie-select", u = "assistive-text", h = class h extends I(k(b)) {
|
|
|
82
95
|
* @returns A template result with the assistive text
|
|
83
96
|
*/
|
|
84
97
|
renderAssistiveText() {
|
|
85
|
-
return this.assistiveText ?
|
|
98
|
+
return this.assistiveText ? p`
|
|
86
99
|
<pie-assistive-text
|
|
87
|
-
id="${
|
|
88
|
-
variant="${
|
|
100
|
+
id="${v}"
|
|
101
|
+
variant="${h(this.status)}"
|
|
89
102
|
data-test-id="pie-select-assistive-text">
|
|
90
103
|
${this.assistiveText}
|
|
91
104
|
</pie-assistive-text>
|
|
92
|
-
` :
|
|
105
|
+
` : $;
|
|
93
106
|
}
|
|
94
107
|
render() {
|
|
95
108
|
const {
|
|
96
109
|
assistiveText: t,
|
|
97
110
|
disabled: e,
|
|
98
111
|
status: d,
|
|
99
|
-
size:
|
|
100
|
-
name:
|
|
101
|
-
options:
|
|
102
|
-
_hasLeadingIcon:
|
|
103
|
-
} = this,
|
|
112
|
+
size: s,
|
|
113
|
+
name: i,
|
|
114
|
+
options: l,
|
|
115
|
+
_hasLeadingIcon: y
|
|
116
|
+
} = this, _ = {
|
|
104
117
|
"c-select": !0,
|
|
105
|
-
[`c-select--${
|
|
118
|
+
[`c-select--${s}`]: !0,
|
|
106
119
|
[`c-select--${d}`]: !0,
|
|
107
|
-
"c-select--withLeadingIcon":
|
|
120
|
+
"c-select--withLeadingIcon": y,
|
|
108
121
|
"is-disabled": e
|
|
109
122
|
};
|
|
110
|
-
return
|
|
123
|
+
return p`
|
|
111
124
|
<div
|
|
112
|
-
class="${
|
|
125
|
+
class="${T(_)}"
|
|
113
126
|
data-test-id="pie-select-shell">
|
|
114
127
|
<slot name="leadingIcon" @slotchange=${this._handleLeadingIconSlotchange}></slot>
|
|
115
128
|
<select
|
|
116
129
|
data-test-id="pie-select-element"
|
|
117
|
-
name="${
|
|
130
|
+
name="${h(i)}"
|
|
118
131
|
?disabled="${e}"
|
|
119
|
-
aria-describedby="${
|
|
132
|
+
aria-describedby="${h(t ? v : void 0)}"
|
|
120
133
|
aria-invalid="${d === "error" ? "true" : "false"}"
|
|
121
|
-
aria-errormessage="${
|
|
134
|
+
aria-errormessage="${h(d === "error" ? v : void 0)}"
|
|
122
135
|
@change=${this._handleChange}>
|
|
123
|
-
${this.renderChildren(
|
|
136
|
+
${this.renderChildren(l)}
|
|
124
137
|
</select>
|
|
125
138
|
<icon-chevron-down size='s' class='c-select-trailingIcon'></icon-chevron-down>
|
|
126
139
|
</div>
|
|
@@ -128,44 +141,44 @@ const g = "pie-select", u = "assistive-text", h = class h extends I(k(b)) {
|
|
|
128
141
|
`;
|
|
129
142
|
}
|
|
130
143
|
};
|
|
131
|
-
|
|
132
|
-
let
|
|
144
|
+
u.shadowRootOptions = { ...b.shadowRootOptions, delegatesFocus: !0 }, u.styles = I(V);
|
|
145
|
+
let r = u;
|
|
133
146
|
o([
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
],
|
|
147
|
+
a({ type: String }),
|
|
148
|
+
m(g, O, c.size)
|
|
149
|
+
], r.prototype, "size");
|
|
137
150
|
o([
|
|
138
|
-
|
|
139
|
-
],
|
|
151
|
+
a({ type: Boolean })
|
|
152
|
+
], r.prototype, "disabled");
|
|
140
153
|
o([
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
],
|
|
154
|
+
a({ type: String }),
|
|
155
|
+
m(g, P, c.status)
|
|
156
|
+
], r.prototype, "status");
|
|
144
157
|
o([
|
|
145
|
-
|
|
146
|
-
],
|
|
158
|
+
a({ type: String })
|
|
159
|
+
], r.prototype, "assistiveText");
|
|
147
160
|
o([
|
|
148
|
-
|
|
149
|
-
],
|
|
161
|
+
a({ type: String })
|
|
162
|
+
], r.prototype, "name");
|
|
150
163
|
o([
|
|
151
|
-
|
|
152
|
-
],
|
|
164
|
+
a({ type: Array })
|
|
165
|
+
], r.prototype, "options");
|
|
153
166
|
o([
|
|
154
|
-
|
|
155
|
-
],
|
|
167
|
+
f("select")
|
|
168
|
+
], r.prototype, "focusTarget");
|
|
156
169
|
o([
|
|
157
|
-
|
|
158
|
-
],
|
|
170
|
+
f("select")
|
|
171
|
+
], r.prototype, "_select");
|
|
159
172
|
o([
|
|
160
|
-
|
|
161
|
-
],
|
|
173
|
+
k({ slot: "leadingIcon", flatten: !0 })
|
|
174
|
+
], r.prototype, "_leadingIconSlot");
|
|
162
175
|
o([
|
|
163
|
-
|
|
164
|
-
],
|
|
165
|
-
|
|
176
|
+
z()
|
|
177
|
+
], r.prototype, "_hasLeadingIcon");
|
|
178
|
+
L(g, r);
|
|
166
179
|
export {
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
180
|
+
r as PieSelect,
|
|
181
|
+
c as defaultProps,
|
|
182
|
+
O as sizes,
|
|
183
|
+
P as statusTypes
|
|
171
184
|
};
|
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
|
|
5
|
+
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
6
6
|
import * as React_2 from 'react';
|
|
7
7
|
import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
8
8
|
import type { TemplateResult } from 'lit';
|
|
@@ -72,7 +72,7 @@ declare class PieSelect_2 extends PieSelect_base implements SelectProps {
|
|
|
72
72
|
static styles: CSSResult;
|
|
73
73
|
}
|
|
74
74
|
|
|
75
|
-
declare const PieSelect_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof
|
|
75
|
+
declare const PieSelect_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof PieElement;
|
|
76
76
|
|
|
77
77
|
declare type PieSelectEvents = {
|
|
78
78
|
onChange?: (event: CustomEvent) => void;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-select",
|
|
3
3
|
"description": "PIE Design System Select built using Web Components",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.4.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -33,13 +33,14 @@
|
|
|
33
33
|
"license": "Apache-2.0",
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
36
|
-
"@justeattakeaway/pie-components-config": "0.
|
|
36
|
+
"@justeattakeaway/pie-components-config": "0.19.0",
|
|
37
37
|
"@justeattakeaway/pie-css": "0.16.0",
|
|
38
|
+
"@justeattakeaway/pie-monorepo-utils": "0.5.0",
|
|
38
39
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
39
40
|
},
|
|
40
41
|
"dependencies": {
|
|
41
|
-
"@justeattakeaway/pie-assistive-text": "0.
|
|
42
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
42
|
+
"@justeattakeaway/pie-assistive-text": "0.9.0",
|
|
43
|
+
"@justeattakeaway/pie-webc-core": "0.25.0"
|
|
43
44
|
},
|
|
44
45
|
"volta": {
|
|
45
46
|
"extends": "../../../package.json"
|
package/src/index.ts
CHANGED
|
@@ -5,6 +5,7 @@ import {
|
|
|
5
5
|
unsafeCSS,
|
|
6
6
|
type TemplateResult,
|
|
7
7
|
} from 'lit';
|
|
8
|
+
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
8
9
|
import {
|
|
9
10
|
FormControlMixin,
|
|
10
11
|
RtlMixin,
|
|
@@ -42,7 +43,7 @@ const assistiveTextIdValue = 'assistive-text';
|
|
|
42
43
|
* @tagname pie-select
|
|
43
44
|
* @event {CustomEvent} change - when the selected option is changed.
|
|
44
45
|
*/
|
|
45
|
-
export class PieSelect extends FormControlMixin(RtlMixin(
|
|
46
|
+
export class PieSelect extends FormControlMixin(RtlMixin(PieElement)) implements SelectProps {
|
|
46
47
|
static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
|
|
47
48
|
|
|
48
49
|
@property({ type: String })
|