@tmorrow/cre8-wc 1.0.25 → 1.1.1

package/lib/components/select/select.js

@@ -1,93 +1,25 @@
-import { a as u } from "../../icon-DImqxDiW.js";
-import { css as f, html as o, nothing as y } from "lit";
-import { ifDefined as m } from "lit-html/directives/if-defined.js";
-import { property as s, query as _, queryAll as b } from "lit/decorators.js";
-import { nanoid as n } from "nanoid";
-import { Cre8FormElement as v } from "../cre8-form-element.js";
+import { a as f } from "../../icon-D22g8aWB.js";
+import { css as m, html as o, nothing as b } from "lit";
+import { ifDefined as u } from "lit-html/directives/if-defined.js";
+import { property as i, queryAll as y } from "lit/decorators.js";
+import { nanoid as d } from "nanoid";
 import "../field-note/field-note.js";
-const $ = f`@import '../../design-tokens/core/scss/theming/component';
-/*------------------------------------*\
- #SELECT
-\*------------------------------------*/
-
-:host {
-  display: inline-flex;
-  flex-wrap: wrap;
-}
-
-/**
- * Select Label
- */
-.cre8-c-select__label {
-  @include label-styles;
-}
-
-/**
- * Select Body
- * 1) The div that contains the input and icons
- */
-.cre8-c-select__body {
-  position: relative;
-}
-
-/**
- * Select Input
- * 1) The html5 select element
- */
-.cre8-c-select__input {
-  @include input-styles;
-  padding-inline-end: calc(8px * 5.5);
-  cursor: pointer;
-}
-
-/**
- * Select Icon
- * 1) The icons within the body container positioned absolutely over the input
- */
-.cre8-c-select__icons {
-  position: absolute;
-  inset-block-start: 50%;
-  transform: translateY(-50%);
-  inset-inline-end: calc(8px * 1);
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: calc(8px * 1);
-  pointer-events: none;
-}
-
-/**
- * Select Arrow Icon
- */
-.cre8-c-select__icon-arrow {
-  margin-right: calc(8px * 0.75);
-  width: calc(8px * 1.5);
-  height: calc(8px * 1.5);
-}
-
-/**
- * Select field notes
- */
-.cre8-c-select__field-note,
-.cre8-c-select__field-note-success,
-.cre8-c-select__field-note-error {
-  flex-basis: 100%;
-}
-`;
-var N = Object.defineProperty, i = (p, t, r, c) => {
-  for (var l = void 0, a = p.length - 1, h; a >= 0; a--)
-    (h = p[a]) && (l = h(t, r, l) || l);
-  return l && N(t, r, l), l;
+import { Cre8FormElement as v } from "../cre8-form-element.js";
+const _ = m`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex;flex-wrap:wrap}.cre8-c-select__label{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);display:block;margin-bottom:0.5rem}.cre8-c-select__body{position:relative}.cre8-c-select__input{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);outline:var(--cre8-border-width-focus) solid rgba(0,0,0,0);outline-offset:0.125rem;-webkit-appearance:none;width:100%;border-width:var(--cre8-border-width-default);border-style:solid;border-color:var(--cre8-color-border-strong);border-radius:var(--cre8-border-radius-default);padding:0.75rem 0.5rem;color:var(--cre8-color-content-default);background-color:var(--cre8-color-bg-default);transition:outline-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),border-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),background-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),color var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-select__input:hover:not(:disabled),.cre8-c-select__input:focus:not(:disabled),.cre8-c-select__input:active:not(:disabled),.cre8-c-select__input:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-is-error .cre8-c-select__input:hover:not(:disabled),.cre8-is-error .cre8-c-select__input:focus:not(:disabled),.cre8-is-error .cre8-c-select__input:active:not(:disabled),.cre8-is-error .cre8-c-select__input:focus-visible{outline-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-select__input:hover:not(:disabled),.cre8-is-success .cre8-c-select__input:focus:not(:disabled),.cre8-is-success .cre8-c-select__input:active:not(:disabled),.cre8-is-success .cre8-c-select__input:focus-visible{outline-color:var(--cre8-color-border-success)}.cre8-c-select__input:disabled{background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);color:var(--cre8-color-content-disabled);cursor:not-allowed}.cre8-c-select__input:disabled::placeholder{color:var(--cre8-color-content-disabled)}.cre8-c-select__input::placeholder{color:var(--cre8-color-content-subtle)}.cre8-is-error .cre8-c-select__input{border-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-select__input{border-color:var(--cre8-color-border-success)}.cre8-c-select__input{padding-inline-end:2.75rem;cursor:pointer}.cre8-c-select__icons{position:absolute;inset-block-start:50%;transform:translateY(-50%);inset-inline-end:0.5rem;display:flex;align-items:center;justify-content:flex-end;gap:0.5rem;pointer-events:none}.cre8-c-select__icon-arrow{margin-right:0.375rem;width:0.75rem;height:0.75rem}.cre8-c-select__field-note,.cre8-c-select__field-note-success,.cre8-c-select__field-note-error{flex-basis:100%}`;
+var g = Object.defineProperty, t = (p, r, s, c) => {
+  for (var a = void 0, l = p.length - 1, h; l >= 0; l--)
+    (h = p[l]) && (a = h(r, s, a) || a);
+  return a && g(r, s, a), a;
 };
-const d = class d extends v {
+const n = class n extends v {
   constructor() {
-    super(...arguments), this.type = "select", this.items = [], this.label = "Label";
+    super(...arguments), this.type = "select", this.items = [], this.label = "Label", this.required = !1;
   }
   /**
    * Initialize aria attributes
    */
   _initializeAria() {
-    this.fieldId = this.fieldId || n(), (this.fieldNote || this.slotNotEmpty("fieldNote")) && (this.ariaDescribedBy = this.ariaDescribedBy || n()), (this.successNote || this.errorNote) && (this.validationAriaDescribedBy = this.validationAriaDescribedBy || n());
+    this.fieldId = this.fieldId || d(), (this.fieldNote || this.slotNotEmpty("fieldNote")) && (this.ariaDescribedBy = this.ariaDescribedBy || d()), (this.successNote || this.errorNote) && (this.validationAriaDescribedBy = this.validationAriaDescribedBy || d());
   }
   /**
    * Aria describedby string based on field notes and error/success notes
@@ -100,6 +32,12 @@ const d = class d extends v {
   _fieldNoteAria() {
     return this.validationAriaDescribedBy && this.ariaDescribedBy ? `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}` : this.validationAriaDescribedBy && !this.ariaDescribedBy ? this.validationAriaDescribedBy : this.ariaDescribedBy;
   }
+  connectedCallback() {
+    super.connectedCallback(), this.field.setAttribute("name", this.name ?? "");
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
   /**
    * First updatedLifecycle
    * 1) Get the option in the items array with selected set to true. Set that as the selected item
@@ -107,9 +45,9 @@ const d = class d extends v {
    * select the first item value like the native select.
    */
   firstUpdated() {
-    return super.firstUpdated(), this._selectOptions.forEach((t) => {
-      t.selected === !0 && (this.selectedItem = t.value);
-    }), this.defaultValue = this.selectedItem ? this.selectedItem : this._selectOptions[0].value, this._setFormData(), this._initializeAria(), this.updateField();
+    super.firstUpdated(), [...this._selectOptions].forEach((r) => {
+      r.selected === !0 && (this.selectedItem = r.value);
+    }), this.defaultValue = this.selectedItem ? this.selectedItem : this._selectOptions[0].value ?? "Select An Option", this._setFormData(), this._initializeAria(), this.updateField();
   }
   /**
   * Set form data
@@ -117,16 +55,16 @@ const d = class d extends v {
   *    otherwise the default selected item is the first one
   */
   _setFormData() {
-    return this.selectedItem ? this.internals.setFormValue(this.selectedItem) : this.internals.setFormValue(this.defaultValue.toString());
+    return this.selectedItem ? this._internals?.setFormValue(this.selectedItem) : this._internals?.setFormValue(this.defaultValue.toString());
   }
   /**
    * Handle On Change
    * 1. Set the value when the select is changed.
    * 2. Fire the custom event with the current value.
    */
-  _handleOnChange(t) {
-    const r = t.target;
-    this.value = r.options[r.selectedIndex].value, this.internals.setFormValue(this.value);
+  _handleOnChange(r) {
+    const s = r.target;
+    this.value = s.options[s.selectedIndex].value, this._internals.setFormValue(this.value);
     const c = new CustomEvent("change", {
       detail: {
         name: this.name,
@@ -141,16 +79,16 @@ const d = class d extends v {
    * Render the select options
    */
   _renderSelectOptions() {
-    return this.items.map((t) => {
-      if ("options" in t) {
-        const r = t.options.map((c) => o`
+    return this.items.map((r) => {
+      if ("options" in r) {
+        const s = r.options.map((c) => o`
                   <option value="${c.value}">${c.label}</option>
               `);
-        return o`<optgroup label="${t.optGroupLabel}">
-          ${r}
+        return o`<optgroup label="${r.optGroupLabel}">
+          ${s}
         </optgroup>`;
       }
-      return o`<option value="${t.value}">${t.label}</option>`;
+      return o`<option value="${r.value}">${r.label}</option>`;
     });
   }
   /**
@@ -178,27 +116,27 @@ const d = class d extends v {
         </cre8-field-note>` : null;
   }
   render() {
-    const t = this.componentClassNames("cre8-c-select", {
+    const r = this.componentClassNames("cre8-c-select", {
       "cre8-is-error": this.isError,
       "cre8-is-success": this.isSuccess
     });
     return o`
-      <div class="${t}">
+      <div class="${r}">
         <label class="cre8-c-select__label" for="${this.fieldId}">${this.label}</label>
         <div class="cre8-c-select__body">
           <select
             class="cre8-c-select__input"
             id=${this.fieldId}
-            name=${this.name}
+            name=${u(this.name)}
             ?required=${this.required}
             ?disabled=${this.disabled}
-            aria-describedby="${m(this._fieldNoteAria())}"
+            aria-describedby="${u(this._fieldNoteAria())}"
             @change=${this._handleOnChange}
           >
             ${this._renderSelectOptions()}
           </select>
           <div class="cre8-c-select__icons">
-            <cre8-icon svg='${u}' rotate="180" class="cre8-c-select__icon-arrow" aria-hidden='true'>
+            <cre8-icon svg='${f}' rotate="180" class="cre8-c-select__icon-arrow" aria-hidden='true'>
           </div>
         </div>
       </div>
@@ -206,57 +144,51 @@ const d = class d extends v {
           <cre8-field-note
             id=${this.ariaDescribedBy}
             class="cre8-c-select__field-note"
-          ><slot name="fieldNote">${this.fieldNote}</slot></cre8-field-note>` : y}
+          ><slot name="fieldNote">${this.fieldNote}</slot></cre8-field-note>` : b}
       ${this._renderSuccessErrorFieldNote()}
     `;
   }
 };
-d.styles = [$];
-let e = d;
-i([
-  s({ type: Array })
+n.styles = [_];
+let e = n;
+t([
+  i({ type: Array })
 ], e.prototype, "items");
-i([
-  s()
+t([
+  i()
 ], e.prototype, "label");
-i([
-  s()
-], e.prototype, "name");
-i([
-  s()
+t([
+  i()
 ], e.prototype, "fieldId");
-i([
-  s()
+t([
+  i()
 ], e.prototype, "fieldNote");
-i([
-  s()
+t([
+  i()
 ], e.prototype, "ariaDescribedBy");
-i([
-  s()
+t([
+  i()
 ], e.prototype, "validationAriaDescribedBy");
-i([
-  s({ type: Boolean, reflect: !0 })
+t([
+  i({ type: Boolean, reflect: !0 })
 ], e.prototype, "required");
-i([
-  s({ type: Boolean, reflect: !0 })
+t([
+  i({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled");
-i([
-  s({ type: Boolean, reflect: !0 })
+t([
+  i({ type: Boolean, reflect: !0 })
 ], e.prototype, "isError");
-i([
-  s()
+t([
+  i()
 ], e.prototype, "errorNote");
-i([
-  s({ type: Boolean, reflect: !0 })
+t([
+  i({ type: Boolean, reflect: !0 })
 ], e.prototype, "isSuccess");
-i([
-  s()
+t([
+  i()
 ], e.prototype, "successNote");
-i([
-  _("select")
-], e.prototype, "field");
-i([
-  b("option")
+t([
+  y("option")
 ], e.prototype, "_selectOptions");
 customElements.get("cre8-select") === void 0 && customElements.define("cre8-select", e);
 export {

package/lib/components/select/select.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.styles.d.ts","sourceRoot":"","sources":["../../../components/select/select.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAoEX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"select.styles.d.ts","sourceRoot":"","sources":["../../../components/select/select.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAkhK,CAAC;AAC/hK,eAAe,MAAM,CAAC"}

package/lib/components/select-tile/select-tile.d.ts

@@ -113,10 +113,6 @@ export declare class Cre8SelectTile extends Cre8FormElement {
      * Select Tile FieldId
      */
     fieldId?: string;
-    /**
-     * Name of the form control.
-     */
-    name?: string;
     /**
      * Radio item fieldnote aria describe by
      */

package/lib/components/select-tile/select-tile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-tile.d.ts","sourceRoot":"","sources":["../../../components/select-tile/select-tile.ts"],"names":[],"mappings":"AACA,OAAO,EACS,cAAc,EAC7B,MAAM,KAAK,CAAC;AAKb,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,cAAc,CAAC;AAMlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCE;AACN,qBAAa,cAAe,SAAQ,eAAe;IAC/C,MAAM,CAAC,iBAAiB;;;;;;;MAA6D;IAErF,OAAO,CAAC,WAAW,CAAmF;IAEtG;;OAEG;IAEC,IAAI,EAAE,OAAO,GAAG,UAAU,CAAW;IAEzC;;OAEG;IAEC,KAAK,EAAG,gBAAgB,CAAC;IAE7B,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;;;OAMG;IAEC,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,iBAAiB,CAAC;IAExD;;;OAGG;IAEC,sBAAsB,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAQ;IAEvF;;;OAGG;IAEC,aAAa,EAAE,MAAM,GAAG,OAAO,GAAG,WAAW,GAAG,MAAM,CAAW;IAErE;;OAEG;IAEC,YAAY,EAAE,KAAK,GAAG,OAAO,CAAS;IAE1C;;;;;;;OAOG;IAEC,KAAK,CAAC,EAAE,QAAQ,CAAC;IAErB;;OAEG;IAEC,OAAO,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IAEC,OAAO,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;OAKG;IAEC,cAAc,EAAE,OAAO,CAAC;IAE5B;;OAEG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IAEC,IAAI,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IAEH,OAAO,CAAC,eAAe,CAAC,CAAS;IAEjC;;OAEG;IAEC,SAAS,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,IAAI,IAAI,oBAEP;IAED;;;;OAIG;IACH,iBAAiB;IAWjB;;;;;OAKG;IACH,iBAAiB,IAAI,IAAI;IAMzB;;;;OAIG;IACH,OAAO,CAAC,YAAY,EAAE,cAAc;IAwBpC,WAAW;IAgBX,kBAAkB;IASlB,MAAM;CA8DT;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,kBAAkB,EAAE,cAAc,CAAC;KACtC;CACJ;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"select-tile.d.ts","sourceRoot":"","sources":["../../../components/select-tile/select-tile.ts"],"names":[],"mappings":"AACA,OAAO,EACS,cAAc,EAC7B,MAAM,KAAK,CAAC;AAKb,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,cAAc,CAAC;AAMlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCE;AACN,qBAAa,cAAe,SAAQ,eAAe;IAC/C,MAAM,CAAC,iBAAiB;;;;;;;MAA6D;IAErF,OAAO,CAAC,WAAW,CAAmF;IAEtG;;OAEG;IAEC,IAAI,EAAE,OAAO,GAAG,UAAU,CAAW;IAEzC;;OAEG;IAEC,KAAK,EAAG,gBAAgB,CAAC;IAE7B,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;;;OAMG;IAEC,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,iBAAiB,CAAC;IAExD;;;OAGG;IAEC,sBAAsB,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAQ;IAEvF;;;OAGG;IAEC,aAAa,EAAE,MAAM,GAAG,OAAO,GAAG,WAAW,GAAG,MAAM,CAAW;IAErE;;OAEG;IAEC,YAAY,EAAE,KAAK,GAAG,OAAO,CAAS;IAE1C;;;;;;;OAOG;IAEC,KAAK,CAAC,EAAE,QAAQ,CAAC;IAErB;;OAEG;IAEC,OAAO,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IAEC,OAAO,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;OAKG;IAEC,cAAc,EAAE,OAAO,CAAC;IAE5B;;OAEG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IAEH,OAAO,CAAC,eAAe,CAAC,CAAS;IAEjC;;OAEG;IAEC,SAAS,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,IAAI,IAAI,oBAEP;IAED;;;;OAIG;IACH,iBAAiB;IAWjB;;;;;OAKG;IACH,iBAAiB,IAAI,IAAI;IAMzB;;;;OAIG;IACH,OAAO,CAAC,YAAY,EAAE,cAAc;IAwBpC,WAAW;IAgBX,kBAAkB;IASlB,MAAM;CA8DT;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,kBAAkB,EAAE,cAAc,CAAC;KACtC;CACJ;AAED,eAAe,cAAc,CAAC"}