@justeattakeaway/pie-select 0.3.0 → 0.4.1

package/custom-elements.json

@@ -305,8 +305,8 @@
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "PieElement",
+            "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
           },
           "tagName": "pie-select",
           "customElement": true

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
-import type { LitElement } from 'lit';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit';
 
@@ -69,7 +69,7 @@ export declare class PieSelect extends PieSelect_base implements SelectProps {
     static styles: CSSResult;
 }
 
-declare const PieSelect_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
+declare const PieSelect_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof PieElement;
 
 declare interface SelectOptionGroupProps {
     /**

package/dist/index.js

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

package/dist/react.d.ts

@@ -2,7 +2,7 @@ import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
-import type { LitElement } from 'lit';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import * as React_2 from 'react';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit';
@@ -72,7 +72,7 @@ declare class PieSelect_2 extends PieSelect_base implements SelectProps {
     static styles: CSSResult;
 }
 
-declare const PieSelect_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
+declare const PieSelect_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof PieElement;
 
 declare type PieSelectEvents = {
     onChange?: (event: CustomEvent) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-select",
   "description": "PIE Design System Select built using Web Components",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -33,13 +33,14 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.18.1",
+    "@justeattakeaway/pie-components-config": "0.19.1",
     "@justeattakeaway/pie-css": "0.16.0",
+    "@justeattakeaway/pie-monorepo-utils": "0.5.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-assistive-text": "0.8.5",
-    "@justeattakeaway/pie-webc-core": "0.24.2"
+    "@justeattakeaway/pie-assistive-text": "0.9.1",
+    "@justeattakeaway/pie-webc-core": "0.25.1"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/index.ts

@@ -5,6 +5,7 @@ import {
     unsafeCSS,
     type TemplateResult,
 } from 'lit';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import {
     FormControlMixin,
     RtlMixin,
@@ -42,7 +43,7 @@ const assistiveTextIdValue = 'assistive-text';
  * @tagname pie-select
  * @event {CustomEvent} change - when the selected option is changed.
  */
-export class PieSelect extends FormControlMixin(RtlMixin(LitElement)) implements SelectProps {
+export class PieSelect extends FormControlMixin(RtlMixin(PieElement)) implements SelectProps {
     static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
 
     @property({ type: String })

package/declaration.d.ts

@@ -1,9 +0,0 @@
-declare module '*.scss' {
-    const content: Record<string, string>;
-    export default content;
-}
-
-declare module '*.scss?inline' {
-    const content: Record<string, string>;
-    export default content;
-}