@redvars/peacock 3.5.1 → 3.6.1

package/dist/canvas.js

@@ -0,0 +1,361 @@
+import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, A, w, b } from './IndividualComponent-DUINtMGK.js';
+import { n } from './property-1psGvXOq.js';
+import { e } from './class-map-YU7g0o3B.js';
+import './directive-ZPhl09Yt.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+  --canvas-background: var(--color-surface-container-low);
+  --canvas-dot-color: var(--color-outline-variant);
+  --canvas-line-color: var(--color-on-surface);
+  --canvas-hover-color: var(--color-primary);
+  --canvas-arrow-color: var(--color-on-surface);
+}
+
+.canvas-wrapper {
+  background: var(--canvas-background);
+  border-radius: var(--shape-corner-medium);
+}
+
+#canvas-background circle {
+  fill: var(--canvas-dot-color);
+}
+
+#endarrow polyline {
+  fill: none;
+  stroke: var(--canvas-arrow-color);
+  vector-effect: non-scaling-stroke;
+  stroke-width: 2;
+}
+
+.line.no-color {
+  stroke: var(--canvas-line-color);
+}
+.line.variant-dashed {
+  stroke-dasharray: 6 6;
+}
+.line.variant-animated-dashed {
+  animation: canvas-dash-flow 600ms linear infinite;
+}
+
+.clickable {
+  cursor: pointer;
+}
+.clickable:hover .line {
+  stroke: var(--canvas-hover-color);
+}
+
+.line.clickable:hover {
+  stroke: var(--canvas-hover-color);
+}
+
+@keyframes canvas-dash-flow {
+  to {
+    stroke-dashoffset: -12;
+  }
+}`;
+
+var Canvas_1;
+/**
+ * @label Canvas
+ * @tag wc-canvas
+ * @rawTag canvas
+ * @summary A Material 3 inspired SVG canvas for drawing shapes, lines, and connectors on a dotted grid.
+ *
+ * @cssprop --canvas-background - Background color for the canvas wrapper. Defaults to surface-container-low.
+ * @cssprop --canvas-dot-color - Color of the background grid dots. Defaults to outline-variant.
+ * @cssprop --canvas-line-color - Default stroke color for lines and connectors. Defaults to on-surface.
+ * @cssprop --canvas-hover-color - Stroke color on hover for clickable shapes. Defaults to primary.
+ * @cssprop --canvas-arrow-color - Stroke color for arrow markers. Defaults to on-surface.
+ *
+ * @example
+ * ```html
+ * <wc-canvas id="my-canvas"></wc-canvas>
+ * <script>
+ *   document.querySelector('#my-canvas').shapes = [
+ *     { type: 'circle', x: 0, y: 0, radius: 0.25, color: 'red' },
+ *   ];
+ * </script>
+ * ```
+ */
+let Canvas = Canvas_1 = class Canvas extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * Array of shape objects to render on the canvas.
+         */
+        this.shapes = [];
+        /**
+         * Padding around the computed viewbox (in grid units).
+         */
+        this.padding = 1;
+        /**
+         * Zoom multiplier for the canvas dimensions.
+         */
+        this.zoom = 1;
+        this.unitSize = 1;
+        this.gap = this.unitSize * 10;
+    }
+    static getNextPoint(point, direction, length) {
+        if (direction === 'down')
+            return { x: point.x, y: point.y + length };
+        if (direction === 'up')
+            return { x: point.x, y: point.y - length };
+        if (direction === 'left')
+            return { x: point.x - length, y: point.y };
+        if (direction === 'right')
+            return { x: point.x + length, y: point.y };
+        return { x: point.x, y: point.y };
+    }
+    static updateComputationArea(point, area) {
+        const nextArea = { ...area };
+        if (point.x > nextArea.width)
+            nextArea.width = point.x;
+        else if (point.x < nextArea.x)
+            nextArea.x = point.x;
+        if (point.y > nextArea.height)
+            nextArea.height = point.y;
+        else if (point.y < nextArea.y)
+            nextArea.y = point.y;
+        return nextArea;
+    }
+    static getStrokeVariantClasses(variant) {
+        return {
+            line: true,
+            'no-color': false,
+            'variant-dashed': variant === 'dashed' || variant === 'animated-dashed',
+            'variant-animated-dashed': variant === 'animated-dashed',
+        };
+    }
+    computeShapes(initialBounds) {
+        const dotRadius = this.unitSize;
+        let computedViewbox = { ...initialBounds };
+        const shapes = this.shapes.map(shape => {
+            switch (shape.type) {
+                case 'circle': {
+                    const r = shape.radius || 1;
+                    const cx = shape.x || 0;
+                    const cy = shape.y || 0;
+                    if (cx + Math.ceil(r) > computedViewbox.width)
+                        computedViewbox.width = cx + Math.ceil(r);
+                    if (cx - Math.ceil(r) < computedViewbox.x)
+                        computedViewbox.x = cx - Math.ceil(r);
+                    if (cy + Math.ceil(r) > computedViewbox.height)
+                        computedViewbox.height = cy + Math.ceil(r);
+                    if (cy - Math.ceil(r) < computedViewbox.y)
+                        computedViewbox.y = cy - Math.ceil(r);
+                    return w `<circle
+            cx=${cx * this.gap + dotRadius}
+            cy=${cy * this.gap + dotRadius}
+            r=${r * this.gap}
+            fill=${shape.color || 'var(--canvas-line-color, var(--color-on-surface))'}
+          />`;
+                }
+                case 'rect': {
+                    const w$1 = shape.width || 1;
+                    const h = shape.height || 1;
+                    const rx = shape.x || 0;
+                    const ry = shape.y || 0;
+                    if (rx + Math.ceil(w$1) > computedViewbox.width)
+                        computedViewbox.width = rx + Math.ceil(w$1);
+                    if (rx - Math.ceil(w$1) < computedViewbox.x)
+                        computedViewbox.x = rx - Math.ceil(w$1);
+                    if (ry + Math.ceil(h) > computedViewbox.height)
+                        computedViewbox.height = ry + Math.ceil(h);
+                    if (ry - Math.ceil(h) < computedViewbox.y)
+                        computedViewbox.y = ry - Math.ceil(h);
+                    return w `<rect
+            x=${rx * this.gap + dotRadius}
+            y=${ry * this.gap}
+            width=${w$1 * this.gap + dotRadius}
+            height=${h * this.gap + dotRadius}
+            fill=${shape.color || 'var(--canvas-line-color, var(--color-on-surface))'}
+          />`;
+                }
+                case 'line': {
+                    const start = shape.start || { x: 0, y: 0 };
+                    const end = shape.end || { x: 0, y: 0 };
+                    const pathString = `M${start.x * this.gap + dotRadius} ${start.y * this.gap + dotRadius} L${end.x * this.gap + dotRadius} ${end.y * this.gap + dotRadius}`;
+                    const strokeColor = shape.color ||
+                        'var(--canvas-line-color, var(--color-on-surface))';
+                    return w `<path
+            class=${e({
+                        ...Canvas_1.getStrokeVariantClasses(shape.variant),
+                        clickable: !!shape.clickable,
+                        'no-color': !shape.color,
+                    })}
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke=${strokeColor}
+            marker-end=${shape.showArrow ? 'url(#endarrow)' : ''}
+            d=${pathString}
+            stroke-dasharray=${shape.variant === 'dashed' || shape.variant === 'animated-dashed' ? '6,6' : A}
+            fill="none"
+          />`;
+                }
+                case 'connector': {
+                    const start = shape.start || { x: 0, y: 0 };
+                    let pathString = `M${start.x * this.gap + dotRadius} ${start.y * this.gap + dotRadius}`;
+                    let current = { ...start };
+                    computedViewbox = Canvas_1.updateComputationArea(current, computedViewbox);
+                    const pathSegments = shape.path || [];
+                    for (let i = 0; i < pathSegments.length; i += 1) {
+                        const path = pathSegments[i];
+                        if (i === 0) {
+                            const point = Canvas_1.getNextPoint(current, path.direction, 1);
+                            pathString += ` L${point.x * this.gap + dotRadius} ${point.y * this.gap + dotRadius}`;
+                            current = { ...point };
+                            computedViewbox = Canvas_1.updateComputationArea(current, computedViewbox);
+                        }
+                        const point = Canvas_1.getNextPoint(current, path.direction, path.length - 2);
+                        pathString += ` L${point.x * this.gap + dotRadius} ${point.y * this.gap + dotRadius}`;
+                        current = { ...point };
+                        computedViewbox = Canvas_1.updateComputationArea(current, computedViewbox);
+                        if (i === pathSegments.length - 1) {
+                            const endPoint = Canvas_1.getNextPoint(current, path.direction, 1);
+                            pathString += ` L${endPoint.x * this.gap + dotRadius} ${endPoint.y * this.gap + dotRadius}`;
+                            current = { ...endPoint };
+                            computedViewbox = Canvas_1.updateComputationArea(current, computedViewbox);
+                        }
+                        else {
+                            const nextPath = pathSegments[i + 1];
+                            const midPoint = Canvas_1.getNextPoint(current, path.direction, 1);
+                            const nextPoint = Canvas_1.getNextPoint(midPoint, nextPath.direction, 1);
+                            pathString += ` Q ${midPoint.x * this.gap + dotRadius} ${midPoint.y * this.gap + dotRadius} ${nextPoint.x * this.gap + dotRadius} ${nextPoint.y * this.gap + dotRadius}`;
+                            current = { ...nextPoint };
+                            computedViewbox = Canvas_1.updateComputationArea(current, computedViewbox);
+                        }
+                    }
+                    const strokeColor = shape.color ||
+                        'var(--canvas-line-color, var(--color-on-surface))';
+                    return w `<g class=${e({ clickable: !!shape.clickable })}>
+            <path
+              class=${e({
+                        ...Canvas_1.getStrokeVariantClasses(shape.variant),
+                        'no-color': !shape.color,
+                    })}
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke=${strokeColor}
+              marker-end=${shape.showArrow ? 'url(#endarrow)' : ''}
+              d=${pathString}
+              stroke-dasharray=${shape.variant === 'dashed' || shape.variant === 'animated-dashed' ? '6,6' : A}
+              fill="none"
+            />
+            <path
+              stroke-width="10"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke="transparent"
+              d=${pathString}
+              fill="none"
+            />
+          </g>`;
+                }
+                default:
+                    return A;
+            }
+        });
+        // Padding
+        computedViewbox.x -= this.padding;
+        computedViewbox.y -= this.padding;
+        computedViewbox.width += this.padding;
+        computedViewbox.height += this.padding;
+        computedViewbox.width -= computedViewbox.x;
+        computedViewbox.height -= computedViewbox.y;
+        return { shapes, computedViewbox };
+    }
+    render() {
+        const dotRadius = this.unitSize;
+        let computedViewBox = { width: 0, height: 0, x: 0, y: 0 };
+        const { shapes, computedViewbox } = this.computeShapes(computedViewBox);
+        computedViewBox = computedViewbox;
+        if (this.viewbox) {
+            const viewBox = this.viewbox.split(' ');
+            computedViewBox = {
+                x: parseInt(viewBox[0], 10),
+                y: parseInt(viewBox[1], 10),
+                width: parseInt(viewBox[2], 10),
+                height: parseInt(viewBox[3], 10),
+            };
+        }
+        const wrapperWidth = (computedViewBox.width * this.gap + 2) * dotRadius * this.zoom;
+        const wrapperHeight = (computedViewBox.height * this.gap + 2) * dotRadius * this.zoom;
+        const svgViewBox = `${computedViewBox.x * this.gap} ${computedViewBox.y * this.gap} ${computedViewBox.width * this.gap + 2 * dotRadius} ${computedViewBox.height * this.gap + 2 * dotRadius}`;
+        return b `
+      <div
+        class="canvas-wrapper"
+        style="width: ${wrapperWidth}px; height: ${wrapperHeight}px;"
+      >
+        <svg
+          class="canvas"
+          height="100%"
+          width="100%"
+          viewBox=${svgViewBox}
+        >
+          <defs>
+            <pattern
+              id="canvas-background"
+              patternUnits="userSpaceOnUse"
+              width=${this.gap}
+              height=${this.gap}
+            >
+              <circle cx="1" cy="1" r=${dotRadius} />
+            </pattern>
+
+            <marker
+              id="endarrow"
+              markerWidth="15"
+              markerHeight="22.5"
+              refX="9"
+              refY="15"
+              markerUnits="userSpaceOnUse"
+              orient="auto"
+            >
+              <polyline points="0 22.5, 7.5 15, 0 7.5"></polyline>
+            </marker>
+          </defs>
+
+          <rect
+            x=${computedViewBox.x * this.gap}
+            y=${computedViewBox.y * this.gap}
+            width="100%"
+            height="100%"
+            fill="url(#canvas-background)"
+          />
+
+          ${shapes}
+        </svg>
+      </div>
+    `;
+    }
+};
+Canvas.styles = [css_248z];
+__decorate([
+    n({ type: Array })
+], Canvas.prototype, "shapes", void 0);
+__decorate([
+    n({ type: Number, reflect: true })
+], Canvas.prototype, "padding", void 0);
+__decorate([
+    n({ type: Number, reflect: true })
+], Canvas.prototype, "zoom", void 0);
+__decorate([
+    n({ type: String })
+], Canvas.prototype, "viewbox", void 0);
+Canvas = Canvas_1 = __decorate([
+    IndividualComponent
+], Canvas);
+
+export { Canvas };
+//# sourceMappingURL=canvas.js.map

package/dist/canvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.js","sources":["../../src/canvas/canvas.ts"],"sourcesContent":["import { html, LitElement, svg, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './canvas.scss';\n\nexport type CanvasDirection = 'up' | 'down' | 'left' | 'right';\n\nexport type CanvasStrokeVariant = 'solid' | 'dashed' | 'animated-dashed';\n\nexport interface CanvasPoint {\n  x: number;\n  y: number;\n}\n\nexport interface CanvasPathSegment {\n  direction: CanvasDirection;\n  length: number;\n}\n\ninterface BaseCanvasShape {\n  color?: string;\n}\n\ninterface BaseCanvasStrokeShape extends BaseCanvasShape {\n  variant?: CanvasStrokeVariant;\n  showArrow?: boolean;\n  clickable?: boolean;\n}\n\nexport interface CanvasCircleShape extends BaseCanvasShape {\n  type: 'circle';\n  x?: number;\n  y?: number;\n  radius?: number;\n}\n\nexport interface CanvasRectShape extends BaseCanvasShape {\n  type: 'rect';\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n}\n\nexport interface CanvasLineShape extends BaseCanvasStrokeShape {\n  type: 'line';\n  start?: CanvasPoint;\n  end?: CanvasPoint;\n}\n\nexport interface CanvasConnectorShape extends BaseCanvasStrokeShape {\n  type: 'connector';\n  start?: CanvasPoint;\n  path?: CanvasPathSegment[];\n}\n\nexport type CanvasShape =\n  | CanvasCircleShape\n  | CanvasRectShape\n  | CanvasLineShape\n  | CanvasConnectorShape;\n\ninterface CanvasBounds {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\n/**\n * @label Canvas\n * @tag wc-canvas\n * @rawTag canvas\n * @summary A Material 3 inspired SVG canvas for drawing shapes, lines, and connectors on a dotted grid.\n *\n * @cssprop --canvas-background - Background color for the canvas wrapper. Defaults to surface-container-low.\n * @cssprop --canvas-dot-color - Color of the background grid dots. Defaults to outline-variant.\n * @cssprop --canvas-line-color - Default stroke color for lines and connectors. Defaults to on-surface.\n * @cssprop --canvas-hover-color - Stroke color on hover for clickable shapes. Defaults to primary.\n * @cssprop --canvas-arrow-color - Stroke color for arrow markers. Defaults to on-surface.\n *\n * @example\n * ```html\n * <wc-canvas id=\"my-canvas\"></wc-canvas>\n * <script>\n *   document.querySelector('#my-canvas').shapes = [\n *     { type: 'circle', x: 0, y: 0, radius: 0.25, color: 'red' },\n *   ];\n * </script>\n * ```\n */\n@IndividualComponent\nexport class Canvas extends LitElement {\n  static styles = [styles];\n\n  /**\n   * Array of shape objects to render on the canvas.\n   */\n  @property({ type: Array })\n  shapes: CanvasShape[] = [];\n\n  /**\n   * Padding around the computed viewbox (in grid units).\n   */\n  @property({ type: Number, reflect: true })\n  padding: number = 1;\n\n  /**\n   * Zoom multiplier for the canvas dimensions.\n   */\n  @property({ type: Number, reflect: true })\n  zoom: number = 1;\n\n  /**\n   * Optional viewbox override string (e.g. \"0 0 100 100\").\n   */\n  @property({ type: String })\n  viewbox?: string;\n\n  private unitSize: number = 1;\n\n  private gap: number = this.unitSize * 10;\n\n  private static getNextPoint(\n    point: CanvasPoint,\n    direction: CanvasDirection,\n    length: number,\n  ): CanvasPoint {\n    if (direction === 'down') return { x: point.x, y: point.y + length };\n    if (direction === 'up') return { x: point.x, y: point.y - length };\n    if (direction === 'left') return { x: point.x - length, y: point.y };\n    if (direction === 'right') return { x: point.x + length, y: point.y };\n    return { x: point.x, y: point.y };\n  }\n\n  private static updateComputationArea(\n    point: CanvasPoint,\n    area: CanvasBounds,\n  ): CanvasBounds {\n    const nextArea = { ...area };\n    if (point.x > nextArea.width) nextArea.width = point.x;\n    else if (point.x < nextArea.x) nextArea.x = point.x;\n    if (point.y > nextArea.height) nextArea.height = point.y;\n    else if (point.y < nextArea.y) nextArea.y = point.y;\n    return nextArea;\n  }\n\n  private static getStrokeVariantClasses(variant?: CanvasStrokeVariant) {\n    return {\n      line: true,\n      'no-color': false,\n      'variant-dashed': variant === 'dashed' || variant === 'animated-dashed',\n      'variant-animated-dashed': variant === 'animated-dashed',\n    };\n  }\n\n  private computeShapes(initialBounds: CanvasBounds) {\n    const dotRadius = this.unitSize;\n    let computedViewbox = { ...initialBounds };\n\n    const shapes = this.shapes.map(shape => {\n      switch (shape.type) {\n        case 'circle': {\n          const r = shape.radius || 1;\n          const cx = shape.x || 0;\n          const cy = shape.y || 0;\n          if (cx + Math.ceil(r) > computedViewbox.width)\n            computedViewbox.width = cx + Math.ceil(r);\n          if (cx - Math.ceil(r) < computedViewbox.x)\n            computedViewbox.x = cx - Math.ceil(r);\n          if (cy + Math.ceil(r) > computedViewbox.height)\n            computedViewbox.height = cy + Math.ceil(r);\n          if (cy - Math.ceil(r) < computedViewbox.y)\n            computedViewbox.y = cy - Math.ceil(r);\n\n          return svg`<circle\n            cx=${cx * this.gap + dotRadius}\n            cy=${cy * this.gap + dotRadius}\n            r=${r * this.gap}\n            fill=${shape.color || 'var(--canvas-line-color, var(--color-on-surface))'}\n          />`;\n        }\n        case 'rect': {\n          const w = shape.width || 1;\n          const h = shape.height || 1;\n          const rx = shape.x || 0;\n          const ry = shape.y || 0;\n          if (rx + Math.ceil(w) > computedViewbox.width)\n            computedViewbox.width = rx + Math.ceil(w);\n          if (rx - Math.ceil(w) < computedViewbox.x)\n            computedViewbox.x = rx - Math.ceil(w);\n          if (ry + Math.ceil(h) > computedViewbox.height)\n            computedViewbox.height = ry + Math.ceil(h);\n          if (ry - Math.ceil(h) < computedViewbox.y)\n            computedViewbox.y = ry - Math.ceil(h);\n\n          return svg`<rect\n            x=${rx * this.gap + dotRadius}\n            y=${ry * this.gap}\n            width=${w * this.gap + dotRadius}\n            height=${h * this.gap + dotRadius}\n            fill=${shape.color || 'var(--canvas-line-color, var(--color-on-surface))'}\n          />`;\n        }\n        case 'line': {\n          const start = shape.start || { x: 0, y: 0 };\n          const end = shape.end || { x: 0, y: 0 };\n          const pathString = `M${start.x * this.gap + dotRadius} ${start.y * this.gap + dotRadius} L${end.x * this.gap + dotRadius} ${end.y * this.gap + dotRadius}`;\n          const strokeColor =\n            shape.color ||\n            'var(--canvas-line-color, var(--color-on-surface))';\n\n          return svg`<path\n            class=${classMap({\n              ...Canvas.getStrokeVariantClasses(shape.variant),\n              clickable: !!shape.clickable,\n              'no-color': !shape.color,\n            })}\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke=${strokeColor}\n            marker-end=${shape.showArrow ? 'url(#endarrow)' : ''}\n            d=${pathString}\n            stroke-dasharray=${shape.variant === 'dashed' || shape.variant === 'animated-dashed' ? '6,6' : nothing}\n            fill=\"none\"\n          />`;\n        }\n        case 'connector': {\n          const start = shape.start || { x: 0, y: 0 };\n          let pathString = `M${start.x * this.gap + dotRadius} ${start.y * this.gap + dotRadius}`;\n          let current = { ...start };\n          computedViewbox = Canvas.updateComputationArea(current, computedViewbox);\n\n          const pathSegments = shape.path || [];\n          for (let i = 0; i < pathSegments.length; i += 1) {\n            const path = pathSegments[i];\n\n            if (i === 0) {\n              const point = Canvas.getNextPoint(current, path.direction, 1);\n              pathString += ` L${point.x * this.gap + dotRadius} ${point.y * this.gap + dotRadius}`;\n              current = { ...point };\n              computedViewbox = Canvas.updateComputationArea(current, computedViewbox);\n            }\n\n            const point = Canvas.getNextPoint(\n              current,\n              path.direction,\n              path.length - 2,\n            );\n            pathString += ` L${point.x * this.gap + dotRadius} ${point.y * this.gap + dotRadius}`;\n            current = { ...point };\n            computedViewbox = Canvas.updateComputationArea(current, computedViewbox);\n\n            if (i === pathSegments.length - 1) {\n              const endPoint = Canvas.getNextPoint(current, path.direction, 1);\n              pathString += ` L${endPoint.x * this.gap + dotRadius} ${endPoint.y * this.gap + dotRadius}`;\n              current = { ...endPoint };\n              computedViewbox = Canvas.updateComputationArea(current, computedViewbox);\n            } else {\n              const nextPath = pathSegments[i + 1];\n              const midPoint = Canvas.getNextPoint(current, path.direction, 1);\n              const nextPoint = Canvas.getNextPoint(\n                midPoint,\n                nextPath.direction,\n                1,\n              );\n              pathString += ` Q ${midPoint.x * this.gap + dotRadius} ${midPoint.y * this.gap + dotRadius} ${nextPoint.x * this.gap + dotRadius} ${nextPoint.y * this.gap + dotRadius}`;\n              current = { ...nextPoint };\n              computedViewbox = Canvas.updateComputationArea(current, computedViewbox);\n            }\n          }\n\n          const strokeColor =\n            shape.color ||\n            'var(--canvas-line-color, var(--color-on-surface))';\n\n          return svg`<g class=${classMap({ clickable: !!shape.clickable })}>\n            <path\n              class=${classMap({\n                ...Canvas.getStrokeVariantClasses(shape.variant),\n                'no-color': !shape.color,\n              })}\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke=${strokeColor}\n              marker-end=${shape.showArrow ? 'url(#endarrow)' : ''}\n              d=${pathString}\n              stroke-dasharray=${shape.variant === 'dashed' || shape.variant === 'animated-dashed' ? '6,6' : nothing}\n              fill=\"none\"\n            />\n            <path\n              stroke-width=\"10\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke=\"transparent\"\n              d=${pathString}\n              fill=\"none\"\n            />\n          </g>`;\n        }\n        default:\n          return nothing;\n      }\n    });\n\n    // Padding\n    computedViewbox.x -= this.padding;\n    computedViewbox.y -= this.padding;\n    computedViewbox.width += this.padding;\n    computedViewbox.height += this.padding;\n    computedViewbox.width -= computedViewbox.x;\n    computedViewbox.height -= computedViewbox.y;\n\n    return { shapes, computedViewbox };\n  }\n\n  protected render() {\n    const dotRadius = this.unitSize;\n    let computedViewBox = { width: 0, height: 0, x: 0, y: 0 };\n\n    const { shapes, computedViewbox } = this.computeShapes(computedViewBox);\n    computedViewBox = computedViewbox;\n\n    if (this.viewbox) {\n      const viewBox = this.viewbox.split(' ');\n      computedViewBox = {\n        x: parseInt(viewBox[0], 10),\n        y: parseInt(viewBox[1], 10),\n        width: parseInt(viewBox[2], 10),\n        height: parseInt(viewBox[3], 10),\n      };\n    }\n\n    const wrapperWidth =\n      (computedViewBox.width * this.gap + 2) * dotRadius * this.zoom;\n    const wrapperHeight =\n      (computedViewBox.height * this.gap + 2) * dotRadius * this.zoom;\n\n    const svgViewBox = `${computedViewBox.x * this.gap} ${computedViewBox.y * this.gap} ${computedViewBox.width * this.gap + 2 * dotRadius} ${computedViewBox.height * this.gap + 2 * dotRadius}`;\n\n    return html`\n      <div\n        class=\"canvas-wrapper\"\n        style=\"width: ${wrapperWidth}px; height: ${wrapperHeight}px;\"\n      >\n        <svg\n          class=\"canvas\"\n          height=\"100%\"\n          width=\"100%\"\n          viewBox=${svgViewBox}\n        >\n          <defs>\n            <pattern\n              id=\"canvas-background\"\n              patternUnits=\"userSpaceOnUse\"\n              width=${this.gap}\n              height=${this.gap}\n            >\n              <circle cx=\"1\" cy=\"1\" r=${dotRadius} />\n            </pattern>\n\n            <marker\n              id=\"endarrow\"\n              markerWidth=\"15\"\n              markerHeight=\"22.5\"\n              refX=\"9\"\n              refY=\"15\"\n              markerUnits=\"userSpaceOnUse\"\n              orient=\"auto\"\n            >\n              <polyline points=\"0 22.5, 7.5 15, 0 7.5\"></polyline>\n            </marker>\n          </defs>\n\n          <rect\n            x=${computedViewBox.x * this.gap}\n            y=${computedViewBox.y * this.gap}\n            width=\"100%\"\n            height=\"100%\"\n            fill=\"url(#canvas-background)\"\n          />\n\n          ${shapes}\n        </svg>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","svg","w","classMap","nothing","html","styles","property"],"mappings":"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"}

