@phcdevworks/spectre-components 1.20.0 → 1.21.0

package/dist/popover.d.cts

@@ -0,0 +1,59 @@
+import * as lit_html from 'lit-html';
+import { S as SpectreBaseElement } from './base-D0s95V2v.cjs';
+import { w as SpectrePopoverPlacement } from './form-CVO7mlDa.cjs';
+export { ab as spectrePopoverPlacements } from './form-CVO7mlDa.cjs';
+import 'lit';
+
+interface SpectrePopoverProps {
+    ariaLabel?: string | null;
+    id?: string | null | undefined;
+    label?: string | undefined;
+    open?: boolean | undefined;
+    placement?: SpectrePopoverPlacement | undefined;
+    title?: string | null | undefined;
+    triggerLabel?: string | undefined;
+}
+declare class SpectrePopoverElement extends SpectreBaseElement implements SpectrePopoverProps {
+    static properties: {
+        label: {
+            type: StringConstructor;
+        };
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        placement: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        triggerLabel: {
+            attribute: string;
+            type: StringConstructor;
+        };
+    };
+    label: string | undefined;
+    open: boolean | undefined;
+    placement: SpectrePopoverPlacement | undefined;
+    triggerLabel: string | undefined;
+    private readonly baseId;
+    private readonly projection;
+    get id(): string;
+    set id(value: string | null | undefined);
+    get title(): string;
+    set title(value: string | null | undefined);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changedProperties: Map<PropertyKey, unknown>): void;
+    private get triggerElement();
+    private get panelId();
+    private get headerId();
+    private get hasHeader();
+    private handleDocumentClick;
+    private handleDocumentKeydown;
+    private setOpen;
+    private get dialogLabelledBy();
+    render(): lit_html.TemplateResult<1>;
+}
+declare function defineSpectrePopover(tagName?: string): typeof SpectrePopoverElement;
+
+export { SpectrePopoverElement, SpectrePopoverPlacement, type SpectrePopoverProps, defineSpectrePopover };

package/dist/popover.d.ts

@@ -0,0 +1,59 @@
+import * as lit_html from 'lit-html';
+import { S as SpectreBaseElement } from './base-D0s95V2v.js';
+import { w as SpectrePopoverPlacement } from './form-CVO7mlDa.js';
+export { ab as spectrePopoverPlacements } from './form-CVO7mlDa.js';
+import 'lit';
+
+interface SpectrePopoverProps {
+    ariaLabel?: string | null;
+    id?: string | null | undefined;
+    label?: string | undefined;
+    open?: boolean | undefined;
+    placement?: SpectrePopoverPlacement | undefined;
+    title?: string | null | undefined;
+    triggerLabel?: string | undefined;
+}
+declare class SpectrePopoverElement extends SpectreBaseElement implements SpectrePopoverProps {
+    static properties: {
+        label: {
+            type: StringConstructor;
+        };
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        placement: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        triggerLabel: {
+            attribute: string;
+            type: StringConstructor;
+        };
+    };
+    label: string | undefined;
+    open: boolean | undefined;
+    placement: SpectrePopoverPlacement | undefined;
+    triggerLabel: string | undefined;
+    private readonly baseId;
+    private readonly projection;
+    get id(): string;
+    set id(value: string | null | undefined);
+    get title(): string;
+    set title(value: string | null | undefined);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changedProperties: Map<PropertyKey, unknown>): void;
+    private get triggerElement();
+    private get panelId();
+    private get headerId();
+    private get hasHeader();
+    private handleDocumentClick;
+    private handleDocumentKeydown;
+    private setOpen;
+    private get dialogLabelledBy();
+    render(): lit_html.TemplateResult<1>;
+}
+declare function defineSpectrePopover(tagName?: string): typeof SpectrePopoverElement;
+
+export { SpectrePopoverElement, SpectrePopoverPlacement, type SpectrePopoverProps, defineSpectrePopover };

package/dist/popover.js

