@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/collection/components/pf-line-chart/pf-line-chart.js

@@ -0,0 +1,294 @@
+import { CHART_PADDING, CHART_PLOT, CHART_VIEW, areaSeriesPath, axisLabelStep, chartSeriesColor, formatAxisTick, niceAxisTicks, plotX, plotY, smoothSeriesPath, straightSeriesPath, } from "@pitchfork-ui/core";
+import { h, Host } from "@stencil/core";
+/**
+ * A line or area chart over `pf-chart-series` children.
+ *
+ * The split follows what the data is: the rows are bulk numbers and live in a
+ * property, while the series are the part with names and colours and live in
+ * the light DOM, where a consumer can loop over them and where the legend can
+ * reach their labels.
+ *
+ * Every scale and path is core's, so this and the React `LineChart` draw the
+ * same chart — the axis labels and the geometry have to come from the same
+ * tick scale, or the gridlines say one thing and the line says another.
+ *
+ * @slot - the `pf-chart-series` children.
+ * @slot empty - what to show when there is nothing to draw.
+ * @part svg - the drawing.
+ * @part grid - one gridline.
+ * @part tick - one axis label.
+ * @part line - one series' line.
+ * @part area - one series' fill, on the area variant.
+ * @part dot - one data point.
+ * @part legend - the list the series are slotted into.
+ * @part empty - the empty state's box.
+ */
+export class PfLineChart {
+    el;
+    /**
+     * The rows to plot.
+     *
+     * An array for a framework consumer, or JSON for plain HTML, because
+     * Stencil coerces an attribute only for the primitive types it recognises.
+     */
+    data = [];
+    /** Fill under each line. Reflected. */
+    area = false;
+    /** Curve the lines through their points rather than joining them straight. */
+    curved = true;
+    showLegend = true;
+    /** Printed down the y axis, and used as the chart's name when it has none. */
+    yAxisLabel;
+    /** The chart's accessible name. */
+    label;
+    /** The series, read from the light DOM. */
+    series = [];
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad() {
+        this.sync();
+    }
+    componentDidLoad() {
+        this.sync();
+    }
+    /** Re-reads the series, for a consumer who changed one through a property. */
+    async refresh() {
+        this.sync();
+    }
+    /**
+     * Direct children only: a nested chart owns its own series.
+     *
+     * Named `seriesElements`, not `children`: a component class's members land
+     * on the custom element itself, so a getter called `children` shadows
+     * `Element.children` and anything that walks it recurses for ever.
+     */
+    get seriesElements() {
+        return Array.from(this.el.children).filter((child) => child.tagName.toLowerCase() === 'pf-chart-series');
+    }
+    get rows() {
+        const raw = this.data;
+        if (Array.isArray(raw))
+            return raw;
+        try {
+            const parsed = JSON.parse(String(raw || '[]'));
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            // A malformed attribute is an empty chart, not a thrown render.
+            return [];
+        }
+    }
+    sync() {
+        const elements = this.seriesElements;
+        this.series = elements.map((element, index) => {
+            const node = element;
+            const color = chartSeriesColor(index, node.color ?? element.getAttribute('color') ?? undefined);
+            element.swatch = color;
+            return {
+                key: node.seriesKey ?? element.getAttribute('series-key') ?? '',
+                color,
+                dashed: node.dashed ?? element.hasAttribute('dashed'),
+            };
+        });
+    }
+    render() {
+        const rows = this.rows;
+        const series = this.series;
+        if (rows.length === 0 || series.length === 0) {
+            return (h(Host, null, h("div", { class: "empty", part: "empty" }, h("slot", { name: "empty" }, "No data")), h("ul", { class: "legend legend--hidden", part: "legend" }, h("slot", { onSlotchange: () => this.refresh() }))));
+        }
+        const valueAt = (row, key) => Number(row[key] ?? 0);
+        const highest = Math.max(0, ...series.flatMap((item) => rows.map((row) => valueAt(row, item.key))));
+        const ticks = niceAxisTicks(highest);
+        const maxTick = ticks[ticks.length - 1];
+        const labelStep = axisLabelStep(rows.length);
+        const floor = CHART_PADDING.top + CHART_PLOT.height;
+        return (h(Host, { style: {
+                // Lets the legend's start edge line up with the plot area.
+                '--pf-chart-plot-inset-left': `${(CHART_PADDING.left / CHART_VIEW.width) * 100}%`,
+            } }, h("svg", { class: "svg", part: "svg", viewBox: `0 0 ${CHART_VIEW.width} ${CHART_VIEW.height}`, role: "img", "aria-label": this.label ?? this.yAxisLabel ?? 'Line chart' }, ticks.map((tick) => {
+            const y = plotY(tick, maxTick);
+            return (h("g", null, h("line", { class: "grid", part: "grid", x1: CHART_PADDING.left, y1: y, x2: CHART_PADDING.left + CHART_PLOT.width, y2: y }), h("text", { class: "tick tick--y", part: "tick", x: CHART_PADDING.left - 8, y: y }, formatAxisTick(tick))));
+        }), rows.map((row, index) => index % labelStep === 0 ? (h("text", { class: "tick tick--x", part: "tick", x: plotX(index, rows.length), y: floor + 20 }, row.label)) : null), this.yAxisLabel && (h("text", { class: "axis-label", x: -(CHART_PADDING.top + CHART_PLOT.height / 2), y: 14, transform: "rotate(-90)" }, this.yAxisLabel)), series.map((item) => {
+            const points = rows.map((row, index) => ({
+                x: plotX(index, rows.length),
+                y: plotY(valueAt(row, item.key), maxTick),
+            }));
+            const line = this.curved ? smoothSeriesPath(points) : straightSeriesPath(points);
+            return (h("g", null, this.area && (h("path", { class: "area", part: "area", d: areaSeriesPath(line, points), fill: item.color, "fill-opacity": "0.12", stroke: "none" })), h("path", { class: "line", part: "line", d: line, fill: "none", stroke: item.color, "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-dasharray": item.dashed ? '6 4' : undefined }), points.map((point, index) => (h("circle", { class: "dot", part: "dot", cx: point.x, cy: point.y, r: "3.5", fill: item.color }, h("title", null, `${rows[index].label}: ${formatAxisTick(valueAt(rows[index], item.key))}`))))));
+        })), h("ul", { class: { legend: true, 'legend--hidden': !this.showLegend || series.length < 2 }, part: "legend" }, h("slot", { onSlotchange: () => this.refresh() }))));
+    }
+    static get is() { return "pf-line-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-line-chart.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-line-chart.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "data": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfChartRow[] | string",
+                    "resolved": "PfChartRow[] | string",
+                    "references": {
+                        "PfChartRow": {
+                            "location": "local",
+                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-line-chart/pf-line-chart.tsx",
+                            "id": "src/components/pf-line-chart/pf-line-chart.tsx::PfChartRow"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The rows to plot.\n\nAn array for a framework consumer, or JSON for plain HTML, because\nStencil coerces an attribute only for the primitive types it recognises."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "data",
+                "defaultValue": "[]"
+            },
+            "area": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fill under each line. Reflected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "area",
+                "defaultValue": "false"
+            },
+            "curved": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Curve the lines through their points rather than joining them straight."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "curved",
+                "defaultValue": "true"
+            },
+            "showLegend": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-legend",
+                "defaultValue": "true"
+            },
+            "yAxisLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Printed down the y axis, and used as the chart's name when it has none."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "y-axis-label"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The chart's accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "series": {}
+        };
+    }
+    static get methods() {
+        return {
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Re-reads the series, for a consumer who changed one through a property.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "data",
+                "methodName": "sync"
+            }];
+    }
+}
+//# sourceMappingURL=pf-line-chart.js.map

