sp-component 0.0.1

package/dist/components/calendar/sp-calendar-date-picker.template.js

@@ -0,0 +1,79 @@
+import { nothing as a, html as e } from "lit";
+function s() {
+  return e`<svg
+    class="sp-date-picker__icon"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    aria-hidden="true"
+  >
+    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+    <line x1="16" y1="2" x2="16" y2="6"></line>
+    <line x1="8" y1="2" x2="8" y2="6"></line>
+    <line x1="3" y1="10" x2="21" y2="10"></line>
+  </svg>`;
+}
+function d() {
+  const r = [
+    "sp-date-picker__field",
+    this._open ? "sp-date-picker__field--open" : "",
+    this.disabled ? "sp-date-picker__field--disabled" : "",
+    this.error ? "sp-date-picker__field--error" : ""
+  ].filter(Boolean).join(" "), t = [
+    "sp-date-picker__popover",
+    this._open ? "sp-date-picker__popover--open" : ""
+  ].filter(Boolean).join(" ");
+  return e`
+    <div class="sp-date-picker">
+      ${this.label ? e`<label class="sp-date-picker__label">${this.label}</label>` : a}
+
+      <div
+        class=${r}
+        @click=${this._handleFieldClick}
+      >
+        ${s()}
+        <input
+          class="sp-date-picker__input"
+          type="text"
+          .value=${this._displayValue}
+          placeholder=${this.placeholder || "Select date"}
+          ?disabled=${this.disabled}
+          ?readonly=${!0}
+          tabindex="0"
+          aria-label=${this.label || "Date picker"}
+          aria-expanded=${this._open ? "true" : "false"}
+          aria-haspopup="dialog"
+          aria-invalid=${this.error ? "true" : "false"}
+          aria-describedby=${this.error ? "dp-error" : this.hint ? "dp-hint" : a}
+          @keydown=${(i) => {
+    (i.key === "Enter" || i.key === " ") && (i.preventDefault(), this._toggleOpen());
+  }}
+        />
+      </div>
+
+      <div
+        class=${t}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Calendar"
+      >
+        <sp-calendar
+          .value=${this._internalValue}
+          .mode=${this.mode}
+          .min=${this.min}
+          .max=${this.max}
+          .locale=${this.locale}
+          .firstDayOfWeek=${this.firstDayOfWeek}
+          ?disabled=${this.disabled}
+          @sp-change=${this._handleCalendarChange}
+        ></sp-calendar>
+      </div>
+
+      ${this.error ? e`<span id="dp-error" class="sp-date-picker__error">${this.error}</span>` : this.hint ? e`<span id="dp-hint" class="sp-date-picker__hint">${this.hint}</span>` : a}
+    </div>
+  `;
+}
+export {
+  d as datePickerTemplate
+};

package/dist/components/calendar/sp-calendar.css.js

