@alstar/studio 0.0.0-beta.18 → 0.0.0-beta.20

package/public/studio/quiet/dist/components/number-ticker/number-ticker.js

@@ -0,0 +1,204 @@
+/*! Required Notice: Copyright 2025 A Beautiful Site, LLC - https://quietui.org */
+import {
+  number_ticker_styles_default
+} from "../../chunks/chunk.CE5ABPL5.js";
+import {
+  QuietElement,
+  n,
+  r,
+  t
+} from "../../chunks/chunk.3WKCIAWU.js";
+import "../../chunks/chunk.5E32SBSM.js";
+import {
+  host_styles_default
+} from "../../chunks/chunk.OW7IPG4K.js";
+import "../../chunks/chunk.A5SY4VDT.js";
+import {
+  Localize
+} from "../../chunks/chunk.N7C6RCMV.js";
+import {
+  x
+} from "../../chunks/chunk.VLHFHZQJ.js";
+import {
+  QuietAnimationComplete
+} from "../../chunks/chunk.CI5CPUU3.js";
+import {
+  __decorateClass
+} from "../../chunks/chunk.32UODNLB.js";
+
+// src/components/number-ticker/number-ticker.ts
+var QuietNumberTicker = class extends QuietElement {
+  constructor() {
+    super(...arguments);
+    this.animationFrame = null;
+    this.animationTimeout = null;
+    this.localize = new Localize(this);
+    this.observer = null;
+    this.startTime = null;
+    this.currentValue = 0;
+    this.isAnimating = false;
+    this.startValue = 0;
+    this.endValue = 0;
+    this.duration = 2e3;
+    this.delay = 0;
+    this.decimalPlaces = 0;
+    this.grouping = "auto";
+    this.startOnView = false;
+    this.ignoreReducedMotion = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.currentValue = this.startValue;
+    if (this.startOnView) {
+      this.setupIntersectionObserver();
+    } else {
+      this.startAnimation();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopAnimation();
+    this.observer?.disconnect();
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("startValue") || changedProperties.has("endValue") || changedProperties.has("decimalPlaces") || changedProperties.has("duration")) {
+      this.stopAnimation();
+      this.currentValue = this.startValue;
+      if (!this.startOnView) {
+        this.startAnimation();
+      }
+    }
+    if (changedProperties.has("endValue")) {
+      this.setAttribute("aria-label", `${this.endValue}`);
+    }
+  }
+  setupIntersectionObserver() {
+    this.observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && !this.isAnimating) {
+          this.startAnimation();
+          this.observer?.disconnect();
+        }
+      },
+      { threshold: 0.1 }
+    );
+    this.observer.observe(this);
+  }
+  startAnimation() {
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const effectiveDelay = Math.max(0, Number(this.delay) || 0);
+    this.stopAnimation();
+    this.currentValue = this.startValue;
+    if (prefersReducedMotion && !this.ignoreReducedMotion) {
+      this.isAnimating = true;
+      setTimeout(() => this.startReducedMotionAnimation(), effectiveDelay);
+    } else {
+      setTimeout(() => {
+        this.isAnimating = true;
+        this.startTime = performance.now();
+        this.tick();
+      }, effectiveDelay);
+    }
+  }
+  startReducedMotionAnimation() {
+    const steps = 5;
+    const stepDuration = Math.max(0, Number(this.duration) || 2e3) / steps;
+    const valueStep = (this.endValue - this.startValue) / steps;
+    let currentStep = 0;
+    const updateStep = () => {
+      if (currentStep <= steps) {
+        this.currentValue = this.startValue + valueStep * currentStep;
+        currentStep++;
+        this.animationTimeout = window.setTimeout(updateStep, stepDuration);
+      } else {
+        this.currentValue = this.endValue;
+        this.isAnimating = false;
+        this.dispatchEvent(new QuietAnimationComplete());
+      }
+    };
+    updateStep();
+  }
+  easeOutExpo(t2) {
+    return t2 === 1 ? 1 : 1 - Math.pow(2, -10 * t2);
+  }
+  tick() {
+    if (!this.isAnimating || this.startTime === null) return;
+    const now = performance.now();
+    const elapsed = now - this.startTime;
+    const progress = Math.min(elapsed / Math.max(0, Number(this.duration) || 2e3), 1);
+    const easedProgress = this.easeOutExpo(progress);
+    const range = this.endValue - this.startValue;
+    const current = this.startValue + range * easedProgress;
+    this.currentValue = current;
+    if (progress < 1) {
+      this.animationFrame = requestAnimationFrame(() => this.tick());
+    } else {
+      this.currentValue = this.endValue;
+      this.isAnimating = false;
+      this.dispatchEvent(new QuietAnimationComplete());
+    }
+  }
+  stopAnimation() {
+    if (this.animationFrame !== null) {
+      cancelAnimationFrame(this.animationFrame);
+      this.animationFrame = null;
+    }
+    if (this.animationTimeout !== null) {
+      clearTimeout(this.animationTimeout);
+      this.animationTimeout = null;
+    }
+    this.isAnimating = false;
+    this.startTime = null;
+  }
+  render() {
+    return x`
+      <span aria-hidden="true">
+        ${typeof this.valueFormatter === "function" ? this.valueFormatter(this.currentValue) : this.localize.number(this.currentValue, {
+      maximumFractionDigits: this.decimalPlaces,
+      // @ts-expect-error - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#usegrouping
+      useGrouping: this.grouping === "never" ? false : this.grouping
+    })}
+      </span>
+    `;
+  }
+};
+QuietNumberTicker.styles = [host_styles_default, number_ticker_styles_default];
+__decorateClass([
+  r()
+], QuietNumberTicker.prototype, "currentValue", 2);
+__decorateClass([
+  r()
+], QuietNumberTicker.prototype, "isAnimating", 2);
+__decorateClass([
+  n({ type: Number, attribute: "start-value" })
+], QuietNumberTicker.prototype, "startValue", 2);
+__decorateClass([
+  n({ type: Number, attribute: "end-value" })
+], QuietNumberTicker.prototype, "endValue", 2);
+__decorateClass([
+  n({ type: Number })
+], QuietNumberTicker.prototype, "duration", 2);
+__decorateClass([
+  n({ type: Number })
+], QuietNumberTicker.prototype, "delay", 2);
+__decorateClass([
+  n({ type: Number, attribute: "decimal-places" })
+], QuietNumberTicker.prototype, "decimalPlaces", 2);
+__decorateClass([
+  n()
+], QuietNumberTicker.prototype, "grouping", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "start-on-view" })
+], QuietNumberTicker.prototype, "startOnView", 2);
+__decorateClass([
+  n({ attribute: "ignore-reduced-motion", type: Boolean, reflect: true })
+], QuietNumberTicker.prototype, "ignoreReducedMotion", 2);
+__decorateClass([
+  n({ attribute: false })
+], QuietNumberTicker.prototype, "valueFormatter", 2);
+QuietNumberTicker = __decorateClass([
+  t("quiet-number-ticker")
+], QuietNumberTicker);
+export {
+  QuietNumberTicker
+};

