@sbb-esta/lyne-elements 3.0.0-next.1 → 3.0.0-next.3

package/datepicker/datepicker/datepicker.component.d.ts

@@ -1,122 +1,43 @@
-import { CSSResultGroup, LitElement, PropertyDeclaration, PropertyValues, TemplateResult } from 'lit';
-import { SbbDateInputElement } from '../../date-input.js';
-export interface SbbInputUpdateEvent {
-    disabled?: boolean;
-    readonly?: boolean;
-    min?: string | number;
-    max?: string | number;
-}
+import { CSSResultGroup, PropertyDeclaration, TemplateResult } from 'lit';
+import { CalendarView } from '../../calendar.js';
+import { SbbDateInputElement, SbbDateInputAssociated } from '../../date-input.js';
+import { SbbPopoverBaseElement } from '../../popover.js';
 /**
- * Combined with a native input, it displays the input's value as a formatted date.
+ * A datepicker component that allows users to select a date from a calendar view.
  *
- * @event {CustomEvent<void>} change - Notifies that the connected input has changes.
- * @event {CustomEvent<void>} input - Notifies that the connected input fired the input event.
- * @event {CustomEvent<SbbInputUpdateEvent>} inputUpdated - Notifies that the attributes of the input connected to the datepicker have changes.
- * @event {CustomEvent<void>} datePickerUpdated - Notifies that the attributes of the datepicker have changes.
- * @event {CustomEvent<SbbValidationChangeEvent>} validationChange - Emits whenever the internal validation state changes.
+ * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-datepicker` starts the opening transition. Can be canceled.
+ * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-datepicker` is opened.
+ * @event {CustomEvent<{ closeTarget: HTMLElement }>} willClose - Emits whenever the `sbb-datepicker` begins the closing
+ * transition. Can be canceled.
+ * @event {CustomEvent<{ closeTarget: HTMLElement }>} didClose - Emits whenever the `sbb-datepicker` is closed.
+ * @event {CustomEvent<T>} dateSelected - Event emitted on date selection.
  */
-export declare class SbbDatepickerElement<T = Date> extends LitElement {
+export declare class SbbDatepickerElement<T = Date> extends SbbPopoverBaseElement implements SbbDateInputAssociated<T> {
     static styles: CSSResultGroup;
-    static readonly events: {
-        readonly change: "change";
-        readonly inputUpdated: "inputUpdated";
-        readonly datePickerUpdated: "datePickerUpdated";
-        readonly validationChange: "validationChange";
-    };
+    static readonly sbbDateInputAssociated = true;
     /** If set to true, two months are displayed. */
     accessor wide: boolean;
     /**
-     * A function used to filter out dates.
-     * @deprecated Use dateFilter from SbbDateInputElement.
-     */
-    set dateFilter(value: (date: T | null) => boolean);
-    get dateFilter(): (date: T | null) => boolean;
-    private _dateFilter?;
-    /**
-     * Reference of the sbb-date-input instance or the native input connected to the datepicker.
-     * If given a string, it will be treated as an id reference and an attempt is
-     * made to be resolved for the containing document fragment.
-     * If given a HTMLElement instance, it will be used as is.
-     */
-    accessor input: string | HTMLElement | null;
-    /**
-     * A configured date which acts as the current date instead of the real current date.
-     * Only recommended for testing purposes.
+     * Reference to the sbb-date-input instance or the native input connected to the datepicker.
+     *
+     * For attribute usage, provide an id reference.
      */
-    accessor now: T;
-    /**
-     * The currently selected date as a Date or custom date provider instance.
-     * @deprecated Use valueAsDate from SbbDateInputElement.
-     */
-    set valueAsDate(value: T | null);
-    get valueAsDate(): T | null;
-    private _valueAsDate?;
-    /** The resolved associated input element, as defined by `input`. */
-    get inputElement(): HTMLInputElement | SbbDateInputElement<T> | null;
-    private accessor _inputElement;
-    /** Notifies that the connected input has changes. */
-    private _change;
-    /** Notifies that the attributes of the input connected to the datepicker have changes. */
-    private _inputUpdated;
-    /** Notifies that the attributes of the datepicker have changes. */
-    private _datePickerUpdated;
-    /** Emits whenever the internal validation state changes. */
-    private _validationChange;
-    private _inputElementPlaceholderMutable;
-    private _inputAbortController;
-    private _inputIdReferenceController;
-    private _inputObserver;
+    accessor input: SbbDateInputElement<T> | null;
+    /** The initial view of calendar which should be displayed on opening. */
+    accessor view: CalendarView;
+    private _inputAbortController?;
     private _dateAdapter;
     private _language;
-    private _associationController;
+    constructor();
     connectedCallback(): void;
     requestUpdate(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): void;
-    protected willUpdate(changedProperties: PropertyValues<this>): void;
-    disconnectedCallback(): void;
-    protected firstUpdated(changedProperties: PropertyValues<this>): void;
-    /**
-     * @internal
-     * Whether a custom now is configured.
-     */
-    hasCustomNow(): boolean;
-    private _configureInputElement;
-    private _emitInputUpdated;
-    private _handleInputChange;
-    private _tryApplyFormatToInput;
-    private _validateDate;
-    private _parseInput;
-    private _setAriaLiveMessage;
+    private _updateStatus;
+    protected renderContent(): TemplateResult;
     protected render(): TemplateResult;
-    /**
-     * Calculates the first available date before the given one,
-     * considering the SbbDatepickerElement `dateFilter` property and `min` parameter (e.g. from the self-named input's attribute).
-     * @param date The starting date for calculations.
-     */
-    findPreviousAvailableDate(date: T): T;
-    /**
-     * Calculates the first available date after the given one,
-     * considering the SbbDatepickerElement `dateFilter` property and `max` parameter (e.g. from the self-named input's attribute).
-     * @param date The starting date for calculations.
-     */
-    findNextAvailableDate(date: T): T;
-    /**
-     * Returns the first available date before or after a given one, considering the `dateFilter` property.
-     * @param date The starting date for calculations.
-     * @param delta The number of days to add/subtract from the starting one.
-     */
-    private _findAvailableDate;
-    /**
-     * Checks if valueAsDate is valid, considering the SbbDatepickerElement `dateFilter` property
-     * and `min` and `max` parameters (e.g. from the self-named input's attributes).
-     */
-    private _isDateAvailable;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'sbb-datepicker': SbbDatepickerElement;
     }
-    interface GlobalEventHandlersEventMap {
-        inputUpdated: CustomEvent<SbbInputUpdateEvent>;
-    }
 }
 //# sourceMappingURL=datepicker.component.d.ts.map

