@phcdevworks/spectre-components 1.19.0 → 1.21.0

package/dist/datepicker.js

@@ -0,0 +1,577 @@
+import { svg, LitElement, html, nothing } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { getDayClasses, getButtonClasses, getDatepickerClasses, getDatepickerHeaderClasses, getDatepickerGridClasses, getDatepickerWeekdayClasses } from '@phcdevworks/spectre-ui';
+
+// src/components/datepicker/sp-datepicker.ts
+var SpectreBaseElement = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._ariaLabel = null;
+    this._ariaLabelledBy = null;
+    this._ariaDescribedBy = null;
+    this._autocapitalize = "";
+    this._autofocus = false;
+    this._spellcheck = null;
+    this._title = "";
+    this._id = "";
+  }
+  get ariaLabel() {
+    return this._ariaLabel;
+  }
+  set ariaLabel(value) {
+    if (this._ariaLabel === value) {
+      return;
+    }
+    this._ariaLabel = value;
+    this._removeHostAttribute("aria-label");
+    this.requestUpdate();
+  }
+  get ariaLabelledBy() {
+    return this._ariaLabelledBy;
+  }
+  set ariaLabelledBy(value) {
+    if (this._ariaLabelledBy === value) {
+      return;
+    }
+    this._ariaLabelledBy = value;
+    this._removeHostAttribute("aria-labelledby");
+    this.requestUpdate();
+  }
+  get ariaDescribedBy() {
+    return this._ariaDescribedBy;
+  }
+  set ariaDescribedBy(value) {
+    if (this._ariaDescribedBy === value) {
+      return;
+    }
+    this._ariaDescribedBy = value;
+    this._removeHostAttribute("aria-describedby");
+    this.requestUpdate();
+  }
+  get autocapitalize() {
+    return this._autocapitalize;
+  }
+  set autocapitalize(value) {
+    const normalizedValue = value ?? "";
+    if (this._autocapitalize === normalizedValue) {
+      return;
+    }
+    this._autocapitalize = normalizedValue;
+    this._removeHostAttribute("autocapitalize");
+    this.requestUpdate();
+  }
+  get spellcheck() {
+    return this._spellcheck ?? super.spellcheck;
+  }
+  set spellcheck(value) {
+    if (this._spellcheck === value) {
+      return;
+    }
+    this._spellcheck = value ?? null;
+    this._removeHostAttribute("spellcheck");
+    this.requestUpdate();
+  }
+  get title() {
+    return this._title;
+  }
+  set title(value) {
+    const normalizedValue = value ?? "";
+    if (this._title === normalizedValue) {
+      return;
+    }
+    this._title = normalizedValue;
+    this._removeHostAttribute("title");
+    this.requestUpdate();
+  }
+  get id() {
+    return this._id;
+  }
+  set id(value) {
+    const normalizedValue = value ?? "";
+    if (this._id === normalizedValue) {
+      return;
+    }
+    this._id = normalizedValue;
+    this._removeHostAttribute("id");
+    this.requestUpdate();
+  }
+  get autofocus() {
+    return this._autofocus;
+  }
+  set autofocus(value) {
+    const normalizedValue = !!value;
+    if (this._autofocus === normalizedValue) {
+      return;
+    }
+    this._autofocus = normalizedValue;
+    this._removeHostAttribute("autofocus");
+    this.requestUpdate();
+  }
+  // Spectre components intentionally render in light DOM so the global
+  // `@phcdevworks/spectre-ui` styling contract can apply directly.
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const proxiedAttributes = [
+      "id",
+      "title",
+      "autocapitalize",
+      "autofocus",
+      "spellcheck",
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby"
+    ];
+    proxiedAttributes.forEach((attr) => {
+      const value = super.getAttribute(attr);
+      if (value !== null) {
+        this.setAttribute(attr, value);
+      }
+    });
+  }
+  getAttribute(qualifiedName) {
+    switch (qualifiedName) {
+      case "id":
+        return this.id || null;
+      case "title":
+        return this.title || null;
+      case "autocapitalize":
+        return this.autocapitalize || null;
+      case "autofocus":
+        return this.autofocus ? "" : null;
+      case "spellcheck":
+        return this._spellcheck !== null ? String(this._spellcheck) : null;
+      case "aria-label":
+        return this.ariaLabel;
+      case "aria-labelledby":
+        return this.ariaLabelledBy;
+      case "aria-describedby":
+        return this.ariaDescribedBy;
+      default:
+        return super.getAttribute(qualifiedName);
+    }
+  }
+  hasAttribute(qualifiedName) {
+    switch (qualifiedName) {
+      case "id":
+        return this.id !== "";
+      case "title":
+        return this.title !== "";
+      case "autocapitalize":
+        return this.autocapitalize !== "";
+      case "autofocus":
+        return this.autofocus;
+      case "spellcheck":
+        return this._spellcheck !== null;
+      case "aria-label":
+        return this.ariaLabel !== null;
+      case "aria-labelledby":
+        return this.ariaLabelledBy !== null;
+      case "aria-describedby":
+        return this.ariaDescribedBy !== null;
+      default:
+        return super.hasAttribute(qualifiedName);
+    }
+  }
+  setAttribute(qualifiedName, value) {
+    switch (qualifiedName) {
+      case "id":
+        this.id = value;
+        break;
+      case "title":
+        this.title = value;
+        break;
+      case "autocapitalize":
+        this.autocapitalize = value;
+        break;
+      case "autofocus":
+        this.autofocus = true;
+        break;
+      case "spellcheck":
+        this.spellcheck = value !== "false";
+        break;
+      case "aria-label":
+        this.ariaLabel = value;
+        break;
+      case "aria-labelledby":
+        this.ariaLabelledBy = value;
+        break;
+      case "aria-describedby":
+        this.ariaDescribedBy = value;
+        break;
+      default:
+        super.setAttribute(qualifiedName, value);
+    }
+  }
+  removeAttribute(qualifiedName) {
+    switch (qualifiedName) {
+      case "id":
+        this.id = "";
+        break;
+      case "title":
+        this.title = "";
+        break;
+      case "autocapitalize":
+        this.autocapitalize = "";
+        break;
+      case "autofocus":
+        this.autofocus = false;
+        break;
+      case "spellcheck":
+        this.spellcheck = null;
+        break;
+      case "aria-label":
+        this.ariaLabel = null;
+        break;
+      case "aria-labelledby":
+        this.ariaLabelledBy = null;
+        break;
+      case "aria-describedby":
+        this.ariaDescribedBy = null;
+        break;
+      default:
+        super.removeAttribute(qualifiedName);
+    }
+  }
+  _removeHostAttribute(name) {
+    const host = this;
+    if (HTMLElement.prototype.hasAttribute.call(host, name)) {
+      HTMLElement.prototype.removeAttribute.call(host, name);
+    }
+  }
+  get forwardedAriaLabel() {
+    const value = this.ariaLabel?.trim();
+    return value ? value : void 0;
+  }
+  get forwardedAriaLabelledBy() {
+    const value = this.ariaLabelledBy?.trim();
+    return value ? value : void 0;
+  }
+  get forwardedAriaDescribedBy() {
+    const value = this.ariaDescribedBy?.trim();
+    return value ? value : void 0;
+  }
+  // Subclasses that expose `disabled`/`loading` properties get this disabled
+  // calculation for free instead of redeclaring it per component.
+  get isDisabled() {
+    const self = this;
+    return (self.disabled ?? false) || (self.loading ?? false);
+  }
+  // Subclasses get this for free instead of redeclaring it per component.
+  get hasForwardedLabel() {
+    return Boolean(this.forwardedAriaLabel || this.forwardedAriaLabelledBy);
+  }
+};
+SpectreBaseElement.properties = {};
+
+// src/utils/dom.ts
+var idCounter = 0;
+function createUniqueId(prefix) {
+  idCounter += 1;
+  return `${prefix}-${idCounter}`;
+}
+function normalizeInt(value, fallback, min = 0) {
+  if (value == null || typeof value !== "number" || !Number.isInteger(value) || value < min) {
+    return fallback;
+  }
+  return value;
+}
+var paths = {
+  check: svg`<path d="M3 8.5l3 3 7-7" />`,
+  chevronDown: svg`<path d="M4 6l4 4 4-4" />`,
+  chevronLeft: svg`<path d="M10 4l-4 4 4 4" />`,
+  chevronRight: svg`<path d="M6 4l4 4-4 4" />`,
+  close: svg`<path d="M4 4l8 8M12 4l-8 8" />`
+};
+function renderIcon(name, sizeClass = "sp-icon-sm") {
+  return html`<svg
+    aria-hidden="true"
+    class="${sizeClass}"
+    fill="none"
+    focusable="false"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 16 16"
+  >
+    ${paths[name]}
+  </svg>`;
+}
+var ISO_DATE = /^(\d{4})-(\d{2})-(\d{2})$/;
+function pad(value) {
+  return String(value).padStart(2, "0");
+}
+function toIsoDate(date) {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+function parseIsoDate(value) {
+  const match = value ? ISO_DATE.exec(value) : null;
+  if (!match) {
+    return void 0;
+  }
+  const [year, month, day] = [
+    Number(match[1]),
+    Number(match[2]),
+    Number(match[3])
+  ];
+  const date = new Date(year, month - 1, day);
+  return date.getMonth() === month - 1 && date.getDate() === day ? date : void 0;
+}
+function addDays(date, days) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
+}
+function addMonths(date, months) {
+  const target = new Date(date.getFullYear(), date.getMonth() + months, 1);
+  const lastDay = new Date(
+    target.getFullYear(),
+    target.getMonth() + 1,
+    0
+  ).getDate();
+  target.setDate(Math.min(date.getDate(), lastDay));
+  return target;
+}
+function today() {
+  const now = /* @__PURE__ */ new Date();
+  return new Date(now.getFullYear(), now.getMonth(), now.getDate());
+}
+var SpectreDatepickerElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.locale = void 0;
+    this.max = void 0;
+    this.min = void 0;
+    this.name = void 0;
+    this.nextLabel = "Next month";
+    this.previousLabel = "Previous month";
+    this.value = void 0;
+    this.weekStart = 0;
+    // The roving-focus day; its month is the one on display.
+    this.activeDate = today();
+    this.titleId = `${createUniqueId("sp-datepicker")}-title`;
+    this.handleKeydown = async (event) => {
+      const active = this.activeDate;
+      const weekday = (active.getDay() - (this.weekStart ?? 0) + 7) % 7;
+      const moves = {
+        ArrowLeft: () => addDays(active, -1),
+        ArrowRight: () => addDays(active, 1),
+        ArrowUp: () => addDays(active, -7),
+        ArrowDown: () => addDays(active, 7),
+        Home: () => addDays(active, -weekday),
+        End: () => addDays(active, 6 - weekday),
+        PageUp: () => addMonths(active, event.shiftKey ? -12 : -1),
+        PageDown: () => addMonths(active, event.shiftKey ? 12 : 1)
+      };
+      const move = moves[event.key];
+      if (!move) {
+        return;
+      }
+      event.preventDefault();
+      this.activeDate = move();
+      await this.updateComplete;
+      this.querySelector(
+        `[data-sp-day="${toIsoDate(this.activeDate)}"]`
+      )?.focus();
+    };
+  }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
+  connectedCallback() {
+    var _a;
+    super.connectedCallback();
+    (_a = this.style).display || (_a.display = "inline-block");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("value")) {
+      const parsed = parseIsoDate(this.value);
+      if (this.value && !parsed) {
+        this.value = void 0;
+      } else if (parsed) {
+        this.activeDate = parsed;
+      }
+    }
+    if (changedProperties.has("min") && !parseIsoDate(this.min)) {
+      this.min = void 0;
+    }
+    if (changedProperties.has("max") && !parseIsoDate(this.max)) {
+      this.max = void 0;
+    }
+    if (changedProperties.has("weekStart")) {
+      const weekStart = normalizeInt(this.weekStart, 0) ?? 0;
+      this.weekStart = weekStart > 6 ? 0 : weekStart;
+    }
+    if (changedProperties.has("nextLabel") && !this.nextLabel) {
+      this.nextLabel = "Next month";
+    }
+    if (changedProperties.has("previousLabel") && !this.previousLabel) {
+      this.previousLabel = "Previous month";
+    }
+  }
+  isOutOfRange(date) {
+    const iso = toIsoDate(date);
+    return this.min !== void 0 && iso < this.min || this.max !== void 0 && iso > this.max;
+  }
+  get visibleDays() {
+    const first = new Date(
+      this.activeDate.getFullYear(),
+      this.activeDate.getMonth(),
+      1
+    );
+    const daysInMonth = new Date(
+      first.getFullYear(),
+      first.getMonth() + 1,
+      0
+    ).getDate();
+    const leading = (first.getDay() - (this.weekStart ?? 0) + 7) % 7;
+    const count = Math.ceil((leading + daysInMonth) / 7) * 7;
+    const start = addDays(first, -leading);
+    return Array.from({ length: count }, (_, index) => addDays(start, index));
+  }
+  select(date) {
+    if (this.isOutOfRange(date)) {
+      return;
+    }
+    this.activeDate = date;
+    const value = toIsoDate(date);
+    if (value === this.value) {
+      return;
+    }
+    this.value = value;
+    this.dispatchEvent(
+      new CustomEvent("sp-change", { bubbles: true, detail: { value } })
+    );
+  }
+  showMonth(offset) {
+    this.activeDate = addMonths(this.activeDate, offset);
+  }
+  renderDay(date) {
+    const iso = toIsoDate(date);
+    const selected = iso === this.value;
+    const isToday = iso === toIsoDate(today());
+    const disabled = this.isOutOfRange(date);
+    const label = new Intl.DateTimeFormat(this.locale, {
+      dateStyle: "full"
+    }).format(date);
+    return html`<button
+      aria-current="${ifDefined(isToday ? "date" : void 0)}"
+      aria-label="${label}"
+      aria-pressed="${selected ? "true" : "false"}"
+      class="${getDayClasses({
+      disabled,
+      outsideMonth: date.getMonth() !== this.activeDate.getMonth(),
+      selected,
+      today: isToday
+    })}"
+      data-sp-day="${iso}"
+      ?disabled="${disabled}"
+      tabindex="${iso === toIsoDate(this.activeDate) ? "0" : "-1"}"
+      type="button"
+      @click="${() => this.select(date)}"
+    >
+      ${date.getDate()}
+    </button>`;
+  }
+  render() {
+    const days = this.visibleDays;
+    const weekdayFormat = new Intl.DateTimeFormat(this.locale, {
+      weekday: "short"
+    });
+    const navClasses = getButtonClasses({
+      iconOnly: true,
+      size: "sm",
+      variant: "ghost"
+    });
+    return html`<div
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(
+      this.forwardedAriaLabel ? void 0 : this.titleId
+    )}"
+      class="${getDatepickerClasses()}"
+      data-sp-datepicker-native
+      id="${ifDefined(this.id || void 0)}"
+      role="group"
+      title="${ifDefined(this.title || void 0)}"
+    >
+      <div class="${getDatepickerHeaderClasses()}">
+        <button
+          aria-label="${this.previousLabel ?? "Previous month"}"
+          class="${navClasses}"
+          data-sp-datepicker-prev
+          type="button"
+          @click="${() => this.showMonth(-1)}"
+        >
+          ${renderIcon("chevronLeft")}
+        </button>
+        <span aria-live="polite" id="${this.titleId}"
+          >${new Intl.DateTimeFormat(this.locale, {
+      month: "long",
+      year: "numeric"
+    }).format(this.activeDate)}</span
+        >
+        <button
+          aria-label="${this.nextLabel ?? "Next month"}"
+          class="${navClasses}"
+          data-sp-datepicker-next
+          type="button"
+          @click="${() => this.showMonth(1)}"
+        >
+          ${renderIcon("chevronRight")}
+        </button>
+      </div>
+      <div
+        class="${getDatepickerGridClasses()}"
+        data-sp-datepicker-grid
+        @keydown="${this.handleKeydown}"
+      >
+        ${days.slice(0, 7).map(
+      (date) => html`<span
+                aria-hidden="true"
+                class="${getDatepickerWeekdayClasses()}"
+                >${weekdayFormat.format(date)}</span
+              >`
+    )}
+        ${days.map((date) => this.renderDay(date))}
+      </div>
+      ${this.name ? html`<input
+              name="${this.name}"
+              type="hidden"
+              .value="${this.value ?? ""}"
+            />` : nothing}
+    </div>`;
+  }
+};
+SpectreDatepickerElement.properties = {
+  activeDate: { state: true },
+  locale: { type: String },
+  max: { type: String },
+  min: { type: String },
+  name: { type: String },
+  nextLabel: { attribute: "next-label", type: String },
+  previousLabel: { attribute: "previous-label", type: String },
+  value: { type: String, reflect: true },
+  weekStart: { attribute: "week-start", type: Number }
+};
+function defineSpectreDatepicker(tagName = "sp-datepicker") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreDatepickerElement);
+  return SpectreDatepickerElement;
+}
+
+export { SpectreDatepickerElement, defineSpectreDatepicker };
+//# sourceMappingURL=datepicker.js.map
+//# sourceMappingURL=datepicker.js.map