@@ -0,0 +1,530 @@
+import { LitElement, nothing, html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { getPopoverClasses, getPopoverArrowClasses, getPopoverHeaderClasses, getPopoverBodyClasses } from '@phcdevworks/spectre-ui';
+
+// src/components/popover/sp-popover.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
+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;
+  });
+}
+var idCounter = 0;
+function createUniqueId(prefix) {
+  idCounter += 1;
+  return `${prefix}-${idCounter}`;
+}
+var spectrePopoverPlacements = [
+  "top",
+  "bottom",
+  "left",
+  "right"
+];
+function isPopoverPlacement(value) {
+  return spectrePopoverPlacements.includes(
+    value
+  );
+}
+
+// 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 SpectrePopoverElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.label = void 0;
+    this.open = false;
+    this.placement = "bottom";
+    this.triggerLabel = "Show details";
+    this.baseId = createUniqueId("sp-popover");
+    this.projection = new ProjectionController(this, [
+      "data-sp-popover-trigger",
+      "data-sp-popover-native"
+    ]);
+    this.handleDocumentClick = (event) => {
+      if (this.open && !event.composedPath().includes(this)) {
+        this.setOpen(false);
+      }
+    };
+    this.handleDocumentKeydown = (event) => {
+      if (event.key === "Escape" && this.open) {
+        this.setOpen(false);
+        this.triggerElement?.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, _b;
+    super.connectedCallback();
+    (_a = this.style).position || (_a.position = "relative");
+    (_b = this.style).display || (_b.display = "inline-block");
+    document.addEventListener("click", this.handleDocumentClick);
+    document.addEventListener("keydown", this.handleDocumentKeydown);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("click", this.handleDocumentClick);
+    document.removeEventListener("keydown", this.handleDocumentKeydown);
+    super.disconnectedCallback();
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("open") && this.open == null) {
+      this.open = false;
+    }
+    if (changedProperties.has("placement") && (this.placement == null || !isPopoverPlacement(this.placement))) {
+      this.placement = "bottom";
+    }
+    if (changedProperties.has("triggerLabel") && !this.triggerLabel) {
+      this.triggerLabel = "Show details";
+    }
+  }
+  get triggerElement() {
+    return this.querySelector("[data-sp-popover-trigger]");
+  }
+  get panelId() {
+    return this.id || `${this.baseId}-panel`;
+  }
+  get headerId() {
+    return `${this.baseId}-header`;
+  }
+  get hasHeader() {
+    return this.projection.has("header") || Boolean(this.label);
+  }
+  setOpen(open) {
+    if (this.open === open) {
+      return;
+    }
+    this.open = open;
+    this.dispatchEvent(
+      new CustomEvent(open ? "sp-open" : "sp-close", { bubbles: true })
+    );
+  }
+  get dialogLabelledBy() {
+    if (this.forwardedAriaLabel) {
+      return void 0;
+    }
+    return this.hasHeader ? this.headerId : `${this.baseId}-trigger`;
+  }
+  render() {
+    const open = this.open ?? false;
+    return html`<button
+        aria-controls="${this.panelId}"
+        aria-expanded="${open ? "true" : "false"}"
+        aria-haspopup="dialog"
+        data-sp-popover-trigger
+        id="${this.baseId}-trigger"
+        type="button"
+        @click="${() => this.setOpen(!open)}"
+      >
+        ${this.projection.has("trigger") ? this.projection.nodes("trigger") : this.triggerLabel}
+      </button>
+      <div
+        aria-label="${ifDefined(this.forwardedAriaLabel)}"
+        aria-labelledby="${ifDefined(this.dialogLabelledBy)}"
+        class="${getPopoverClasses({
+      open,
+      placement: this.placement
+    })}"
+        data-sp-popover-native
+        id="${this.panelId}"
+        role="dialog"
+        title="${ifDefined(this.title || void 0)}"
+      >
+        <span aria-hidden="true" class="${getPopoverArrowClasses()}"></span>
+        ${this.hasHeader ? html`<div
+                class="${getPopoverHeaderClasses()}"
+                id="${this.headerId}"
+              >
+                ${this.projection.has("header") ? this.projection.nodes("header") : this.label}
+              </div>` : nothing}
+        <div class="${getPopoverBodyClasses()}">${this.projection.nodes()}</div>
+      </div>`;
+  }
+};
+SpectrePopoverElement.properties = {
+  label: { type: String },
+  open: { type: Boolean, reflect: true },
+  placement: { type: String, reflect: true },
+  triggerLabel: { attribute: "trigger-label", type: String }
+};
+function defineSpectrePopover(tagName = "sp-popover") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectrePopoverElement);
+  return SpectrePopoverElement;
+}
+
+export { SpectrePopoverElement, defineSpectrePopover, spectrePopoverPlacements };
+//# sourceMappingURL=popover.js.map
+//# sourceMappingURL=popover.js.map