package/dist/collection/components/pf-line-chart/pf-line-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-line-chart.js","sourceRoot":"","sources":["../../../src/components/pf-line-chart/pf-line-chart.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  CHART_PADDING,\n  CHART_PLOT,\n  CHART_VIEW,\n  areaSeriesPath,\n  axisLabelStep,\n  chartSeriesColor,\n  formatAxisTick,\n  niceAxisTicks,\n  plotX,\n  plotY,\n  smoothSeriesPath,\n  straightSeriesPath,\n} from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\n/** One row of a chart's data: a label and a number per series. */\nexport type PfChartRow = { label: string } & Record<string, string | number>;\n\n/**\n * A line or area chart over `pf-chart-series` children.\n *\n * The split follows what the data is: the rows are bulk numbers and live in a\n * property, while the series are the part with names and colours and live in\n * the light DOM, where a consumer can loop over them and where the legend can\n * reach their labels.\n *\n * Every scale and path is core's, so this and the React `LineChart` draw the\n * same chart — the axis labels and the geometry have to come from the same\n * tick scale, or the gridlines say one thing and the line says another.\n *\n * @slot - the `pf-chart-series` children.\n * @slot empty - what to show when there is nothing to draw.\n * @part svg - the drawing.\n * @part grid - one gridline.\n * @part tick - one axis label.\n * @part line - one series' line.\n * @part area - one series' fill, on the area variant.\n * @part dot - one data point.\n * @part legend - the list the series are slotted into.\n * @part empty - the empty state's box.\n */\n@Component({\n  tag: 'pf-line-chart',\n  styleUrl: 'pf-line-chart.css',\n  shadow: true,\n})\nexport class PfLineChart {\n  @Element() el!: HTMLElement;\n\n  /**\n   * The rows to plot.\n   *\n   * An array for a framework consumer, or JSON for plain HTML, because\n   * Stencil coerces an attribute only for the primitive types it recognises.\n   */\n  @Prop() data: PfChartRow[] | string = [];\n\n  /** Fill under each line. Reflected. */\n  @Prop({ reflect: true }) area = false;\n\n  /** Curve the lines through their points rather than joining them straight. */\n  @Prop({ reflect: true }) curved = true;\n\n  @Prop({ reflect: true }) showLegend = true;\n\n  /** Printed down the y axis, and used as the chart's name when it has none. */\n  @Prop() yAxisLabel?: string;\n\n  /** The chart's accessible name. */\n  @Prop() label?: string;\n\n  /** The series, read from the light DOM. */\n  @State() series: { key: string; color: string; dashed: boolean }[] = [];\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  /** Re-reads the series, for a consumer who changed one through a property. */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /**\n   * Direct children only: a nested chart owns its own series.\n   *\n   * Named `seriesElements`, not `children`: a component class's members land\n   * on the custom element itself, so a getter called `children` shadows\n   * `Element.children` and anything that walks it recurses for ever.\n   */\n  private get seriesElements(): HTMLElement[] {\n    return Array.from(this.el.children).filter(\n      (child) => child.tagName.toLowerCase() === 'pf-chart-series',\n    ) as HTMLElement[];\n  }\n\n  private get rows(): PfChartRow[] {\n    const raw = this.data;\n    if (Array.isArray(raw)) return raw;\n\n    try {\n      const parsed = JSON.parse(String(raw || '[]'));\n      return Array.isArray(parsed) ? parsed : [];\n    } catch {\n      // A malformed attribute is an empty chart, not a thrown render.\n      return [];\n    }\n  }\n\n  @Watch('data')\n  sync() {\n    const elements = this.seriesElements;\n\n    this.series = elements.map((element, index) => {\n      const node = element as HTMLElement & {\n        seriesKey?: string;\n        color?: string;\n        dashed?: boolean;\n      };\n      const color = chartSeriesColor(\n        index,\n        node.color ?? element.getAttribute('color') ?? undefined,\n      );\n\n      (element as HTMLElement & { swatch: string }).swatch = color;\n\n      return {\n        key: node.seriesKey ?? element.getAttribute('series-key') ?? '',\n        color,\n        dashed: node.dashed ?? element.hasAttribute('dashed'),\n      };\n    });\n  }\n\n  render() {\n    const rows = this.rows;\n    const series = this.series;\n\n    if (rows.length === 0 || series.length === 0) {\n      return (\n        <Host>\n          <div class=\"empty\" part=\"empty\">\n            <slot name=\"empty\">No data</slot>\n          </div>\n          {/* The list stays in the tree, or `slotchange` never fires again. */}\n          <ul class=\"legend legend--hidden\" part=\"legend\">\n            <slot onSlotchange={() => this.refresh()} />\n          </ul>\n        </Host>\n      );\n    }\n\n    const valueAt = (row: PfChartRow, key: string) => Number(row[key] ?? 0);\n    const highest = Math.max(\n      0,\n      ...series.flatMap((item) => rows.map((row) => valueAt(row, item.key))),\n    );\n    const ticks = niceAxisTicks(highest);\n    const maxTick = ticks[ticks.length - 1];\n    const labelStep = axisLabelStep(rows.length);\n    const floor = CHART_PADDING.top + CHART_PLOT.height;\n\n    return (\n      <Host\n        style={{\n          // Lets the legend's start edge line up with the plot area.\n          '--pf-chart-plot-inset-left': `${(CHART_PADDING.left / CHART_VIEW.width) * 100}%`,\n        }}\n      >\n        <svg\n          class=\"svg\"\n          part=\"svg\"\n          viewBox={`0 0 ${CHART_VIEW.width} ${CHART_VIEW.height}`}\n          role=\"img\"\n          aria-label={this.label ?? this.yAxisLabel ?? 'Line chart'}\n        >\n          {ticks.map((tick) => {\n            const y = plotY(tick, maxTick);\n            return (\n              <g>\n                <line\n                  class=\"grid\"\n                  part=\"grid\"\n                  x1={CHART_PADDING.left}\n                  y1={y}\n                  x2={CHART_PADDING.left + CHART_PLOT.width}\n                  y2={y}\n                />\n                <text class=\"tick tick--y\" part=\"tick\" x={CHART_PADDING.left - 8} y={y}>\n                  {formatAxisTick(tick)}\n                </text>\n              </g>\n            );\n          })}\n\n          {rows.map((row, index) =>\n            index % labelStep === 0 ? (\n              <text class=\"tick tick--x\" part=\"tick\" x={plotX(index, rows.length)} y={floor + 20}>\n                {row.label}\n              </text>\n            ) : null,\n          )}\n\n          {this.yAxisLabel && (\n            <text\n              class=\"axis-label\"\n              x={-(CHART_PADDING.top + CHART_PLOT.height / 2)}\n              y={14}\n              transform=\"rotate(-90)\"\n            >\n              {this.yAxisLabel}\n            </text>\n          )}\n\n          {series.map((item) => {\n            const points = rows.map((row, index) => ({\n              x: plotX(index, rows.length),\n              y: plotY(valueAt(row, item.key), maxTick),\n            }));\n            const line = this.curved ? smoothSeriesPath(points) : straightSeriesPath(points);\n\n            return (\n              <g>\n                {this.area && (\n                  <path\n                    class=\"area\"\n                    part=\"area\"\n                    d={areaSeriesPath(line, points)}\n                    fill={item.color}\n                    fill-opacity=\"0.12\"\n                    stroke=\"none\"\n                  />\n                )}\n                <path\n                  class=\"line\"\n                  part=\"line\"\n                  d={line}\n                  fill=\"none\"\n                  stroke={item.color}\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-dasharray={item.dashed ? '6 4' : undefined}\n                />\n                {points.map((point, index) => (\n                  <circle\n                    class=\"dot\"\n                    part=\"dot\"\n                    cx={point.x}\n                    cy={point.y}\n                    r=\"3.5\"\n                    fill={item.color}\n                  >\n                    <title>{`${rows[index].label}: ${formatAxisTick(\n                      valueAt(rows[index], item.key),\n                    )}`}</title>\n                  </circle>\n                ))}\n              </g>\n            );\n          })}\n        </svg>\n\n        <ul\n          class={{ legend: true, 'legend--hidden': !this.showLegend || series.length < 2 }}\n          part=\"legend\"\n        >\n          <slot onSlotchange={() => this.refresh()} />\n        </ul>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-loading-dots/pf-loading-dots.css

@@ -0,0 +1,75 @@
+/* Its own copy: @keyframes do not cross a shadow boundary. */
+@keyframes pf-pulse-dots {
+  0%,
+  80%,
+  100% {
+    opacity: 0.35;
+    transform: scale(0.9);
+  }
+
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+:host {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.dot {
+  animation: pf-pulse-dots 1s ease-in-out infinite;
+  background: var(--pf-loading-accent);
+  border-radius: 50%;
+  display: inline-block;
+}
+
+/* The dots are the first three children; the hidden label follows them. */
+.dot:nth-child(2) {
+  animation-delay: 0.16s;
+}
+
+.dot:nth-child(3) {
+  animation-delay: 0.32s;
+}
+
+:host([size='sm']) .dot {
+  height: 6px;
+  width: 6px;
+}
+
+:host([size='md']) .dot {
+  height: 8px;
+  width: 8px;
+}
+
+:host([size='lg']) .dot {
+  height: 10px;
+  width: 10px;
+}
+
+.sr-only {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dot {
+    animation-duration: 0.01ms;
+    animation-iteration-count: 1;
+  }
+}

package/dist/collection/components/pf-loading-dots/pf-loading-dots.js

@@ -0,0 +1,79 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Three pulsing dots, for an indeterminate wait in a tight space.
+ *
+ * @part dot - each of the three dots.
+ * @part label - the visually hidden text the live region announces.
+ */
+export class PfLoadingDots {
+    /** Dot size. Reflected so the stylesheet can select on it. */
+    size = 'md';
+    /** Accessible name, announced by the live region. */
+    label = 'Loading';
+    render() {
+        return (h(Host, { key: 'fc64cab922fb015ac60edca82b120cfecf7e59ff', role: "status", "aria-label": this.label }, h("span", { key: 'd1b62c8ba624c0f721df65f194acefd8f883f025', class: "dot", part: "dot", "aria-hidden": "true" }), h("span", { key: 'd3b03fc4fb16bccb8dfdc64283072d41f382945b', class: "dot", part: "dot", "aria-hidden": "true" }), h("span", { key: '755ab236742ab9974834cea364c60d4fc671f40b', class: "dot", part: "dot", "aria-hidden": "true" }), h("span", { key: 'eecce31b0360283eecb8cc06e258835ee4f19e4a', class: "sr-only", part: "label" }, this.label)));
+    }
+    static get is() { return "pf-loading-dots"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-loading-dots.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-loading-dots.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfLoadingDotsSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "PfLoadingDotsSize": {
+                            "location": "local",
+                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-loading-dots/pf-loading-dots.tsx",
+                            "id": "src/components/pf-loading-dots/pf-loading-dots.tsx::PfLoadingDotsSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dot size. Reflected so the stylesheet can select on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name, announced by the live region."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Loading'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pf-loading-dots.js.map

package/dist/collection/components/pf-loading-dots/pf-loading-dots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-loading-dots.js","sourceRoot":"","sources":["../../../src/components/pf-loading-dots/pf-loading-dots.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD;;;;;GAKG;AAMH,MAAM,OAAO,aAAa;IACxB,8DAA8D;IACrC,IAAI,GAAsB,IAAI,CAAC;IAExD,qDAAqD;IAC7C,KAAK,GAAG,SAAS,CAAC;IAE1B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,gBAAa,IAAI,CAAC,KAAK;YACxC,6DAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,iBAAa,MAAM,GAAG;YAClD,6DAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,iBAAa,MAAM,GAAG;YAClD,6DAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,iBAAa,MAAM,GAAG;YAClD,6DAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,IAC/B,IAAI,CAAC,KAAK,CACN,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type PfLoadingDotsSize = 'sm' | 'md' | 'lg';\n\n/**\n * Three pulsing dots, for an indeterminate wait in a tight space.\n *\n * @part dot - each of the three dots.\n * @part label - the visually hidden text the live region announces.\n */\n@Component({\n  tag: 'pf-loading-dots',\n  styleUrl: 'pf-loading-dots.css',\n  shadow: true,\n})\nexport class PfLoadingDots {\n  /** Dot size. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) size: PfLoadingDotsSize = 'md';\n\n  /** Accessible name, announced by the live region. */\n  @Prop() label = 'Loading';\n\n  render() {\n    return (\n      <Host role=\"status\" aria-label={this.label}>\n        <span class=\"dot\" part=\"dot\" aria-hidden=\"true\" />\n        <span class=\"dot\" part=\"dot\" aria-hidden=\"true\" />\n        <span class=\"dot\" part=\"dot\" aria-hidden=\"true\" />\n        <span class=\"sr-only\" part=\"label\">\n          {this.label}\n        </span>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-loading-skeleton/pf-loading-skeleton.css

@@ -0,0 +1,54 @@
+/* Its own copy: @keyframes do not cross a shadow boundary. */
+@keyframes pf-skeleton-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+:host {
+  animation: pf-skeleton-shimmer 1.4s linear infinite;
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--pf-loading-bg-subtle) 92%, var(--pf-mix-base) 8%) 25%,
+    color-mix(in srgb, var(--pf-loading-border) 72%, var(--pf-mix-base) 28%) 37%,
+    color-mix(in srgb, var(--pf-loading-bg-subtle) 92%, var(--pf-mix-base) 8%) 63%
+  );
+  background-size: 200% 100%;
+  border-radius: var(--radius-sm);
+  display: inline-block;
+  height: var(--pf-skeleton-height, 16px);
+  max-width: 100%;
+  width: var(--pf-skeleton-width, 100%);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host([rounded]) {
+  border-radius: var(--radius-full);
+}
+
+.sr-only {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host {
+    animation-duration: 0.01ms;
+    animation-iteration-count: 1;
+  }
+}

package/dist/collection/components/pf-loading-skeleton/pf-loading-skeleton.js

@@ -0,0 +1,131 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A shimmering placeholder for content that has not arrived.
+ *
+ * @part label - the visually hidden text the live region announces.
+ */
+export class PfLoadingSkeleton {
+    /** Width, as a CSS length. A bare number is read as pixels. */
+    width = '100%';
+    /** Height, as a CSS length. A bare number is read as pixels. */
+    height = 16;
+    /** Use a pill radius instead of the default. Reflected for the stylesheet. */
+    rounded = false;
+    /** Accessible name, announced by the live region. */
+    label = 'Loading content';
+    /**
+     * The React component branches on `typeof width === 'number'`. An attribute
+     * is always a string, so `width="120"` would arrive as `"120"` and be used
+     * as an invalid bare length. Treating a numeric string as pixels keeps
+     * `width="120"` and `width={120}` meaning the same thing, while `width="50%"`
+     * and `width="4rem"` pass through untouched.
+     */
+    static toLength(value) {
+        if (typeof value === 'number')
+            return `${value}px`;
+        return /^-?\d+(\.\d+)?$/.test(value.trim()) ? `${value.trim()}px` : value;
+    }
+    render() {
+        return (h(Host, { key: 'f6eec1b4e1a78bb3fb748255f0a8d44e1c376dc0', role: "status", "aria-label": this.label, style: {
+                '--pf-skeleton-width': PfLoadingSkeleton.toLength(this.width),
+                '--pf-skeleton-height': PfLoadingSkeleton.toLength(this.height),
+            } }, h("span", { key: 'deb41107f434e94ae33feead768728756fc3fa87', class: "sr-only", part: "label" }, this.label)));
+    }
+    static get is() { return "pf-loading-skeleton"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-loading-skeleton.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-loading-skeleton.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "width": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width, as a CSS length. A bare number is read as pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'100%'"
+            },
+            "height": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height, as a CSS length. A bare number is read as pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "16"
+            },
+            "rounded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use a pill radius instead of the default. Reflected for the stylesheet."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "rounded",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name, announced by the live region."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Loading content'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pf-loading-skeleton.js.map