@justeattakeaway/pie-select 0.8.37 → 0.9.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/dist/index.js +26 -25
- package/package.json +5 -5
- package/src/index.ts +3 -7
package/dist/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { LitElement as x, html as p,
|
|
2
|
-
import { FormControlMixin as
|
|
3
|
-
import { property as n, query as b, queryAssignedElements as
|
|
1
|
+
import { LitElement as x, html as p, unsafeCSS as _ } from "lit";
|
|
2
|
+
import { FormControlMixin as $, RtlMixin as I, DelegatesFocusMixin as w, wrapNativeEvent as z, validPropertyValues as f, safeCustomElement as k } from "@justeattakeaway/pie-webc-core";
|
|
3
|
+
import { property as n, query as b, queryAssignedElements as S, state as C } from "lit/decorators.js";
|
|
4
4
|
import { ifDefined as u } from "lit/directives/if-defined.js";
|
|
5
|
-
import { classMap as
|
|
6
|
-
import { live as
|
|
5
|
+
import { classMap as V } from "lit/directives/class-map.js";
|
|
6
|
+
import { live as L } from "lit/directives/live.js";
|
|
7
7
|
import "@justeattakeaway/pie-icons-webc/dist/IconChevronDown.js";
|
|
8
8
|
import "@justeattakeaway/pie-assistive-text";
|
|
9
9
|
const h = class h extends x {
|
|
@@ -11,27 +11,27 @@ const h = class h extends x {
|
|
|
11
11
|
this.getAttribute("v") || this.setAttribute("v", h.v);
|
|
12
12
|
}
|
|
13
13
|
};
|
|
14
|
-
h.v = "0.
|
|
14
|
+
h.v = "0.9.0";
|
|
15
15
|
let g = h;
|
|
16
|
-
const
|
|
16
|
+
const T = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-select{--select-padding-block: var(--dt-spacing-c);--select-padding-inline-start: var(--dt-spacing-d);--select-padding-inline-end: 52px;--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-family: var(--dt-font-body-l-family);--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-family:var(--select-font-family);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-family:inherit;font-size:inherit;line-height:inherit;color:inherit;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--select-cursor);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.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-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}", A = ["small", "medium", "large"], F = ["default", "error"], c = {
|
|
17
17
|
size: "medium",
|
|
18
18
|
status: "default",
|
|
19
19
|
disabled: !1,
|
|
20
20
|
options: [],
|
|
21
21
|
value: ""
|
|
22
22
|
};
|
|
23
|
-
var
|
|
24
|
-
for (var s = r > 1 ? void 0 : r ?
|
|
23
|
+
var D = Object.defineProperty, O = Object.getOwnPropertyDescriptor, o = (t, e, i, r) => {
|
|
24
|
+
for (var s = r > 1 ? void 0 : r ? O(e, i) : e, a = t.length - 1, d; a >= 0; a--)
|
|
25
25
|
(d = t[a]) && (s = (r ? d(e, i, s) : d(s)) || s);
|
|
26
|
-
return r && s &&
|
|
26
|
+
return r && s && D(e, i, s), s;
|
|
27
27
|
};
|
|
28
28
|
const m = "pie-select", v = "assistive-text";
|
|
29
|
-
let l = class extends I(w(
|
|
29
|
+
let l = class extends $(I(w(g))) {
|
|
30
30
|
constructor() {
|
|
31
31
|
super(...arguments), this.size = c.size, this.disabled = c.disabled, this.status = c.status, this.options = c.options, this._value = c.value, this._hasLeadingIcon = !1, this._handleChange = (t) => {
|
|
32
32
|
const { value: e } = this._select;
|
|
33
33
|
this._value = e, this._internals.setFormValue(e);
|
|
34
|
-
const i =
|
|
34
|
+
const i = z(t);
|
|
35
35
|
this.dispatchEvent(i);
|
|
36
36
|
};
|
|
37
37
|
}
|
|
@@ -91,7 +91,7 @@ let l = class extends I(w(z(g))) {
|
|
|
91
91
|
const r = this._value !== "" ? this._value === e.value : e.selected;
|
|
92
92
|
return p`
|
|
93
93
|
<option
|
|
94
|
-
.value="${
|
|
94
|
+
.value="${L(e.value || "")}"
|
|
95
95
|
?disabled="${e.disabled}"
|
|
96
96
|
?selected="${r}">
|
|
97
97
|
${e.text}
|
|
@@ -105,14 +105,15 @@ let l = class extends I(w(z(g))) {
|
|
|
105
105
|
* @returns A template result with the assistive text
|
|
106
106
|
*/
|
|
107
107
|
renderAssistiveText() {
|
|
108
|
-
return
|
|
108
|
+
return p`
|
|
109
109
|
<pie-assistive-text
|
|
110
110
|
id="${v}"
|
|
111
111
|
variant="${u(this.status)}"
|
|
112
|
+
message="${this.assistiveText || ""}"
|
|
113
|
+
?isVisuallyHidden="${!this.assistiveText}"
|
|
112
114
|
data-test-id="pie-select-assistive-text">
|
|
113
|
-
${this.assistiveText}
|
|
114
115
|
</pie-assistive-text>
|
|
115
|
-
|
|
116
|
+
`;
|
|
116
117
|
}
|
|
117
118
|
render() {
|
|
118
119
|
const {
|
|
@@ -132,7 +133,7 @@ let l = class extends I(w(z(g))) {
|
|
|
132
133
|
};
|
|
133
134
|
return p`
|
|
134
135
|
<div
|
|
135
|
-
class="${
|
|
136
|
+
class="${V(y)}"
|
|
136
137
|
data-test-id="pie-select-shell">
|
|
137
138
|
<slot name="leadingIcon" @slotchange=${this._handleLeadingIconSlotchange}></slot>
|
|
138
139
|
<select
|
|
@@ -151,17 +152,17 @@ let l = class extends I(w(z(g))) {
|
|
|
151
152
|
`;
|
|
152
153
|
}
|
|
153
154
|
};
|
|
154
|
-
l.styles =
|
|
155
|
+
l.styles = _(T);
|
|
155
156
|
o([
|
|
156
157
|
n({ type: String }),
|
|
157
|
-
f(m,
|
|
158
|
+
f(m, A, c.size)
|
|
158
159
|
], l.prototype, "size", 2);
|
|
159
160
|
o([
|
|
160
161
|
n({ type: Boolean })
|
|
161
162
|
], l.prototype, "disabled", 2);
|
|
162
163
|
o([
|
|
163
164
|
n({ type: String }),
|
|
164
|
-
f(m,
|
|
165
|
+
f(m, F, c.status)
|
|
165
166
|
], l.prototype, "status", 2);
|
|
166
167
|
o([
|
|
167
168
|
n({ type: String })
|
|
@@ -179,20 +180,20 @@ o([
|
|
|
179
180
|
b("select")
|
|
180
181
|
], l.prototype, "_select", 2);
|
|
181
182
|
o([
|
|
182
|
-
|
|
183
|
+
S({ slot: "leadingIcon", flatten: !0 })
|
|
183
184
|
], l.prototype, "_leadingIconSlot", 2);
|
|
184
185
|
o([
|
|
185
|
-
|
|
186
|
+
C()
|
|
186
187
|
], l.prototype, "_hasLeadingIcon", 2);
|
|
187
188
|
o([
|
|
188
189
|
n()
|
|
189
190
|
], l.prototype, "value", 1);
|
|
190
191
|
l = o([
|
|
191
|
-
|
|
192
|
+
k("pie-select")
|
|
192
193
|
], l);
|
|
193
194
|
export {
|
|
194
195
|
l as PieSelect,
|
|
195
196
|
c as defaultProps,
|
|
196
|
-
|
|
197
|
-
|
|
197
|
+
A as sizes,
|
|
198
|
+
F as statusTypes
|
|
198
199
|
};
|
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.9.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -44,12 +44,12 @@
|
|
|
44
44
|
"license": "Apache-2.0",
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@justeattakeaway/pie-components-config": "0.21.3",
|
|
47
|
-
"@justeattakeaway/pie-css": "1.
|
|
48
|
-
"@justeattakeaway/pie-monorepo-utils": "0.9.
|
|
47
|
+
"@justeattakeaway/pie-css": "1.2.0",
|
|
48
|
+
"@justeattakeaway/pie-monorepo-utils": "0.9.5"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"@justeattakeaway/pie-assistive-text": "0.
|
|
52
|
-
"@justeattakeaway/pie-webc-core": "
|
|
51
|
+
"@justeattakeaway/pie-assistive-text": "1.0.0",
|
|
52
|
+
"@justeattakeaway/pie-webc-core": "15.0.0"
|
|
53
53
|
},
|
|
54
54
|
"customElements": "custom-elements.json",
|
|
55
55
|
"sideEffects": [
|
package/src/index.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import {
|
|
2
2
|
html,
|
|
3
|
-
nothing,
|
|
4
3
|
unsafeCSS,
|
|
5
4
|
type TemplateResult,
|
|
6
5
|
} from 'lit';
|
|
@@ -212,17 +211,14 @@ export class PieSelect extends FormControlMixin(RtlMixin(DelegatesFocusMixin(Pie
|
|
|
212
211
|
* Renders the assistive text if available.
|
|
213
212
|
* @returns A template result with the assistive text
|
|
214
213
|
*/
|
|
215
|
-
private renderAssistiveText (): TemplateResult
|
|
216
|
-
if (!this.assistiveText) {
|
|
217
|
-
return nothing;
|
|
218
|
-
}
|
|
219
|
-
|
|
214
|
+
private renderAssistiveText (): TemplateResult {
|
|
220
215
|
return html`
|
|
221
216
|
<pie-assistive-text
|
|
222
217
|
id="${assistiveTextIdValue}"
|
|
223
218
|
variant="${ifDefined(this.status)}"
|
|
219
|
+
message="${this.assistiveText || ''}"
|
|
220
|
+
?isVisuallyHidden="${!this.assistiveText}"
|
|
224
221
|
data-test-id="pie-select-assistive-text">
|
|
225
|
-
${this.assistiveText}
|
|
226
222
|
</pie-assistive-text>
|
|
227
223
|
`;
|
|
228
224
|
}
|