@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/date-picker/date-picker.js

@@ -1,781 +1,85 @@
-import { css as v, html as s, nothing as y } from "lit";
-import { ifDefined as u } from "lit-html/directives/if-defined.js";
-import { state as l, property as p, query as C } from "lit/decorators.js";
-import { Cre8Field as R } from "../field/field.js";
-import { Cre8Element as w } from "../cre8-element.js";
-import "../../icon-D22g8aWB.js";
-import "../button/button.js";
-const I = v`*,::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:block}.cre8-c-date-picker__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-date-picker__body{position:relative;display:flex;align-items:center}input::-webkit-calendar-picker-indicator{display:none}input[type=date]::-webkit-input-placeholder{visibility:hidden !important}.cre8-c-date-picker__calendar-icon-button{position:absolute;right:0.5rem;background:var(--cre8-color-bg-default);border:none;border-radius:0;--cre8-icon-height: size(3);--cre8-icon-width: size(3)}.cre8-c-date-picker--disabled .cre8-c-date-picker__calendar-icon-button,.cre8-c-date-picker--read-only .cre8-c-date-picker__calendar-icon-button{background:var(--cre8-color-bg-disabled)}.cre8-c-date-picker__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-date-picker__input:hover:not(:disabled),.cre8-c-date-picker__input:focus:not(:disabled),.cre8-c-date-picker__input:active:not(:disabled),.cre8-c-date-picker__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-date-picker__input:hover:not(:disabled),.cre8-is-error .cre8-c-date-picker__input:focus:not(:disabled),.cre8-is-error .cre8-c-date-picker__input:active:not(:disabled),.cre8-is-error .cre8-c-date-picker__input:focus-visible{outline-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-date-picker__input:hover:not(:disabled),.cre8-is-success .cre8-c-date-picker__input:focus:not(:disabled),.cre8-is-success .cre8-c-date-picker__input:active:not(:disabled),.cre8-is-success .cre8-c-date-picker__input:focus-visible{outline-color:var(--cre8-color-border-success)}.cre8-c-date-picker__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-date-picker__input:disabled::placeholder{color:var(--cre8-color-content-disabled)}.cre8-c-date-picker__input::placeholder{color:var(--cre8-color-content-subtle)}.cre8-is-error .cre8-c-date-picker__input{border-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-date-picker__input{border-color:var(--cre8-color-border-success)}.cre8-c-date-picker__input:read-only{background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);cursor:default}`, z = v`*,::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}.cre8-c-calendar{min-width:340px;border:var(--cre8-color-border-strong);border-radius:var(--cre8-border-radius-default);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);margin-top:0.25rem;background-color:var(--cre8-color-bg-default);position:absolute}.cre8-c-calendar__header-shortcuts{display:inline-flex;justify-content:center;width:100%;padding-top:1rem;padding-bottom:0.5rem}.cre8-c-calendar__header-shortcuts cre8-button+cre8-button{padding-left:0.5rem}.cre8-c-calendar__header-shortcuts cre8-button{max-height:32px}table{width:100%}tr{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);display:grid;grid-row-gap:.33em;grid-template-columns:repeat(7, 1fr);list-style:none;margin:unset;padding:unset;position:relative}td{align-items:center;display:flex;height:48px;justify-content:center;width:48px}.cre8-c-calendar :is(thead,tbody) :is(span,button){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);align-items:center;block-size:2em;border-radius:var(--cre8-border-radius-brand);display:flex;inline-size:2em;justify-content:center;margin-block:var(0, 0 0.33em);user-select:none}.cre8-c-calendar__day-button{border:none;background:none;margin:0;padding:0}.cre8-c-calendar__day-button:hover,.cre8-c-calendar__day-button:focus{background:var(--cre8-color-bg-default-hover)}.cre8-c-calendar__day-button.cre8-c-calendar__different-month{color:var(--cre8-color-content-subtle)}.cre8-c-calendar__day-button.cre8-c-calendar__different-month:hover,.cre8-c-calendar__day-button.cre8-c-calendar__different-month:focus{background:var(--cre8-color-bg-subtle)}.cre8-c-calendar__day-button[data-today]{color:var(--cre8-color-content-brand);border-color:var(--cre8-color-border-brand);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default)}.cre8-c-calendar__day-button[data-selected]{background:var(--cre8-color-bg-brand-strong);color:var(--cre8-color-content-knockout)}.cre8-c-calendar__day-button[data-selected]:hover,.cre8-c-calendar__day-button[data-selected]:focus{background:var(--cre8-color-bg-brand-strong-hover)}`, F = v`*,::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}.cre8-c-calendar-month-modal{padding:0.5rem}ol{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);display:grid;grid-row-gap:.33em;grid-template-columns:repeat(3, 1fr);list-style:none;margin:unset;padding:unset}li{display:inline-flex;justify-content:center}`;
-var S = Object.defineProperty, O = (d, e, t, a) => {
-  for (var r = void 0, i = d.length - 1, n; i >= 0; i--)
-    (n = d[i]) && (r = n(e, t, r) || r);
-  return r && S(e, t, r), r;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const _ = class _ extends w {
-  constructor() {
-    super(), this.monthNames = [
-      "January",
-      "February",
-      "March",
-      "April",
-      "May",
-      "June",
-      "July",
-      "August",
-      "September",
-      "October",
-      "November",
-      "December"
-    ];
-  }
-  firstUpdated() {
-    this.focusOnCurrentMonth();
-  }
-  async focusOnCurrentMonth() {
-    await this.updateComplete, (this.shadowRoot?.querySelector(
-      "li[data-current-month]"
-    ).children[0].shadowRoot?.querySelector("button")).focus();
-  }
-  emitMonth(e) {
-    const t = new CustomEvent("changeMonth", {
-      detail: {
-        month: e
-      }
-    });
-    this.dispatchEvent(t);
-  }
-  getMonthListItems() {
-    return this.monthNames.map(
-      (e, t) => s` <li ?data-current-month="${t === this.currentMonth}" >
-          <cre8-button text="${e}" variant="tertiary" size="sm"
-          @click="${() => this.emitMonth(t)}"></cre8-button>
-        </li>`
-    );
-  }
-  render() {
-    const e = this.componentClassNames("cre8-c-calendar-month-modal", {});
-    return s` <div class="${e}">
-      <ol aria-label="choose a month">
-        ${this.getMonthListItems()}
-      </ol>
-    </div> `;
-  }
-};
-_.styles = [F];
-let f = _;
-O([
-  l()
-], f.prototype, "monthNames");
-O([
-  p({ reflect: !0, type: Number })
-], f.prototype, "currentMonth");
-customElements.get("cre8-calendar-month-modal") === void 0 && customElements.define("cre8-calendar-month-modal", f);
-const N = v`*,::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}.cre8-c-calendar-year-modal{display:flex;justify-content:space-around;align-items:center;padding:0.5rem}ol{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);display:grid;grid-row-gap:.33em;grid-template-columns:repeat(3, 1fr);list-style:none;margin:unset;padding:unset}li{display:inline-flex;justify-content:center}cre8-button{height:fit-content}`;
-var X = Object.defineProperty, E = Object.getOwnPropertyDescriptor, x = (d, e, t, a) => {
-  for (var r = a > 1 ? void 0 : a ? E(e, t) : e, i = d.length - 1, n; i >= 0; i--)
-    (n = d[i]) && (r = (a ? n(e, t, r) : n(r)) || r);
-  return a && r && X(e, t, r), r;
-};
-const D = class D extends w {
-  get currentYear() {
-    return this._currentYear;
-  }
-  set currentYear(e) {
-    const t = this._currentYear;
-    this._currentYear = e, this.modalAnchorYear = e, this.requestUpdate("currentDate", t), this.createYearArray(this.currentYear);
-  }
-  constructor() {
-    super(), this.yearNumbers = [];
-  }
-  emitYear(e) {
-    const t = new CustomEvent("changeYear", {
-      detail: {
-        year: e
-      }
-    });
-    this.dispatchEvent(t);
-  }
-  createYearArray(e) {
-    const t = Array.from(Array(12).keys());
-    this.yearNumbers = t.map((a) => a + (e - 7));
-  }
-  getYearListItems() {
-    return this.yearNumbers.map(
-      ((e) => s` <li
-        ?data-current-year="${e === this.currentYear}"
-      >
-        <cre8-button
-          text="${e}"
-          variant="tertiary"
-          size="sm"
-          @click="${() => this.emitYear(e)}"
-        ></cre8-button>
-      </li>`)
-    );
-  }
-  firstUpdated() {
-    this.focusOnCurrentYear();
-  }
-  async focusOnCurrentYear() {
-    await this.updateComplete, (this.shadowRoot?.querySelector(
-      "li[data-current-year]"
-    ).children[0].shadowRoot?.querySelector("button")).focus();
-  }
-  previousYearArray() {
-    this.modalAnchorYear -= 12, this.createYearArray(this.modalAnchorYear);
-  }
-  nextYearArray() {
-    this.modalAnchorYear += 12, this.createYearArray(this.modalAnchorYear);
-  }
-  render() {
-    const e = this.componentClassNames(
-      "cre8-c-calendar-year-modal",
-      {}
-    );
-    return s`
-      <div class="${e}">
-        <cre8-button
-          class="cre8-c-calendar-year-modal__nav-button"
-          @click="${this.previousYearArray}"
-          variant="tertiary"
-          text="Previous 12 years"
-          ?hideText=${!0}
-          iconName="keyboard-arrow-left"
-        ></cre8-button>
-        <ol aria-label="choose a year">
-          ${this.getYearListItems()}
-        </ol>
-        <cre8-button
-          class="cre8-c-calendar-year-modal__nav-button"
-          @click="${this.nextYearArray}"
-          variant="tertiary"
-          text="Next 12 years"
-          ?hideText=${!0}
-          iconName="keyboard-arrow-right"
-        ></cre8-button>
-      </div>
-    `;
-  }
-};
-D.styles = [N];
-let m = D;
-x([
-  l()
-], m.prototype, "yearNumbers", 2);
-x([
-  l()
-], m.prototype, "_currentYear", 2);
-x([
-  l()
-], m.prototype, "modalAnchorYear", 2);
-x([
-  p({ reflect: !0, type: Number })
-], m.prototype, "currentYear", 1);
-customElements.get("cre8-calendar-year-modal") === void 0 && customElements.define("cre8-calendar-year-modal", m);
-const A = v`*,::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}.cre8-c-calendar-navigation{align-items:center;display:flex;height:60px;justify-content:center}.cre8-c-calendar-navigation__inner-buttons{display:flex;min-width:188px;justify-content:space-around}`;
-var q = Object.defineProperty, T = (d, e, t, a) => {
-  for (var r = void 0, i = d.length - 1, n; i >= 0; i--)
-    (n = d[i]) && (r = n(e, t, r) || r);
-  return r && q(e, t, r), r;
-};
-const $ = class $ extends w {
-  activateModal(e) {
-    const t = new CustomEvent("activateModal", {
-      detail: {
-        modal: e
-      }
-    });
-    this.dispatchEvent(t);
-  }
-  changeMonth(e) {
-    const t = new CustomEvent("changeMonth", {
-      detail: {
-        addend: e
-      }
-    });
-    this.dispatchEvent(t);
-  }
-  changeYear(e) {
-    const t = new CustomEvent("changeYear", {
-      detail: {
-        addend: e
-      }
-    });
-    this.dispatchEvent(t);
-  }
-  render() {
-    const e = this.componentClassNames(
-      "cre8-c-calendar-navigation",
-      {}
-    );
-    return s`
-      <div class="${e}">
-        <cre8-button
-          variant="tertiary"
-          text="Previous year"
-          ?hideText=${!0}
-          iconName="caret-double-left"
-          @click="${() => this.changeYear(-1)}"
-        ></cre8-button>
-
-        <cre8-button
-          variant="tertiary"
-          text="Previous month"
-          ?hideText=${!0}
-          iconName="keyboard-arrow-left"
-          @click="${() => this.changeMonth(-1)}"
-        ></cre8-button>
-
-        <div class="cre8-c-calendar-navigation__inner-buttons">
-          <cre8-button
-            class="cre8-c-calendar-navigation__month-modal-button"
-            variant="tertiary"
-            text="${this.monthName}"
-            aria-label="${this.monthName}, month picker modal"
-            size="sm"
-            @click="${() => this.activateModal("month")}"
-          ></cre8-button>
-
-          <cre8-button
-            class="cre8-c-calendar-navigation__year-modal-button"
-            variant="tertiary"
-            text="${this.year}"
-            aria-label="${this.year}, year picker modal"
-            size="sm"
-            @click="${() => this.activateModal("year")}"
-          ></cre8-button>
-        </div>
-
-        <cre8-button
-          variant="tertiary"
-          text="Next month"
-          ?hideText=${!0}
-          iconName="keyboard-arrow-right"
-          @click="${() => this.changeMonth(1)}"
-        ></cre8-button>
-
-        <cre8-button
-          variant="tertiary"
-          text="Next year"
-          ?hideText=${!0}
-          iconName="caret-double-right"
-          @click="${() => this.changeYear(1)}"
-        ></cre8-button>
-      </div>
-    `;
-  }
-};
-$.styles = [A];
-let b = $;
-T([
-  p({ type: String, reflect: !0 })
-], b.prototype, "monthName");
-T([
-  p({ type: String, reflect: !0 })
-], b.prototype, "year");
-customElements.get("cre8-calendar-navigation") === void 0 && customElements.define("cre8-calendar-navigation", b);
-var P = Object.defineProperty, j = Object.getOwnPropertyDescriptor, h = (d, e, t, a) => {
-  for (var r = a > 1 ? void 0 : a ? j(e, t) : e, i = d.length - 1, n; i >= 0; i--)
-    (n = d[i]) && (r = (a ? n(e, t, r) : n(r)) || r);
-  return a && r && P(e, t, r), r;
-}, o;
-const c = (o = class extends w {
-  constructor() {
-    super(), this._activeModal = "none", this._handleOnClickOutside = this._handleOnClickOutside.bind(this), this.currentDate = (this.fieldDate && /* @__PURE__ */ new Date(`${this.fieldDate}T00:00`)) ?? /* @__PURE__ */ new Date(), this.locale = document.documentElement.getAttribute("lang") || "en-US", this.dateConfig = {
-      locale: this.locale,
-      today: /* @__PURE__ */ new Date(),
-      weekInfo: {
-        firstDay: 7,
-        weekend: [6, 7]
-      }
-    }, this.weekDays = [
-      "Sunday",
-      "Monday",
-      "Tuesday",
-      "Wednesday",
-      "Thursday",
-      "Friday",
-      "Saturday"
-    ], this.dateFormatOptions = {
-      weekday: "long",
-      year: "numeric",
-      month: "long",
-      day: "numeric"
-    };
-  }
-  get activeModal() {
-    return this._activeModal;
-  }
-  set activeModal(e) {
-    this._activeModal = e;
-  }
-  get fieldDate() {
-    return this._fieldDate;
-  }
-  set fieldDate(e) {
-    const t = this._fieldDate;
-    this.requestUpdate("fieldDate", t);
-    const a = !!(e && (/* @__PURE__ */ new Date(`${e}T00:00`)).getTime());
-    this.currentDate = a ? /* @__PURE__ */ new Date(`${e}T00:00`) : /* @__PURE__ */ new Date(), this._fieldDate = a ? e : "";
-  }
-  get currentDate() {
-    return this._currentDate;
-  }
-  set currentDate(e) {
-    const t = this._currentDate;
-    this._currentDate = e, this.requestUpdate("currentDate", t);
-  }
-  connectedCallback() {
-    super.connectedCallback(), window.addEventListener("click", this._handleOnClickOutside, !1);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), window.removeEventListener("click", this._handleOnClickOutside, !1);
-  }
-  /* Click Event Functions */
-  _handleOnClickOutside(e) {
-    if (!this.shadowRoot?.host)
-      throw Error(
-        "Could not determine navigation context during click handler"
-      );
-    if (!e.composedPath().includes(this.shadowRoot.host)) {
-      const a = new CustomEvent("outsideClick", {
-        detail: {
-          composedPath: e.composedPath()
-        }
-      });
-      this.dispatchEvent(a);
+import { html, nothing } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { property, query, state } from 'lit/decorators.js';
+import styles from './date-picker.styles';
+import { Cre8Field } from '../field/field';
+import './calendar/calendar';
+/**
+ * The Date Picker component renders a form group with label, control, help text and validation styling much
+ * like the Field component but exclusively for type=date.
+ * Cre8DatePicker inherits the Cre8Field component.
+ */
+export class Cre8DatePicker extends Cre8Field {
+    constructor() {
+        super(...arguments);
+        /**
+         * The type of the form field.
+         * For Date Picker, this is always 'date'.
+         */
+        this.type = 'date';
+        this.showCalendar = false;
     }
-  }
-  emitSelectedDate(e) {
-    const t = new CustomEvent("dateSelect", {
-      detail: {
-        date: e
-      }
-    });
-    this.currentDate = /* @__PURE__ */ new Date(`${e}T00:00`), this.dispatchEvent(t);
-  }
-  changeYear(e) {
-    const t = this.currentDate, a = new Date(t.setFullYear(e));
-    this.currentDate = a, this.activeModal = "none";
-  }
-  changeMonth(e) {
-    const t = this.currentDate, a = new Date(t.setMonth(e));
-    this.currentDate = a, this.activeModal = "none";
-  }
-  activateModal(e) {
-    this.activeModal = e;
-  }
-  /* Helper/Get Functions */
-  static formatMonthOrDayIndex(e) {
-    return (e + 1).toString().padStart(2, "0");
-  }
-  static formatDate(e) {
-    return e.toString().padStart(2, "0");
-  }
-  numberOfDaysinMonth() {
-    return new Date(this.getYear(), this.getMonth() + 1, 0).getDate();
-  }
-  getMonth() {
-    return this.currentDate.getMonth();
-  }
-  getMonthName() {
-    return new Intl.DateTimeFormat(this.locale, {
-      month: "long"
-    }).format(this.currentDate);
-  }
-  getYear() {
-    return this.currentDate.getFullYear();
-  }
-  static dateToString(e) {
-    return `${e.getFullYear()}-${o.formatMonthOrDayIndex(
-      e.getMonth()
-    )}-${o.formatDate(e.getDate())}`;
-  }
-  async updateFocusForKeydown(e) {
-    this.currentDate = e, await this.updateComplete;
-    const t = this.shadowRoot?.querySelector(
-      `button[datetime="${o.dateToString(e)}"]`
-    );
-    t.setAttribute("tabindex", "0"), t.focus();
-  }
-  _handleCalendarKeyDown(e) {
-    const t = this.shadowRoot?.querySelector(
-      `button[datetime="${o.dateToString(this.currentDate)}"]`
-    );
-    if (e.key === "ArrowUp") {
-      const a = new Date(
-        this.getYear(),
-        this.getMonth(),
-        this.currentDate.getDate() - 7
-      );
-      this.updateFocusForKeydown(a), t.setAttribute("tabindex", "-1");
+    /**
+     * Handle Date On Input
+     * 1) Set the input's value equal to the event.target.value when the input is changed.
+     * 2) Set the internal form value of the input to the updated value
+     */
+    handleDateOnInput(e) {
+        /* 1 */
+        this.value = e.target.value;
+        /* 2 */
+        this._internals.setFormValue(this.value);
     }
-    if (e.key === "ArrowDown") {
-      const a = new Date(
-        this.getYear(),
-        this.getMonth(),
-        this.currentDate.getDate() + 7
-      );
-      this.updateFocusForKeydown(a), t.setAttribute("tabindex", "-1");
+    handleCalendarSelect(e) {
+        this.value = e.detail.date;
+        this._internals.setFormValue(this.value);
+        this.showCalendar = false;
     }
-    if (e.key === "ArrowLeft") {
-      const a = new Date(
-        this.getYear(),
-        this.getMonth(),
-        this.currentDate.getDate() - 1
-      );
-      this.updateFocusForKeydown(a), t.setAttribute("tabindex", "-1");
-    }
-    if (e.key === "ArrowRight") {
-      const a = new Date(
-        this.getYear(),
-        this.getMonth(),
-        this.currentDate.getDate() + 1
-      );
-      this.updateFocusForKeydown(a), t.setAttribute("tabindex", "-1");
+    handleOutsideClick(e) {
+        const calendarIcon = this.renderRoot.querySelector('.cre8-c-date-picker');
+        if (this.showCalendar && !e.detail.composedPath.includes(calendarIcon)) {
+            this.showCalendar = false;
+        }
     }
-    if (e.key === "Tab" && !e.shiftKey) {
-      const a = new CustomEvent("outsideClick", {
-        detail: {
-          composedPath: []
+    toggleCalendar() {
+        if (!this.disabled && !this.readonly) {
+            this.showCalendar = !this.showCalendar;
         }
-      });
-      setTimeout(() => {
-        this.dispatchEvent(a);
-      }, 20);
     }
-  }
-  async changeMonthFromNav(e) {
-    this.changeMonth(e), await this.updateComplete;
-    const a = (this.shadowRoot?.querySelector(
-      "cre8-calendar-navigation"
-    )).shadowRoot?.querySelector(
-      ".cre8-c-calendar-navigation__month-modal-button"
-    );
-    await this.updateComplete, a.shadowRoot.querySelector("button").focus();
-  }
-  async changeYearFromNav(e) {
-    this.changeYear(e), await this.updateComplete;
-    const a = (this.shadowRoot?.querySelector(
-      "cre8-calendar-navigation"
-    )).shadowRoot?.querySelector(
-      ".cre8-c-calendar-navigation__year-modal-button"
-    );
-    await this.updateComplete, a.shadowRoot.querySelector("button").focus();
-  }
-  /* Template Map Functions */
-  getDaysOfWeekAbbreviations() {
-    return this.weekDays.map(
-      (e) => s` <td>
-        <span aria-label="${e}">${e[0]}</span>
-      </td>`
-    );
-  }
-  /**
-   * Create array of Day Buttons to fill in excess calendar space at the beginning of the month.
-   *
-   * 1. Map from empty array of length equal to the amount of access calendar "slots" in the beginning of the month.
-   * (i.e. if the month starts on Wednesday (getDay = 3), there are 3 days prior that week from last month.)
-   *
-   * 2. Based on the indice of array, get the given day button's date, where the date is
-   * the last day of last month minus the max of the array plus the indice plus one -> x = lastday - (max - (i + 1))
-   * (Note: (max - (i + 1) equals the keys of the array in reverse order:
-   * [max - i + 1] -> [3-1, 3-2, 3-3] -> [2,1,0] for an array of [3])
-   * (i.e. if the calendar is starting on Wednesday June 1st, the access days on the calendar will be
-   * Sunday May 29th (31 - (2)), Monday May 30th (31 - (1)), Tuesday May 31st (31 - (0)))
-   *
-   * 3. Build out day button with necessary props
-   * */
-  getPreviousMonthDayButtons() {
-    return [
-      ...Array(new Date(this.getYear(), this.getMonth(), 1).getDay()).keys()
-    ].map((e) => {
-      const t = new Date(
-        this.getYear(),
-        this.getMonth(),
-        1
-      ).getDay(), a = new Date(this.getYear(), this.getMonth(), 0), r = a.getDate(), i = new Date(
-        a.getFullYear(),
-        a.getMonth(),
-        r - t + (e + 1)
-      ), n = this.dateConfig.today.getDate() === i.getDate() && this.dateConfig.today.getMonth() === i.getMonth() && this.dateConfig.today.getFullYear() === i.getFullYear(), Y = (/* @__PURE__ */ new Date(`${this.fieldDate}T00:00`)).getTime() === i.getTime();
-      return s` <td>
-        <button
-          class="cre8-c-calendar__day-button cre8-c-calendar__different-month"
-          datetime="${o.dateToString(i)}"
-          ?data-today="${n}"
-          ?data-selected="${Y}"
-          tabindex="-1"
-          aria-label="${new Intl.DateTimeFormat(this.locale, {
-        weekday: "long",
-        year: "numeric",
-        month: "long",
-        day: "numeric"
-      }).format(
-        /* @__PURE__ */ new Date(`${o.dateToString(i)}T00:00`)
-      )}"
-          @click="${() => this.emitSelectedDate(o.dateToString(i))}"
-        >
-          ${new Intl.NumberFormat(this.locale).format(i.getDate())}
-        </button>
-      </td>`;
-    });
-  }
-  /**
-   * Create array of Day Buttons to fill out current month
-   *
-   * 1. Map from empty array of length equal to the amount days in this month
-   *
-   * 2. Get the date of the current month based on indice of array (i.e. 0 -> 1st, 1 -> 2nd ...)
-   *
-   * 3. Build out day button with necessary props
-   * */
-  getCurrentMonthDayButtons() {
-    return [...Array(this.numberOfDaysinMonth()).keys()].map((e) => {
-      const t = e + 1, a = new Date(this.getYear(), this.getMonth(), t), r = this.dateConfig.today.getDate() === t && this.dateConfig.today.getMonth() === this.getMonth() && this.dateConfig.today.getFullYear() === this.getYear(), i = (/* @__PURE__ */ new Date(`${this.fieldDate}T00:00`)).getTime() === a.getTime();
-      return s` <td>
-        <button
-          class="cre8-c-calendar__day-button"
-          datetime="${o.dateToString(a)}"
-          ?data-today="${r}"
-          ?data-selected="${i}"
-          tabindex="${t === this.currentDate.getDate() ? "0" : "-1"}"
-          aria-label="${new Intl.DateTimeFormat(this.locale, {
-        weekday: "long",
-        year: "numeric",
-        month: "long",
-        day: "numeric"
-      }).format(/* @__PURE__ */ new Date(`${o.dateToString(a)}T00:00`))}"
-          @click="${() => this.emitSelectedDate(o.dateToString(a))}"
-        >
-          ${new Intl.NumberFormat(this.locale).format(e + 1)}
-        </button>
-      </td>`;
-    });
-  }
-  /**
-   * Create array of Day Buttons to fill in excess calendar space at the end of the month.
-   *
-   * 1. Map from empty array of length equal to the amount of access calendar "slots" at the end of the month.
-   * The array have an amount of slots equal to the number of days in a week minus how many days have already past
-   * and since getDay returns the index of the day of the week (Sunday = 0, Monday = 1 ...) our equations is
-   * x = 7 - (getDay() + 1)
-   * Note: (we need to add 1 because indexing starts at 0)
-   * so if the month ends on Monday (getDay() = 1), 5 = 7 - (1 + 1), there are 5 days that week from the new month
-   *
-   * 2. Get the date from the next month based on indice of array (i.e. 0 -> 1st, 1 -> 2nd ...)
-   *
-   * 3. Build out day button with necessary props
-   * */
-  getNextMonthDayButtons() {
-    return [
-      ...Array(
-        6 - new Date(
-          this.getYear(),
-          this.getMonth(),
-          this.numberOfDaysinMonth()
-        ).getDay()
-      ).keys()
-    ].map((e) => {
-      const t = new Date(
-        this.getYear(),
-        this.getMonth(),
-        this.numberOfDaysinMonth()
-      ), a = new Date(
-        t.setDate(t.getDate() + 1)
-      ), r = new Date(
-        a.getFullYear(),
-        a.getMonth(),
-        e + 1
-      ), i = this.dateConfig.today.getDate() === r.getDate() && this.dateConfig.today.getMonth() === r.getMonth() && this.dateConfig.today.getFullYear() === r.getFullYear(), n = (/* @__PURE__ */ new Date(`${this.fieldDate}T00:00`)).getTime() === r.getTime();
-      return s` <td>
-        <button
-          class="cre8-c-calendar__day-button cre8-c-calendar__different-month"
-          datetime="${o.dateToString(r)}"
-          ?data-today="${i}"
-          ?data-selected="${n}"
-          tabindex="-1"
-          aria-label="${new Intl.DateTimeFormat(this.locale, {
-        weekday: "long",
-        year: "numeric",
-        month: "long",
-        day: "numeric"
-      }).format(
-        /* @__PURE__ */ new Date(`${o.dateToString(r)}T00:00`)
-      )}"
-          @click="${() => this.emitSelectedDate(o.dateToString(r))}"
-        >
-          ${new Intl.NumberFormat(this.locale).format(r.getDate())}
-        </button>
-      </td>`;
-    });
-  }
-  render() {
-    const e = this.componentClassNames("cre8-c-calendar", {});
-    return s` <div class="${e}">
-      ${this._activeModal === "month" ? s`<cre8-calendar-month-modal
-            currentMonth="${this.getMonth()}"
-            @changeMonth="${(t) => this.changeMonthFromNav(t.detail.month)}"
-          ></cre8-calendar-month-modal>` : y}
-      ${this._activeModal === "year" ? s`<cre8-calendar-year-modal
-            currentYear="${this.getYear()}"
-            @changeYear="${(t) => this.changeYearFromNav(t.detail.year)}"
-          ></cre8-calendar-year-modal>` : y}
-      ${this._activeModal === "none" ? s` ${this.hasShortcuts ? s`<div class="cre8-c-calendar__header-shortcuts">
-                    <cre8-button
-                      text="Today"
-                      variant="secondary"
-                      size="sm"
-                      @click="${() => this.emitSelectedDate(
-      o.dateToString(this.dateConfig.today)
-    )}"
-                    ></cre8-button>
-                    <cre8-button
-                      text="Tomorrow"
-                      variant="secondary"
-                      size="sm"
-                      @click="${() => this.emitSelectedDate(
-      o.dateToString(
-        new Date(
-          this.dateConfig.today.setDate(
-            this.dateConfig.today.getDate() + 1
-          )
-        )
-      )
-    )}"
-                    ></cre8-button>
-                    <cre8-button
-                      text="In 2 days"
-                      variant="secondary"
-                      size="sm"
-                      @click="${() => this.emitSelectedDate(
-      o.dateToString(
-        new Date(
-          this.dateConfig.today.setDate(
-            this.dateConfig.today.getDate() + 2
-          )
-        )
-      )
-    )}"
-                    ></cre8-button>
-                </div>` : y}
-            <cre8-calendar-navigation
-              monthName="${this.getMonthName()}"
-              year="${this.getYear()}"
-              @activateModal="${(t) => this.activateModal(t.detail.modal)}"
-              @changeMonth="${(t) => this.changeMonth(this.getMonth() + t.detail.addend)}"
-              @changeYear="${(t) => this.changeYear(this.getYear() + t.detail.addend)}"
-            >
-            </cre8-calendar-navigation>
-            <table>
-              <thead>
-                <tr>
-                  ${this.getDaysOfWeekAbbreviations()}
-                </tr>
-              </thead>
-              <tbody>
-                <tr @keydown=${this._handleCalendarKeyDown}>
-                  ${this.getPreviousMonthDayButtons()}
-                  ${this.getCurrentMonthDayButtons()}
-                  ${this.getNextMonthDayButtons()}
-                </tr>
-              </tbody>
-            </table>` : y}
-    </div>`;
-  }
-}, o.styles = [z], o);
-h([
-  C(".cre8-c-calendar__navigation-wrapper")
-], c.prototype, "_navWrapper", 2);
-h([
-  p({ type: Boolean, reflect: !0 })
-], c.prototype, "hasShortcuts", 2);
-h([
-  l()
-], c.prototype, "_activeModal", 2);
-h([
-  p({ reflect: !0, type: String })
-], c.prototype, "activeModal", 1);
-h([
-  l()
-], c.prototype, "_fieldDate", 2);
-h([
-  p({ reflect: !0, type: Date })
-], c.prototype, "fieldDate", 1);
-h([
-  l()
-], c.prototype, "_currentDate", 2);
-h([
-  p({ reflect: !0, type: Date })
-], c.prototype, "currentDate", 1);
-h([
-  l()
-], c.prototype, "locale", 2);
-h([
-  l()
-], c.prototype, "weekDays", 2);
-h([
-  l()
-], c.prototype, "dateConfig", 2);
-h([
-  l()
-], c.prototype, "dateFormatOptions", 2);
-let B = c;
-customElements.get("cre8-calendar") === void 0 && customElements.define("cre8-calendar", B);
-var U = Object.defineProperty, k = (d, e, t, a) => {
-  for (var r = void 0, i = d.length - 1, n; i >= 0; i--)
-    (n = d[i]) && (r = n(e, t, r) || r);
-  return r && U(e, t, r), r;
-};
-const M = class M extends R {
-  constructor() {
-    super(...arguments), this.type = "date", this.showCalendar = !1;
-  }
-  /**
-   * Handle Date On Input
-   * 1) Set the input's value equal to the event.target.value when the input is changed.
-   * 2) Set the internal form value of the input to the updated value
-   */
-  handleDateOnInput(e) {
-    this.value = e.target.value, this._internals.setFormValue(this.value);
-  }
-  handleCalendarSelect(e) {
-    this.value = e.detail.date, this._internals.setFormValue(this.value), this.showCalendar = !1;
-  }
-  handleOutsideClick(e) {
-    const t = this.renderRoot.querySelector(".cre8-c-date-picker");
-    this.showCalendar && !e.detail.composedPath.includes(t) && (this.showCalendar = !1);
-  }
-  toggleCalendar() {
-    !this.disabled && !this.readonly && (this.showCalendar = !this.showCalendar);
-  }
-  render() {
-    const e = this.componentClassNames("cre8-c-date-picker", {
-      "cre8-is-error": this.isError,
-      "cre8-is-success": this.isSuccess,
-      "cre8-c-date-picker--disabled": this.disabled,
-      "cre8-c-date-picker--read-only": this.readonly
-    });
-    return this.type = "date", s`
-      <div class="${e}">
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-date-picker', {
+            'cre8-is-error': this.isError,
+            'cre8-is-success': this.isSuccess,
+            'cre8-c-date-picker--disabled': this.disabled,
+            'cre8-c-date-picker--read-only': this.readonly,
+        });
+        this.type = 'date';
+        return html `
+      <div class="${componentClassNames}">
         <label class="cre8-c-date-picker__label" for="${this.fieldId}"
           >${this.label}</label
         >
         <div class="cre8-c-date-picker__body">
           <input
             class="cre8-c-date-picker__input"
-            autocomplete=${u(this.autocomplete)}
+            autocomplete=${ifDefined(this.autocomplete)}
             type="${this.type}"
             id="${this.fieldId}"
-            name="${u(this.name)}"
-            max=${u(this.max)}
-            min=${u(this.min)}
-            value="${u(this.value)}"
+            name="${ifDefined(this.name)}"
+            max=${ifDefined(this.max)}
+            min=${ifDefined(this.min)}
+            value="${ifDefined(this.value)}"
             ?readonly=${this.readonly}
             ?required=${this.required}
             ?disabled="${this.disabled}"
-            aria-describedby="${u(this.fieldNoteAria())}"
-            placeholder="${u(this.placeholder)}"
+            aria-describedby="${ifDefined(this.fieldNoteAria())}"
+            placeholder="${ifDefined(this.placeholder)}"
             @input=${this.handleDateOnInput}
             @click=${this.toggleCalendar}
           />
@@ -784,41 +88,44 @@ const M = class M extends R {
             aria-expanded="${this.showCalendar}"
             aria-label="Show Calendar"
             ?disabled="${this.disabled || this.readonly}"
-            ?hideText=${!0}
+            ?hideText=${true}
             iconName="calendar-datepicker"
             variant="tertiary"
             @click="${this.toggleCalendar}"
           ></cre8-button>
         </div>
-        ${this.showCalendar ? s`<cre8-calendar
-              fieldDate="${u(this.value)}"
+        ${this.showCalendar
+            ? html `<cre8-calendar
+              fieldDate="${ifDefined(this.value)}"
               ?hasShortcuts=${this.hasShortcuts}
               @dateSelect="${this.handleCalendarSelect}"
               @outsideClick="${this.handleOutsideClick}"
-            ></cre8-calendar>` : y}
-        ${this.fieldNote || this.slotNotEmpty("fieldNote") ? s`<cre8-field-note
+            ></cre8-calendar>`
+            : nothing}
+        ${this.fieldNote || this.slotNotEmpty('fieldNote')
+            ? html `<cre8-field-note
               id=${this.ariaDescribedBy}
               class="cre8-c-date-picker__field-note"
               ><slot name="fieldNote">${this.fieldNote}</slot></cre8-field-note
-            >` : y}
+            >`
+            : nothing}
         ${this.renderSuccessErrorFieldNote()}
       </div>
     `;
-  }
-};
-M.styles = [I];
-let g = M;
-k([
-  C('input[type="date"]')
-], g.prototype, "field");
-k([
-  l()
-], g.prototype, "showCalendar");
-k([
-  p({ type: Boolean, reflect: !0 })
-], g.prototype, "hasShortcuts");
-customElements.get("cre8-date-picker") === void 0 && customElements.define("cre8-date-picker", g);
-export {
-  g as Cre8DatePicker,
-  g as default
-};
+    }
+}
+Cre8DatePicker.styles = [styles];
+__decorate([
+    query('input[type="date"]')
+], Cre8DatePicker.prototype, "field", void 0);
+__decorate([
+    state()
+], Cre8DatePicker.prototype, "showCalendar", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8DatePicker.prototype, "hasShortcuts", void 0);
+if (customElements.get('cre8-date-picker') === undefined) {
+    customElements.define('cre8-date-picker', Cre8DatePicker);
+}
+export default Cre8DatePicker;
+//# sourceMappingURL=date-picker.js.map