package/datepicker/datepicker/datepicker.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/datepicker/datepicker/datepicker.component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"datepicker.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/datepicker/datepicker/datepicker.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAInB,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAMtD,OAAO,EAAE,mBAAmB,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AACvF,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAKzD,OAAO,mBAAmB,CAAC;AAI3B;;;;;;;;;GASG;AACH,qBAEM,oBAAoB,CAAC,CAAC,GAAG,IAAI,CACjC,SAAQ,qBACR,YAAW,sBAAsB,CAAC,CAAC,CAAC;IAEpC,OAAuB,MAAM,EAAE,cAAc,CAAyC;IACtF,gBAAuB,sBAAsB,QAAQ;IAErD,gDAAgD;IAChD,SAEgB,IAAI,EAAE,OAAO,CAAS;IAEtC;;;;OAIG;IACH,SAEgB,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAQ;IAE5D,yEAAyE;IACzE,SAA4B,IAAI,EAAE,YAAY,CAAS;IAEvD,OAAO,CAAC,qBAAqB,CAAC,CAAkB;IAChD,OAAO,CAAC,YAAY,CAA4E;IAChG,OAAO,CAAC,SAAS,CAAmC;;IAYpC,iBAAiB,IAAI,IAAI;IAezB,aAAa,CAC3B,IAAI,CAAC,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,IAAI;IAkBP,OAAO,CAAC,aAAa;cAmBF,aAAa,IAAI,cAAc;cAwB/B,MAAM,IAAI,cAAc;CAG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,oBAAoB,CAAC;KACxC;CACF"}

package/datepicker/datepicker/datepicker.component.js

