@justeattakeaway/pie-select 0.5.1 → 0.6.0

package/dist/index.js

@@ -1,39 +1,34 @@
-import { LitElement as b, html as p, nothing as $, unsafeCSS as I } from "lit";
-import { property as a, query as f, queryAssignedElements as k, state as w } from "lit/decorators.js";
-import { FormControlMixin as z, RtlMixin as C, wrapNativeEvent as S, validPropertyValues as m, defineCustomElement as L } from "@justeattakeaway/pie-webc-core";
+import { LitElement as b, html as p, nothing as _, unsafeCSS as $ } from "lit";
+import { FormControlMixin as I, RtlMixin as w, wrapNativeEvent as z, validPropertyValues as f, safeCustomElement as k } from "@justeattakeaway/pie-webc-core";
+import { property as c, query as m, queryAssignedElements as S, state as C } from "lit/decorators.js";
 import { ifDefined as h } from "lit/directives/if-defined.js";
-import { classMap as T } from "lit/directives/class-map.js";
-import { live as E } from "lit/directives/live.js";
+import { classMap as L } from "lit/directives/class-map.js";
+import { live as T } from "lit/directives/live.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconChevronDown.js";
 import "@justeattakeaway/pie-assistive-text";
-var A = Object.defineProperty, F = (c, t, e, d) => {
-  for (var s = void 0, i = c.length - 1, l; i >= 0; i--)
-    (l = c[i]) && (s = l(t, e, s) || s);
-  return s && A(t, e, s), s;
-};
-class x extends b {
-  constructor() {
-    super(...arguments), this.v = "0.5.1";
+const v = class v extends b {
+  willUpdate() {
+    this.getAttribute("v") || this.setAttribute("v", v.v);
   }
-}
-F([
-  a({ type: String, reflect: !0 })
-], x.prototype, "v");
-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 = {
+};
+v.v = "0.6.0";
+let g = v;
+const A = "*,*: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"], F = ["default", "error"], a = {
   size: "medium",
   status: "default",
   disabled: !1,
   options: []
 };
-var R = Object.defineProperty, o = (c, t, e, d) => {
-  for (var s = void 0, i = c.length - 1, l; i >= 0; i--)
-    (l = c[i]) && (s = l(t, e, s) || s);
-  return s && R(t, e, s), s;
+var P = Object.defineProperty, V = Object.getOwnPropertyDescriptor, o = (t, e, r, l) => {
+  for (var i = l > 1 ? void 0 : l ? V(e, r) : e, n = t.length - 1, d; n >= 0; n--)
+    (d = t[n]) && (i = (l ? d(e, r, i) : d(i)) || i);
+  return l && i && P(e, r, i), i;
 };
-const g = "pie-select", u = "assistive-text", v = class v extends z(C(x)) {
+const x = "pie-select", u = "assistive-text";
+let s = class extends I(w(g)) {
   constructor() {
-    super(...arguments), this.size = n.size, this.disabled = n.disabled, this.status = n.status, this.options = n.options, this._hasLeadingIcon = !1, this._handleChange = (t) => {
-      const e = S(t);
+    super(...arguments), this.size = a.size, this.disabled = a.disabled, this.status = a.status, this.options = a.options, this._hasLeadingIcon = !1, this._handleChange = (t) => {
+      const e = z(t);
       this.dispatchEvent(e), this._internals.setFormValue(this._select.value);
     };
   }
@@ -82,7 +77,7 @@ const g = "pie-select", u = "assistive-text", v = class v extends z(C(x)) {
                         </optgroup>
                     ` : p`
                     <option
-                        .value="${E(e.value)}"
+                        .value="${T(e.value)}"
                         ?disabled="${e.disabled}"
                         ?selected="${e.selected}">
                         ${e.text}
@@ -102,27 +97,27 @@ const g = "pie-select", u = "assistive-text", v = class v extends z(C(x)) {
                 data-test-id="pie-select-assistive-text">
                 ${this.assistiveText}
             </pie-assistive-text>
-        ` : $;
+        ` : _;
   }
   render() {
     const {
       assistiveText: t,
       disabled: e,
-      status: d,
-      size: s,
+      status: r,
+      size: l,
       name: i,
-      options: l,
-      _hasLeadingIcon: y
-    } = this, _ = {
+      options: n,
+      _hasLeadingIcon: d
+    } = this, y = {
       "c-select": !0,
-      [`c-select--${s}`]: !0,
-      [`c-select--${d}`]: !0,
-      "c-select--withLeadingIcon": y,
+      [`c-select--${l}`]: !0,
+      [`c-select--${r}`]: !0,
+      "c-select--withLeadingIcon": d,
       "is-disabled": e
     };
     return p`
             <div
-                class="${T(_)}"
+                class="${L(y)}"
                 data-test-id="pie-select-shell">
                 <slot name="leadingIcon" @slotchange=${this._handleLeadingIconSlotchange}></slot>
                 <select
@@ -130,10 +125,10 @@ const g = "pie-select", u = "assistive-text", v = class v extends z(C(x)) {
                     name="${h(i)}"
                     ?disabled="${e}"
                     aria-describedby="${h(t ? u : void 0)}"
-                    aria-invalid="${d === "error" ? "true" : "false"}"
-                    aria-errormessage="${h(d === "error" ? u : void 0)}"
+                    aria-invalid="${r === "error" ? "true" : "false"}"
+                    aria-errormessage="${h(r === "error" ? u : void 0)}"
                     @change=${this._handleChange}>
-                    ${this.renderChildren(l)}
+                    ${this.renderChildren(n)}
                 </select>
                 <icon-chevron-down size='s' class='c-select-trailingIcon'></icon-chevron-down>
             </div>
@@ -141,44 +136,46 @@ const g = "pie-select", u = "assistive-text", v = class v extends z(C(x)) {
         `;
   }
 };
-v.shadowRootOptions = { ...b.shadowRootOptions, delegatesFocus: !0 }, v.styles = I(V);
-let r = v;
+s.shadowRootOptions = { ...b.shadowRootOptions, delegatesFocus: !0 };
+s.styles = $(A);
 o([
-  a({ type: String }),
-  m(g, O, n.size)
-], r.prototype, "size");
+  c({ type: String }),
+  f(x, O, a.size)
+], s.prototype, "size", 2);
 o([
-  a({ type: Boolean })
-], r.prototype, "disabled");
+  c({ type: Boolean })
+], s.prototype, "disabled", 2);
 o([
-  a({ type: String }),
-  m(g, P, n.status)
-], r.prototype, "status");
+  c({ type: String }),
+  f(x, F, a.status)
+], s.prototype, "status", 2);
 o([
-  a({ type: String })
-], r.prototype, "assistiveText");
+  c({ type: String })
+], s.prototype, "assistiveText", 2);
 o([
-  a({ type: String, reflect: !0 })
-], r.prototype, "name");
+  c({ type: String, reflect: !0 })
+], s.prototype, "name", 2);
 o([
-  a({ type: Array })
-], r.prototype, "options");
+  c({ type: Array })
+], s.prototype, "options", 2);
 o([
-  f("select")
-], r.prototype, "focusTarget");
+  m("select")
+], s.prototype, "focusTarget", 2);
 o([
-  f("select")
-], r.prototype, "_select");
+  m("select")
+], s.prototype, "_select", 2);
 o([
-  k({ slot: "leadingIcon", flatten: !0 })
-], r.prototype, "_leadingIconSlot");
+  S({ slot: "leadingIcon", flatten: !0 })
+], s.prototype, "_leadingIconSlot", 2);
 o([
-  w()
-], r.prototype, "_hasLeadingIcon");
-L(g, r);
+  C()
+], s.prototype, "_hasLeadingIcon", 2);
+s = o([
+  k("pie-select")
+], s);
 export {
-  r as PieSelect,
-  n as defaultProps,
+  s as PieSelect,
+  a as defaultProps,
   O as sizes,
-  P as statusTypes
+  F as statusTypes
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-select",
   "description": "PIE Design System Select built using Web Components",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -39,8 +39,8 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-assistive-text": "0.9.3",
-    "@justeattakeaway/pie-webc-core": "0.25.1"
+    "@justeattakeaway/pie-assistive-text": "0.10.0",
+    "@justeattakeaway/pie-webc-core": "0.26.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/index.ts

@@ -9,7 +9,7 @@ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElem
 import {
     FormControlMixin,
     RtlMixin,
-    defineCustomElement,
+    safeCustomElement,
     validPropertyValues,
     wrapNativeEvent,
 } from '@justeattakeaway/pie-webc-core';
@@ -43,6 +43,7 @@ const assistiveTextIdValue = 'assistive-text';
  * @tagname pie-select
  * @event {CustomEvent} change - when the selected option is changed.
  */
+@safeCustomElement('pie-select')
 export class PieSelect extends FormControlMixin(RtlMixin(PieElement)) implements SelectProps {
     static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
 
@@ -224,8 +225,6 @@ export class PieSelect extends FormControlMixin(RtlMixin(PieElement)) implements
     static styles = unsafeCSS(styles);
 }
 
-defineCustomElement(componentSelector, PieSelect);
-
 declare global {
     interface HTMLElementTagNameMap {
         [componentSelector]: PieSelect;