@@ -0,0 +1,4 @@
+const a = ':host{display:inline-block;--sp-cal-bg: var(--sp-bg, #ffffff);--sp-cal-border: var(--sp-border-subtle, #e2e8f0);--sp-cal-radius: 12px;--sp-cal-header-color: var(--sp-text, #0f172a);--sp-cal-weekday-color: var(--sp-text-placeholder, #94a3b8);--sp-cal-day-color: var(--sp-text-secondary, #1e293b);--sp-cal-day-outside-color: var(--sp-border-strong, #cbd5e1);--sp-cal-day-hover-bg: var(--sp-bg-subtle, #f1f5f9);--sp-cal-today-color: #6366f1;--sp-cal-selected-bg: #6366f1;--sp-cal-selected-color: #ffffff;--sp-cal-disabled-color: #e2e8f0;--sp-cal-shadow: 0 4px 24px rgba(0, 0, 0, .08);--sp-cal-range-bg: #e0e7ff;--sp-cal-range-preview-bg: #f0f3ff;--sp-cal-event-dot-color: #FAAD14;--sp-cal-preset-border: #e2e8f0;--sp-cal-preset-hover-bg: #f1f5f9;font-family:inherit}.sp-calendar{background:var(--sp-cal-bg);border:1px solid var(--sp-cal-border);border-radius:var(--sp-cal-radius);box-shadow:var(--sp-cal-shadow);display:inline-block;-webkit-user-select:none;user-select:none}.sp-calendar--with-presets{display:flex}.sp-calendar-body{padding:20px;min-width:280px}.sp-calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:4px}.sp-calendar-nav-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--sp-cal-header-color);cursor:pointer;flex-shrink:0;transition:background .15s,border-color .15s}.sp-calendar-nav-btn:hover:not(:disabled){background:var(--sp-cal-day-hover-bg);border-color:var(--sp-cal-border)}.sp-calendar-nav-btn:focus-visible{outline:2px solid var(--sp-cal-today-color);outline-offset:2px}.sp-calendar-nav-btn svg{width:16px;height:16px}.sp-calendar-nav-btn:disabled{opacity:.3;cursor:not-allowed}.sp-calendar-title{flex:1;padding:4px 8px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--sp-cal-header-color);font-size:.9rem;font-weight:600;cursor:pointer;text-align:center;transition:background .15s,border-color .15s;white-space:nowrap}.sp-calendar-title:hover:not(:disabled){background:var(--sp-cal-day-hover-bg);border-color:var(--sp-cal-border)}.sp-calendar-title:focus-visible{outline:2px solid var(--sp-cal-today-color);outline-offset:2px}.sp-calendar-title--static{display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:600;color:var(--sp-cal-header-color);cursor:default}.sp-calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:6px}.sp-calendar-weekday{height:32px;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:600;color:var(--sp-cal-weekday-color);text-transform:uppercase;letter-spacing:.04em}.sp-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.sp-calendar-day{position:relative;display:flex;align-items:center;justify-content:center;height:36px;width:100%;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--sp-cal-day-color);font-size:.85rem;cursor:pointer;transition:background .15s,color .15s,border-color .15s,box-shadow .15s}.sp-calendar-day:hover:not(:disabled):not(.sp-calendar-day--selected){background:var(--sp-cal-day-hover-bg);border-color:var(--sp-cal-border);box-shadow:0 1px 4px #00000014}.sp-calendar-day:focus-visible{outline:2px solid var(--sp-cal-today-color);outline-offset:2px;z-index:1}.sp-calendar-day--outside{color:var(--sp-cal-day-outside-color)}.sp-calendar-day--today:not(.sp-calendar-day--selected){color:var(--sp-cal-today-color);font-weight:700;box-shadow:inset 0 0 0 1.5px var(--sp-cal-today-color)}.sp-calendar-day--selected{background:var(--sp-cal-selected-bg);color:var(--sp-cal-selected-color);border-color:var(--sp-cal-selected-bg);font-weight:600}.sp-calendar-day--selected:hover{background:#4f46e5;border-color:#4f46e5}.sp-calendar-day--disabled,.sp-calendar-day:disabled{color:var(--sp-cal-disabled-color);cursor:not-allowed;pointer-events:none}.sp-calendar-month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px 0}.sp-calendar-month-btn{padding:10px 4px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--sp-cal-day-color);font-size:.82rem;cursor:pointer;text-align:center;text-transform:capitalize;transition:background .15s,border-color .15s}.sp-calendar-month-btn:hover:not(:disabled){background:var(--sp-cal-day-hover-bg);border-color:var(--sp-cal-border)}.sp-calendar-month-btn:focus-visible{outline:2px solid var(--sp-cal-today-color);outline-offset:2px}.sp-calendar-month-btn--active{background:var(--sp-cal-selected-bg);color:var(--sp-cal-selected-color);border-color:var(--sp-cal-selected-bg);font-weight:600}.sp-calendar-month-btn:disabled{opacity:.3;cursor:not-allowed}.sp-calendar-year-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px 0}.sp-calendar-year-btn{padding:10px 4px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--sp-cal-day-color);font-size:.85rem;cursor:pointer;text-align:center;transition:background .15s,border-color .15s}.sp-calendar-year-btn:hover:not(:disabled){background:var(--sp-cal-day-hover-bg);border-color:var(--sp-cal-border)}.sp-calendar-year-btn:focus-visible{outline:2px solid var(--sp-cal-today-color);outline-offset:2px}.sp-calendar-year-btn--active{background:var(--sp-cal-selected-bg);color:var(--sp-cal-selected-color);border-color:var(--sp-cal-selected-bg);font-weight:600}.sp-calendar-year-btn:disabled{opacity:.3;cursor:not-allowed}.sp-calendar-day--in-range{background:var(--sp-cal-range-bg);border-radius:0;color:var(--sp-cal-day-color)}.sp-calendar-day--range-start{border-radius:8px 0 0 8px}.sp-calendar-day--range-end{border-radius:0 8px 8px 0}.sp-calendar-day--range-start.sp-calendar-day--range-end{border-radius:8px}.sp-calendar-day--in-range-preview{background:var(--sp-cal-range-preview-bg);border-radius:0;color:var(--sp-cal-day-color)}.sp-calendar-month-panel:not(:last-child) .sp-calendar-day--range-end{border-radius:8px 0 0 8px}.sp-calendar-month-panel:not(:first-child) .sp-calendar-day--range-start{border-radius:0 8px 8px 0}.sp-calendar-day--has-event{padding-bottom:6px}.sp-calendar-day--has-event:after{content:"";position:absolute;bottom:3px;left:50%;transform:translate(-50%);width:4px;height:4px;border-radius:50%;background:var(--sp-cal-event-dot-color, #FAAD14)}@keyframes sp-slide-in-from-right{0%{transform:translate(24px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes sp-slide-in-from-left{0%{transform:translate(-24px);opacity:0}to{transform:translate(0);opacity:1}}.sp-calendar-grid--slide-left{animation:sp-slide-in-from-right .3s ease forwards}.sp-calendar-grid--slide-right{animation:sp-slide-in-from-left .3s ease forwards}.sp-calendar-months{display:flex;gap:0}.sp-calendar-month-panel{flex:1;min-width:260px}.sp-calendar-month-panel:not(:last-child){padding-right:20px;border-right:1px solid var(--sp-cal-border);margin-right:20px}.sp-calendar-nav-placeholder{display:inline-block;width:32px;height:32px;flex-shrink:0}.sp-calendar-presets{display:flex;flex-direction:column;gap:4px;padding:20px 12px;border-right:1px solid var(--sp-cal-preset-border);min-width:130px}.sp-calendar-preset-btn{padding:8px 12px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--sp-cal-day-color);font-size:.82rem;cursor:pointer;text-align:left;white-space:nowrap;transition:background .15s,border-color .15s}.sp-calendar-preset-btn:hover:not(:disabled){background:var(--sp-cal-preset-hover-bg);border-color:var(--sp-cal-border)}.sp-calendar-preset-btn:focus-visible{outline:2px solid var(--sp-cal-today-color);outline-offset:2px}:host([disabled]) .sp-calendar{opacity:.5;pointer-events:none}@media(prefers-reduced-motion:reduce){.sp-calendar-day,.sp-calendar-nav-btn,.sp-calendar-title,.sp-calendar-month-btn,.sp-calendar-year-btn{transition:none;transform:none!important}.sp-calendar-grid--slide-left,.sp-calendar-grid--slide-right{animation:none}}';
+export {
+  a as default
+};

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