@@ -1,256 +1,114 @@
-var $ = (s) => {
-  throw TypeError(s);
+var D = (i) => {
+  throw TypeError(i);
 };
-var B = (s, n, r) => n.has(s) || $("Cannot " + r);
-var E = (s, n, r) => (B(s, n, "read from private field"), r ? r.call(s) : n.get(s)), A = (s, n, r) => n.has(s) ? $("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(s) : n.set(s, r), o = (s, n, r, u) => (B(s, n, "write to private field"), u ? u.call(s, r) : n.set(s, r), r);
-import { __runInitializers as d, __esDecorate as c } from "tslib";
-import { css as K, isServer as G, LitElement as Q, html as W } from "lit";
-import { customElement as X, property as g, state as Y } from "lit/decorators.js";
-import { readConfig as Z } from "../../core/config.js";
-import { SbbIdReferenceController as tt, SbbLanguageController as et } from "../../core/controllers.js";
-import { defaultDateAdapter as it } from "../../core/datetime.js";
-import { forceType as at, plainDate as st } from "../../core/decorators.js";
-import { EventEmitter as C, forwardEvent as nt } from "../../core/eventing.js";
-import { i18nDatePickerPlaceholder as J, i18nDateChangedTo as lt } from "../../core/i18n.js";
-import { SbbDatepickerAssociationHostController as rt } from "../common.js";
-const ut = K`:host{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
-let dt = 0;
-const p = (s) => (s == null ? void 0 : s.localName) === "sbb-date-input";
-let Dt = (() => {
-  var m, f, v, b, l;
-  let s = [X("sbb-datepicker")], n, r = [], u, I = Q, y = [], x, k = [], U = [], F, z, M = [], O = [], S, V = [], T = [], P, L, N = [], q = [];
-  var _ = (l = class extends I {
+var $ = (i, s, a) => s.has(i) || D("Cannot " + a);
+var h = (i, s, a) => ($(i, s, "read from private field"), a ? a.call(i) : s.get(i)), m = (i, s, a) => s.has(i) ? D("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, a), l = (i, s, a, n) => ($(i, s, "write to private field"), n ? n.call(i, a) : s.set(i, a), a);
+import { __esDecorate as b, __runInitializers as u } from "tslib";
+import { css as R, isServer as I, html as q, nothing as U } from "lit";
+import { customElement as B, property as _ } from "lit/decorators.js";
+import { readConfig as F } from "../../core/config.js";
+import { SbbLanguageController as L } from "../../core/controllers.js";
+import { defaultDateAdapter as O } from "../../core/datetime.js";
+import { forceType as P, idReference as T } from "../../core/decorators.js";
+import { i18nDateChangedTo as j } from "../../core/i18n.js";
+import { SbbDateInputElement as G } from "../../date-input.js";
+import { SbbPopoverBaseElement as f } from "../../popover.js";
+import "../../calendar.js";
+const H = R`#status-container{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+let J = 0, at = (() => {
+  var d, p, c, r;
+  let i = [B("sbb-datepicker")], s, a = [], n, w = f, v, g = [], y = [], A, S = [], x = [], E, k = [], C = [];
+  return r = class extends w {
     constructor() {
-      var t;
-      super(...arguments);
-      A(this, m);
-      A(this, f);
-      A(this, v);
-      A(this, b);
-      o(this, m, (d(this, y), d(this, k, !1))), this._dateFilter = d(this, U), o(this, f, d(this, M, null)), o(this, v, (d(this, O), d(this, V, null))), this._valueAsDate = d(this, T), o(this, b, d(this, N, null)), this._change = (d(this, q), new C(this, _.events.change, {
-        bubbles: !0
-      })), this._inputUpdated = new C(this, _.events.inputUpdated, { bubbles: !0, cancelable: !0 }), this._datePickerUpdated = new C(this, _.events.datePickerUpdated, {
-        bubbles: !0,
-        cancelable: !0
-      }), this._validationChange = new C(this, _.events.validationChange), this._inputElementPlaceholderMutable = !1, this._inputIdReferenceController = new tt(this, "input"), this._inputObserver = G ? null : new MutationObserver((e) => {
-        var i;
-        if (this._emitInputUpdated(), (i = this._associationController) == null || i.updateControls(), this.inputElement && !p(this.inputElement) && (e != null && e.some((a) => a.attributeName === "value"))) {
-          const a = this.inputElement.getAttribute("value");
-          this.valueAsDate = this._dateAdapter.parse(a, this.now) ?? this._dateAdapter.deserialize(a);
-        }
-      }), this._dateAdapter = ((t = Z().datetime) == null ? void 0 : t.dateAdapter) ?? it, this._language = new et(this), this._associationController = new rt(this);
+      super();
+      m(this, d);
+      m(this, p);
+      m(this, c);
+      l(this, d, u(this, g, !1)), l(this, p, (u(this, y), u(this, S, null))), l(this, c, (u(this, x), u(this, k, "day"))), this._inputAbortController = u(this, C), this._dateAdapter = F().datetime?.dateAdapter ?? O, this._language = new L(this), this.addEventListener(f.events.willOpen, () => {
+        this.shadowRoot?.querySelector("sbb-calendar")?.resetPosition?.();
+      }), !I && this.hydrationRequired && this.hydrationComplete.then(() => this.requestUpdate());
     }
     /** If set to true, two months are displayed. */
     get wide() {
-      return E(this, m);
+      return h(this, d);
     }
-    set wide(t) {
-      o(this, m, t);
+    set wide(e) {
+      l(this, d, e);
     }
     /**
-     * A function used to filter out dates.
-     * @deprecated Use dateFilter from SbbDateInputElement.
-     */
-    set dateFilter(t) {
-      this._dateFilter = t;
-    }
-    get dateFilter() {
-      return this._dateFilter ?? (p(this.inputElement) ? this.inputElement.dateFilter : null) ?? (() => !0);
-    }
-    // TODO: Replace HTMLElement by HTMLInputElement | SbbDateInputElement
-    /**
-     * Reference of the sbb-date-input instance or the native input connected to the datepicker.
-     * If given a string, it will be treated as an id reference and an attempt is
-     * made to be resolved for the containing document fragment.
-     * If given a HTMLElement instance, it will be used as is.
+     * Reference to the sbb-date-input instance or the native input connected to the datepicker.
+     *
+     * For attribute usage, provide an id reference.
      */
     get input() {
-      return E(this, f);
-    }
-    set input(t) {
-      o(this, f, t);
-    }
-    /**
-     * A configured date which acts as the current date instead of the real current date.
-     * Only recommended for testing purposes.
-     */
-    get now() {
-      return E(this, v);
-    }
-    set now(t) {
-      o(this, v, t);
-    }
-    /**
-     * The currently selected date as a Date or custom date provider instance.
-     * @deprecated Use valueAsDate from SbbDateInputElement.
-     */
-    set valueAsDate(t) {
-      if (t = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(t)), p(this.inputElement)) {
-        this.inputElement.valueAsDate = t;
-        return;
-      }
-      this._valueAsDate = t, this._tryApplyFormatToInput() && this.inputElement.dispatchEvent(new Event("blur", { composed: !0 }));
+      return h(this, p);
     }
-    get valueAsDate() {
-      return p(this.inputElement) ? this.inputElement.valueAsDate : this._valueAsDate ?? null;
+    set input(e) {
+      l(this, p, e);
     }
-    /** The resolved associated input element, as defined by `input`. */
-    get inputElement() {
-      return this._inputElement;
+    /** The initial view of calendar which should be displayed on opening. */
+    get view() {
+      return h(this, c);
     }
-    get _inputElement() {
-      return E(this, b);
-    }
-    set _inputElement(t) {
-      o(this, b, t);
+    set view(e) {
+      l(this, c, e);
     }
     connectedCallback() {
-      super.connectedCallback(), this.id || (this.id = `sbb-datepicker-${++dt}`), this._configureInputElement();
-    }
-    requestUpdate(t, e, i) {
-      super.requestUpdate(t, e, i), this.hasUpdated && !t && this.inputElement && (this._inputElementPlaceholderMutable && (this.inputElement.placeholder = J[this._language.current]), this.valueAsDate && (this.inputElement.value = this._dateAdapter.format(this.valueAsDate))), !G && (!t || t === "input") && this.hasUpdated && this._configureInputElement();
-    }
-    willUpdate(t) {
-      super.willUpdate(t), (t.has("wide") || t.has("dateFilter") || t.has("now")) && (this._associationController.updateControls(), this._datePickerUpdated.emit()), t.has("valueAsDate") && this._setAriaLiveMessage();
-    }
-    disconnectedCallback() {
-      var t, e;
-      super.disconnectedCallback(), (t = this._inputObserver) == null || t.disconnect(), (e = this._inputAbortController) == null || e.abort(), this._inputElement = null;
-    }
-    firstUpdated(t) {
-      super.firstUpdated(t), this._setAriaLiveMessage();
-    }
-    /**
-     * @internal
-     * Whether a custom now is configured.
-     */
-    hasCustomNow() {
-      return this._dateAdapter.compareDate(this.now, this._dateAdapter.today()) !== 0;
-    }
-    _configureInputElement() {
-      var a, h, D, H, R, j;
-      const t = this.input instanceof HTMLInputElement || this.input instanceof HTMLElement && p(this.input) ? this.input : this._inputIdReferenceController.find() ?? ((h = (a = this.closest) == null ? void 0 : a.call(this, "sbb-form-field")) == null ? void 0 : h.querySelector("input,sbb-date-input")) ?? null;
-      if (t === this.inputElement || ((D = this._inputAbortController) == null || D.abort(), (H = this._inputObserver) == null || H.disconnect(), this._inputElement = t, !this.inputElement))
-        return;
-      const e = !p(this.inputElement);
-      this._inputAbortController = new AbortController(), (R = this._inputObserver) == null || R.observe(this.inputElement, {
-        attributeFilter: ["disabled", "readonly", "min", "max", "value"]
-      }), e && (this._inputElementPlaceholderMutable = !this.inputElement.placeholder, this.inputElement.type = "text", this._inputElementPlaceholderMutable && (this.inputElement.placeholder = J[this._language.current]));
-      const i = { signal: this._inputAbortController.signal };
-      this.inputElement.addEventListener("input", (w) => {
-        nt(w, this), this._parseInput();
-      }, i), this.inputElement.addEventListener("change", () => this._handleInputChange(), i), this.inputElement.addEventListener("ɵchange", () => {
-        var w;
-        return (w = this._associationController) == null ? void 0 : w.updateControls();
-      }, i), this._parseInput(!0), this._tryApplyFormatToInput(), this._validateDate(), this._emitInputUpdated(), (j = this._associationController) == null || j.updateControls();
-    }
-    _emitInputUpdated() {
-      const { disabled: t, readOnly: e, min: i, max: a } = this.inputElement ?? {}, h = i && typeof i != "string" ? this._dateAdapter.toIso8601(i) : i, D = a && typeof a != "string" ? this._dateAdapter.toIso8601(a) : a;
-      this._inputUpdated.emit({ disabled: t, readonly: e, min: h, max: D });
-    }
-    _handleInputChange() {
-      var t;
-      this._tryApplyFormatToInput() || (this._validateDate(), this._setAriaLiveMessage(), this._change.emit(), (t = this._associationController) == null || t.updateControls());
-    }
-    _tryApplyFormatToInput() {
-      if (!this.inputElement || p(this.inputElement))
-        return !1;
-      const t = this.valueAsDate ? this._dateAdapter.format(this.valueAsDate) : "";
-      return t && this.inputElement.value !== t ? (Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set.call(this.inputElement, t), this.inputElement.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), this.inputElement.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 })), !0) : !1;
+      this.id ||= `sbb-datepicker-${++J}`, super.connectedCallback();
+      const e = this.closest?.("sbb-form-field");
+      if (e) {
+        G.resolveAssociation(this);
+        const t = e.querySelector("sbb-datepicker-toggle");
+        t && !t.hasAttribute("datepicker") && (t.datepicker ??= this);
+      }
     }
-    _validateDate() {
-      if (!this.inputElement)
-        return;
-      const t = !this.inputElement.value || this._isDateAvailable(), e = !this.inputElement.hasAttribute("data-sbb-invalid");
-      this.inputElement.toggleAttribute("data-sbb-invalid", !t), e !== t && this._validationChange.emit({ valid: t });
+    requestUpdate(e, t, o) {
+      if (super.requestUpdate(e, t, o), e === "input" && this.input !== t && (this._inputAbortController?.abort(), this.input)) {
+        const { signal: z } = this._inputAbortController = new AbortController();
+        this.input?.addEventListener("ɵchange", () => {
+          super.requestUpdate(), this._updateStatus();
+        }, { signal: z });
+      }
     }
-    _parseInput(t = !1) {
-      if (p(this.inputElement))
+    _updateStatus() {
+      const e = this.shadowRoot?.getElementById("status-container");
+      if (!e)
         return;
-      const e = this.inputElement.value;
-      this._valueAsDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.parse(e, this.now)), t && !this._valueAsDate && (this._valueAsDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(e)));
-    }
-    _setAriaLiveMessage() {
-      var e, i;
-      const t = (i = (e = this.shadowRoot) == null ? void 0 : e.querySelector) == null ? void 0 : i.call(e, "#status-container");
-      if (t)
-        if (!this.valueAsDate)
-          t.innerText = "";
-        else {
-          const a = this._dateAdapter.format(this.valueAsDate, { weekdayStyle: "long" });
-          t.innerText = `${lt[this._language.current]} ${a}`;
-        }
-      else return;
+      const t = this._dateAdapter.isValid(this.input?.valueAsDate) ? `${j[this._language.current]} ${this._dateAdapter.format(this.input.valueAsDate, {
+        weekdayStyle: "long"
+      })}` : "";
+      e.textContent !== t && (e.textContent = t);
+    }
+    renderContent() {
+      return q`
+      <p id="status-container" role="status"></p>
+      <sbb-calendar
+        .view=${this.view}
+        .min=${this.input?.min ?? null}
+        .max=${this.input?.max ?? null}
+        .dateFilter=${this.input?.dateFilter ?? null}
+        .selected=${this.input?.valueAsDate ?? null}
+        ?wide=${this.wide}
+        @dateSelected=${(e) => {
+        this.input && (this.input.valueAsDate = e.detail, this.input.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), this.input.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 })), this.input.dispatchEvent(new Event("blur", { composed: !0 })));
+      }}
+      ></sbb-calendar>
+    `;
     }
     render() {
-      return W`<p id="status-container" role="status"></p>`;
-    }
-    /**
-     * Calculates the first available date before the given one,
-     * considering the SbbDatepickerElement `dateFilter` property and `min` parameter (e.g. from the self-named input's attribute).
-     * @param date The starting date for calculations.
-     */
-    findPreviousAvailableDate(t) {
-      var a;
-      const e = this._findAvailableDate(t, -1), i = this._dateAdapter.deserialize((a = this.inputElement) == null ? void 0 : a.min);
-      return !i || this._dateAdapter.isValid(i) && this._dateAdapter.compareDate(e, i) >= 0 ? e : t;
-    }
-    /**
-     * Calculates the first available date after the given one,
-     * considering the SbbDatepickerElement `dateFilter` property and `max` parameter (e.g. from the self-named input's attribute).
-     * @param date The starting date for calculations.
-     */
-    findNextAvailableDate(t) {
-      var a;
-      const e = this._findAvailableDate(t, 1), i = this._dateAdapter.deserialize((a = this.inputElement) == null ? void 0 : a.max);
-      return !i || this._dateAdapter.isValid(i) && this._dateAdapter.compareDate(e, i) <= 0 ? e : t;
-    }
-    /**
-     * Returns the first available date before or after a given one, considering the `dateFilter` property.
-     * @param date The starting date for calculations.
-     * @param delta The number of days to add/subtract from the starting one.
-     */
-    _findAvailableDate(t, e) {
-      let i = this._dateAdapter.addCalendarDays(t, e);
-      if (this.dateFilter)
-        for (; !this.dateFilter(i); )
-          i = this._dateAdapter.addCalendarDays(i, e);
-      return i;
-    }
-    /**
-     * Checks if valueAsDate is valid, considering the SbbDatepickerElement `dateFilter` property
-     * and `min` and `max` parameters (e.g. from the self-named input's attributes).
-     */
-    _isDateAvailable() {
-      var i, a, h;
-      if (!this.valueAsDate)
-        return !1;
-      const t = this._dateAdapter.deserialize((i = this.inputElement) == null ? void 0 : i.min), e = this._dateAdapter.deserialize((a = this.inputElement) == null ? void 0 : a.max);
-      return this._dateAdapter.isValid(t) && this._dateAdapter.compareDate(this.valueAsDate, t) < 0 || this._dateAdapter.isValid(e) && this._dateAdapter.compareDate(this.valueAsDate, e) > 0 ? !1 : ((h = this.dateFilter) == null ? void 0 : h.call(this, this.valueAsDate)) ?? !0;
-    }
-  }, m = new WeakMap(), f = new WeakMap(), v = new WeakMap(), b = new WeakMap(), u = l, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(I[Symbol.metadata] ?? null) : void 0;
-    x = [at(), g({ type: Boolean })], F = [g({ attribute: !1 })], z = [g()], S = [st({ fallback: (e) => e.today() }), g()], P = [g({ attribute: !1 })], L = [Y()], c(l, null, x, { kind: "accessor", name: "wide", static: !1, private: !1, access: { has: (e) => "wide" in e, get: (e) => e.wide, set: (e, i) => {
-      e.wide = i;
-    } }, metadata: t }, k, U), c(l, null, F, { kind: "setter", name: "dateFilter", static: !1, private: !1, access: { has: (e) => "dateFilter" in e, set: (e, i) => {
-      e.dateFilter = i;
-    } }, metadata: t }, null, y), c(l, null, z, { kind: "accessor", name: "input", static: !1, private: !1, access: { has: (e) => "input" in e, get: (e) => e.input, set: (e, i) => {
-      e.input = i;
-    } }, metadata: t }, M, O), c(l, null, S, { kind: "accessor", name: "now", static: !1, private: !1, access: { has: (e) => "now" in e, get: (e) => e.now, set: (e, i) => {
-      e.now = i;
-    } }, metadata: t }, V, T), c(l, null, P, { kind: "setter", name: "valueAsDate", static: !1, private: !1, access: { has: (e) => "valueAsDate" in e, set: (e, i) => {
-      e.valueAsDate = i;
-    } }, metadata: t }, null, y), c(l, null, L, { kind: "accessor", name: "_inputElement", static: !1, private: !1, access: { has: (e) => "_inputElement" in e, get: (e) => e._inputElement, set: (e, i) => {
-      e._inputElement = i;
-    } }, metadata: t }, N, q), c(null, n = { value: u }, s, { kind: "class", name: u.name, metadata: t }, null, r), _ = u = n.value, t && Object.defineProperty(u, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), l.styles = ut, l.events = {
-    change: "change",
-    inputUpdated: "inputUpdated",
-    datePickerUpdated: "datePickerUpdated",
-    validationChange: "validationChange"
-  }, d(u, r), l);
-  return _ = u;
+      return I || this.hydrationRequired ? q`${U}` : super.render();
+    }
+  }, d = new WeakMap(), p = new WeakMap(), c = new WeakMap(), n = r, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(w[Symbol.metadata] ?? null) : void 0;
+    v = [P(), _({ type: Boolean })], A = [T(), _()], E = [_()], b(r, null, v, { kind: "accessor", name: "wide", static: !1, private: !1, access: { has: (t) => "wide" in t, get: (t) => t.wide, set: (t, o) => {
+      t.wide = o;
+    } }, metadata: e }, g, y), b(r, null, A, { kind: "accessor", name: "input", static: !1, private: !1, access: { has: (t) => "input" in t, get: (t) => t.input, set: (t, o) => {
+      t.input = o;
+    } }, metadata: e }, S, x), b(r, null, E, { kind: "accessor", name: "view", static: !1, private: !1, access: { has: (t) => "view" in t, get: (t) => t.view, set: (t, o) => {
+      t.view = o;
+    } }, metadata: e }, k, C), b(null, s = { value: n }, i, { kind: "class", name: n.name, metadata: e }, null, a), n = s.value, e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), r.styles = [f.styles, H], r.sbbDateInputAssociated = !0, u(n, a), n;
 })();
 export {
-  Dt as SbbDatepickerElement
+  at as SbbDatepickerElement
 };

