@glatam/calendar-ui 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glatam/calendar-ui",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Componente web UI para el calendario @glatam/calendar",
   "type": "module",
   "author": "Santiago Hernández Saldarriaga",
@@ -36,7 +36,7 @@
     "dev": "vite"
   },
   "dependencies": {
-    "@glatam/calendar-core": "^1.0.1",
+    "@glatam/calendar-core": "^1.0.2",
     "lit": "^3.1.2"
   },
   "devDependencies": {

package/src/components/calendar-modal.ts

@@ -1,160 +1,11 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { BlockingRule } from '@glatam/calendar-core';
+import { modalStyles } from '../styles/calendar-modal.css.js';
 
 @customElement('glatam-calendar-modal')
 export class GlatamCalendarModal extends LitElement {
-  static styles = css`
-    .modal-overlay {
-      position: fixed;
-      top: 0; left: 0; right: 0; bottom: 0;
-      background: rgba(0, 0, 0, 0.35);
-      backdrop-filter: blur(10px);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 1000;
-      opacity: 0; pointer-events: none;
-      transition: opacity var(--glatam-transition-normal);
-    }
-    .modal-overlay.open {
-      opacity: 1; pointer-events: auto;
-    }
-    .modal-content {
-      background: var(--glatam-bg);
-      color: var(--glatam-text);
-      border-radius: 24px;
-      padding: 28px;
-      width: 90%;
-      max-width: 400px;
-      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
-      border: 1px solid var(--glatam-border);
-      transform: scale(0.92) translateY(10px);
-      transition: transform var(--glatam-transition-normal), background-color var(--glatam-transition-normal);
-      display: flex;
-      flex-direction: column;
-      gap: 18px;
-    }
-    .modal-overlay.open .modal-content {
-      transform: scale(1) translateY(0);
-    }
-    h3 { margin: 0; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
-    .form-group { display: flex; flex-direction: column; gap: 6px; }
-    label { font-size: 0.8rem; color: var(--glatam-text-secondary); font-weight: 600; }
-    input[type="text"] {
-      background: var(--glatam-surface);
-      border: 1px solid var(--glatam-border);
-      border-radius: 10px;
-      padding: 10px 14px;
-      color: var(--glatam-text);
-      font-family: inherit;
-      font-size: 0.9rem;
-      outline: none;
-      transition: border-color var(--glatam-transition-fast);
-    }
-    input[type="text"]:focus {
-      border-color: var(--glatam-primary);
-    }
-    .switch-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 4px 0;
-    }
-    
-    /* Apple Switch Style */
-    .switch {
-      position: relative;
-      display: inline-block;
-      width: 46px;
-      height: 26px;
-    }
-    .switch input { opacity: 0; width: 0; height: 0; }
-    .slider {
-      position: absolute;
-      cursor: pointer;
-      top: 0; left: 0; right: 0; bottom: 0;
-      background-color: var(--glatam-border);
-      transition: .25s cubic-bezier(0.16, 1, 0.3, 1);
-      border-radius: 26px;
-    }
-    .slider:before {
-      position: absolute;
-      content: "";
-      height: 20px;
-      width: 20px;
-      left: 3px;
-      bottom: 3px;
-      background-color: white;
-      transition: .25s cubic-bezier(0.16, 1, 0.3, 1);
-      border-radius: 50%;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-    }
-    input:checked + .slider {
-      background-color: var(--glatam-primary);
-    }
-    input:checked + .slider:before {
-      transform: translateX(20px);
-    }
-
-    .days-grid {
-      display: grid;
-      grid-template-columns: repeat(7, 1fr);
-      gap: 6px;
-      margin-top: 4px;
-    }
-    .day-btn {
-      width: 36px;
-      height: 36px;
-      margin: 0 auto;
-      border-radius: 50%;
-      border: 1px solid var(--glatam-border);
-      background: var(--glatam-bg);
-      color: var(--glatam-text);
-      font-size: 0.8rem;
-      font-weight: 600;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: background-color var(--glatam-transition-fast), color var(--glatam-transition-fast), border-color var(--glatam-transition-fast);
-    }
-    .day-btn:hover {
-      background-color: var(--glatam-surface);
-    }
-    .day-btn.selected {
-      background: var(--glatam-primary);
-      color: var(--glatam-text-light);
-      border-color: var(--glatam-primary);
-    }
-    .btn-actions { display: flex; gap: 10px; margin-top: 10px; justify-content: flex-end; }
-    .btn {
-      padding: 10px 18px;
-      border-radius: 20px;
-      font-size: 0.875rem;
-      font-weight: 600;
-      cursor: pointer;
-      border: none;
-      transition: opacity var(--glatam-transition-fast), transform var(--glatam-transition-fast);
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .btn:active { transform: scale(0.97); }
-    .btn-cancel { background: transparent; color: var(--glatam-text); border: 1px solid var(--glatam-border); }
-    .btn-cancel:hover { background-color: var(--glatam-surface); }
-    .btn-save { background: var(--glatam-primary); color: var(--glatam-text-light); }
-    .btn-save:hover { opacity: 0.95; }
-    .btn-danger {
-      background: rgba(255, 69, 58, 0.12);
-      color: #ff453a;
-      margin-right: auto;
-    }
-    .btn-danger:hover {
-      background: rgba(255, 69, 58, 0.18);
-    }
-  `;
+  static styles = modalStyles;
 
   @property({ type: Boolean }) open = false;
   @property({ type: String }) dateString = '';
@@ -184,13 +35,28 @@ export class GlatamCalendarModal extends LitElement {
     }
   }
 
+  updated(changedProperties: Map<string, any>) {
+    if (changedProperties.has('open')) {
+      const dialog = this.shadowRoot?.getElementById('booking-dialog') as HTMLDialogElement;
+      if (dialog) {
+        if (this.open) {
+          if (!dialog.open) dialog.showModal();
+        } else {
+          if (dialog.open) dialog.close();
+        }
+      }
+    }
+  }
+
+  private handleDialogClose() {
+    if (this.open) {
+      this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+    }
+  }
+
   private toggleDay(dayNum: number) {
     const idx = this.selectedDays.indexOf(dayNum);
-    if (idx > -1) {
-      this.selectedDays = this.selectedDays.filter(d => d !== dayNum);
-    } else {
-      this.selectedDays = [...this.selectedDays, dayNum];
-    }
+    this.selectedDays = idx > -1 ? this.selectedDays.filter(d => d !== dayNum) : [...this.selectedDays, dayNum];
   }
 
   private handleSave() {
@@ -223,7 +89,7 @@ export class GlatamCalendarModal extends LitElement {
       : this.dateString;
 
     return html`
-      <div class=${classMap({ 'modal-overlay': true, 'open': this.open })}>
+      <dialog id="booking-dialog" @close=${this.handleDialogClose}>
         <div class="modal-content">
           <h3>${this.existingRule ? 'Gestionar Bloqueo' : 'Crear Bloqueo'}</h3>
           
@@ -291,7 +157,7 @@ export class GlatamCalendarModal extends LitElement {
             <button class="btn btn-save" @click=${this.handleSave}>Guardar</button>
           </div>
         </div>
-      </div>
+      </dialog>
     `;
   }
 }

package/src/glatam-calendar.ts

@@ -22,29 +22,18 @@ const DEFAULT_SLOTS: TimeSlot[] = [
 export class GlatamCalendar extends LitElement {
   static styles = [variablesStyles, calendarStyles];
 
-  @property({ type: String }) role = 'provider';
-  @property({ type: String, reflect: true }) size = 'medium';
-  @property({ type: String }) view: 'month' | 'week' | 'day' = 'month';
-  @property({ type: String }) locale = 'es';
-  @property({ type: Number }) startOfWeekDay = 0;
-  @property({ type: Array }) rules: BlockingRule[] = [];
-  @property({ type: Array }) selectedDates: string[] = [];
-  @property({ type: Object }) selectedRange: { dateString: string; start: string; end: string } | null = null;
+  @property({ type: String }) role = 'provider'; @property({ type: String, reflect: true }) size = 'medium';
+  @property({ type: String }) view: 'month' | 'week' | 'day' = 'month'; @property({ type: String }) locale = 'es';
+  @property({ type: Number }) startOfWeekDay = 0; @property({ type: Array }) rules: BlockingRule[] = [];
+  @property({ type: Array }) selectedDates: string[] = []; @property({ type: Object }) selectedRange: { dateString: string; start: string; end: string } | null = null;
   @property({ type: String }) hostTimezone = 'America/Bogota'; @property({ type: String }) activeTimezone = 'local';
-  @property({ type: Array }) slots: TimeSlot[] = DEFAULT_SLOTS;
-  @property({ type: String }) minDate = ''; @property({ type: String }) maxDate = '';
-  @property({ type: Boolean }) showNeighboringMonth = true;
-  @property({ attribute: false }) tileClassName: ((data: { date: Date; dateString: string }) => string) | null = null;
-
-  @state() private activeDate = new Date();
-  @state() private localRules: BlockingRule[] = [];
-  @state() private darkMode = false;
-  @state() private modalOpen = false;
-  @state() private modalDateString = '';
-  @state() private modalStartTime = '';
-  @state() private modalEndTime = '';
-  @state() private modalIsRange = false;
-  @state() private modalExistingRule: BlockingRule | null = null;
+  @property({ type: Array }) slots: TimeSlot[] = DEFAULT_SLOTS; @property({ type: String }) minDate = ''; @property({ type: String }) maxDate = '';
+  @property({ type: Boolean }) showNeighboringMonth = true; @property({ attribute: false }) tileClassName: ((data: { date: Date; dateString: string }) => string) | null = null;
+
+  @state() private activeDate = new Date(); @state() private localRules: BlockingRule[] = [];
+  @state() private darkMode = false; @state() private modalOpen = false;
+  @state() private modalDateString = ''; @state() private modalStartTime = ''; @state() private modalEndTime = '';
+  @state() private modalIsRange = false; @state() private modalExistingRule: BlockingRule | null = null;
 
   firstUpdated() { this.darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; this.localRules = [...this.rules]; }
   willUpdate(changedProps: Map<string, any>) { if (changedProps.has('rules') && this.rules.length > 0 && this.localRules.length === 0) this.localRules = [...this.rules]; }
@@ -77,6 +66,10 @@ export class GlatamCalendar extends LitElement {
 
   private handleRangeSelect(e: CustomEvent<{ dateString: string; start: string; end: string }>) {
     const { dateString, start, end } = e.detail, offset = this.activeTimezone === 'local' ? getTimezoneOffsetDiff(this.activeDate, this.hostTimezone, 'local') : 0;
+    const todayStr = new Date().toISOString().split('T')[0];
+    const limitMinDate = this.minDate || (this.role === 'buyer' ? todayStr : '');
+    if (this.role === 'buyer' && limitMinDate && dateString < limitMinDate) return;
+
     const displaySlots = this.getDisplaySlots(offset), startIdx = displaySlots.findIndex(s => s.start === start), endIdx = displaySlots.findIndex(s => s.end === end);
     const hostStart = this.slots[startIdx]?.start || start, hostEnd = this.slots[endIdx]?.end || end;
     if (this.role === 'buyer') {
@@ -87,8 +80,12 @@ export class GlatamCalendar extends LitElement {
     this.openModal(dateString, hostStart, hostEnd, true, null);
   }
 
-  private handleSlotClick(e: CustomEvent<{ dateString: string; slot: TimeSlot }>) {
+  private handleSlotClick(e: CustomEvent<{ dateString: string; slot: TimeSlot & { isBlocked?: boolean } }>) {
     const { dateString, slot } = e.detail, date = new Date(dateString + 'T00:00:00'), offset = this.activeTimezone === 'local' ? getTimezoneOffsetDiff(this.activeDate, this.hostTimezone, 'local') : 0;
+    const todayStr = new Date().toISOString().split('T')[0];
+    const limitMinDate = this.minDate || (this.role === 'buyer' ? todayStr : '');
+    if (this.role === 'buyer' && (slot.isBlocked || (limitMinDate && dateString < limitMinDate))) return;
+
     const displaySlots = this.getDisplaySlots(offset), idx = displaySlots.findIndex(s => s.start === slot.start), hostSlot = this.slots[idx] || slot;
     if (this.role === 'buyer') {
       this.selectedRange = { dateString, start: slot.start, end: slot.end };
@@ -177,7 +174,7 @@ export class GlatamCalendar extends LitElement {
 
       <div class="calendar-body">
         ${this.view === 'month'
-          ? html`<glatam-calendar-month-view .days=${generateMonthDays(y, m, this.localRules, this.slots, this.startOfWeekDay)} .locale=${this.locale} .startOfWeekDay=${this.startOfWeekDay} .role=${this.role} .size=${this.size} .minDate=${this.minDate} .maxDate=${this.maxDate} .showNeighboringMonth=${this.showNeighboringMonth} .tileClassName=${this.tileClassName} @day-select=${this.handleDaySelect}></glatam-calendar-month-view>`
+          ? html`<glatam-calendar-month-view .days=${generateMonthDays(y, m, this.localRules, this.slots, this.startOfWeekDay)} .locale=${this.locale} .startOfWeekDay=${this.startOfWeekDay} .role=${this.role} .size=${this.size} .minDate=${this.minDate || (this.role === 'buyer' ? new Date().toISOString().split('T')[0] : '')} .maxDate=${this.maxDate} .showNeighboringMonth=${this.showNeighboringMonth} .tileClassName=${this.tileClassName} @day-select=${this.handleDaySelect}></glatam-calendar-month-view>`
           : this.view === 'week'
           ? html`<glatam-calendar-week-view .days=${mapDays(generateWeekDays(this.activeDate, this.localRules, this.slots, this.startOfWeekDay))} .slots=${displaySlots} .locale=${this.locale} .selectedRange=${this.selectedRange} .role=${this.role} @range-select=${this.handleRangeSelect} @slot-click=${this.handleSlotClick}></glatam-calendar-week-view>`
           : html`<glatam-calendar-day-view .day=${mapDays(generateWeekDays(this.activeDate, this.localRules, this.slots, this.startOfWeekDay)).find(d => d.dateString === formatISODate(this.activeDate)) || null} .slots=${displaySlots} .locale=${this.locale} .selectedRange=${this.selectedRange} .role=${this.role} @range-select=${this.handleRangeSelect} @slot-click=${this.handleSlotClick}></glatam-calendar-day-view>`}

package/src/styles/calendar-modal.css.ts

@@ -0,0 +1,158 @@
+import { css } from 'lit';
+
+export const modalStyles = css`
+  dialog {
+    background: transparent;
+    border: none;
+    padding: 0;
+    overflow: visible;
+    outline: none;
+    max-width: 100vw;
+    max-height: 100vh;
+  }
+  dialog::backdrop {
+    background: rgba(0, 0, 0, 0.35);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+  }
+  .modal-content {
+    background: var(--glatam-bg);
+    color: var(--glatam-text);
+    border-radius: 24px;
+    padding: 28px;
+    width: 90vw;
+    max-width: 400px;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
+    border: 1px solid var(--glatam-border);
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    box-sizing: border-box;
+    animation: zoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  }
+  @keyframes zoomIn {
+    from {
+      transform: scale(0.92) translateY(10px);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1) translateY(0);
+      opacity: 1;
+    }
+  }
+  h3 { margin: 0; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
+  .form-group { display: flex; flex-direction: column; gap: 6px; }
+  label { font-size: 0.8rem; color: var(--glatam-text-secondary); font-weight: 600; }
+  input[type="text"] {
+    background: var(--glatam-surface);
+    border: 1px solid var(--glatam-border);
+    border-radius: 10px;
+    padding: 10px 14px;
+    color: var(--glatam-text);
+    font-family: inherit;
+    font-size: 0.9rem;
+    outline: none;
+    transition: border-color var(--glatam-transition-fast);
+  }
+  input[type="text"]:focus {
+    border-color: var(--glatam-primary);
+  }
+  .switch-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px 0;
+  }
+  
+  /* Apple Switch Style */
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 46px;
+    height: 26px;
+  }
+  .switch input { opacity: 0; width: 0; height: 0; }
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background-color: var(--glatam-border);
+    transition: .25s cubic-bezier(0.16, 1, 0.3, 1);
+    border-radius: 26px;
+  }
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 20px;
+    width: 20px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    transition: .25s cubic-bezier(0.16, 1, 0.3, 1);
+    border-radius: 50%;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  }
+  input:checked + .slider {
+    background-color: var(--glatam-primary);
+  }
+  input:checked + .slider:before {
+    transform: translateX(20px);
+  }
+
+  .days-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 6px;
+    margin-top: 4px;
+  }
+  .day-btn {
+    width: 36px;
+    height: 36px;
+    margin: 0 auto;
+    border-radius: 50%;
+    border: 1px solid var(--glatam-border);
+    background: var(--glatam-bg);
+    color: var(--glatam-text);
+    font-size: 0.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color var(--glatam-transition-fast), color var(--glatam-transition-fast), border-color var(--glatam-transition-fast);
+  }
+  .day-btn:hover {
+    background-color: var(--glatam-surface);
+  }
+  .day-btn.selected {
+    background: var(--glatam-primary);
+    color: var(--glatam-text-light);
+    border-color: var(--glatam-primary);
+  }
+  .btn-actions { display: flex; gap: 10px; margin-top: 10px; justify-content: flex-end; }
+  .btn {
+    padding: 10px 18px;
+    border-radius: 20px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    cursor: pointer;
+    border: none;
+    transition: opacity var(--glatam-transition-fast), transform var(--glatam-transition-fast);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .btn:active { transform: scale(0.97); }
+  .btn-cancel { background: transparent; color: var(--glatam-text); border: 1px solid var(--glatam-border); }
+  .btn-cancel:hover { background-color: var(--glatam-surface); }
+  .btn-save { background: var(--glatam-primary); color: var(--glatam-text-light); }
+  .btn-save:hover { opacity: 0.95; }
+  .btn-danger {
+    background: rgba(255, 69, 58, 0.12);
+    color: #ff453a;
+    margin-right: auto;
+  }
+  .btn-danger:hover {
+    background: rgba(255, 69, 58, 0.18);
+  }
+`;

package/src/views/month-view.ts

@@ -62,7 +62,8 @@ export class GlatamCalendarMonthView extends LitElement {
   }
 
   private handleDayClick(day: CalendarDay) {
-    if (this.role === 'buyer' && day.isBlocked) return;
+    const isDisabled = (this.minDate && day.dateString < this.minDate) || (this.maxDate && day.dateString > this.maxDate);
+    if (this.role === 'buyer' && (day.isBlocked || isDisabled)) return;
     this.dispatchEvent(new CustomEvent('day-select', {
       detail: { dateString: day.dateString, isBlocked: day.isBlocked },
       bubbles: true, composed: true

package/dist/components/calendar-modal.d.ts

@@ -1,22 +0,0 @@
-import { LitElement } from 'lit';
-import { BlockingRule } from '@glatam/calendar-core';
-
-export declare class GlatamCalendarModal extends LitElement {
-    static styles: import('lit').CSSResult;
-    open: boolean;
-    dateString: string;
-    startTime: string;
-    endTime: string;
-    isRange: boolean;
-    existingRule: BlockingRule | null;
-    private description;
-    private blockAllDay;
-    private isRecurring;
-    private selectedDays;
-    willUpdate(changedProperties: Map<string, any>): void;
-    private toggleDay;
-    private handleSave;
-    private handleDelete;
-    render(): import('lit-html').TemplateResult<1>;
-}
-//# sourceMappingURL=calendar-modal.d.ts.map

package/dist/components/calendar-modal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"calendar-modal.d.ts","sourceRoot":"","sources":["../../src/components/calendar-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,qBACa,mBAAoB,SAAQ,UAAU;IACjD,MAAM,CAAC,MAAM,0BAqJX;IAE2B,IAAI,UAAS;IACd,UAAU,SAAM;IAChB,SAAS,SAAM;IACf,OAAO,SAAM;IACZ,OAAO,UAAS;IACjB,YAAY,EAAE,YAAY,GAAG,IAAI,CAAQ;IAE5D,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,WAAW,CAAQ;IAC3B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,YAAY,CAAgB;IAE7C,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IAgB9C,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,YAAY;IAUpB,MAAM;CA8EP"}

package/dist/glatam-calendar-mini.d.ts

@@ -1,38 +0,0 @@
-import { LitElement } from 'lit';
-import { BlockingRule, TimeSlot } from '@glatam/calendar-core';
-
-export declare class GlatamCalendarMini extends LitElement {
-    static styles: import('lit').CSSResult[];
-    role: string;
-    locale: string;
-    startOfWeekDay: number;
-    rules: BlockingRule[];
-    selectedRange: {
-        dateString: string;
-        start: string;
-        end: string;
-    } | null;
-    size: string;
-    hostTimezone: string;
-    activeTimezone: string;
-    minDate: string;
-    maxDate: string;
-    showNeighboringMonth: boolean;
-    tileClassName: ((data: {
-        date: Date;
-        dateString: string;
-    }) => string) | null;
-    slots: TimeSlot[];
-    private activeDate;
-    private dropdownOpen;
-    private dropdownSelectedDateString;
-    private handleDropdownDaySelect;
-    private selectDropdownSlot;
-    render(): import('lit-html').TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'glatam-calendar-mini': GlatamCalendarMini;
-    }
-}
-//# sourceMappingURL=glatam-calendar-mini.d.ts.map

package/dist/glatam-calendar-mini.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"glatam-calendar-mini.d.ts","sourceRoot":"","sources":["../src/glatam-calendar-mini.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAGL,YAAY,EACZ,QAAQ,EACT,MAAM,uBAAuB,CAAC;AAK/B,OAAO,uBAAuB,CAAC;AAE/B,qBACa,kBAAmB,SAAQ,UAAU;IAChD,MAAM,CAAC,MAAM,4BAaX;IAE0B,IAAI,SAAW;IACf,MAAM,SAAQ;IACd,cAAc,SAAK;IACpB,KAAK,EAAE,YAAY,EAAE,CAAM;IAC1B,aAAa,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAQ;IACjE,IAAI,SAAY;IAC/B,YAAY,SAAoB;IAA6B,cAAc,SAAW;IACtF,OAAO,SAAM;IAA6B,OAAO,SAAM;IACtD,oBAAoB,UAAQ;IACzB,aAAa,EAAE,CAAC,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC,GAAG,IAAI,CAAQ;IACzF,KAAK,EAAE,QAAQ,EAAE,CAM1C;IAEO,OAAO,CAAC,UAAU,CAAc;IAChC,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,0BAA0B,CAAM;IAEjD,OAAO,CAAC,uBAAuB;IAI/B,OAAO,CAAC,kBAAkB;IAc1B,MAAM;CAuEP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,sBAAsB,EAAE,kBAAkB,CAAC;KAAE;CAChF"}