package/dist/cb-compound-expression.js

@@ -0,0 +1,125 @@
+import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, A, b } from './IndividualComponent-DUINtMGK.js';
+import { n } from './property-1psGvXOq.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+}
+
+.compound-expression {
+  display: flex;
+  padding-top: var(--spacing-200);
+}
+.compound-expression .field-name-container {
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--spacing-100);
+  padding-right: var(--spacing-200);
+}
+.compound-expression .field-name-container .field-label {
+  font-family: var(--typography-label-medium-font-family);
+  font-size: var(--typography-label-medium-font-size);
+  font-weight: var(--typography-label-medium-font-weight);
+  line-height: var(--typography-label-medium-line-height);
+  letter-spacing: var(--typography-label-medium-letter-spacing);
+  color: var(--color-on-surface-variant);
+}
+.compound-expression .field-name-container .field-compound-type {
+  flex: 1;
+  padding-bottom: var(--spacing-250);
+}
+.compound-expression .conditions {
+  flex: 1;
+}
+
+.slot-end {
+  display: block;
+}`;
+
+/**
+ * @label CB Compound Expression
+ * @tag wc-cb-compound-expression
+ * @rawTag cb-compound-expression
+ * @summary A compound expression group in a condition builder that displays a field label, an optional condition operator divider, and slots for child expressions.
+ * @tags condition-builder
+ * @parentRawTag compound-builder
+ *
+ * @example
+ * ```html
+ * <wc-cb-compound-expression field-label="Age" condition-operator="or">
+ *   <wc-cb-expression>
+ *     <wc-input placeholder="Enter value"></wc-input>
+ *   </wc-cb-expression>
+ * </wc-cb-compound-expression>
+ * ```
+ */
+let CbCompoundExpression = class CbCompoundExpression extends i$1 {
+    constructor() {
+        super(...arguments);
+        /** The field name for the compound expression. */
+        this.fieldName = '';
+        /** The display label for the field. */
+        this.fieldLabel = '';
+    }
+    updated() {
+        this.__adjustSlotEndPadding();
+    }
+    __adjustSlotEndPadding() {
+        const slotEnd = this.renderRoot.querySelector('.slot-end');
+        const fieldNameContainer = this.renderRoot.querySelector('.field-name-container');
+        if (slotEnd && fieldNameContainer) {
+            slotEnd.style.paddingInlineStart =
+                fieldNameContainer.getBoundingClientRect().width + 'px';
+        }
+    }
+    __renderOperatorDivider() {
+        if (!this.conditionOperator)
+            return A;
+        return b `
+      <wc-cb-divider connect-end>
+        <wc-tag color="yellow" size="sm">${this.conditionOperator}</wc-tag>
+      </wc-cb-divider>
+    `;
+    }
+    render() {
+        return b `
+      <div class="compound-expression" field-name=${this.fieldName}>
+        <div class="field-name-container">
+          <span class="field-label">${this.fieldLabel}</span>
+          <div class="field-compound-type">
+            ${this.__renderOperatorDivider()}
+          </div>
+        </div>
+        <div class="conditions">
+          <slot></slot>
+        </div>
+      </div>
+      <div class="slot-end">
+        <slot name="end"></slot>
+      </div>
+    `;
+    }
+};
+CbCompoundExpression.styles = [css_248z];
+__decorate([
+    n({ type: String, attribute: 'condition-operator', reflect: true })
+], CbCompoundExpression.prototype, "conditionOperator", void 0);
+__decorate([
+    n({ type: String, attribute: 'field-name' })
+], CbCompoundExpression.prototype, "fieldName", void 0);
+__decorate([
+    n({ type: String, attribute: 'field-label' })
+], CbCompoundExpression.prototype, "fieldLabel", void 0);
+CbCompoundExpression = __decorate([
+    IndividualComponent
+], CbCompoundExpression);
+
+export { CbCompoundExpression };
+//# sourceMappingURL=cb-compound-expression.js.map

package/dist/cb-compound-expression.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cb-compound-expression.js","sources":["../../src/condition-builder/cb-compound-expression.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './cb-compound-expression.scss';\n\n/**\n * @label CB Compound Expression\n * @tag wc-cb-compound-expression\n * @rawTag cb-compound-expression\n * @summary A compound expression group in a condition builder that displays a field label, an optional condition operator divider, and slots for child expressions.\n * @tags condition-builder\n * @parentRawTag compound-builder\n *\n * @example\n * ```html\n * <wc-cb-compound-expression field-label=\"Age\" condition-operator=\"or\">\n *   <wc-cb-expression>\n *     <wc-input placeholder=\"Enter value\"></wc-input>\n *   </wc-cb-expression>\n * </wc-cb-compound-expression>\n * ```\n */\n@IndividualComponent\nexport class CbCompoundExpression extends LitElement {\n  static styles = [styles];\n\n  /** The logical operator joining conditions in this group ('and' or 'or'). */\n  @property({ type: String, attribute: 'condition-operator', reflect: true })\n  conditionOperator?: 'and' | 'or';\n\n  /** The field name for the compound expression. */\n  @property({ type: String, attribute: 'field-name' })\n  fieldName = '';\n\n  /** The display label for the field. */\n  @property({ type: String, attribute: 'field-label' })\n  fieldLabel = '';\n\n  override updated() {\n    this.__adjustSlotEndPadding();\n  }\n\n  private __adjustSlotEndPadding() {\n    const slotEnd = this.renderRoot.querySelector<HTMLElement>('.slot-end');\n    const fieldNameContainer =\n      this.renderRoot.querySelector<HTMLElement>('.field-name-container');\n    if (slotEnd && fieldNameContainer) {\n      slotEnd.style.paddingInlineStart =\n        fieldNameContainer.getBoundingClientRect().width + 'px';\n    }\n  }\n\n  private __renderOperatorDivider() {\n    if (!this.conditionOperator) return nothing;\n    return html`\n      <wc-cb-divider connect-end>\n        <wc-tag color=\"yellow\" size=\"sm\">${this.conditionOperator}</wc-tag>\n      </wc-cb-divider>\n    `;\n  }\n\n  render() {\n    return html`\n      <div class=\"compound-expression\" field-name=${this.fieldName}>\n        <div class=\"field-name-container\">\n          <span class=\"field-label\">${this.fieldLabel}</span>\n          <div class=\"field-compound-type\">\n            ${this.__renderOperatorDivider()}\n          </div>\n        </div>\n        <div class=\"conditions\">\n          <slot></slot>\n        </div>\n      </div>\n      <div class=\"slot-end\">\n        <slot name=\"end\"></slot>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","nothing","html","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;;;;;;;;;;;;;;;;AAgBG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQA,GAAU,CAAA;AAA7C,IAAA,WAAA,GAAA;;;QASL,IAAA,CAAA,SAAS,GAAG,EAAE;;QAId,IAAA,CAAA,UAAU,GAAG,EAAE;IA2CjB;IAzCW,OAAO,GAAA;QACd,IAAI,CAAC,sBAAsB,EAAE;IAC/B;IAEQ,sBAAsB,GAAA;QAC5B,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAc,WAAW,CAAC;QACvE,MAAM,kBAAkB,GACtB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAc,uBAAuB,CAAC;AACrE,QAAA,IAAI,OAAO,IAAI,kBAAkB,EAAE;YACjC,OAAO,CAAC,KAAK,CAAC,kBAAkB;AAC9B,gBAAA,kBAAkB,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,IAAI;QAC3D;IACF;IAEQ,uBAAuB,GAAA;QAC7B,IAAI,CAAC,IAAI,CAAC,iBAAiB;AAAE,YAAA,OAAOC,CAAO;AAC3C,QAAA,OAAOC,CAAI,CAAA;;AAE4B,yCAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;KAE5D;IACH;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOA,CAAI,CAAA;AACqC,kDAAA,EAAA,IAAI,CAAC,SAAS,CAAA;;AAE5B,oCAAA,EAAA,IAAI,CAAC,UAAU,CAAA;;cAEvC,IAAI,CAAC,uBAAuB,EAAE;;;;;;;;;;KAUvC;IACH;;AAtDO,oBAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAIxB,UAAA,CAAA;AADC,IAAAC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,oBAAoB,EAAE,OAAO,EAAE,IAAI,EAAE;AACzC,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,MAAA,CAAA;AAIjC,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE;AACpC,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAIf,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE;AACpC,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAbL,oBAAoB,GAAA,UAAA,CAAA;IADhC;AACY,CAAA,EAAA,oBAAoB,CAwDhC;;;;"}