package/public/studio/quiet/dist/components/number-ticker/number-ticker.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/public/studio/quiet/dist/components/number-ticker/number-ticker.styles.js

@@ -0,0 +1,10 @@
+/*! Required Notice: Copyright 2025 A Beautiful Site, LLC - https://quietui.org */
+import {
+  number_ticker_styles_default
+} from "../../chunks/chunk.CE5ABPL5.js";
+import "../../chunks/chunk.A5SY4VDT.js";
+import "../../chunks/chunk.VLHFHZQJ.js";
+import "../../chunks/chunk.32UODNLB.js";
+export {
+  number_ticker_styles_default as default
+};

package/public/studio/quiet/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,76 @@
+import type { CSSResultGroup, PropertyValues } from 'lit';
+import { QuietElement } from '../../utilities/quiet-element.js';
+import '../icon/icon.js';
+/**
+ * <quiet-pagination>
+ *
+ * @summary Splits content into numbered pages so users can navigate datasets in manageable chunks.
+ * @documentation https://quietui.org/docs/components/pagination
+ * @status stable
+ * @since 1.0
+ *
+ * @dependency quiet-icon
+ *
+ * @slot previous-icon - A custom icon to use for the previous button.
+ * @slot next-icon - A custom icon to use for the next button.
+ * @slot jump-backward-icon - A custom icon to use for the jump backward button.
+ * @slot jump-forward-icon - A custom icon to use for jump forward button.
+ *
+ * @event quiet-before-page-change - Emitted when the page is going to change but before it actually changes. Calling
+ *  `event.preventDefault()` will prevent the page from changing. Inspect `event.detail` to get the `currentPage` and
+ *  `requestedPage` properties.
+ * @event quiet-page-change - Emitted after the page has been changed and the UI has been updated.
+ *
+ * @csspart nav - The navigation container, a `<nav>` element.
+ * @csspart list - The list that contains the pagination items, a `<ul>` element.
+ * @csspart item - A pagination item, an `<li>` element.
+ * @csspart button - A pagination button, a `<button>` or an `<a>` element.
+ * @csspart button-first - The button that navigates to the first page.
+ * @csspart button-previous - The button that navigates to the previous page.
+ * @csspart button-next - The button that navigates to the next page.
+ * @csspart button-last - The button that navigates to the last page.
+ * @csspart button-page - A button that navigates to a specific page.
+ * @csspart button-current - The button that represents the current page.
+ * @csspart button-jump-backward - The jump backward button.
+ * @csspart button-jump-forward - The jump forward button.
+ * @csspart range - The page range that shows the page when viewed in the compact format, e.g. "1 of 10".
+ *
+ * @cssstate disabled - Applied when the pagination is disabled.
+ */
+export declare class QuietPagination extends QuietElement {
+    static styles: CSSResultGroup;
+    private localize;
+    /** A label to use to describe the control to assistive devices. Defaults to "Pagination" when not set. */
+    label: string;
+    /** The total number of pages to show. */
+    totalPages: number;
+    /** The current page. */
+    page: number;
+    /** The number of pages to show on each side of the current page. Minimum 2. */
+    siblings: number;
+    /** The number of pages to increase or decrease when jump buttons are clicked. */
+    jump: number;
+    /** How the pagination will display buttons. */
+    format: 'compact' | 'standard';
+    /**
+     * A string that, when provided, renders `<a>` elements instead of `<${tag}s>` using this as the link's template.
+     * Use `$page` to indicate the page number, e.g. `"/path/to/$page"`. Alternatively, you can provide a JavaScript
+     * function that accepts a page number and returns a URL.
+     */
+    linkFormatter: string | ((page: number) => string);
+    /** Disables the pagination control. */
+    disabled: boolean;
+    /** Determine's the pagination's appearance. */
+    appearance: 'normal' | 'filled' | 'unstyled';
+    /** Removes the previous and next buttons. */
+    withoutNav: boolean;
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    updated(changedProperties: PropertyValues<this>): void;
+    /** Changes the current page, emitting a cancellable 'quiet-page-change' event. */
+    private changePage;
+    /** Generates the list of pagination items, including pages and jump buttons. */
+    private getPaginationItems;
+    private handleNavClick;
+    private renderLink;
+    render(): import("lit-html").TemplateResult;
+}

