@affinda/wc 0.6.1 → 0.7.0

package/dist/collection/components/af-chart-legend/af-chart-legend.js

@@ -0,0 +1,332 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A standalone chart legend component.
+ *
+ * Can be used alongside any chart component or custom SVG charts.
+ * Supports interactive highlighting and toggle behavior.
+ *
+ * @slot - Optional custom content
+ *
+ * @example Horizontal legend
+ * ```html
+ * <af-chart-legend
+ *   items='[{"label":"Sales","color":"#c6d5d1"},{"label":"Costs","color":"#c0ab8d"}]'
+ *   direction="horizontal"
+ * ></af-chart-legend>
+ * ```
+ *
+ * @example Interactive legend with values
+ * ```html
+ * <af-chart-legend
+ *   items='[{"label":"Q1","value":"$12K"},{"label":"Q2","value":"$15K"}]'
+ *   interactive
+ * ></af-chart-legend>
+ * ```
+ */
+export class AfChartLegend {
+    constructor() {
+        /**
+         * Legend items as JSON string.
+         */
+        this.items = '[]';
+        /**
+         * Theme for colors.
+         */
+        this.theme = 'white';
+        /**
+         * Layout direction.
+         */
+        this.direction = 'horizontal';
+        /**
+         * Enable interactive hover/click behavior.
+         */
+        this.interactive = false;
+        /**
+         * Swatch shape.
+         */
+        this.swatchShape = 'square';
+        /**
+         * Alignment.
+         */
+        this.align = 'center';
+        this.parsedItems = [];
+        this.hoveredIndex = null;
+        this.activeIndices = new Set();
+        this.handleItemClick = (index) => {
+            if (!this.interactive)
+                return;
+            const item = this.parsedItems[index];
+            const newActive = new Set(this.activeIndices);
+            if (newActive.has(index)) {
+                // Don't allow deactivating if it's the last active item
+                if (newActive.size > 1) {
+                    newActive.delete(index);
+                }
+            }
+            else {
+                newActive.add(index);
+            }
+            this.activeIndices = newActive;
+            this.legendItemClick.emit({ index, item });
+        };
+        this.handleItemEnter = (index) => {
+            if (!this.interactive)
+                return;
+            this.hoveredIndex = index;
+            this.legendItemHover.emit({ index, item: this.parsedItems[index] });
+        };
+        this.handleItemLeave = () => {
+            if (!this.interactive)
+                return;
+            this.hoveredIndex = null;
+            this.legendItemHover.emit({ index: null, item: null });
+        };
+    }
+    parseItems() {
+        try {
+            const parsed = JSON.parse(this.items);
+            if (Array.isArray(parsed)) {
+                this.parsedItems = parsed;
+                // Initialize active state
+                this.activeIndices = new Set(this.parsedItems
+                    .map((item, i) => (item.active !== false ? i : -1))
+                    .filter((i) => i >= 0));
+            }
+            else {
+                this.parsedItems = [];
+            }
+        }
+        catch {
+            this.parsedItems = [];
+        }
+    }
+    componentWillLoad() {
+        this.parseItems();
+    }
+    render() {
+        const { parsedItems, direction, interactive, swatchShape, align, hoveredIndex, activeIndices } = this;
+        if (parsedItems.length === 0) {
+            return h(Host, { class: "chart-legend chart-legend--empty" });
+        }
+        return (h(Host, { class: {
+                'chart-legend': true,
+                [`chart-legend--${direction}`]: true,
+                [`chart-legend--align-${align}`]: true,
+                'chart-legend--interactive': interactive,
+            } }, h("ul", { class: "chart-legend__list", role: "list" }, parsedItems.map((item, i) => {
+            const isActive = activeIndices.has(i);
+            const isHovered = hoveredIndex === i;
+            return (h("li", { key: i, class: {
+                    'chart-legend__item': true,
+                    'chart-legend__item--active': isActive,
+                    'chart-legend__item--inactive': !isActive,
+                    'chart-legend__item--hovered': isHovered,
+                }, onClick: () => this.handleItemClick(i), onMouseEnter: () => this.handleItemEnter(i), onMouseLeave: this.handleItemLeave, role: interactive ? 'button' : 'listitem', tabIndex: interactive ? 0 : undefined, "aria-pressed": interactive ? isActive : undefined }, h("span", { class: {
+                    'chart-legend__swatch': true,
+                    [`chart-legend__swatch--${swatchShape}`]: true,
+                    [`chart-legend__swatch--${i}`]: !item.color,
+                }, style: item.color ? { backgroundColor: item.color } : {}, "aria-hidden": "true" }), h("span", { class: "chart-legend__label" }, item.label), item.value !== undefined && (h("span", { class: "chart-legend__value" }, item.value))));
+        })), h("slot", null)));
+    }
+    static get is() { return "af-chart-legend"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-chart-legend.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-chart-legend.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Legend items as JSON string."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "'[]'"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\" | \"white-ivory\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types.ts::Theme",
+                            "referenceLocation": "Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme for colors."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'white'"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout direction."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "'horizontal'"
+            },
+            "interactive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable interactive hover/click behavior."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "interactive",
+                "defaultValue": "false"
+            },
+            "swatchShape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'square' | 'circle' | 'line'",
+                    "resolved": "\"circle\" | \"line\" | \"square\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Swatch shape."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "swatch-shape",
+                "defaultValue": "'square'"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'end'",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alignment."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align",
+                "defaultValue": "'center'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "parsedItems": {},
+            "hoveredIndex": {},
+            "activeIndices": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "legendItemClick",
+                "name": "legendItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a legend item is clicked (interactive mode)."
+                },
+                "complexType": {
+                    "original": "{ index: number; item: LegendItem }",
+                    "resolved": "{ index: number; item: LegendItem; }",
+                    "references": {
+                        "LegendItem": {
+                            "location": "local",
+                            "path": "/home/runner/work/affinda-website-npm-publish/affinda-website-npm-publish/packages/wc/src/components/af-chart-legend/af-chart-legend.tsx",
+                            "id": "src/components/af-chart-legend/af-chart-legend.tsx::LegendItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "legendItemHover",
+                "name": "legendItemHover",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a legend item is hovered (interactive mode)."
+                },
+                "complexType": {
+                    "original": "{ index: number | null; item: LegendItem | null }",
+                    "resolved": "{ index: number | null; item: LegendItem | null; }",
+                    "references": {
+                        "LegendItem": {
+                            "location": "local",
+                            "path": "/home/runner/work/affinda-website-npm-publish/affinda-website-npm-publish/packages/wc/src/components/af-chart-legend/af-chart-legend.tsx",
+                            "id": "src/components/af-chart-legend/af-chart-legend.tsx::LegendItem"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "parseItems"
+            }];
+    }
+}

package/dist/collection/components/af-chart-section/af-chart-section.css

@@ -0,0 +1,113 @@
+:host {
+  display: block;
+  width: 100%;
+  background-color: var(--af-background-base, #ffffff);
+}
+
+/* ==========================================================================
+   Padding Variants
+   ========================================================================== */
+
+.padding-none {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.padding-tight {
+  padding-top: var(--space-6, 24px);
+  padding-bottom: var(--space-6, 24px);
+}
+
+.padding-default {
+  padding-top: var(--space-8, 32px);
+  padding-bottom: var(--space-8, 32px);
+}
+
+.padding-loose {
+  padding-top: 48px;
+  padding-bottom: 48px;
+}
+
+/* ==========================================================================
+   Container
+   ========================================================================== */
+
+.chart-section__container {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 var(--space-6, 24px);
+}
+
+/* ==========================================================================
+   Chart Container
+   ========================================================================== */
+
+.chart-section__chart {
+  position: relative;
+  width: 100%;
+  border-radius: var(--radius-md, 12px);
+  overflow: visible;
+  padding: var(--space-4, 16px);
+  box-sizing: border-box;
+}
+
+/* Ensure canvas fills the container */
+.chart-section__chart canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* ==========================================================================
+   Caption
+   ========================================================================== */
+
+.chart-section__caption {
+  margin-top: var(--space-3, 12px);
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--af-typography-body-subtle, #60767b);
+  text-align: center;
+}
+
+/* ==========================================================================
+   Mobile Responsive
+   ========================================================================== */
+
+@media (max-width: 768px) {
+  .padding-tight {
+    padding-top: var(--space-4, 16px);
+    padding-bottom: var(--space-4, 16px);
+  }
+
+  .padding-default {
+    padding-top: var(--space-6, 24px);
+    padding-bottom: var(--space-6, 24px);
+  }
+
+  .padding-loose {
+    padding-top: var(--space-8, 32px);
+    padding-bottom: var(--space-8, 32px);
+  }
+
+  .chart-section__container {
+    padding: 0 var(--space-3, 12px);
+  }
+
+  .chart-section__chart {
+    padding: var(--space-2, 8px);
+    /* Adjust aspect ratio for mobile */
+    aspect-ratio: 4/3 !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .chart-section__chart {
+    border-radius: var(--radius-sm, 6px);
+  }
+
+  .chart-section__caption {
+    font-size: 13px;
+  }
+}

package/dist/collection/components/af-chart-section/af-chart-section.js

@@ -0,0 +1,150 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A themed section container optimized for Chart.js or similar charting libraries.
+ * Extends af-section visually with chart-specific features like aspect ratio
+ * and caption support.
+ *
+ * Use with the `getChartConfig(theme)` helper from `@affinda/tokens` to apply
+ * brand-consistent colors to Chart.js charts.
+ *
+ * @slot - Chart canvas or container element
+ *
+ * @example
+ * ```html
+ * <af-chart-section theme="inkwell" caption="Monthly Revenue">
+ *   <canvas id="revenue-chart"></canvas>
+ * </af-chart-section>
+ * ```
+ */
+export class AfChartSection {
+    constructor() {
+        /**
+         * Theme for the section background and chart color tokens.
+         */
+        this.theme = 'white';
+        /**
+         * Vertical padding variant.
+         */
+        this.padding = 'default';
+        /**
+         * Aspect ratio for the chart container (CSS aspect-ratio syntax).
+         */
+        this.aspectRatio = '16/9';
+    }
+    render() {
+        return (h(Host, { key: '55d1a0976642afc36d1b58e455375f47de397d33', class: {
+                'chart-section': true,
+                [`theme-${this.theme}`]: true,
+                [`padding-${this.padding}`]: true,
+            } }, h("div", { key: '3d29973f7e7f92bccd3c20fab220aa4ec8fe908b', class: "chart-section__container" }, h("div", { key: '5a05c3246cca7ff13d448480fd25057f78db25e7', class: "chart-section__chart", style: { aspectRatio: this.aspectRatio } }, h("slot", { key: '46646fb937db0080cf05a3b4ce3234671aed0287' })), this.caption && (h("div", { key: 'c93505c8a1740f4e8c4403f898d10157dd33707e', class: "chart-section__caption" }, this.caption)))));
+    }
+    static get is() { return "af-chart-section"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-chart-section.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-chart-section.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\" | \"white-ivory\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types.ts::Theme",
+                            "referenceLocation": "Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme for the section background and chart color tokens."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'white'"
+            },
+            "padding": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Padding",
+                    "resolved": "\"default\" | \"loose\" | \"none\" | \"tight\"",
+                    "references": {
+                        "Padding": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types.ts::Padding",
+                            "referenceLocation": "Padding"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Vertical padding variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding",
+                "defaultValue": "'default'"
+            },
+            "aspectRatio": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aspect ratio for the chart container (CSS aspect-ratio syntax)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aspect-ratio",
+                "defaultValue": "'16/9'"
+            },
+            "caption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional caption text displayed below the chart."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "caption"
+            }
+        };
+    }
+}