dap-design-system 0.62.4 → 0.63.1

package/dist/components/datepicker/datepicker.component.js

@@ -1,53 +1,49 @@
 var f = (g, t, i) => new Promise((e, s) => {
-  var a = (m) => {
+  var a = (c) => {
     try {
-      y(i.next(m));
+      y(i.next(c));
     } catch (b) {
       s(b);
     }
-  }, n = (m) => {
+  }, n = (c) => {
     try {
-      y(i.throw(m));
+      y(i.throw(c));
     } catch (b) {
       s(b);
     }
-  }, y = (m) => m.done ? e(m.value) : Promise.resolve(m.value).then(a, n);
+  }, y = (c) => c.done ? e(c.value) : Promise.resolve(c.value).then(a, n);
   y((i = i.apply(g, t)).next());
 });
-import { clsx as c } from "../../node_modules/clsx/dist/clsx.js";
+import { clsx as u } from "../../node_modules/clsx/dist/clsx.js";
 import l from "../../_virtual/dayjs.min.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as D } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as d } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as S } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { query as V } from "../../node_modules/@lit/reactive-element/decorators/query.js";
-import { ifDefined as p } from "../../node_modules/lit-html/directives/if-defined.js";
-import { html as u } from "../../node_modules/lit-html/static.js";
-import { getValidityStateObject as I } from "../../common/utils.js";
-import { GenericFormElement as k } from "../../internal/mixin/genericFormElement.js";
+import { unsafeCSS as I, nothing as D } from "lit";
+import { query as V, property as d, state as S } from "lit/decorators.js";
+import { ifDefined as p } from "lit/directives/if-defined.js";
+import { html as m } from "lit/static-html.js";
+import { getValidityStateObject as k } from "../../common/utils.js";
+import { GenericFormElement as C } from "../../internal/mixin/genericFormElement.js";
+import { formLabelTemplate as z } from "../../internal/templates/formLabel.js";
 import "../../localization/localization.js";