package/public/studio/quiet/dist/components/pagination/pagination.js

@@ -0,0 +1,296 @@
+/*! Required Notice: Copyright 2025 A Beautiful Site, LLC - https://quietui.org */
+import {
+  pagination_styles_default
+} from "../../chunks/chunk.7RSXMDCI.js";
+import {
+  i,
+  u
+} from "../../chunks/chunk.ZCPQX3DA.js";
+import "../../chunks/chunk.VZGOKU4C.js";
+import "../../chunks/chunk.TUTBBYZM.js";
+import {
+  clamp
+} from "../../chunks/chunk.ELBGBFBV.js";
+import {
+  QuietElement,
+  n,
+  t
+} from "../../chunks/chunk.3WKCIAWU.js";
+import "../../chunks/chunk.5E32SBSM.js";
+import {
+  host_styles_default
+} from "../../chunks/chunk.OW7IPG4K.js";
+import "../../chunks/chunk.A5SY4VDT.js";
+import {
+  Localize
+} from "../../chunks/chunk.N7C6RCMV.js";
+import {
+  QuietBeforePageChangeEvent,
+  QuietPageChangeEvent
+} from "../../chunks/chunk.Z4Q4SHKM.js";
+import "../../chunks/chunk.RT7RKCPI.js";
+import {
+  o
+} from "../../chunks/chunk.7LEBIIO5.js";
+import {
+  e
+} from "../../chunks/chunk.E6M524BP.js";
+import "../../chunks/chunk.UTLMCKJR.js";
+import "../../chunks/chunk.VLHFHZQJ.js";
+import "../../chunks/chunk.AR2Y4PNI.js";
+import "../../chunks/chunk.YC32QOAM.js";
+import {
+  __decorateClass
+} from "../../chunks/chunk.32UODNLB.js";
+
+// src/components/pagination/pagination.ts
+var QuietPagination = class extends QuietElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new Localize(this);
+    this.label = "";
+    this.totalPages = 1;
+    this.page = 1;
+    this.siblings = 3;
+    this.jump = 5;
+    this.format = "standard";
+    this.linkFormatter = "";
+    this.disabled = false;
+    this.appearance = "normal";
+    this.withoutNav = false;
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("page")) {
+      this.page = Number(this.page);
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("disabled")) {
+      this.customStates.set("disabled", this.disabled);
+    }
+  }
+  /** Changes the current page, emitting a cancellable 'quiet-page-change' event. */
+  async changePage(newPage) {
+    if (this.disabled || this.linkFormatter) return;
+    if (newPage < 1 || newPage > this.totalPages || newPage === this.page) return;
+    const beforePageChangeEvent = new QuietBeforePageChangeEvent({ currentPage: this.page, requestedPage: newPage });
+    this.dispatchEvent(beforePageChangeEvent);
+    if (beforePageChangeEvent.defaultPrevented) {
+      return;
+    }
+    this.page = newPage;
+    await this.updateComplete;
+    const pageChangeEvent = new QuietPageChangeEvent();
+    this.dispatchEvent(pageChangeEvent);
+  }
+  /** Generates the list of pagination items, including pages and jump buttons. */
+  getPaginationItems() {
+    const items = [];
+    const totalButtons = 2 * this.siblings + 1;
+    const clampedTotalButtons = clamp(totalButtons, 5, Infinity);
+    if (this.totalPages < 1) return items;
+    if (this.totalPages <= clampedTotalButtons) {
+      for (let i2 = 1; i2 <= this.totalPages; i2++) {
+        items.push({ type: "page", page: i2 });
+      }
+    } else {
+      const middlePageCount = clampedTotalButtons - 4;
+      const sideButtons = Math.floor(middlePageCount / 2);
+      const showJumpBackward = this.page > sideButtons + 2;
+      const showJumpForward = this.page < this.totalPages - sideButtons - 1;
+      let rangeStart, rangeEnd;
+      if (!showJumpBackward && showJumpForward) {
+        rangeStart = 2;
+        rangeEnd = clampedTotalButtons - 2;
+      } else if (showJumpBackward && !showJumpForward) {
+        rangeStart = this.totalPages - (clampedTotalButtons - 3);
+        rangeEnd = this.totalPages - 1;
+      } else if (showJumpBackward && showJumpForward) {
+        rangeStart = Math.max(2, this.page - sideButtons);
+        rangeEnd = Math.min(this.totalPages - 1, this.page + sideButtons);
+        if (rangeEnd - rangeStart + 1 < middlePageCount) {
+          if (rangeStart === 2) {
+            rangeEnd = Math.min(this.totalPages - 1, rangeStart + middlePageCount - 1);
+          } else if (rangeEnd === this.totalPages - 1) {
+            rangeStart = Math.max(2, rangeEnd - middlePageCount + 1);
+          }
+        }
+      } else {
+        rangeStart = 2;
+        rangeEnd = this.totalPages - 1;
+      }
+      items.push({ type: "page", page: 1 });
+      if (rangeStart === 3) {
+        items.push({ type: "page", page: 2 });
+      } else if (showJumpBackward) {
+        items.push({ type: "jump", position: "start" });
+      }
+      for (let i2 = rangeStart; i2 <= rangeEnd; i2++) {
+        items.push({ type: "page", page: i2 });
+      }
+      if (rangeEnd === this.totalPages - 2) {
+        items.push({ type: "page", page: this.totalPages - 1 });
+      } else if (showJumpForward) {
+        items.push({ type: "jump", position: "end" });
+      }
+      items.push({ type: "page", page: this.totalPages });
+    }
+    return items;
+  }
+  handleNavClick(event) {
+    if (this.disabled) {
+      event.preventDefault();
+    }
+  }
+  renderLink(page) {
+    page = clamp(page, 1, this.totalPages);
+    if (typeof this.linkFormatter === "string") {
+      return this.linkFormatter.replace(/\{page\}/g, page + "");
+    } else if (typeof this.linkFormatter === "function") {
+      return this.linkFormatter(page);
+    } else {
+      return void 0;
+    }
+  }
+  render() {
+    const isLink = this.linkFormatter;
+    const tag = isLink ? i`a` : i`button`;
+    const label = this.label || this.localize.term("pagination");
+    const isPrevDisabled = this.page <= 1 || this.disabled;
+    const isNextDisabled = this.page >= this.totalPages || this.disabled;
+    const isRtl = this.localize.dir() === "rtl";
+    const chevronLeftIcon = u`<quiet-icon library="system" name="chevron-left"></quiet-icon>`;
+    const chevronRightIcon = u`<quiet-icon library="system" name="chevron-right"></quiet-icon>`;
+    let content;
+    const previousButton = u`
+      <li part="item">
+        <${tag}
+          href=${o(this.renderLink(this.page - 1))}
+          part="button button-previous"
+          class=${e({ disabled: isPrevDisabled || this.disabled })}
+          aria-label="${this.localize.term("previous")}"
+          ?disabled=${o(isLink ? void 0 : isPrevDisabled || this.disabled)}
+          tabindex=${o(this.disabled ? "-1" : void 0)}
+          @click=${() => this.changePage(this.page - 1)}
+        >
+          <slot name="previous-icon"> ${isRtl ? chevronRightIcon : chevronLeftIcon} </slot>
+        </${tag}>
+      </li>
+    `;
+    const nextButton = u`
+      <li part="item">
+        <${tag}
+          href=${o(this.renderLink(this.page + 1))}
+          part="button button-next"
+          class=${e({ disabled: isNextDisabled || this.disabled })}
+          aria-label="${this.localize.term("next")}"
+          ?disabled=${o(isLink ? void 0 : isNextDisabled || this.disabled)}
+          tabindex=${o(this.disabled ? "-1" : void 0)}
+          @click=${() => this.changePage(this.page + 1)}
+        >
+          <slot name="next-icon"> ${isRtl ? chevronLeftIcon : chevronRightIcon} </slot>
+        </${tag}>
+      </li>
+    `;
+    if (this.format === "compact") {
+      content = u`
+        <li part="item">
+          <span id="range" part="range">
+            ${this.localize.term(
+        "numberOfTotal",
+        this.localize.number(this.page, { useGrouping: true }),
+        this.localize.number(this.totalPages, { useGrouping: true })
+      )}
+          </span>
+        </li>
+      `;
+    } else {
+      content = this.getPaginationItems().map((item) => {
+        if (item.type === "jump") {
+          const jumpToPage = this.page + (item.position === "start" ? -5 : 5);
+          return u`
+            <li part="item">
+              <${tag}
+                href=${o(this.renderLink(jumpToPage))}
+                part="button ${item.position === "start" ? "button-jump-backward" : "button-jump-forward"}"
+                class=${e({ disabled: this.disabled })}
+                aria-label="${this.localize.term(item.position === "start" ? "jumpBackward" : "jumpForward")}"
+                ?disabled=${o(isLink ? void 0 : this.disabled)}
+                tabindex=${o(this.disabled ? "-1" : void 0)}
+                @click=${() => this.changePage(clamp(this.page + (item.position === "start" ? -5 : 5), 1, this.totalPages))}
+              >
+                <slot name=${item.position === "start" ? "jump-backward-icon" : "jump-forward-icon"}>
+                  <quiet-icon library="system" name="dots" family="filled"></quiet-icon>
+                </slot>
+              </${tag}>
+            </li>
+          `;
+        } else {
+          const isCurrent = item.page === this.page;
+          const part = `button button-page${isCurrent ? " button-current" : ""}${item.page === 1 ? " button-first" : ""}${item.page === this.totalPages ? " button-last" : ""}`;
+          return u`
+            <li part="item">
+              <${tag}
+                href=${o(this.renderLink(item.page))}
+                part=${part}
+                class=${e({ current: isCurrent, disabled: this.disabled })}
+                aria-label=${this.localize.term("pageNumber", item.page)}
+                aria-current=${o(isCurrent ? "page" : void 0)}
+                ?disabled=${o(isLink ? void 0 : this.disabled)}
+                tabindex=${o(this.disabled ? "-1" : void 0)}
+                @click=${() => this.changePage(item.page)}
+              >
+                ${this.localize.number(item.page, { useGrouping: true })}
+              </${tag}>
+            </li>
+          `;
+        }
+      });
+    }
+    return u`
+      <nav id="nav" part="nav" aria-label="${label}" @click=${this.handleNavClick}>
+        <ul id="list" part="list">
+          ${this.withoutNav ? "" : previousButton} ${content} ${this.withoutNav ? "" : nextButton}
+        </ul>
+      </nav>
+    `;
+  }
+};
+QuietPagination.styles = [host_styles_default, pagination_styles_default];
+__decorateClass([
+  n()
+], QuietPagination.prototype, "label", 2);
+__decorateClass([
+  n({ attribute: "total-pages", type: Number })
+], QuietPagination.prototype, "totalPages", 2);
+__decorateClass([
+  n({ type: Number, reflect: true })
+], QuietPagination.prototype, "page", 2);
+__decorateClass([
+  n({ attribute: "siblings", type: Number })
+], QuietPagination.prototype, "siblings", 2);
+__decorateClass([
+  n({ attribute: "jump", type: Number })
+], QuietPagination.prototype, "jump", 2);
+__decorateClass([
+  n({ reflect: true })
+], QuietPagination.prototype, "format", 2);
+__decorateClass([
+  n({ attribute: "link-formatter" })
+], QuietPagination.prototype, "linkFormatter", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], QuietPagination.prototype, "disabled", 2);
+__decorateClass([
+  n({ reflect: true })
+], QuietPagination.prototype, "appearance", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "without-nav", reflect: true })
+], QuietPagination.prototype, "withoutNav", 2);
+QuietPagination = __decorateClass([
+  t("quiet-pagination")
+], QuietPagination);
+export {
+  QuietPagination
+};

package/public/studio/quiet/dist/components/pagination/pagination.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/public/studio/quiet/dist/components/pagination/pagination.styles.js

@@ -0,0 +1,10 @@
+/*! Required Notice: Copyright 2025 A Beautiful Site, LLC - https://quietui.org */
+import {
+  pagination_styles_default
+} from "../../chunks/chunk.7RSXMDCI.js";
+import "../../chunks/chunk.A5SY4VDT.js";
+import "../../chunks/chunk.VLHFHZQJ.js";
+import "../../chunks/chunk.32UODNLB.js";
+export {
+  pagination_styles_default as default
+};