@justeattakeaway/pie-select 0.8.3 → 0.8.5

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.
Files changed (3) hide show
  1. package/dist/index.js +20 -20
  2. package/package.json +4 -4
  3. package/src/select.scss +0 -1
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { LitElement as y, html as p, nothing as _, unsafeCSS as $ } from "lit";
1
+ import { LitElement as _, html as p, nothing as y, unsafeCSS as $ } from "lit";
2
2
  import { FormControlMixin as I, RtlMixin as w, DelegatesFocusMixin as z, wrapNativeEvent as k, validPropertyValues as b, safeCustomElement as S } from "@justeattakeaway/pie-webc-core";
3
3
  import { property as n, query as f, queryAssignedElements as C, state as V } from "lit/decorators.js";
4
4
  import { ifDefined as u } from "lit/directives/if-defined.js";
@@ -6,24 +6,24 @@ import { classMap as L } from "lit/directives/class-map.js";
6
6
  import { live as T } from "lit/directives/live.js";
7
7
  import "@justeattakeaway/pie-icons-webc/dist/IconChevronDown.js";
8
8
  import "@justeattakeaway/pie-assistive-text";
9
- const h = class h extends y {
9
+ const h = class h extends _ {
10
10
  willUpdate() {
11
11
  this.getAttribute("v") || this.setAttribute("v", h.v);
12
12
  }
13
13
  };
14
- h.v = "0.8.3";
14
+ h.v = "0.8.5";
15
15
  let g = h;
16
- const A = "*,*: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-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}", F = ["small", "medium", "large"], D = ["default", "error"], c = {
16
+ const A = "*,*: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-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-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}", F = ["small", "medium", "large"], D = ["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 O = Object.defineProperty, P = Object.getOwnPropertyDescriptor, o = (t, e, i, r) => {
24
- for (var s = r > 1 ? void 0 : r ? P(e, i) : e, a = t.length - 1, d; a >= 0; a--)
25
- (d = t[a]) && (s = (r ? d(e, i, s) : d(s)) || s);
26
- return r && s && O(e, i, s), s;
23
+ var O = Object.defineProperty, P = Object.getOwnPropertyDescriptor, o = (t, e, r, i) => {
24
+ for (var s = i > 1 ? void 0 : i ? P(e, r) : e, a = t.length - 1, d; a >= 0; a--)
25
+ (d = t[a]) && (s = (i ? d(e, r, s) : d(s)) || s);
26
+ return i && s && O(e, r, s), s;
27
27
  };
28
28
  const m = "pie-select", v = "assistive-text";
29
29
  let l = class extends I(w(z(g))) {
@@ -31,8 +31,8 @@ let l = class extends I(w(z(g))) {
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 = k(t);
35
- this.dispatchEvent(i);
34
+ const r = k(t);
35
+ this.dispatchEvent(r);
36
36
  };
37
37
  }
38
38
  firstUpdated() {
@@ -66,8 +66,8 @@ let l = class extends I(w(z(g))) {
66
66
  * Resets the value to the default select value.
67
67
  */
68
68
  formResetCallback() {
69
- const t = this.options.reduce((s, a) => a.tag === "optgroup" ? s.concat(a.options) : (s.push(a), s), []), e = t.length > 0 ? t[0].value : "", i = t.find((s) => s.selected === !0), r = i ? i.value : e;
70
- this._select.value = r || "", this._internals.setFormValue(r || null), this._value = r || "", this.requestUpdate();
69
+ const t = this.options.reduce((s, a) => a.tag === "optgroup" ? s.concat(a.options) : (s.push(a), s), []), e = t.length > 0 ? t[0].value : "", r = t.find((s) => s.selected === !0), i = r ? r.value : e;
70
+ this._select.value = i || "", this._internals.setFormValue(i || null), this._value = i || "", this.requestUpdate();
71
71
  }
72
72
  _handleLeadingIconSlotchange() {
73
73
  this._hasLeadingIcon = !!this._leadingIconSlot.length;
@@ -88,12 +88,12 @@ let l = class extends I(w(z(g))) {
88
88
  ${this.renderChildren(e.options)}
89
89
  </optgroup>
90
90
  `;
91
- const r = this._value !== "" ? this._value === e.value : e.selected;
91
+ const i = this._value !== "" ? this._value === e.value : e.selected;
92
92
  return p`
93
93
  <option
94
94
  .value="${T(e.value || "")}"
95
95
  ?disabled="${e.disabled}"
96
- ?selected="${r}">
96
+ ?selected="${i}">
97
97
  ${e.text}
98
98
  </option>
99
99
  `;
@@ -112,21 +112,21 @@ let l = class extends I(w(z(g))) {
112
112
  data-test-id="pie-select-assistive-text">
113
113
  ${this.assistiveText}
114
114
  </pie-assistive-text>
115
- ` : _;
115
+ ` : y;
116
116
  }
117
117
  render() {
118
118
  const {
119
119
  assistiveText: t,
120
120
  disabled: e,
121
- status: i,
122
- size: r,
121
+ status: r,
122
+ size: i,
123
123
  name: s,
124
124
  options: a,
125
125
  _hasLeadingIcon: d
126
126
  } = this, x = {
127
127
  "c-select": !0,
128
- [`c-select--${r}`]: !0,
129
128
  [`c-select--${i}`]: !0,
129
+ [`c-select--${r}`]: !0,
130
130
  "c-select--withLeadingIcon": d,
131
131
  "is-disabled": e
132
132
  };
@@ -140,8 +140,8 @@ let l = class extends I(w(z(g))) {
140
140
  name="${u(s)}"
141
141
  ?disabled="${e}"
142
142
  aria-describedby="${u(t ? v : void 0)}"
143
- aria-invalid="${i === "error" ? "true" : "false"}"
144
- aria-errormessage="${u(i === "error" ? v : void 0)}"
143
+ aria-invalid="${r === "error" ? "true" : "false"}"
144
+ aria-errormessage="${u(r === "error" ? v : void 0)}"
145
145
  @change=${this._handleChange}>
146
146
  ${this.renderChildren(a)}
147
147
  </select>
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.8.3",
4
+ "version": "0.8.5",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -45,13 +45,13 @@
45
45
  "devDependencies": {
46
46
  "@custom-elements-manifest/analyzer": "0.9.0",
47
47
  "@justeattakeaway/pie-components-config": "0.21.0",
48
- "@justeattakeaway/pie-css": "0.23.1",
48
+ "@justeattakeaway/pie-css": "0.23.2",
49
49
  "@justeattakeaway/pie-monorepo-utils": "0.7.0",
50
50
  "cem-plugin-module-file-extensions": "0.0.5"
51
51
  },
52
52
  "dependencies": {
53
- "@justeattakeaway/pie-assistive-text": "0.11.3",
54
- "@justeattakeaway/pie-webc-core": "3.0.1"
53
+ "@justeattakeaway/pie-assistive-text": "0.11.4",
54
+ "@justeattakeaway/pie-webc-core": "3.0.2"
55
55
  },
56
56
  "volta": {
57
57
  "extends": "../../../package.json"
package/src/select.scss CHANGED
@@ -83,7 +83,6 @@
83
83
  }
84
84
 
85
85
  ::slotted([slot="leadingIcon"]) {
86
- --icon-display-override: block;
87
86
  --icon-size-override: 24px;
88
87
  inset-inline-start: var(--dt-spacing-d);
89
88
  }