package/datepicker/datepicker-next-day/datepicker-next-day.component.d.ts

@@ -9,8 +9,8 @@ export declare class SbbDatepickerNextDayElement<T = Date> extends SbbDatepicker
     protected iconName: string;
     protected i18nOffBoundaryDay: Record<string, string>;
     protected i18nSelectOffBoundaryDay: (currentDate: string) => Record<string, string>;
-    connectedCallback(): void;
-    protected findAvailableDate(date: T): T;
+    protected findAvailableDate(date: T): T | null;
+    private _isAfterMaxDate;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/datepicker/datepicker-next-day/datepicker-next-day.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker-next-day.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/datepicker/datepicker-next-day/datepicker-next-day.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAInD;;;GAGG;AACH,qBAEM,2BAA2B,CAAC,CAAC,GAAG,IAAI,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IACxE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,SAAS,CAAC,QAAQ,EAAE,MAAM,CAA+B;IACzD,SAAS,CAAC,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAe;IACnE,SAAS,CAAC,wBAAwB,kDAAqB;IAEvC,iBAAiB,IAAI,IAAI;IAKzC,SAAS,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC;CAIxC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,yBAAyB,EAAE,2BAA2B,CAAC;KACxD;CACF"}
+{"version":3,"file":"datepicker-next-day.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/datepicker/datepicker-next-day/datepicker-next-day.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAInD;;;GAGG;AACH,qBAEM,2BAA2B,CAAC,CAAC,GAAG,IAAI,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IACxE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,SAAS,CAAC,QAAQ,EAAE,MAAM,CAA+B;IACzD,SAAS,CAAC,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAe;IACnE,SAAS,CAAC,wBAAwB,kDAAqB;IAEvD,SAAS,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,GAAG,IAAI;IAmB9C,OAAO,CAAC,eAAe;CAGxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,yBAAyB,EAAE,2BAA2B,CAAC;KACxD;CACF"}

