@justeattakeaway/pie-select 0.4.2 → 0.4.4
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 -1
- package/dist/index.js +7 -7
- package/dist/react.d.ts +1 -1
- package/package.json +1 -1
- package/src/defs-react.ts +2 -1
- package/src/index.ts +1 -1
- package/src/react.ts +1 -1
- package/src/select.scss +8 -2
package/custom-elements.json
CHANGED
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
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
|
|
3
|
-
import { FormControlMixin as
|
|
2
|
+
import { property as a, query as f, queryAssignedElements as k, state as w } from "lit/decorators.js";
|
|
3
|
+
import { FormControlMixin as z, RtlMixin as C, wrapNativeEvent as S, validPropertyValues as m, defineCustomElement as L } from "@justeattakeaway/pie-webc-core";
|
|
4
4
|
import { ifDefined as h } from "lit/directives/if-defined.js";
|
|
5
5
|
import { classMap as T } from "lit/directives/class-map.js";
|
|
6
6
|
import { live as E } from "lit/directives/live.js";
|
|
@@ -13,13 +13,13 @@ var A = Object.defineProperty, F = (c, t, e, d) => {
|
|
|
13
13
|
};
|
|
14
14
|
class x extends b {
|
|
15
15
|
constructor() {
|
|
16
|
-
super(...arguments), this.v = "0.4.
|
|
16
|
+
super(...arguments), this.v = "0.4.4";
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
F([
|
|
20
20
|
a({ type: String, reflect: !0 })
|
|
21
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:
|
|
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: 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-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-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-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"], n = {
|
|
23
23
|
size: "medium",
|
|
24
24
|
status: "default",
|
|
25
25
|
disabled: !1,
|
|
@@ -30,7 +30,7 @@ var R = Object.defineProperty, o = (c, t, e, d) => {
|
|
|
30
30
|
(l = c[i]) && (s = l(t, e, s) || s);
|
|
31
31
|
return s && R(t, e, s), s;
|
|
32
32
|
};
|
|
33
|
-
const g = "pie-select", u = "assistive-text", v = class v extends C(
|
|
33
|
+
const g = "pie-select", u = "assistive-text", v = class v extends z(C(x)) {
|
|
34
34
|
constructor() {
|
|
35
35
|
super(...arguments), this.size = n.size, this.disabled = n.disabled, this.status = n.status, this.options = n.options, this._hasLeadingIcon = !1, this._handleChange = (t) => {
|
|
36
36
|
const e = S(t);
|
|
@@ -158,7 +158,7 @@ o([
|
|
|
158
158
|
a({ type: String })
|
|
159
159
|
], r.prototype, "assistiveText");
|
|
160
160
|
o([
|
|
161
|
-
a({ type: String })
|
|
161
|
+
a({ type: String, reflect: !0 })
|
|
162
162
|
], r.prototype, "name");
|
|
163
163
|
o([
|
|
164
164
|
a({ type: Array })
|
|
@@ -173,7 +173,7 @@ o([
|
|
|
173
173
|
k({ slot: "leadingIcon", flatten: !0 })
|
|
174
174
|
], r.prototype, "_leadingIconSlot");
|
|
175
175
|
o([
|
|
176
|
-
|
|
176
|
+
w()
|
|
177
177
|
], r.prototype, "_hasLeadingIcon");
|
|
178
178
|
L(g, r);
|
|
179
179
|
export {
|
package/dist/react.d.ts
CHANGED
|
@@ -78,7 +78,7 @@ declare type PieSelectEvents = {
|
|
|
78
78
|
onChange?: (event: CustomEvent) => void;
|
|
79
79
|
};
|
|
80
80
|
|
|
81
|
-
declare type ReactBaseType = React_2.HTMLAttributes<HTMLSelectElement>;
|
|
81
|
+
declare type ReactBaseType = Omit<React_2.HTMLAttributes<HTMLSelectElement>, 'onChange'>;
|
|
82
82
|
|
|
83
83
|
declare interface SelectOptionGroupProps {
|
|
84
84
|
/**
|
package/package.json
CHANGED
package/src/defs-react.ts
CHANGED
package/src/index.ts
CHANGED
|
@@ -60,7 +60,7 @@ export class PieSelect extends FormControlMixin(RtlMixin(PieElement)) implements
|
|
|
60
60
|
@property({ type: String })
|
|
61
61
|
public assistiveText: SelectProps['assistiveText'];
|
|
62
62
|
|
|
63
|
-
@property({ type: String })
|
|
63
|
+
@property({ type: String, reflect: true })
|
|
64
64
|
public name: SelectProps['name'];
|
|
65
65
|
|
|
66
66
|
@property({ type: Array })
|
package/src/react.ts
CHANGED
|
@@ -15,7 +15,7 @@ const PieSelectReact = createComponent({
|
|
|
15
15
|
},
|
|
16
16
|
});
|
|
17
17
|
|
|
18
|
-
type ReactBaseType = React.HTMLAttributes<HTMLSelectElement>
|
|
18
|
+
type ReactBaseType = Omit<React.HTMLAttributes<HTMLSelectElement>, 'onChange'>
|
|
19
19
|
|
|
20
20
|
type PieSelectEvents = {
|
|
21
21
|
onChange?: (event: CustomEvent) => void;
|
package/src/select.scss
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
.c-select {
|
|
4
4
|
--select-padding-block: var(--dt-spacing-c);
|
|
5
5
|
--select-padding-inline-start: var(--dt-spacing-d);
|
|
6
|
-
--select-padding-inline-end:
|
|
6
|
+
--select-padding-inline-end: 52px;
|
|
7
7
|
--select-background-color: var(--dt-color-container-default);
|
|
8
8
|
--select-text-color: var(--dt-color-content-default);
|
|
9
9
|
--select-border-color: var(--dt-color-border-form);
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
padding-block-start: var(--select-padding-block);
|
|
28
28
|
padding-block-end: var(--select-padding-block);
|
|
29
29
|
background-color: var(--select-background-color);
|
|
30
|
+
font-family: inherit;
|
|
30
31
|
font-size: inherit;
|
|
31
32
|
line-height: inherit;
|
|
32
33
|
color: inherit;
|
|
@@ -36,6 +37,11 @@
|
|
|
36
37
|
appearance: none;
|
|
37
38
|
cursor: var(--select-cursor);
|
|
38
39
|
|
|
40
|
+
// Ensure longer options are truncated
|
|
41
|
+
text-overflow: ellipsis;
|
|
42
|
+
white-space: nowrap;
|
|
43
|
+
overflow: hidden;
|
|
44
|
+
|
|
39
45
|
&:focus-within {
|
|
40
46
|
@include p.focus;
|
|
41
47
|
}
|
|
@@ -98,4 +104,4 @@
|
|
|
98
104
|
--select-text-color: var(--dt-color-content-disabled);
|
|
99
105
|
--select-cursor: auto;
|
|
100
106
|
}
|
|
101
|
-
}
|
|
107
|
+
}
|