@@ -0,0 +1,118 @@
+import { LitElement } from 'lit';
+import { SpCalendarMode, SpCalendarSlideDir, SpCalendarView } from './sp-calendar.types.js';
+/**
+ * Calendar component for selecting a date.
+ *
+ * @element sp-calendar
+ *
+ * @prop {string}  value               - Selected date in ISO format (YYYY-MM-DD)
+ * @prop {string}  value-start         - Range start date (range mode)
+ * @prop {string}  value-end           - Range end date (range mode)
+ * @prop {string}  values              - Comma-separated selected dates (multiple mode)
+ * @prop {string}  min                 - Minimum selectable date (YYYY-MM-DD)
+ * @prop {string}  max                 - Maximum selectable date (YYYY-MM-DD)
+ * @prop {string}  locale              - BCP 47 locale for day/month names (default: browser locale)
+ * @prop {number}  firstDayOfWeek      - First day of week: 0=Sunday, 1=Monday (default: 1)
+ * @prop {boolean} disabled            - Disables all interaction
+ * @prop {boolean} readonly            - Prevents date selection but allows navigation
+ * @prop {string}  mode                - Selection mode: "single" | "range" | "multiple"
+ * @prop {string}  events              - Comma-separated ISO dates to mark with event dot
+ * @prop {string}  disabled-dates      - Comma-separated ISO dates to disable individually
+ * @prop {string}  disabled-days-of-week - Comma-separated day numbers (0=Sun...6=Sat) to disable
+ * @prop {number}  months              - Number of months to display side by side (1-3)
+ * @prop {boolean} show-presets        - Show preset quick-select buttons
+ *
+ * @fires {CustomEvent<{ value: string }>} sp-change - Emitted when a date is selected (single mode)
+ * @fires {CustomEvent<{ value: string, valueStart: string, valueEnd: string }>} sp-change - Range mode
+ * @fires {CustomEvent<{ values: string[] }>} sp-change - Multiple mode
+ *
+ * @csspart calendar   - The root calendar element
+ * @csspart header     - Month/year navigation header
+ * @csspart day        - Individual day cell
+ */
+export declare class SpCalendarComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    value: string;
+    valueStart: string;
+    valueEnd: string;
+    values: string;
+    min: string;
+    max: string;
+    locale: string;
+    firstDayOfWeek: number;
+    disabled: boolean;
+    readonly: boolean;
+    mode: SpCalendarMode;
+    events: string;
+    disabledDates: string;
+    disabledDaysOfWeek: string;
+    months: number;
+    showPresets: boolean;
+    /** Currently displayed month/year (does not affect value) */
+    _viewDate: Date;
+    /** Active view: days | months | years */
+    _view: SpCalendarView;
+    /** Focused day index for keyboard navigation */
+    _focusedDate: Date | null;
+    /** Range mode: start of selected range */
+    _rangeStart: Date | null;
+    /** Range mode: end of selected range */
+    _rangeEnd: Date | null;
+    /** Hover preview date for range mode */
+    _hoverDate: Date | null;
+    /** Multiple mode: set of selected dates as ISO strings */
+    _multipleValues: Set<string>;
+    /** Slide animation direction */
+    _slideDir: SpCalendarSlideDir;
+    private _navigating;
+    render(): import('lit-html').TemplateResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    _syncPropsToState(): void;
+    _getLocale(): string;
+    _parseDate(iso: string): Date | null;
+    _toISO(date: Date): string;
+    _isSameDay(a: Date, b: Date): boolean;
+    _isOutOfRange(date: Date): boolean;
+    _isDisabledDate(date: Date): boolean;
+    _isEventDate(date: Date): boolean;
+    _getEventDatesSet(): Set<string>;
+    /** Returns ordered weekday headers based on firstDayOfWeek */
+    _getWeekdayHeaders(): string[];
+    /** Returns the days to render in the grid (including padding from prev/next month) */
+    _getDaysInGrid(viewDate?: Date): Array<{
+        date: Date;
+        isCurrentMonth: boolean;
+    }>;
+    _getMonthName(monthIndex: number): string;
+    _getYearRange(): number[];
+    /** Returns the view date for a given month offset (for multi-month view) */
+    _getViewDateForOffset(offset: number): Date;
+    /** Get CSS classes for a day cell */
+    _getDayClasses(date: Date, isCurrentMonth: boolean): string;
+    _prevMonth(): void;
+    _nextMonth(): void;
+    _resetSlideDir(): void;
+    _prevYear(): void;
+    _nextYear(): void;
+    _prevYearRange(): void;
+    _nextYearRange(): void;
+    _selectMonth(monthIndex: number): void;
+    _selectYear(year: number): void;
+    _selectDate(date: Date): void;
+    _setHoverDate(date: Date | null): void;
+    _selectToday(): void;
+    _selectYesterday(): void;
+    _selectThisWeek(): void;
+    _selectLast7Days(): void;
+    _selectThisMonth(): void;
+    _selectLast30Days(): void;
+    private readonly _handleKeydown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-calendar": SpCalendarComponent;
+    }
+}
+//# sourceMappingURL=sp-calendar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-calendar.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/sp-calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAEjG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACjD,OAAgB,MAAM,0BAAqB;IAG3C,KAAK,SAAM;IAGX,UAAU,SAAM;IAGhB,QAAQ,SAAM;IAGd,MAAM,SAAM;IAGZ,GAAG,SAAM;IAGT,GAAG,SAAM;IAGT,MAAM,SAAM;IAGZ,cAAc,SAAK;IAGnB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,IAAI,EAAE,cAAc,CAAY;IAGhC,MAAM,SAAM;IAGZ,aAAa,SAAM;IAGnB,kBAAkB,SAAM;IAGxB,MAAM,SAAK;IAGX,WAAW,UAAS;IAEpB,6DAA6D;IAE7D,SAAS,EAAE,IAAI,CAAc;IAE7B,yCAAyC;IAEzC,KAAK,EAAE,cAAc,CAAU;IAE/B,gDAAgD;IAEhD,YAAY,EAAE,IAAI,GAAG,IAAI,CAAQ;IAEjC,0CAA0C;IAE1C,WAAW,EAAE,IAAI,GAAG,IAAI,CAAQ;IAEhC,wCAAwC;IAExC,SAAS,EAAE,IAAI,GAAG,IAAI,CAAQ;IAE9B,wCAAwC;IAExC,UAAU,EAAE,IAAI,GAAG,IAAI,CAAQ;IAE/B,0DAA0D;IAE1D,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAa;IAEzC,gCAAgC;IAEhC,SAAS,EAAE,kBAAkB,CAAM;IAEnC,OAAO,CAAC,WAAW,CAAS;IAEnB,MAAM;IAIN,iBAAiB,IAAI,IAAI;IAezB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAW/D,iBAAiB,IAAI,IAAI;IAmBzB,UAAU,IAAI,MAAM;IAIpB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAQpC,MAAM,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM;IAO1B,UAAU,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,GAAG,OAAO;IAQrC,aAAa,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO;IAOlC,eAAe,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO;IAmBpC,YAAY,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO;IAUjC,iBAAiB,IAAI,GAAG,CAAC,MAAM,CAAC;IAUhC,8DAA8D;IAC9D,kBAAkB,IAAI,MAAM,EAAE;IAQ9B,sFAAsF;IACtF,cAAc,CAAC,QAAQ,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,cAAc,EAAE,OAAO,CAAA;KAAE,CAAC;IA8B/E,aAAa,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM;IAKzC,aAAa,IAAI,MAAM,EAAE;IAMzB,4EAA4E;IAC5E,qBAAqB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAI3C,qCAAqC;IACrC,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,OAAO,GAAG,MAAM;IAyD3D,UAAU,IAAI,IAAI;IAQlB,UAAU,IAAI,IAAI;IAQlB,cAAc,IAAI,IAAI;IAStB,SAAS,IAAI,IAAI;IAIjB,SAAS,IAAI,IAAI;IAIjB,cAAc,IAAI,IAAI;IAItB,cAAc,IAAI,IAAI;IAItB,YAAY,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAKtC,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAK/B,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;IA2E7B,aAAa,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI;IAQtC,YAAY,IAAI,IAAI;IAMpB,gBAAgB,IAAI,IAAI;IAOxB,eAAe,IAAI,IAAI;IA+BvB,gBAAgB,IAAI,IAAI;IA0BxB,gBAAgB,IAAI,IAAI;IA0BxB,iBAAiB,IAAI,IAAI;IA4BzB,OAAO,CAAC,QAAQ,CAAC,cAAc,CA+D7B;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,mBAAmB,CAAC;KACpC;CACF"}