-import C from "../calendar/calendar.component.js";
-import z from "../feedback/feedback.component.js";
-import E from "../form/form-label/form-label.component.js";
-import M from "../icon/icon.component.js";
-import F from "../icon-button/icon-button.component.js";
-import x from "../icons/business/business-calendar-line/business-calendar-line.component.js";
-import A from "../icons/system/system-loading-spinner/system-loading-spinner.component.js";
-import w from "../popup/popup.component.js";
-import B from "../tooltip/tooltip.component.js";
-import O from "../typography/typography.component.js";
-import L from "./datepicker.scss.js";
-import { t as T } from "../../node_modules/i18next/dist/esm/i18next.js";
-import { unsafeCSS as q } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var U = Object.defineProperty, o = (g, t, i, e) => {
+import E from "../calendar/calendar.component.js";
+import F from "../feedback/feedback.component.js";
+import M from "../form/form-label/form-label.component.js";
+import x from "../icon/icon.component.js";
+import w from "../icon-button/icon-button.component.js";
+import A from "../icons/business/business-calendar-line/business-calendar-line.component.js";
+import B from "../icons/system/system-loading-spinner/system-loading-spinner.component.js";
+import O from "../popup/popup.component.js";
+import L from "../tooltip/tooltip.component.js";
+import T from "../typography/typography.component.js";
+import U from "./datepicker.scss.js";
+import { t as q } from "../../node_modules/i18next/dist/esm/i18next.js";
+var Y = Object.defineProperty, o = (g, t, i, e) => {
   for (var s = void 0, a = g.length - 1, n; a >= 0; a--)
     (n = g[a]) && (s = n(t, i, s) || s);
-  return s && U(t, i, s), s;
+  return s && Y(t, i, s), s;
 };
-const $ = "1901-01-01", v = "2099-12-31", Y = "YYYY-MM-DD";
+const v = "1901-01-01", $ = "2099-12-31", j = "YYYY-MM-DD";
 var h;
-const r = (h = class extends k {
+const r = (h = class extends C {
   constructor() {
     super(), this.mode = "single", this.disabledDate = (i) => !i, this.placement = "bottom-start", this.opened = !1, this.openCalendarOnInput = !1, this.sendEmptyEventOnInput = !1, this.loading = !1, this.mask = !1, this.formatSeparator = "|", this.clearButton = "true", this.clearButtonTestId = "datepicker-clear-button", this.calendarButtonTestId = "datepicker-calendar-button", this.floatingStrategy = "fixed", this.disableViewportAutoClose = !1, this.locale = l.locale(), this.formatOptions = [], this.setValueState = !0, this.lastMaskDigitCount = 0, this.handleDocumentMouseDown = (i) => {
       const e = i.composedPath();
@@ -65,11 +61,11 @@ const r = (h = class extends k {
       if (!e.value)
         this.setValue(void 0, !1, !0);
       else if (this.isInputValid()) {
-        const s = l(e.value).locale(this.locale), a = this.normalizeDate(this.minDate) || l($), n = this.normalizeDate(this.maxDate) || l(v);
+        const s = l(e.value).locale(this.locale), a = this.normalizeDate(this.minDate) || l(v), n = this.normalizeDate(this.maxDate) || l($);
         s.isBefore(a, "day") || s.isAfter(n, "day") ? (this.setValue(void 0, !1, this.sendEmptyEventOnInput), this.emit("dds-invalid-date", {
           value: e.value,
           type: "out-of-range",
-          date: s.format(Y)
+          date: s.format(j)
         })) : (this.setValue(s, !1), this.currentDate = s, this.emit("dds-valid-date", { value: e.value }));
       } else
         this.setValue(void 0, !1, this.sendEmptyEventOnInput), this.emit("dds-invalid-date", { value: e.value, type: "invalid" });
@@ -134,9 +130,12 @@ const r = (h = class extends k {
     const i = this.normalizeDate(this.currentDate);
     this.calendar.currentDate = i || l();
     const e = this.normalizeDate(this.minDate);
-    this.calendar.minDate = e || l($), e && (this.minDate = e);
+    this.calendar.minDate = e || l(v), e && (this.minDate = e);
     const s = this.normalizeDate(this.maxDate);
-    this.calendar.maxDate = s || l(v), s && (this.maxDate = s), this.calendar.disabledDate = this.disabledDate, this.hideAdjacentMonths !== void 0 && (this.calendar.hideAdjacentMonths = this.hideAdjacentMonths);
+    this.calendar.maxDate = s || l($), s && (this.maxDate = s), this.calendar.disabledDate = this.disabledDate, this.hideAdjacentMonths !== void 0 && (this.calendar.hideAdjacentMonths = this.hideAdjacentMonths);
+  }
+  willUpdate(t) {
+    super.willUpdate(t), t.has("value") && this.value !== this.inputDrivenValue && (this.setValueState = !0, this.inputDrivenValue = void 0);
   }
   updated(t) {
     var s;
@@ -165,11 +164,11 @@ const r = (h = class extends k {
     }
     if (t.has("minDate")) {
       const a = this.normalizeDate(this.minDate);
-      this.calendar.minDate = a || l($), a && (this.minDate = a);
+      this.calendar.minDate = a || l(v), a && (this.minDate = a);
     }
     if (t.has("maxDate")) {
       const a = this.normalizeDate(this.maxDate);
-      this.calendar.maxDate = a || l(v), a && (this.maxDate = a);
+      this.calendar.maxDate = a || l($), a && (this.maxDate = a);
     }
     t.has("disabledDate") && (this.calendar.disabledDate = this.disabledDate), (t.has("format") || t.has("formatSeparator")) && (this.formatOptions = ((s = this.format) == null ? void 0 : s.split(this.formatSeparator)) || []);
   }
@@ -205,10 +204,19 @@ const r = (h = class extends k {
     return this.isValidFormat(this.triggerInput.value);
   }
   setValue(t, i = !0, e = !0) {
-    this.value = t, i ? (this.setValueState = !0, this.triggerInput.value = this.getFormattedValue()) : this.setValueState = !1, this.internals && this.internals.setFormValue(
+    this.value = t, i ? (this.setValueState = !0, this.triggerInput.value = this.getFormattedValue()) : (this.setValueState = !1, this.inputDrivenValue = t), this.internals && this.internals.setFormValue(
       this.value ? this.value.toString() : this.defaultValue
     ), this.setValidity(), this.hideCalendar(), e && (this.emit("dds-change", { value: this.value }), this.emit("dds-valid-date", { value: this.triggerInput.value }));
   }
+  // Native <form> reset: restore the initial value (or empty) and resync the input text.
+  // No dds-change is emitted, matching native inputs, which don't fire change on reset.
+  formResetCallback() {
+    if (super.formResetCallback(), this.lastMaskDigitCount = 0, this.mode === "range") {
+      this.rangeStart = void 0, this.rangeEnd = void 0, this.calendar.rangeStart = void 0, this.calendar.rangeEnd = void 0, this.triggerInput.value = "", this.setValidity(), this.hideCalendar({ skipFocus: !0 });
+      return;
+    }
+    this.hideCalendar({ skipFocus: !0 }), this.setValue(this.normalizeDate(this.defaultValue), !0, !1);
+  }
   clearSelection() {
     return f(this, null, function* () {
       this.lastMaskDigitCount = 0, this.setValue(void 0, !0, !0);
@@ -258,7 +266,7 @@ const r = (h = class extends k {
     return !!this.value;
   }
   get validity() {
-    return this.internals.validity ? this.internals.validity : I({
+    return this.internals.validity ? this.internals.validity : k({
       valueMissing: this.required && !this.getValidity(),
       patternMismatch: !this.isValueValid()
     });
@@ -284,23 +292,22 @@ const r = (h = class extends k {
   }
   render() {
     var t, i;
-    return u` <div class="label-container">
-        ${this.label && u`<dap-ds-form-label
-          part="label"
-          id=${this.labelId}
-          .size=${this.size}
-          .required=${this.required}
-          .requiredLabel=${this.requiredLabel}
-          .optional=${this.optional}
-          .optionalLabel=${this.optionalLabel}
-          .disabled=${this.disabled}
-          class=${c("label")}
-          .noMargin=${!!this.description}
-          for=${this.inputId}
-          .hideLabel=${this.hideLabel}
-          label=${p(this.label)}>
-        </dap-ds-form-label>`}
-        ${this.tooltip && u` <dap-ds-tooltip
+    return m` <div class="label-container">
+        ${z({
+      label: this.label,
+      id: this.labelId,
+      htmlFor: this.inputId,
+      size: this.size,
+      required: this.required,
+      requiredLabel: this.requiredLabel,
+      optional: this.optional,
+      optionalLabel: this.optionalLabel,
+      disabled: this.disabled,
+      subtle: this.subtle,
+      noMargin: !!this.description,
+      hideLabel: this.hideLabel
+    })}
+        ${this.tooltip && m` <dap-ds-tooltip
           part="tooltip"
           content=${this.tooltip}
           mode="toggle"
@@ -318,11 +325,11 @@ const r = (h = class extends k {
           </dap-ds-icon-button>
         </dap-ds-tooltip>`}
       </div>
-      ${this.description && u`
+      ${this.description && m`
         <dap-ds-typography
           part="description"
           variant="description"
-          class=${c("input-description")}
+          class=${u("input-description")}
           size=${p(this.size)}
           id=${this.descriptionId}>
           ${this.description}
@@ -344,7 +351,7 @@ const r = (h = class extends k {
           <div
             slot="trigger"
             part="trigger"
-            class="${c("select", `select--${this.size}`, {
+            class="${u("select", `select--${this.size}`, {
       "select--disabled": this.disabled,
       "select--readonly": this.readonly,
       "select--opened": this.opened,
@@ -356,7 +363,7 @@ const r = (h = class extends k {
             <input
               part="input"
               role="combobox"
-              class="${c("combobox__input", "input", `input--${this.size}`, {
+              class="${u("combobox__input", "input", `input--${this.size}`, {
       "input--disabled": this.disabled,
       "input--readonly": this.readonly
     })}"
@@ -384,31 +391,31 @@ const r = (h = class extends k {
               @invalid=${this.handleInvalid}
               @click=${this.handleClick} />
             <div
-              class="${c("select-action", `select-action--${this.size}`, {
+              class="${u("select-action", `select-action--${this.size}`, {
       "select-action--disabled": this.disabled,
       "select-action--readonly": this.readonly,
       "select-action--opened": this.opened
     })}">
-              ${this.clearButton === "true" && !this.readonly ? u`<div class="${c("clear-icon")}">
+              ${this.clearButton === "true" && !this.readonly ? m`<div class="${u("clear-icon")}">
                     <dap-ds-icon-button
                       icon="close-line"
                       part="clear-button"
                       data-testid=${this.clearButtonTestId}
                       aria-label=${p(
-      (i = this.clearButtonAriaLabel) != null ? i : T("clear", { lng: this.locale })
+      (i = this.clearButtonAriaLabel) != null ? i : q("clear", { lng: this.locale })
     )}
                       ?disabled=${this.disabled}
                       @click=${this.handleClearClick}></dap-ds-icon-button>
                   </div>` : D}
               <div
-                class="${c("indicator-icon", {
+                class="${u("indicator-icon", {
       "indicator-icon--loading": this.loading
     })}">
-                ${this.loading ? u`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>` : u`<dap-ds-icon-calendar-line
+                ${this.loading ? m`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>` : m`<dap-ds-icon-calendar-line
                       aria-hidden="true"
                       part="calendar-button"
                       data-testid=${this.calendarButtonTestId}
-                      class=${c("calendar-icon")}
+                      class=${u("calendar-icon")}
                       @click=${this.handleClick}></dap-ds-icon-calendar-line>`}
               </div>
             </div>
@@ -430,7 +437,7 @@ const r = (h = class extends k {
     }}>
           </dap-ds-calendar>
         </dap-ds-popup>
-        ${this.feedback && u`<dap-ds-feedback
+        ${this.feedback && m`<dap-ds-feedback
           part="feedback"
           feedbackType=${p(this.feedbackType)}
           feedbackSize="${p(this.size)}"
@@ -440,16 +447,16 @@ const r = (h = class extends k {
       </div>`;
   }
 }, h.tagName = "dap-ds-datepicker", h.dependencies = {
-  "dap-ds-form-label": E,
-  "dap-ds-tooltip": B,
-  "dap-ds-icon-button": F,
-  "dap-ds-icon": M,
-  "dap-ds-typography": O,
-  "dap-ds-popup": w,
-  "dap-ds-icon-loading-spinner": A,
-  "dap-ds-icon-calendar-line": x,
-  "dap-ds-calendar": C,
-  "dap-ds-feedback": z
+  "dap-ds-form-label": M,
+  "dap-ds-tooltip": L,
+  "dap-ds-icon-button": w,
+  "dap-ds-icon": x,
+  "dap-ds-typography": T,
+  "dap-ds-popup": O,
+  "dap-ds-icon-loading-spinner": B,
+  "dap-ds-icon-calendar-line": A,
+  "dap-ds-calendar": E,
+  "dap-ds-feedback": F
 }, h.nextId = 0, h.datePropertyConverter = {
   fromAttribute: (t) => {
     if (t == null || t === "")
@@ -467,7 +474,7 @@ const r = (h = class extends k {
     }
   },
   toAttribute: (t) => t == null ? null : l.isDayjs(t) || t instanceof Date ? t.toISOString() : typeof t == "string" ? t : typeof t == "number" ? String(t) : null
-}, h.styles = q(L), h);
+}, h.styles = I(U), h);
 o([
   V(".combobox__input")
 ], r.prototype, "triggerInput");
@@ -570,8 +577,8 @@ o([
 o([
   S()
 ], r.prototype, "setValueState");
-let mt = r;
+let pt = r;
 export {
-  mt as default
+  pt as default
 };
 //# sourceMappingURL=datepicker.component.js.map