@progressive-development/pd-calendar 0.9.2 → 1.0.0

package/dist/pd-datepicker/PdDatepicker.js

@@ -1,4 +1,4 @@
-import { css, html } from 'lit';
+import { css, nothing, html } from 'lit';
 import { localized, msg } from '@lit/localize';
 import { property, state } from 'lit/decorators.js';
 import { parse, format } from 'date-fns';
@@ -22,8 +22,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 const UNDEF = "UNDEF";
 const INPUT_TYPE_DATE = 7;
 const DEFAULT_FORMAT = "yyyy-MM-dd";
-const DATE_TIMES = [
-  { name: "Uhrzeit auswählen", value: UNDEF },
+const TIME_VALUES = [
   { name: "07:00", value: "07:00" },
   { name: "07:30", value: "07:30" },
   { name: "08:00", value: "08:00" },
@@ -63,7 +62,7 @@ function getDataForDaysBetween(start, end) {
   let to = new Date(end);
   if (from > to) [from, to] = [to, from];
   while (from <= to) {
-    result[format(from, DEFAULT_FORMAT)] = [{ special: true }];
+    result[format(from, DEFAULT_FORMAT)] = [{ category: "range" }];
     from.setDate(from.getDate() + 1);
   }
   return result;
@@ -75,12 +74,38 @@ let PdDatepicker = class extends PdBaseInputElement {
     this.hideToday = false;
     this.withYearPopup = [];
     this.withTime = false;
+    this.disabledDays = [];
+    this.modal = false;
+    this.modalBreakpoint = 480;
     this._showCalendar = false;
     this._timeSelection = UNDEF;
+    this._useModal = false;
+    this._displayedMonth = /* @__PURE__ */ new Date();
+    /** @ignore */
     this._calendarPosition = "bottom";
     this._inputType = INPUT_TYPE_DATE;
     this._validators = [this._requiredDateTimeValidator.bind(this)];
   }
+  /** Time selection options with i18n placeholder. */
+  get _timeOptions() {
+    return [
+      {
+        name: msg("Uhrzeit auswählen", { id: "pd.datepicker.selectTime" }),
+        value: UNDEF
+      },
+      ...TIME_VALUES
+    ];
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._boundHandleClickOutside) {
+      document.removeEventListener("click", this._boundHandleClickOutside);
+      this._boundHandleClickOutside = void 0;
+    }
+    if (this._useModal && this._showCalendar) {
+      document.body.style.overflow = "";
+    }
+  }
   _requiredDateTimeValidator() {
     return this.required && !this._startDateValue || this.dateRange && this._startDateValue && !this._endDateValue || this.withTime && this._startDateValue && this._timeSelection === UNDEF ? msg("Eingabe unvollständig", {
       id: "pd.form.field.selectDateTimeRequired"
@@ -89,11 +114,12 @@ let PdDatepicker = class extends PdBaseInputElement {
   update(changedProps) {
     if (changedProps.has("initialDate") && this.initialDate) {
       this._prepareFieldsFromInitDate();
-      this._updateInputField(false, void 0);
+      this._updateInputField(this.handleChangeForInitVal, void 0);
     }
     super.update(changedProps);
   }
   render() {
+    const popupId = `${this.id || "datepicker"}-popup`;
     return html`
       <pd-input
         id="datePickerId"
@@ -105,38 +131,53 @@ let PdDatepicker = class extends PdBaseInputElement {
         ?required="${this.required}"
         ?disabled="${this.disabled}"
         icon-right
+        aria-haspopup="dialog"
+        aria-expanded="${this._showCalendar}"
+        aria-controls="${popupId}"
         @click="${this._inputClick}"
+        @keydown="${this._onInputKeyDown}"
         @pd-form-element-change="${this._innerFormChange}"
         @pd-form-element-blur="${this._innerBlur}"
         @pd-form-element-focus="${this._innerFocus}"
         @pd-form-element-register="${this._innerRegister}"
         @enter-pressed="${this._innerEnter}"
-      >
-        <div slot="icon-right">
-          <slot name="icon-right"></slot>
-        </div>
-        ></pd-input
-      >
+      ></pd-input>
       ${this._renderErrorMsg()}
-      <div class="calendar-small ${this._calendarPosition}">
+      <div
+        class="modal-backdrop ${this._useModal ? "active" : ""}"
+        @click="${this._closeCalendar}"
+      ></div>
+      <div
+        id="${popupId}"
+        class="calendar-small ${this._useModal ? "modal" : this._calendarPosition}"
+        role="dialog"
+        aria-modal="true"
+        aria-label="${msg("Datum auswählen", {
+      id: "pd.datepicker.selectDate"
+    })}"
+        @keydown="${this._onPopupKeyDown}"
+      >
         <pd-calendar
           .withYearPopup="${this.withYearPopup}"
           .refDate="${this._startDateValue}"
-          .data="${this._rangeSelection || {}}"
+          .data="${this._buildConstrainedData(this._displayedMonth)}"
           numberClass="center"
           selectableDates
           showSelection
+          withWheelNavigation
+          withTouchNavigation
           prevMonthConstraint="-1"
           nextMonthConstraint="-1"
           @select-date="${this._triggerCalendarDateSelected}"
           @mouse-enter-date="${this._triggerHoverCalculateRange}"
+          @change-month="${this._onCalendarMonthChange}"
         ></pd-calendar>
 
         ${this.withTime ? html`
               <pd-select
                 class="date-time-select"
                 id="dateTimeSelectId"
-                .values="${DATE_TIMES}"
+                .values="${this._timeOptions}"
                 label="${msg("Uhrzeit", { id: "pd.datepicker.time" })}"
                 initValue="${this._timeSelection}"
                 required
@@ -149,13 +190,13 @@ let PdDatepicker = class extends PdBaseInputElement {
                 @pd-form-element-register="${this._innerRegister}"
                 @enter-pressed="${this._innerEnter}"
               ></pd-select>
-            ` : ""}
+            ` : nothing}
 
         <div class="bottom-buttons">
-          ${!this.hideToday ? html`<pd-button
+          ${!this.hideToday && !this.dateRange ? html`<pd-button
                 text="${msg("Heute", { id: "pd.datepicker.today" })}"
                 @button-clicked="${this._triggerSetTodayButton}"
-              ></pd-button>` : ""}
+              ></pd-button>` : nothing}
           <pd-button
             text="${msg("Reset", { id: "pd.datepicker.reset" })}"
             @button-clicked="${this._triggerResetButton}"
@@ -204,8 +245,10 @@ let PdDatepicker = class extends PdBaseInputElement {
     return this._formatDateValue();
   }
   /**
-   * @returns parsed date
+   * Returns the parsed date values.
+   * @returns Object with start and optional end date: `{ start?: Date; end?: Date }`
    */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   _getParsedValue() {
     return this.dateValues;
   }
@@ -246,21 +289,104 @@ let PdDatepicker = class extends PdBaseInputElement {
     );
   }
   /**
-   * Toogle view calendar on click into pd-input field.
+   * Toggle view calendar on click into pd-input field.
    */
   _inputClick() {
-    const input = this.shadowRoot?.getElementById("datePickerId");
-    if (input) {
-      const rect = input.getBoundingClientRect();
-      const spaceBelow = window.innerHeight - rect.bottom;
-      const spaceAbove = rect.top;
-      this._calendarPosition = spaceBelow < 300 && spaceAbove > spaceBelow ? "top" : "bottom";
-      this._showCalendar = !this._showCalendar;
+    if (this._showCalendar) {
+      this._closeCalendar();
+    } else {
+      this._openCalendar();
+    }
+  }
+  /**
+   * Handle keyboard events on the input field.
+   * Enter toggles calendar, Space/ArrowDown opens, Escape closes.
+   */
+  _onInputKeyDown(e) {
+    switch (e.key) {
+      case " ":
+      case "Enter":
+        e.preventDefault();
+        if (this._showCalendar) {
+          this._closeCalendar();
+        } else {
+          this._openCalendar();
+        }
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        if (!this._showCalendar) this._openCalendar();
+        break;
+      case "Escape":
+        if (this._showCalendar) {
+          e.preventDefault();
+          this._closeCalendar();
+        }
+        break;
+    }
+  }
+  /**
+   * Handle keyboard events within the popup.
+   */
+  _onPopupKeyDown(e) {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      this._closeCalendar();
+    }
+  }
+  /**
+   * Open the calendar popup.
+   */
+  _openCalendar() {
+    this._displayedMonth = this._startDateValue || /* @__PURE__ */ new Date();
+    this._useModal = this.modal || window.innerWidth < this.modalBreakpoint;
+    if (!this._useModal) {
+      const input = this.shadowRoot?.getElementById("datePickerId");
+      if (input) {
+        const rect = input.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        this._calendarPosition = spaceBelow < 380 && spaceAbove > spaceBelow ? "top" : "bottom";
+      }
+    }
+    if (this._useModal) {
+      document.body.style.overflow = "hidden";
+    }
+    this._showCalendar = true;
+    if (!this._useModal) {
       setTimeout(() => {
-        this.shadowRoot?.querySelector(".calendar-small")?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+        this._boundHandleClickOutside = this._handleClickOutside.bind(this);
+        document.addEventListener("click", this._boundHandleClickOutside);
       }, 0);
     }
   }
+  /**
+   * Close the calendar popup and return focus to input.
+   */
+  _closeCalendar() {
+    this._showCalendar = false;
+    if (this._useModal) {
+      document.body.style.overflow = "";
+    }
+    if (this._boundHandleClickOutside) {
+      document.removeEventListener("click", this._boundHandleClickOutside);
+      this._boundHandleClickOutside = void 0;
+    }
+    const input = this.shadowRoot?.getElementById(
+      "datePickerId"
+    );
+    input?.focus();
+  }
+  /**
+   * Handle clicks outside the popup.
+   */
+  _handleClickOutside(e) {
+    const path = e.composedPath();
+    if (!path.includes(this)) {
+      this._closeCalendar();
+    }
+  }
   /**
    * Triggered by date selection in small calendar.
    * Set internal values depending on daterange configuration.
@@ -280,7 +406,7 @@ let PdDatepicker = class extends PdBaseInputElement {
         } else {
           this._endDateValue = date;
         }
-        this._showCalendar = false;
+        this._closeCalendar();
       } else {
         this._startDateValue = date;
         this._endDateValue = void 0;
@@ -293,7 +419,7 @@ let PdDatepicker = class extends PdBaseInputElement {
         );
         el?.focus();
       } else {
-        this._showCalendar = false;
+        this._closeCalendar();
       }
     }
     if (!this._showCalendar) {
@@ -310,8 +436,11 @@ let PdDatepicker = class extends PdBaseInputElement {
     if (this.dateRange) {
       this._endDateValue = void 0;
       this._rangeSelection = void 0;
-    } else {
-      this._showCalendar = this.withTime;
+    } else if (!this.withTime) {
+      this._closeCalendar();
+      this._updateInputField(true, e);
+      e.stopPropagation();
+      return;
     }
     this._updateInputField(!this._showCalendar, e);
     e.stopPropagation();
@@ -322,8 +451,7 @@ let PdDatepicker = class extends PdBaseInputElement {
    */
   _triggerResetButton(e) {
     this.reset();
-    this._showCalendar = false;
-    this.shadowRoot?.getElementById("datePickerId")?.reset();
+    this._closeCalendar();
     e.stopPropagation();
   }
   /**
@@ -332,7 +460,17 @@ let PdDatepicker = class extends PdBaseInputElement {
    */
   _triggerSetValueButton(e) {
     this._updateInputField(true, e);
-    this._showCalendar = false;
+    this._closeCalendar();
+    e.stopPropagation();
+  }
+  /**
+   * Handle month change from calendar navigation.
+   * Updates _displayedMonth to recalculate constraints for the new month.
+   */
+  _onCalendarMonthChange(e) {
+    if (e.detail.newDate) {
+      this._displayedMonth = e.detail.newDate;
+    }
     e.stopPropagation();
   }
   /**
@@ -368,6 +506,29 @@ let PdDatepicker = class extends PdBaseInputElement {
       this.dateFormat
     );
   }
+  /**
+   * Builds calendar data with disabled days based on min/max constraints and disabledDays.
+   * Merges with existing range selection data.
+   */
+  _buildConstrainedData(currentMonth) {
+    const result = { ...this._rangeSelection || {} };
+    const minDate = this.min ? parse(this.min, DEFAULT_FORMAT, /* @__PURE__ */ new Date()) : null;
+    const maxDate = this.max ? parse(this.max, DEFAULT_FORMAT, /* @__PURE__ */ new Date()) : null;
+    const year = currentMonth.getFullYear();
+    const month = currentMonth.getMonth();
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    for (let day = new Date(firstDay); day <= lastDay; day.setDate(day.getDate() + 1)) {
+      const key = format(day, DEFAULT_FORMAT);
+      const isBeforeMin = minDate && day < minDate;
+      const isAfterMax = maxDate && day > maxDate;
+      const isInDisabledDays = this.disabledDays.includes(key);
+      if (isBeforeMin || isAfterMax || isInDisabledDays) {
+        result[key] = [{ ...result[key]?.[0], disabled: true }];
+      }
+    }
+    return result;
+  }
   // ###### Start Inner Element Events
   _innerEnter(e) {
     e.stopPropagation();
@@ -393,6 +554,7 @@ PdDatepicker.styles = [
   css`
       :host {
         position: relative;
+        display: inline-block;
       }
 
       :host([disabled]) {
@@ -406,26 +568,18 @@ PdDatepicker.styles = [
 
       .calendar-small {
         position: absolute;
-        background-color: white;
+        background-color: var(--pd-default-bg-col);
         visibility: hidden;
-        z-index: 1000;
-        box-shadow: var(--pd-menu-shadow, 3px 3px 5px grey);
+        z-index: var(--pd-datepicker-z-index, 1000);
+        box-shadow: var(--pd-menu-shadow, var(--pd-shadow-lg));
         transition: 0.5s ease-out;
         transform: translateY(0);
         opacity: 0;
-        padding: 0.5em 1em 0.5em 0.2em;
-
-        --pd-calendar-width: var(--pd-input-field-width, 250px);
-        --pd-calendar-cell-height: 30px;
-        --pd-calendar-week-title-bg-col: white;
-        --pd-calendar-week-title-font-col: #0a3a48;
+        padding: 0.5em;
+        max-width: 400px;
         --pd-calendar-cell-selectable-shadow: 0;
-        --pd-calendar-cell-day-free-bg-col: white;
-        --pd-calendar-cell-day-info-free-col: #0a3a48;
-        --pd-calendar-title-font-size: 20px;
-        --pd-calendar-title-icon-size: 20px;
-        --pd-calendar-weekday-title-font-size: 15px;
-        --pd-calendar-number-font-size: 15px;
+        --pd-calendar-cell-day-free-bg-col: var(--pd-default-bg-col);
+        --pd-calendar-cell-day-info-free-col: var(--pd-default-font-title-col);
       }
 
       .calendar-small.bottom {
@@ -436,9 +590,47 @@ PdDatepicker.styles = [
         bottom: 100%; /* Über dem Input-Feld */
       }
 
+      .date-time-select {
+        display: block;
+        --pd-input-field-height: 32px;
+        margin-top: var(--pd-spacing-sm);
+      }
+
       .bottom-buttons {
         display: flex;
-        --pd-button-width: 78px;
+        --pd-button-min-height: 32px;
+        --pd-button-height: 32px;
+        --pd-button-scale: 0.9;
+        gap: var(--pd-spacing-sm);
+        margin-top: var(--pd-spacing-sm);
+      }
+
+      /* Modal backdrop overlay */
+      .modal-backdrop {
+        display: none;
+        position: fixed;
+        inset: 0;
+        background-color: var(--pd-modal-overlay-col, rgba(0, 0, 0, 0.5));
+        z-index: calc(var(--pd-datepicker-z-index, 1000) - 1);
+      }
+
+      :host([_showCalendar]) .modal-backdrop.active {
+        display: block;
+      }
+
+      /* Modal mode: centered calendar, slightly above center for mobile usability */
+      .calendar-small.modal {
+        position: fixed;
+        top: 40%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        margin: 0;
+        padding: var(--pd-spacing-md);
+        border-radius: var(--pd-radius-lg);
+        max-height: 90vh;
+        min-height: 360px; /* Prevent jumping between months with different week counts */
+        overflow-y: auto;
+        width: calc(100vw - 2rem); /* 1rem Abstand links + rechts */
       }
     `
 ];
@@ -472,6 +664,15 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], PdDatepicker.prototype, "max", 2);
+__decorateClass([
+  property({ type: Array })
+], PdDatepicker.prototype, "disabledDays", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdDatepicker.prototype, "modal", 2);
+__decorateClass([
+  property({ type: Number })
+], PdDatepicker.prototype, "modalBreakpoint", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], PdDatepicker.prototype, "_showCalendar", 2);
@@ -487,6 +688,12 @@ __decorateClass([
 __decorateClass([
   state()
 ], PdDatepicker.prototype, "_timeSelection", 2);
+__decorateClass([
+  state()
+], PdDatepicker.prototype, "_useModal", 2);
+__decorateClass([
+  state()
+], PdDatepicker.prototype, "_displayedMonth", 2);
 PdDatepicker = __decorateClass([
   localized()
 ], PdDatepicker);

package/dist/pd-datepicker/pd-date-picker.stories.d.ts

@@ -1,23 +1,81 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
-    title: string;
-    tags: string[];
-    render: (args: import('@storybook/web-components').Args) => import('lit').TemplateResult<1>;
-    argTypes: {};
-};
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+/**
+ * Story arguments interface for pd-datepicker component.
+ * Maps to the component's public API.
+ */
+interface PdDatepickerArgs {
+    /** Field label */
+    label: string;
+    /** Placeholder text */
+    placeholder: string;
+    /** Whether the field is required */
+    required: boolean;
+    /** Whether the field is disabled */
+    disabled: boolean;
+    /** Whether to show time selection */
+    withTime: boolean;
+    /** Whether to enable date range selection */
+    dateRange: boolean;
+    /** Initial date value */
+    initialDate?: Date;
+    /** Date format string */
+    dateFormat: string;
+    /** Minimum allowed date (YYYY-MM-DD) */
+    min?: string;
+    /** Maximum allowed date (YYYY-MM-DD) */
+    max?: string;
+    /** Year selection popup values */
+    withYearPopup: string[];
+    /** Whether to hide today button */
+    hideToday: boolean;
+}
+/**
+ * ## pd-datepicker
+ *
+ * A datepicker component for selecting dates with optional time and range support.
+ * Opens a calendar popup on click and integrates seamlessly with pd-form-container
+ * for validation.
+ *
+ * ### Features
+ * - **Date Selection**: Click to open calendar popup for date selection
+ * - **Time Selection**: Optional time picker with predefined time slots
+ * - **Date Range**: Optional range selection for start and end dates
+ * - **Year Popup**: Quick year navigation via dropdown
+ * - **Min/Max Constraints**: Limit selectable date range with `min` and `max` properties
+ * - **Disabled Days**: Disable specific dates via `disabledDays` array
+ * - **Modal Mode**: Centered modal display for mobile devices (auto or forced)
+ * - **Form Integration**: Works with pd-form-container for validation
+ * - **Popup Positioning**: Automatically opens above or below based on viewport space
+ *
+ * ### Accessibility
+ * - `aria-haspopup="dialog"` on the input field
+ * - `aria-expanded` reflects popup open/close state
+ * - `aria-controls` links input to popup
+ * - `aria-modal="true"` on the calendar popup
+ * - Keyboard: Enter/Space toggles popup, ArrowDown opens, Escape closes
+ * - Focus returns to input when popup closes
+ */
+declare const meta: Meta<PdDatepickerArgs>;
 export default meta;
-type Story = StoryObj;
-export declare const Standard: Story;
-export declare const PlaceholderLabel: Story;
-export declare const Locale: Story;
-export declare const Required: Story;
-export declare const YearSelection: Story;
-export declare const HugeYearSelection: Story;
-export declare const Disabled: Story;
+type Story = StoryObj<PdDatepickerArgs>;
+/** Default datepicker. Interactive via Controls panel. */
+export declare const Default: Story;
+/** All datepicker configurations at a glance. */
+export declare const AllVariants: Story;
+/** Datepicker with time selection -- date + time picker combination. */
 export declare const WithTime: Story;
-export declare const WithRange: Story;
-export declare const InitialValue: Story;
-export declare const MinMax: Story;
-export declare const DatepickerInForm: Story;
-export declare const DatepickerInFormWithInit: Story;
+/** Datepicker for selecting a start and end date. */
+export declare const DateRange: Story;
+/** Different date format locales side by side. */
+export declare const Locales: Story;
+/** Date constraints with min/max properties, disabled days, and linked datepickers. */
+export declare const MinMaxDate: Story;
+/** Modal mode displays the calendar centered on screen with a backdrop overlay. */
+export declare const ModalMode: Story;
+/** Datepicker within a pd-form-container with validation. */
+export declare const InForm: Story;
+/** Tests automatic popup positioning based on available viewport space. */
+export declare const PopupPosition: Story;
+/** CSS Custom Properties -- Branded and Redesigned datepicker variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-date-picker.stories.d.ts.map

package/dist/pd-datepicker/pd-date-picker.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-date-picker.stories.d.ts","sourceRoot":"","sources":["../../src/pd-datepicker/pd-date-picker.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAMhE,OAAO,qDAAqD,CAAC;AAC7D,OAAO,+CAA+C,CAAC;AACvD,OAAO,6CAA6C,CAAC;AAErD,OAAO,oBAAoB,CAAC;AAG5B,QAAA,MAAM,IAAI;;;;;CAkBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAK9B,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAiBpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAS3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAS/B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC;AAKF,eAAO,MAAM,YAAY,EAAE,KAe1B,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAcpB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA+F9B,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KA2ItC,CAAC"}
+{"version":3,"file":"pd-date-picker.stories.d.ts","sourceRoot":"","sources":["../../src/pd-datepicker/pd-date-picker.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,qDAAqD,CAAC;AAC7D,OAAO,+CAA+C,CAAC;AACvD,OAAO,6CAA6C,CAAC;AAErD,OAAO,oBAAoB,CAAC;AAM5B;;;GAGG;AACH,UAAU,gBAAgB;IACxB,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,oCAAoC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,QAAQ,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,SAAS,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,yBAAyB;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;CACpB;AAYD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAoFhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AAMxC,0DAA0D;AAC1D,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAMF,iDAAiD;AACjD,eAAO,MAAM,WAAW,EAAE,KAuEzB,CAAC;AAMF,wEAAwE;AACxE,eAAO,MAAM,QAAQ,EAAE,KA+BtB,CAAC;AAMF,qDAAqD;AACrD,eAAO,MAAM,SAAS,EAAE,KA4BvB,CAAC;AAMF,kDAAkD;AAClD,eAAO,MAAM,OAAO,EAAE,KA4CrB,CAAC;AAMF,uFAAuF;AACvF,eAAO,MAAM,UAAU,EAAE,KAqGxB,CAAC;AAMF,mFAAmF;AACnF,eAAO,MAAM,SAAS,EAAE,KA8DvB,CAAC;AAMF,6DAA6D;AAC7D,eAAO,MAAM,MAAM,EAAE,KA0EpB,CAAC;AAMF,2EAA2E;AAC3E,eAAO,MAAM,aAAa,EAAE,KAoC3B,CAAC;AAMF,2EAA2E;AAC3E,eAAO,MAAM,aAAa,EAAE,KA4G3B,CAAC"}