package/dist/components/calendar/sp-calendar.js

@@ -0,0 +1,409 @@
+import { unsafeCSS as p, LitElement as g } from "lit";
+import { property as o, state as _, customElement as c } from "lit/decorators.js";
+import f from "./sp-calendar.css.js";
+import { calendarTemplate as w } from "./sp-calendar.template.js";
+var y = Object.defineProperty, m = Object.getOwnPropertyDescriptor, r = (t, e, s, a) => {
+  for (var l = a > 1 ? void 0 : a ? m(e, s) : e, n = t.length - 1, u; n >= 0; n--)
+    (u = t[n]) && (l = (a ? u(e, s, l) : u(l)) || l);
+  return a && l && y(e, s, l), l;
+};
+let i = class extends g {
+  constructor() {
+    super(...arguments), this.value = "", this.valueStart = "", this.valueEnd = "", this.values = "", this.min = "", this.max = "", this.locale = "", this.firstDayOfWeek = 1, this.disabled = !1, this.readonly = !1, this.mode = "single", this.events = "", this.disabledDates = "", this.disabledDaysOfWeek = "", this.months = 1, this.showPresets = !1, this._viewDate = /* @__PURE__ */ new Date(), this._view = "days", this._focusedDate = null, this._rangeStart = null, this._rangeEnd = null, this._hoverDate = null, this._multipleValues = /* @__PURE__ */ new Set(), this._slideDir = "", this._navigating = !1, this._handleKeydown = (t) => {
+      if (this.disabled || this._view !== "days") return;
+      const e = new Date(
+        this._viewDate.getFullYear(),
+        this._viewDate.getMonth(),
+        Math.min(15, new Date(this._viewDate.getFullYear(), this._viewDate.getMonth() + 1, 0).getDate())
+      ), s = this._focusedDate ?? this._parseDate(this.value) ?? e, a = (l) => {
+        const n = new Date(s);
+        n.setDate(n.getDate() + l), this._focusedDate = n, (n.getMonth() !== this._viewDate.getMonth() || n.getFullYear() !== this._viewDate.getFullYear()) && (this._viewDate = new Date(n.getFullYear(), n.getMonth(), 1));
+      };
+      switch (t.key) {
+        case "ArrowLeft":
+          t.preventDefault(), a(-1);
+          break;
+        case "ArrowRight":
+          t.preventDefault(), a(1);
+          break;
+        case "ArrowUp":
+          t.preventDefault(), a(-7);
+          break;
+        case "ArrowDown":
+          t.preventDefault(), a(7);
+          break;
+        case "Home":
+          t.preventDefault(), a(-((s.getDay() - this.firstDayOfWeek + 7) % 7));
+          break;
+        case "End":
+          t.preventDefault(), a((6 - s.getDay() + this.firstDayOfWeek + 7) % 7);
+          break;
+        case "PageUp":
+          t.preventDefault(), this._prevMonth();
+          break;
+        case "PageDown":
+          t.preventDefault(), this._nextMonth();
+          break;
+        case "Enter":
+        case " ":
+          t.preventDefault(), this._focusedDate && this._selectDate(this._focusedDate);
+          break;
+      }
+    };
+  }
+  render() {
+    return w.call(this);
+  }
+  connectedCallback() {
+    if (super.connectedCallback(), this.addEventListener("keydown", this._handleKeydown), this.value) {
+      const t = this._parseDate(this.value);
+      t && (this._viewDate = t);
+    } else if (this.valueStart) {
+      const t = this._parseDate(this.valueStart);
+      t && (this._viewDate = t);
+    }
+    this._syncPropsToState();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeydown);
+  }
+  updated(t) {
+    super.updated(t), (t.has("valueStart") || t.has("valueEnd") || t.has("values")) && this._syncPropsToState();
+  }
+  _syncPropsToState() {
+    if (this.mode === "range") {
+      const t = this._parseDate(this.valueStart), e = this._parseDate(this.valueEnd);
+      this._rangeStart = t, this._rangeEnd = e;
+    } else if (this.mode === "multiple") {
+      const t = this.values ? this.values.split(",").map((e) => e.trim()).filter(Boolean) : [];
+      this._multipleValues = new Set(t);
+    }
+  }
+  // ---- Public helpers used by template ----
+  _getLocale() {
+    return this.locale || navigator.language || "en";
+  }
+  _parseDate(t) {
+    if (!t) return null;
+    const [e, s, a] = t.split("-").map(Number);
+    if (!e || !s || !a) return null;
+    const l = new Date(e, s - 1, a);
+    return isNaN(l.getTime()) ? null : l;
+  }
+  _toISO(t) {
+    const e = t.getFullYear(), s = String(t.getMonth() + 1).padStart(2, "0"), a = String(t.getDate()).padStart(2, "0");
+    return `${e}-${s}-${a}`;
+  }
+  _isSameDay(t, e) {
+    return t.getFullYear() === e.getFullYear() && t.getMonth() === e.getMonth() && t.getDate() === e.getDate();
+  }
+  _isOutOfRange(t) {
+    const e = this._toISO(t);
+    return !!(this.min && e < this.min || this.max && e > this.max);
+  }
+  _isDisabledDate(t) {
+    if (this.disabledDates) {
+      const e = this._toISO(t);
+      if (this.disabledDates.split(",").map((a) => a.trim()).filter(Boolean).includes(e)) return !0;
+    }
+    return !!(this.disabledDaysOfWeek && this.disabledDaysOfWeek.split(",").map((s) => parseInt(s.trim(), 10)).filter((s) => !isNaN(s)).includes(t.getDay()));
+  }
+  _isEventDate(t) {
+    if (!this.events) return !1;
+    const e = this._toISO(t);
+    return this.events.split(",").map((a) => a.trim()).filter(Boolean).includes(e);
+  }
+  _getEventDatesSet() {
+    return this.events ? new Set(
+      this.events.split(",").map((t) => t.trim()).filter(Boolean)
+    ) : /* @__PURE__ */ new Set();
+  }
+  /** Returns ordered weekday headers based on firstDayOfWeek */
+  _getWeekdayHeaders() {
+    const t = new Intl.DateTimeFormat(this._getLocale(), { weekday: "short" });
+    return Array.from({ length: 7 }, (e, s) => {
+      const a = new Date(2017, 0, 1 + (s + this.firstDayOfWeek) % 7);
+      return t.format(a);
+    });
+  }
+  /** Returns the days to render in the grid (including padding from prev/next month) */
+  _getDaysInGrid(t) {
+    const e = t ?? this._viewDate, s = e.getFullYear(), a = e.getMonth(), l = new Date(s, a, 1), n = new Date(s, a + 1, 0);
+    let u = l.getDay() - this.firstDayOfWeek;
+    u < 0 && (u += 7);
+    const v = [];
+    for (let h = u - 1; h >= 0; h--)
+      v.push({ date: new Date(s, a, -h), isCurrentMonth: !1 });
+    for (let h = 1; h <= n.getDate(); h++)
+      v.push({ date: new Date(s, a, h), isCurrentMonth: !0 });
+    const d = 42 - v.length;
+    for (let h = 1; h <= d; h++)
+      v.push({ date: new Date(s, a + 1, h), isCurrentMonth: !1 });
+    return v;
+  }
+  _getMonthName(t) {
+    return new Intl.DateTimeFormat(this._getLocale(), { month: "long" }).format(new Date(2e3, t, 1));
+  }
+  _getYearRange() {
+    const t = this._viewDate.getFullYear(), e = Math.floor(t / 12) * 12;
+    return Array.from({ length: 12 }, (s, a) => e + a);
+  }
+  /** Returns the view date for a given month offset (for multi-month view) */
+  _getViewDateForOffset(t) {
+    return new Date(this._viewDate.getFullYear(), this._viewDate.getMonth() + t, 1);
+  }
+  /** Get CSS classes for a day cell */
+  _getDayClasses(t, e) {
+    const s = ["sp-calendar-day"];
+    e || s.push("sp-calendar-day--outside");
+    const a = /* @__PURE__ */ new Date();
+    if (this._isSameDay(t, a) && s.push("sp-calendar-day--today"), (this.disabled || this._isOutOfRange(t) || this._isDisabledDate(t)) && s.push("sp-calendar-day--disabled"), this._isEventDate(t) && s.push("sp-calendar-day--has-event"), this.mode === "single") {
+      const n = this._parseDate(this.value);
+      n && this._isSameDay(t, n) && s.push("sp-calendar-day--selected");
+    } else if (this.mode === "multiple") {
+      const n = this._toISO(t);
+      this._multipleValues.has(n) && s.push("sp-calendar-day--selected");
+    } else if (this.mode === "range") {
+      const n = this._rangeStart, u = this._rangeEnd, v = this._hoverDate;
+      if (n && this._isSameDay(t, n) && (s.push("sp-calendar-day--range-start"), s.push("sp-calendar-day--selected")), u && this._isSameDay(t, u) && (s.push("sp-calendar-day--range-end"), s.push("sp-calendar-day--selected")), n && u) {
+        const d = t.getTime();
+        d > n.getTime() && d < u.getTime() && s.push("sp-calendar-day--in-range");
+      } else if (n && !u && v) {
+        const d = t.getTime(), h = n.getTime(), D = v.getTime();
+        D > h ? d > h && d < D && s.push("sp-calendar-day--in-range-preview") : D < h && d < h && d > D && s.push("sp-calendar-day--in-range-preview");
+      }
+    }
+    return s.join(" ");
+  }
+  // ---- Navigation ----
+  _prevMonth() {
+    this._navigating || (this._navigating = !0, this._slideDir = "right", this._viewDate = new Date(this._viewDate.getFullYear(), this._viewDate.getMonth() - 1, 1), this._resetSlideDir());
+  }
+  _nextMonth() {
+    this._navigating || (this._navigating = !0, this._slideDir = "left", this._viewDate = new Date(this._viewDate.getFullYear(), this._viewDate.getMonth() + 1, 1), this._resetSlideDir());
+  }
+  _resetSlideDir() {
+    requestAnimationFrame(() => {
+      setTimeout(() => {
+        this._slideDir = "", this._navigating = !1;
+      }, 300);
+    });
+  }
+  _prevYear() {
+    this._viewDate = new Date(this._viewDate.getFullYear() - 1, this._viewDate.getMonth(), 1);
+  }
+  _nextYear() {
+    this._viewDate = new Date(this._viewDate.getFullYear() + 1, this._viewDate.getMonth(), 1);
+  }
+  _prevYearRange() {
+    this._viewDate = new Date(this._viewDate.getFullYear() - 12, this._viewDate.getMonth(), 1);
+  }
+  _nextYearRange() {
+    this._viewDate = new Date(this._viewDate.getFullYear() + 12, this._viewDate.getMonth(), 1);
+  }
+  _selectMonth(t) {
+    this._viewDate = new Date(this._viewDate.getFullYear(), t, 1), this._view = "days";
+  }
+  _selectYear(t) {
+    this._viewDate = new Date(t, this._viewDate.getMonth(), 1), this._view = "months";
+  }
+  _selectDate(t) {
+    if (!(this.disabled || this.readonly || this._isOutOfRange(t) || this._isDisabledDate(t))) {
+      if (this.mode === "single")
+        this.value = this._toISO(t), this._focusedDate = t, this.dispatchEvent(
+          new CustomEvent("sp-change", {
+            detail: { value: this.value },
+            bubbles: !0,
+            composed: !0
+          })
+        );
+      else if (this.mode === "range") {
+        const e = this._toISO(t);
+        if (!this._rangeStart || this._rangeEnd)
+          this._rangeStart = t, this._rangeEnd = null, this._hoverDate = null, this.valueStart = e, this.valueEnd = "";
+        else {
+          if (this._isSameDay(t, this._rangeStart)) {
+            this._rangeStart = null, this._rangeEnd = null, this.valueStart = "", this.valueEnd = "";
+            return;
+          }
+          let s = this._rangeStart, a = t;
+          a.getTime() < s.getTime() && ([s, a] = [a, s]), this._rangeStart = s, this._rangeEnd = a, this._hoverDate = null, this.valueStart = this._toISO(s), this.valueEnd = this._toISO(a), this.value = this.valueStart, this.dispatchEvent(
+            new CustomEvent("sp-change", {
+              detail: {
+                value: this.valueStart,
+                valueStart: this.valueStart,
+                valueEnd: this.valueEnd
+              },
+              bubbles: !0,
+              composed: !0
+            })
+          );
+        }
+      } else if (this.mode === "multiple") {
+        const e = this._toISO(t);
+        this._multipleValues.has(e) ? this._multipleValues = new Set([...this._multipleValues].filter((a) => a !== e)) : this._multipleValues = /* @__PURE__ */ new Set([...this._multipleValues, e]);
+        const s = Array.from(this._multipleValues).sort();
+        this.values = s.join(","), this.dispatchEvent(
+          new CustomEvent("sp-change", {
+            detail: { values: s },
+            bubbles: !0,
+            composed: !0
+          })
+        );
+      }
+    }
+  }
+  _setHoverDate(t) {
+    this.mode === "range" && this._rangeStart && !this._rangeEnd && (this._hoverDate = t);
+  }
+  // ---- Presets ----
+  _selectToday() {
+    const t = /* @__PURE__ */ new Date();
+    this._viewDate = new Date(t.getFullYear(), t.getMonth(), 1), this._selectDate(t);
+  }
+  _selectYesterday() {
+    const t = /* @__PURE__ */ new Date();
+    t.setDate(t.getDate() - 1), this._viewDate = new Date(t.getFullYear(), t.getMonth(), 1), this._selectDate(t);
+  }
+  _selectThisWeek() {
+    if (this.mode !== "range") return;
+    const t = /* @__PURE__ */ new Date(), s = (t.getDay() + 6) % 7, a = new Date(t);
+    a.setDate(t.getDate() - s);
+    const l = new Date(a);
+    l.setDate(a.getDate() + 6), this._rangeStart = a, this._rangeEnd = l, this._hoverDate = null, this.valueStart = this._toISO(a), this.valueEnd = this._toISO(l), this.value = this.valueStart, this._viewDate = new Date(a.getFullYear(), a.getMonth(), 1), this.dispatchEvent(
+      new CustomEvent("sp-change", {
+        detail: {
+          value: this.valueStart,
+          valueStart: this.valueStart,
+          valueEnd: this.valueEnd
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _selectLast7Days() {
+    if (this.mode !== "range") return;
+    const t = /* @__PURE__ */ new Date(), e = /* @__PURE__ */ new Date();
+    e.setDate(t.getDate() - 6), this._rangeStart = e, this._rangeEnd = t, this._hoverDate = null, this.valueStart = this._toISO(e), this.valueEnd = this._toISO(t), this.value = this.valueStart, this._viewDate = new Date(e.getFullYear(), e.getMonth(), 1), this.dispatchEvent(
+      new CustomEvent("sp-change", {
+        detail: {
+          value: this.valueStart,
+          valueStart: this.valueStart,
+          valueEnd: this.valueEnd
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _selectThisMonth() {
+    if (this.mode !== "range") return;
+    const t = /* @__PURE__ */ new Date(), e = new Date(t.getFullYear(), t.getMonth(), 1), s = new Date(t.getFullYear(), t.getMonth() + 1, 0);
+    this._rangeStart = e, this._rangeEnd = s, this._hoverDate = null, this.valueStart = this._toISO(e), this.valueEnd = this._toISO(s), this.value = this.valueStart, this._viewDate = new Date(e.getFullYear(), e.getMonth(), 1), this.dispatchEvent(
+      new CustomEvent("sp-change", {
+        detail: {
+          value: this.valueStart,
+          valueStart: this.valueStart,
+          valueEnd: this.valueEnd
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _selectLast30Days() {
+    if (this.mode !== "range") return;
+    const t = /* @__PURE__ */ new Date(), e = /* @__PURE__ */ new Date();
+    e.setDate(t.getDate() - 29), this._rangeStart = e, this._rangeEnd = t, this._hoverDate = null, this.valueStart = this._toISO(e), this.valueEnd = this._toISO(t), this.value = this.valueStart, this._viewDate = new Date(e.getFullYear(), e.getMonth(), 1), this.dispatchEvent(
+      new CustomEvent("sp-change", {
+        detail: {
+          value: this.valueStart,
+          valueStart: this.valueStart,
+          valueEnd: this.valueEnd
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+};
+i.styles = p(f);
+r([
+  o({ type: String, reflect: !0 })
+], i.prototype, "value", 2);
+r([
+  o({ type: String, attribute: "value-start" })
+], i.prototype, "valueStart", 2);
+r([
+  o({ type: String, attribute: "value-end" })
+], i.prototype, "valueEnd", 2);
+r([
+  o({ type: String })
+], i.prototype, "values", 2);
+r([
+  o({ type: String })
+], i.prototype, "min", 2);
+r([
+  o({ type: String })
+], i.prototype, "max", 2);
+r([
+  o({ type: String })
+], i.prototype, "locale", 2);
+r([
+  o({ type: Number, attribute: "first-day-of-week" })
+], i.prototype, "firstDayOfWeek", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], i.prototype, "readonly", 2);
+r([
+  o({ type: String })
+], i.prototype, "mode", 2);
+r([
+  o({ type: String })
+], i.prototype, "events", 2);
+r([
+  o({ type: String, attribute: "disabled-dates" })
+], i.prototype, "disabledDates", 2);
+r([
+  o({ type: String, attribute: "disabled-days-of-week" })
+], i.prototype, "disabledDaysOfWeek", 2);
+r([
+  o({ type: Number })
+], i.prototype, "months", 2);
+r([
+  o({ type: Boolean, attribute: "show-presets" })
+], i.prototype, "showPresets", 2);
+r([
+  _()
+], i.prototype, "_viewDate", 2);
+r([
+  _()
+], i.prototype, "_view", 2);
+r([
+  _()
+], i.prototype, "_focusedDate", 2);
+r([
+  _()
+], i.prototype, "_rangeStart", 2);
+r([
+  _()
+], i.prototype, "_rangeEnd", 2);
+r([
+  _()
+], i.prototype, "_hoverDate", 2);
+r([
+  _()
+], i.prototype, "_multipleValues", 2);
+r([
+  _()
+], i.prototype, "_slideDir", 2);
+i = r([
+  c("sp-calendar")
+], i);
+export {
+  i as SpCalendarComponent
+};

package/dist/components/calendar/sp-calendar.template.d.ts

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import { SpCalendarComponent } from './sp-calendar.js';
+export declare function calendarTemplate(this: SpCalendarComponent): TemplateResult;
+//# sourceMappingURL=sp-calendar.template.d.ts.map

package/dist/components/calendar/sp-calendar.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-calendar.template.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/sp-calendar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAqO5D,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,mBAAmB,GAAG,cAAc,CAiC1E"}