@phcdevworks/spectre-components 1.20.0 → 1.21.0

package/dist/carousel.js

@@ -0,0 +1,652 @@
+import { svg, LitElement, nothing, html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { getCarouselCaptionClasses, getCarouselClasses, getCarouselViewportClasses, getCarouselSlideClasses, getCarouselControlClasses, getCarouselIndicatorsClasses, getCarouselIndicatorClasses } from '@phcdevworks/spectre-ui';
+
+// src/components/carousel/sp-carousel.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 = {};
+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>`;
+}
+
+// src/utils/parts.ts
+function applyPartClasses(elements, parts) {
+  for (const element of elements) {
+    const part = element.getAttribute("slot");
+    const classes = part ? parts[part] : void 0;
+    if (classes) {
+      element.classList.add(...classes.split(/\s+/).filter(Boolean));
+    }
+  }
+}
+
+// src/utils/dom.ts
+function hasMeaningfulContent(nodes) {
+  return nodes.some((node) => {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      return true;
+    }
+    if (node.nodeType === Node.TEXT_NODE) {
+      return (node.textContent?.trim().length ?? 0) > 0;
+    }
+    return false;
+  });
+}
+
+// src/utils/projection.ts
+function slotOf(node) {
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return void 0;
+  }
+  return node.getAttribute("slot") ?? void 0;
+}
+var ProjectionController = class {
+  constructor(host, internalAttributes) {
+    this.host = host;
+    this.internalAttributes = internalAttributes;
+    this.projected = [];
+    host.addController(this);
+  }
+  hostConnected() {
+    this.sync();
+    this.observe();
+  }
+  hostDisconnected() {
+    this.disconnect();
+  }
+  hostUpdate() {
+    this.sync();
+    this.disconnect();
+  }
+  hostUpdated() {
+    this.observe();
+  }
+  // Every projected node in authored order, regardless of slot.
+  all() {
+    return [...this.projected];
+  }
+  // Omitting `slot` returns the nodes without a slot attribute.
+  nodes(slot) {
+    return this.projected.filter((node) => slotOf(node) === slot);
+  }
+  elements(slot) {
+    return this.nodes(slot).filter(
+      (node) => node.nodeType === Node.ELEMENT_NODE
+    );
+  }
+  has(slot) {
+    return hasMeaningfulContent(this.nodes(slot));
+  }
+  isInternalNode(node) {
+    return node.nodeType === Node.ELEMENT_NODE && this.internalAttributes.some(
+      (name) => node.hasAttribute(name)
+    );
+  }
+  isProjectable(node) {
+    if (node.nodeType === Node.COMMENT_NODE || this.isInternalNode(node)) {
+      return false;
+    }
+    if (node.nodeType === Node.TEXT_NODE && this.hostHasRendered) {
+      return Boolean(node.textContent?.trim());
+    }
+    return true;
+  }
+  get hostHasRendered() {
+    return this.host.hasUpdated;
+  }
+  sync() {
+    const next = [
+      .../* @__PURE__ */ new Set([
+        ...this.projected.filter((node) => this.host.contains(node)),
+        ...Array.from(this.host.childNodes).filter(
+          (node) => this.isProjectable(node)
+        )
+      ])
+    ];
+    const changed = next.length !== this.projected.length || next.some((node, index) => node !== this.projected[index]);
+    if (changed) {
+      this.projected = next;
+    }
+    return changed;
+  }
+  observe() {
+    if (this.observer || !this.host.isConnected) {
+      return;
+    }
+    this.observer = new MutationObserver(() => {
+      if (this.sync()) {
+        this.host.requestUpdate();
+      }
+    });
+    this.observer.observe(this.host, { childList: true });
+  }
+  disconnect() {
+    this.observer?.disconnect();
+    this.observer = void 0;
+  }
+};
+var SpectreCarouselElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.fade = false;
+    this.hideControls = false;
+    this.hideIndicators = false;
+    this.index = 0;
+    this.loop = false;
+    this.nextLabel = "Next slide";
+    this.previousLabel = "Previous slide";
+    this.indexFromScroll = false;
+    this.projection = new ProjectionController(this, [
+      "data-sp-carousel-native"
+    ]);
+    this.handleKeydown = (event) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        this.goTo(this.activeIndex - 1);
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        this.goTo(this.activeIndex + 1);
+      }
+    };
+    // Native swipes and scroll-snap move the viewport directly; follow them so
+    // the indicators and controls stay in sync.
+    this.handleScroll = (event) => {
+      const viewport = event.currentTarget;
+      if (this.fade || viewport.clientWidth === 0) {
+        return;
+      }
+      const target = Math.round(viewport.scrollLeft / viewport.clientWidth);
+      if (target === this.activeIndex || target >= this.slides.length) {
+        return;
+      }
+      this.indexFromScroll = true;
+      this.index = target;
+      this.dispatchEvent(
+        new CustomEvent("sp-change", { bubbles: true, detail: { index: target } })
+      );
+    };
+  }
+  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 = "block");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("fade") && this.fade == null) {
+      this.fade = false;
+    }
+    if (changedProperties.has("hideControls") && this.hideControls == null) {
+      this.hideControls = false;
+    }
+    if (changedProperties.has("hideIndicators") && this.hideIndicators == null) {
+      this.hideIndicators = false;
+    }
+    if (changedProperties.has("index")) {
+      this.index = normalizeInt(this.index, 0);
+    }
+    if (changedProperties.has("loop") && this.loop == null) {
+      this.loop = false;
+    }
+    if (changedProperties.has("nextLabel") && !this.nextLabel) {
+      this.nextLabel = "Next slide";
+    }
+    if (changedProperties.has("previousLabel") && !this.previousLabel) {
+      this.previousLabel = "Previous slide";
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.slides.forEach((slide2) => {
+      applyPartClasses(slide2.querySelectorAll("[slot]"), {
+        caption: getCarouselCaptionClasses()
+      });
+    });
+    const scrolledByUser = this.indexFromScroll;
+    this.indexFromScroll = false;
+    if (this.fade || scrolledByUser || !changedProperties.has("index")) {
+      return;
+    }
+    const slide = this.slideWrappers[this.activeIndex];
+    if (slide && typeof this.viewport?.scrollTo === "function") {
+      this.viewport.scrollTo({ left: slide.offsetLeft });
+    }
+  }
+  get slides() {
+    return this.projection.elements();
+  }
+  get activeIndex() {
+    const last = this.slides.length - 1;
+    return Math.max(0, Math.min(this.index ?? 0, last));
+  }
+  get viewport() {
+    return this.querySelector("[data-sp-carousel-viewport]");
+  }
+  get slideWrappers() {
+    const viewport = this.viewport;
+    if (!viewport) {
+      return [];
+    }
+    return Array.from(viewport.children).filter(
+      (child) => child.hasAttribute("data-sp-carousel-slide")
+    );
+  }
+  goTo(target) {
+    const count = this.slides.length;
+    if (count === 0) {
+      return;
+    }
+    let next = target;
+    if (this.loop) {
+      next = (target % count + count) % count;
+    } else if (target < 0 || target >= count) {
+      return;
+    }
+    if (next === this.activeIndex) {
+      return;
+    }
+    this.index = next;
+    this.dispatchEvent(
+      new CustomEvent("sp-change", { bubbles: true, detail: { index: next } })
+    );
+  }
+  get regionLabel() {
+    if (this.forwardedAriaLabel) {
+      return this.forwardedAriaLabel;
+    }
+    return this.forwardedAriaLabelledBy ? void 0 : "Carousel";
+  }
+  render() {
+    const slides = this.slides;
+    const count = slides.length;
+    const active = this.activeIndex;
+    const loop = this.loop ?? false;
+    return html`<div
+      aria-label="${ifDefined(this.regionLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      aria-roledescription="carousel"
+      class="${getCarouselClasses({ fade: this.fade ?? false })}"
+      data-sp-carousel-native
+      id="${ifDefined(this.id || void 0)}"
+      role="region"
+      title="${ifDefined(this.title || void 0)}"
+      @keydown="${this.handleKeydown}"
+    >
+      <div
+        aria-live="polite"
+        class="${getCarouselViewportClasses()}"
+        data-sp-carousel-viewport
+        @scroll="${this.handleScroll}"
+      >
+        ${slides.map(
+      (slide, index) => html`<div
+              aria-label="${index + 1} of ${count}"
+              aria-roledescription="slide"
+              class="${getCarouselSlideClasses({ active: index === active })}"
+              data-sp-carousel-slide
+              role="group"
+            >
+              ${slide}
+            </div>`
+    )}
+      </div>
+      ${!this.hideControls && count > 1 ? html`<button
+                aria-label="${this.previousLabel ?? "Previous slide"}"
+                class="${getCarouselControlClasses({ direction: "prev" })}"
+                data-sp-carousel-prev
+                ?disabled="${!loop && active === 0}"
+                type="button"
+                @click="${() => this.goTo(active - 1)}"
+              >
+                ${renderIcon("chevronLeft", "sp-icon-md")}
+              </button>
+              <button
+                aria-label="${this.nextLabel ?? "Next slide"}"
+                class="${getCarouselControlClasses({ direction: "next" })}"
+                data-sp-carousel-next
+                ?disabled="${!loop && active === count - 1}"
+                type="button"
+                @click="${() => this.goTo(active + 1)}"
+              >
+                ${renderIcon("chevronRight", "sp-icon-md")}
+              </button>` : nothing}
+      ${!this.hideIndicators && count > 1 ? html`<div class="${getCarouselIndicatorsClasses()}">
+              ${slides.map(
+      (_, index) => html`<button
+                    aria-current="${ifDefined(
+        index === active ? "true" : void 0
+      )}"
+                    aria-label="Go to slide ${index + 1}"
+                    class="${getCarouselIndicatorClasses({
+        active: index === active
+      })}"
+                    data-sp-carousel-indicator
+                    type="button"
+                    @click="${() => this.goTo(index)}"
+                  ></button>`
+    )}
+            </div>` : nothing}
+    </div>`;
+  }
+};
+SpectreCarouselElement.properties = {
+  fade: { type: Boolean, reflect: true },
+  hideControls: { attribute: "hide-controls", type: Boolean, reflect: true },
+  hideIndicators: {
+    attribute: "hide-indicators",
+    type: Boolean,
+    reflect: true
+  },
+  index: { type: Number, reflect: true },
+  loop: { type: Boolean, reflect: true },
+  nextLabel: { attribute: "next-label", type: String },
+  previousLabel: { attribute: "previous-label", type: String }
+};
+function defineSpectreCarousel(tagName = "sp-carousel") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreCarouselElement);
+  return SpectreCarouselElement;
+}
+
+export { SpectreCarouselElement, defineSpectreCarousel };
+//# sourceMappingURL=carousel.js.map
+//# sourceMappingURL=carousel.js.map