package/datepicker/datepicker-next-day/datepicker-next-day.component.js

@@ -1,27 +1,36 @@
-import { __esDecorate as s, __runInitializers as n } from "tslib";
-import { customElement as d } from "lit/decorators.js";
-import { i18nNextDay as l, i18nSelectNextDay as c } from "../../core/i18n.js";
-import { SbbDatepickerButton as u } from "../common.js";
-import { css as v } from "lit";
-const h = v`*,:before,:after{box-sizing:border-box}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-datepicker-next-day{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-datepicker-next-day:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-charcoal);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-datepicker-next-day{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-datepicker-next-day:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:is([data-focus-visible],:focus-visible)) .sbb-datepicker-next-day:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}:host([data-focus-visible]){--sbb-focus-outline-style: initial}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover) .sbb-datepicker-next-day:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled]):is(:active,[data-active])) .sbb-datepicker-next-day:before{background-color:var(--sbb-button-color-active-background)}.sbb-datepicker-next-day{margin:auto;-webkit-tap-highlight-color:transparent}`;
-let y = (() => {
+import { __esDecorate as d, __runInitializers as l } from "tslib";
+import { customElement as c } from "lit/decorators.js";
+import { i18nNextDay as u, i18nSelectNextDay as v } from "../../core/i18n.js";
+import { SbbDatepickerButton as h } from "../common.js";
+import { css as m } from "lit";
+const p = m`*,:before,:after{box-sizing:border-box}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-datepicker-next-day{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-datepicker-next-day:before{position:absolute;content:"";inset:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-charcoal);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-datepicker-next-day{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-datepicker-next-day:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:is([data-focus-visible],:focus-visible)) .sbb-datepicker-next-day:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}:host([data-focus-visible]){--sbb-focus-outline-style: initial}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover) .sbb-datepicker-next-day:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled]):is(:active,[data-active])) .sbb-datepicker-next-day:before{background-color:var(--sbb-button-color-active-background)}.sbb-datepicker-next-day{margin:auto;-webkit-tap-highlight-color:transparent}`;
+let D = (() => {
   var o;
-  let i = [d("sbb-datepicker-next-day")], b, r = [], t, e = u;
-  return o = class extends e {
+  let n = [c("sbb-datepicker-next-day")], e, b = [], t, i = h;
+  return o = class extends i {
     constructor() {
-      super(...arguments), this.iconName = "chevron-small-right-small", this.i18nOffBoundaryDay = l, this.i18nSelectOffBoundaryDay = c;
-    }
-    connectedCallback() {
-      super.connectedCallback(), this.slot || (this.slot = "suffix");
+      super(...arguments), this.iconName = "chevron-small-right-small", this.i18nOffBoundaryDay = u, this.i18nSelectOffBoundaryDay = v;
     }
     findAvailableDate(a) {
-      return this.datepicker.findNextAvailableDate(a);
+      let r = this.dateAdapter.addCalendarDays(a, 1);
+      if (this._isAfterMaxDate(r))
+        return null;
+      const s = this.input.dateFilter;
+      if (s) {
+        for (; !s(r); )
+          if (r = this.dateAdapter.addCalendarDays(r, 1), this._isAfterMaxDate(r))
+            return null;
+      }
+      return r;
+    }
+    _isAfterMaxDate(a) {
+      return !!this.input.max && this.dateAdapter.compareDate(a, this.input.max) > 0;
     }
   }, t = o, (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
-    s(null, b = { value: t }, i, { kind: "class", name: t.name, metadata: a }, null, r), t = b.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
-  })(), o.styles = h, n(t, r), t;
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
+    d(null, e = { value: t }, n, { kind: "class", name: t.name, metadata: a }, null, b), t = e.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), o.styles = p, l(t, b), t;
 })();
 export {
-  y as SbbDatepickerNextDayElement
+  D as SbbDatepickerNextDayElement
 };

package/datepicker/datepicker-previous-day/datepicker-previous-day.component.d.ts

@@ -9,8 +9,8 @@ export declare class SbbDatepickerPreviousDayElement<T = Date> extends SbbDatepi
     protected iconName: string;
     protected i18nOffBoundaryDay: Record<string, string>;
     protected i18nSelectOffBoundaryDay: (currentDate: string) => Record<string, string>;
-    connectedCallback(): void;
-    protected findAvailableDate(date: T): T;
+    protected findAvailableDate(date: T): T | null;
+    private _isBeforeMinDate;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/datepicker/datepicker-previous-day/datepicker-previous-day.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker-previous-day.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/datepicker/datepicker-previous-day/datepicker-previous-day.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAInD;;;GAGG;AACH,qBAEM,+BAA+B,CAAC,CAAC,GAAG,IAAI,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAC5E,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,SAAS,CAAC,QAAQ,EAAE,MAAM,CAA8B;IACxD,SAAS,CAAC,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAmB;IACvE,SAAS,CAAC,wBAAwB,kDAAyB;IAE3C,iBAAiB,IAAI,IAAI;IAKzC,SAAS,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC;CAIxC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,6BAA6B,EAAE,+BAA+B,CAAC;KAChE;CACF"}
+{"version":3,"file":"datepicker-previous-day.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/datepicker/datepicker-previous-day/datepicker-previous-day.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAInD;;;GAGG;AACH,qBAEM,+BAA+B,CAAC,CAAC,GAAG,IAAI,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAC5E,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,SAAS,CAAC,QAAQ,EAAE,MAAM,CAA8B;IACxD,SAAS,CAAC,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAmB;IACvE,SAAS,CAAC,wBAAwB,kDAAyB;IAE3D,SAAS,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,GAAG,IAAI;IAmB9C,OAAO,CAAC,gBAAgB;CAGzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,6BAA6B,EAAE,+BAA+B,CAAC;KAChE;CACF"}