@usecapsule/core-components 3.4.0 → 3.4.1-dev.1

package/dist/collection/components/cpsl-identicon/cpsl-identicon.js

@@ -1,4 +1,6 @@
 import { Host, h } from "@stencil/core";
+import Prando from "../../lib/prando";
+import { COLORS } from "../../utils/prand";
 const SingleArc = (rotation) => (h("svg", { class: {
         rotate90: rotation === 1,
         rotate180: rotation === 2,
@@ -9,35 +11,72 @@ const DoubleArc = (rotation) => (h("svg", { class: {
         rotate180: rotation === 2,
         rotate270: rotation === 3,
     }, viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_674_255)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" })), h("defs", null, h("clipPath", { id: "clip0_674_255" }, h("rect", { width: "12", height: "12" })))));
+const BASE_PATTERNS = [
+    [
+        [0, 0, 0, 0],
+        [0, 1, 3, 2],
+    ],
+    [
+        [1, 1, 0, 0],
+        [0, 1, 3, 2],
+    ],
+    [
+        [0, 1, 0, 1],
+        [0, 1, 3, 2],
+    ],
+    [
+        [0, 0, 1, 1],
+        [0, 1, 3, 2],
+    ],
+    [
+        [1, 0, 1, 0],
+        [0, 1, 3, 2],
+    ],
+    [
+        [1, 1, 1, 1],
+        [0, 1, 3, 2],
+    ],
+    [
+        [0, 0, 0, 0],
+        [2, 3, 1, 0],
+    ],
+    [
+        [1, 1, 1, 1],
+        [2, 3, 1, 0],
+    ],
+    [
+        [1, 1, 1, 1],
+        [0, 1, 2, 3],
+    ],
+];
 export class CpslIdenticon {
     constructor() {
         this.hash = undefined;
-        this.size = 40;
+        this.size = '40px';
+        this.variant = 'default';
     }
     render() {
-        const [code, color] = stringToBinaryAndColor(this.hash);
-        const shapeA = ((code >> 2) & 1) !== 0;
-        const shapeB = ((code >> 3) & 1) !== 0;
-        const shapeC = ((code >> 4) & 1) !== 0;
-        const shapeD = ((code >> 5) & 1) !== 0;
-        const rotationA = (code >> 6) & 3;
-        const rotationB = (code >> 7) & 3;
-        const rotationC = (code >> 8) & 3;
-        const rotationD = (code >> 9) & 3;
-        const [shapes, rotations] = [
-            [shapeA, shapeB, shapeC, shapeD],
-            [rotationA, rotationB, rotationC, rotationD],
-        ];
-        return (h(Host, { key: '39bcae00e3fd58ff94639fbb43c77fd942899e51', class: {
-                red: color === 'red',
-                orange: color === 'orange',
-                yellow: color === 'yellow',
-                green: color === 'green',
-                blue: color === 'blue',
-                purple: color === 'purple',
-            } }, shapes.map((isDouble, index) => {
-            return isDouble ? DoubleArc(rotations[index]) : SingleArc(rotations[index]);
-        })));
+        let props;
+        const isEmpty = !this.hash;
+        if (!isEmpty)
+            props = getIdenticonProps(this.hash);
+        return (h(Host, { key: 'dca30d0d61d0e29f2ec3ad657225ac51db09940d', class: {
+                red: (props === null || props === void 0 ? void 0 : props.color) === 'red',
+                orange: (props === null || props === void 0 ? void 0 : props.color) === 'orange',
+                yellow: (props === null || props === void 0 ? void 0 : props.color) === 'yellow',
+                green: (props === null || props === void 0 ? void 0 : props.color) === 'green',
+                blue: (props === null || props === void 0 ? void 0 : props.color) === 'blue',
+                purple: (props === null || props === void 0 ? void 0 : props.color) === 'purple',
+                empty: !(props === null || props === void 0 ? void 0 : props.color) && !this.hash,
+                avatar: this.variant === 'avatar',
+            }, style: {
+                width: this.size,
+                height: this.size,
+            } }, (props === null || props === void 0 ? void 0 : props.shapes) &&
+            (props === null || props === void 0 ? void 0 : props.rotations) &&
+            props.shapes.map((isDouble, index) => {
+                return isDouble ? DoubleArc(props.rotations[index]) : SingleArc(props.rotations[index]);
+            })));
     }
     static get is() { return "cpsl-identicon"; }
     static get encapsulation() { return "shadow"; }
@@ -57,12 +96,12 @@ export class CpslIdenticon {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
+                    "original": "string | undefined",
                     "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -71,30 +110,56 @@ export class CpslIdenticon {
                 "reflect": false
             },
             "size": {
-                "type": "number",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The size of the identicon.\nDefault is: 40."
+                    "text": "The CSS width and height of the identicon.\nDefault is: 40px."
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "40"
+                "defaultValue": "'40px'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'avatar'",
+                    "resolved": "\"avatar\" | \"default\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'default'"
             }
         };
     }
 }
-const COLORS = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
-function stringToBinaryAndColor(hash) {
-    const code = (hash.charCodeAt(0) << 24) | (hash.charCodeAt(1) << 16) | (hash.charCodeAt(2) << 8) | hash.charCodeAt(3);
-    const color = COLORS[Math.abs(code % 6)];
-    return [code, color];
+const PRANDO_INTS = [COLORS.length, BASE_PATTERNS.length, 16];
+function getIdenticonProps(seed) {
+    const rng = new Prando(seed);
+    const [iColor, iPattern, iDeviation] = PRANDO_INTS.map(len => rng.nextInt(0, len - 1));
+    const deviationIndex = Math.floor(iDeviation / 4);
+    const [isDeviateShape, isDeviateFlip] = [iDeviation % 2 === 1, iDeviation % 4 >= 2];
+    return {
+        color: COLORS[iColor],
+        shapes: BASE_PATTERNS[iPattern][0].map((s, i) => {
+            return i === deviationIndex ? (isDeviateShape ? (s === 1 ? false : true) : s === 1) : s === 1;
+        }),
+        rotations: BASE_PATTERNS[iPattern][1].map((r, i) => (i === deviationIndex ? (isDeviateFlip ? (r + 2) % 4 : r) : r)),
+    };
 }
 //# sourceMappingURL=cpsl-identicon.js.map

package/dist/collection/components/cpsl-identicon/cpsl-identicon.js.map

@@ -1 +1 @@
-{"version":3,"file":"cpsl-identicon.js","sourceRoot":"","sources":["../../../../src/components/cpsl-identicon/cpsl-identicon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\nconst SingleArc = (rotation: number) => (\n  <svg\n    class={{\n      rotate90: rotation === 1,\n      rotate180: rotation === 2,\n      rotate270: rotation === 3,\n    }}\n    viewBox=\"0 0 12 12\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <g clip-path=\"url(#clip0_674_66)\">\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_674_66\">\n        <rect width=\"12\" height=\"12\" />\n      </clipPath>\n    </defs>\n  </svg>\n);\n\nconst DoubleArc = (rotation: number) => (\n  <svg\n    class={{\n      rotate90: rotation === 1,\n      rotate180: rotation === 2,\n      rotate270: rotation === 3,\n    }}\n    viewBox=\"0 0 12 12\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <g clip-path=\"url(#clip0_674_255)\">\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_674_255\">\n        <rect width=\"12\" height=\"12\" />\n      </clipPath>\n    </defs>\n  </svg>\n);\n\n@Component({\n  tag: 'cpsl-identicon',\n  styleUrl: 'cpsl-identicon.scss',\n  shadow: true,\n})\nexport class CpslIdenticon {\n  @Prop() hash: string;\n\n  /**\n   *  The size of the identicon.\n   *  Default is: 40.\n   */\n  @Prop() size: number = 40;\n\n  render() {\n    const [code, color] = stringToBinaryAndColor(this.hash);\n    const shapeA = ((code >> 2) & 1) !== 0;\n    const shapeB = ((code >> 3) & 1) !== 0;\n    const shapeC = ((code >> 4) & 1) !== 0;\n    const shapeD = ((code >> 5) & 1) !== 0;\n    const rotationA = (code >> 6) & 3;\n    const rotationB = (code >> 7) & 3;\n    const rotationC = (code >> 8) & 3;\n    const rotationD = (code >> 9) & 3;\n\n    const [shapes, rotations] = [\n      [shapeA, shapeB, shapeC, shapeD],\n      [rotationA, rotationB, rotationC, rotationD],\n    ];\n\n    return (\n      <Host\n        class={{\n          red: color === 'red',\n          orange: color === 'orange',\n          yellow: color === 'yellow',\n          green: color === 'green',\n          blue: color === 'blue',\n          purple: color === 'purple',\n        }}\n      >\n        {shapes.map((isDouble, index) => {\n          return isDouble ? DoubleArc(rotations[index]) : SingleArc(rotations[index]);\n        })}\n      </Host>\n    );\n  }\n}\n\ntype Color = 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'purple';\n\nconst COLORS: Color[] = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];\n\nfunction stringToBinaryAndColor(hash: string): [number, Color] {\n  const code = (hash.charCodeAt(0) << 24) | (hash.charCodeAt(1) << 16) | (hash.charCodeAt(2) << 8) | hash.charCodeAt(3);\n\n  const color = COLORS[Math.abs(code % 6)];\n\n  return [code, color];\n}\n"]}
+{"version":3,"file":"cpsl-identicon.js","sourceRoot":"","sources":["../../../../src/components/cpsl-identicon/cpsl-identicon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport Prando from '../../lib/prando';\nimport { Color, COLORS } from '../../utils/prand';\n\nconst SingleArc = (rotation: number) => (\n  <svg\n    class={{\n      rotate90: rotation === 1,\n      rotate180: rotation === 2,\n      rotate270: rotation === 3,\n    }}\n    viewBox=\"0 0 12 12\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <g clip-path=\"url(#clip0_674_66)\">\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_674_66\">\n        <rect width=\"12\" height=\"12\" />\n      </clipPath>\n    </defs>\n  </svg>\n);\n\nconst DoubleArc = (rotation: number) => (\n  <svg\n    class={{\n      rotate90: rotation === 1,\n      rotate180: rotation === 2,\n      rotate270: rotation === 3,\n    }}\n    viewBox=\"0 0 12 12\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <g clip-path=\"url(#clip0_674_255)\">\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_674_255\">\n        <rect width=\"12\" height=\"12\" />\n      </clipPath>\n    </defs>\n  </svg>\n);\n\nconst BASE_PATTERNS = [\n  [\n    [0, 0, 0, 0],\n    [0, 1, 3, 2],\n  ],\n  [\n    [1, 1, 0, 0],\n    [0, 1, 3, 2],\n  ],\n  [\n    [0, 1, 0, 1],\n    [0, 1, 3, 2],\n  ],\n  [\n    [0, 0, 1, 1],\n    [0, 1, 3, 2],\n  ],\n  [\n    [1, 0, 1, 0],\n    [0, 1, 3, 2],\n  ],\n  [\n    [1, 1, 1, 1],\n    [0, 1, 3, 2],\n  ],\n  [\n    [0, 0, 0, 0],\n    [2, 3, 1, 0],\n  ],\n  [\n    [1, 1, 1, 1],\n    [2, 3, 1, 0],\n  ],\n  [\n    [1, 1, 1, 1],\n    [0, 1, 2, 3],\n  ],\n];\n\n@Component({\n  tag: 'cpsl-identicon',\n  styleUrl: 'cpsl-identicon.scss',\n  shadow: true,\n})\nexport class CpslIdenticon {\n  @Prop() hash?: string | undefined;\n\n  /**\n   *  The CSS width and height of the identicon.\n   *  Default is: 40px.\n   */\n  @Prop() size: string = '40px';\n\n  @Prop() variant: 'default' | 'avatar' = 'default';\n\n  render() {\n    let props;\n    const isEmpty = !this.hash;\n    if (!isEmpty) props = getIdenticonProps(this.hash);\n\n    return (\n      <Host\n        class={{\n          red: props?.color === 'red',\n          orange: props?.color === 'orange',\n          yellow: props?.color === 'yellow',\n          green: props?.color === 'green',\n          blue: props?.color === 'blue',\n          purple: props?.color === 'purple',\n          empty: !props?.color && !this.hash,\n          avatar: this.variant === 'avatar',\n        }}\n        style={{\n          width: this.size,\n          height: this.size,\n        }}\n      >\n        {props?.shapes &&\n          props?.rotations &&\n          props.shapes.map((isDouble, index) => {\n            return isDouble ? DoubleArc(props.rotations[index]) : SingleArc(props.rotations[index]);\n          })}\n      </Host>\n    );\n  }\n}\n\nconst PRANDO_INTS = [COLORS.length, BASE_PATTERNS.length, 16];\n\nfunction getIdenticonProps(seed: string): { color: Color; shapes: boolean[]; rotations: number[] } {\n  const rng = new Prando(seed);\n\n  const [iColor, iPattern, iDeviation] = PRANDO_INTS.map(len => rng.nextInt(0, len - 1));\n\n  const deviationIndex = Math.floor(iDeviation / 4);\n  const [isDeviateShape, isDeviateFlip] = [iDeviation % 2 === 1, iDeviation % 4 >= 2];\n\n  return {\n    color: COLORS[iColor],\n    shapes: BASE_PATTERNS[iPattern][0].map((s, i) => {\n      return i === deviationIndex ? (isDeviateShape ? (s === 1 ? false : true) : s === 1) : s === 1;\n    }),\n    rotations: BASE_PATTERNS[iPattern][1].map((r, i) => (i === deviationIndex ? (isDeviateFlip ? (r + 2) % 4 : r) : r)),\n  };\n}\n"]}

package/dist/collection/components/cpsl-identicon/cpsl-identicon.stories.js

@@ -1,6 +1,6 @@
 const meta = {
     title: 'Components/CpslIdenticon',
-    args: { hash: 'wruvbwic8932nc4u3cr9394n3cibj3892438cr', size: 40 },
+    args: { hash: 'wruvbwic8932nc4u3cr9394n3cibj3892438cr', size: '40px' },
     argTypes: {
         hash: { control: 'text' },
         size: { control: 'number' },

package/dist/collection/components/cpsl-identicon/cpsl-identicon.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"cpsl-identicon.stories.js","sourceRoot":"","sources":["../../../../src/components/cpsl-identicon/cpsl-identicon.stories.tsx"],"names":[],"mappings":"AAGA,MAAM,IAAI,GAA+C;IACvD,KAAK,EAAE,0BAA0B;IACjC,IAAI,EAAE,EAAE,IAAI,EAAE,wCAAwC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAU,IAAI,CAAC,EAAE,CAAC,wBAAwB,IAAI,CAAC,IAAI,IAAI,CAAC;AAEtE,MAAM,CAAC,MAAM,OAAO,GAAU,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/html';\nimport { type CpslIdenticon } from './cpsl-identicon';\n\nconst meta: Meta<CpslIdenticon & { content?: string }> = {\n  title: 'Components/CpslIdenticon',\n  args: { hash: 'wruvbwic8932nc4u3cr9394n3cibj3892438cr', size: 40 },\n  argTypes: {\n    hash: { control: 'text' },\n    size: { control: 'number' },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryFn<CpslIdenticon & { content?: string }>;\n\nconst Template: Story = args => `<cpsl-identicon hash=${args.hash}/>`;\n\nexport const Primary: Story = Template.bind({});\n"]}
+{"version":3,"file":"cpsl-identicon.stories.js","sourceRoot":"","sources":["../../../../src/components/cpsl-identicon/cpsl-identicon.stories.tsx"],"names":[],"mappings":"AAGA,MAAM,IAAI,GAA+C;IACvD,KAAK,EAAE,0BAA0B;IACjC,IAAI,EAAE,EAAE,IAAI,EAAE,wCAAwC,EAAE,IAAI,EAAE,MAAM,EAAE;IACtE,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAU,IAAI,CAAC,EAAE,CAAC,wBAAwB,IAAI,CAAC,IAAI,IAAI,CAAC;AAEtE,MAAM,CAAC,MAAM,OAAO,GAAU,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/html';\nimport { type CpslIdenticon } from './cpsl-identicon';\n\nconst meta: Meta<CpslIdenticon & { content?: string }> = {\n  title: 'Components/CpslIdenticon',\n  args: { hash: 'wruvbwic8932nc4u3cr9394n3cibj3892438cr', size: '40px' },\n  argTypes: {\n    hash: { control: 'text' },\n    size: { control: 'number' },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryFn<CpslIdenticon & { content?: string }>;\n\nconst Template: Story = args => `<cpsl-identicon hash=${args.hash}/>`;\n\nexport const Primary: Story = Template.bind({});\n"]}

package/dist/collection/components/cpsl-input/cpsl-input.js

@@ -675,7 +675,7 @@ export class CpslInput {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"search\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowCircleBrokenDownLeft\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"bank\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"creditCard\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"dot\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"githubBrand\" | \"github\" | \"globe\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroAlertCircle\" | \"heroCheckmarkCapsule\" | \"heroCheckmark\" | \"heroEmail\" | \"heroExternalConnection\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkExternal\" | \"linkedinBrand\" | \"linkedin\" | \"logOut\" | \"mail\" | \"menu\" | \"moonpayBrand\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"puzzlePiece\" | \"qrCode02\" | \"qrCode\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"send\" | \"settings\" | \"shield\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"stars\" | \"stripeBrand\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"x\" | \"youtubeBrand\" | \"youtube\" | \"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\"",
+                    "resolved": "\"search\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowCircleBrokenDownLeft\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"bank\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"cosmos\" | \"creditCard\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"dot\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"ethereum\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"folder\" | \"githubBrand\" | \"github\" | \"globe\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroAlertCircle\" | \"heroCheckmarkCapsule\" | \"heroCheckmark\" | \"heroEmail\" | \"heroExternalConnection\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroPlusCircleCapsule\" | \"heroPlusCircle\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkExternal\" | \"linkedinBrand\" | \"linkedin\" | \"logOut\" | \"mail\" | \"menu\" | \"moonpayBrand\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"puzzlePiece\" | \"qrCode02\" | \"qrCode\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"send\" | \"settings\" | \"shield\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"solana\" | \"stars\" | \"stripeBrand\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"x\" | \"youtubeBrand\" | \"youtube\" | \"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\"",
                     "references": {
                         "IconType": {
                             "location": "import",

package/dist/collection/components/cpsl-nav-button/cpsl-nav-button.css

@@ -0,0 +1,107 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0px;
+  box-sizing: border-box;
+  width: 100%;
+  background: var(--cpsl-color-background-4);
+  border-radius: var(--cpsl-border-radius-primary-button);
+  overflow: hidden;
+}
+
+.sub-route-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border-left: 1px solid var(--cpsl-color-background-16);
+  padding-left: 16px;
+  margin-left: 16px;
+  margin-bottom: 8px;
+  margin-right: 8px;
+  background: var(--cpsl-color-background-4);
+}
+
+.sub-route {
+  --button-padding-start: 8px;
+  --button-padding-end: 8px;
+  --button-padding-top: 8px;
+  --button-padding-bottom: 8px;
+  --button-justify-content: start;
+  --button-primary-color: var(--cpsl-color-background-48);
+  --button-primary-background-color: var(--cpsl-color-background-4);
+  --button-primary-border-color: var(--cpsl-color-background-4);
+  --button-primary-icon-color: var(--cpsl-color-text-primary);
+  --button-primary-disabled-color: var(--cpsl-color-text-primary);
+  --button-primary-disabled-background-color: var(--cpsl-color-background-4);
+  --button-primary-disabled-border-color: var(--cpsl-color-background-4);
+  --button-primary-disabled-icon-color: var(--cpsl-color-text-primary);
+  --button-primary-hover-color: var(--cpsl-color-background-48);
+  --button-primary-hover-background-color: var(--cpsl-color-background-0);
+  --button-primary-hover-border-color: var(--cpsl-color-background-4);
+  --button-primary-hover-icon-color: var(--cpsl-color-background-48);
+  --button-primary-active-color: var(--cpsl-color-text-primary);
+  --button-primary-active-background-color: var(--cpsl-color-background-4);
+  --button-primary-active-border-color: var(--cpsl-color-background-4);
+  --button-primary-active-icon-color: var(--cpsl-color-text-primary);
+}
+.sub-route.selected {
+  --button-primary-color: var(--cpsl-color-text-primary);
+  --button-primary-background-color: var(--cpsl-color-background-0);
+  --button-primary-border-color: var(--cpsl-color-background-0);
+  --button-primary-icon-color: var(--cpsl-color-background-48);
+  --button-primary-disabled-color: var(--cpsl-color-background-48);
+  --button-primary-disabled-background-color: var(--cpsl-color-background-0);
+  --button-primary-disabled-border-color: var(--cpsl-color-background-0);
+  --button-primary-disabled-icon-color: var(--cpsl-color-background-48);
+  --button-primary-hover-color: var(--cpsl-color-text-primary);
+  --button-primary-hover-background-color: var(--cpsl-color-background-0);
+  --button-primary-hover-border-color: var(--cpsl-color-background-4);
+  --button-primary-hover-icon-color: var(--cpsl-color-background-48);
+  --button-primary-active-color: var(--cpsl-color-background-48);
+  --button-primary-active-background-color: var(--cpsl-color-background-4);
+  --button-primary-active-border-color: var(--cpsl-color-background-4);
+  --button-primary-active-icon-color: var(--cpsl-color-background-48);
+}
+
+.main-route {
+  --button-padding-start: 8px;
+  --button-padding-end: 8px;
+  --button-padding-top: 8px;
+  --button-padding-bottom: 8px;
+  --button-justify-content: start;
+  --button-primary-color: var(--cpsl-color-background-48);
+  --button-primary-background-color: var(--cpsl-color-background-0);
+  --button-primary-border-color: var(--cpsl-color-background-0);
+  --button-primary-icon-color: var(--cpsl-color-background-48);
+  --button-primary-disabled-color: var(--cpsl-color-background-48);
+  --button-primary-disabled-background-color: var(--cpsl-color-background-0);
+  --button-primary-disabled-border-color: var(--cpsl-color-background-0);
+  --button-primary-disabled-icon-color: var(--cpsl-color-background-48);
+  --button-primary-hover-color: var(--cpsl-color-background-48);
+  --button-primary-hover-background-color: var(--cpsl-color-background-4);
+  --button-primary-hover-border-color: var(--cpsl-color-background-4);
+  --button-primary-hover-icon-color: var(--cpsl-color-background-48);
+  --button-primary-active-color: var(--cpsl-color-background-48);
+  --button-primary-active-background-color: var(--cpsl-color-background-4);
+  --button-primary-active-border-color: var(--cpsl-color-background-4);
+  --button-primary-active-icon-color: var(--cpsl-color-background-48);
+}
+.main-route.selected {
+  --button-primary-color: var(--cpsl-color-text-primary);
+  --button-primary-background-color: var(--cpsl-color-background-4);
+  --button-primary-border-color: var(--cpsl-color-background-4);
+  --button-primary-icon-color: var(--cpsl-color-text-primary);
+  --button-primary-disabled-color: var(--cpsl-color-text-primary);
+  --button-primary-disabled-background-color: var(--cpsl-color-background-4);
+  --button-primary-disabled-border-color: var(--cpsl-color-background-4);
+  --button-primary-disabled-icon-color: var(--cpsl-color-text-primary);
+  --button-primary-hover-color: var(--cpsl-color-text-primary);
+  --button-primary-hover-background-color: var(--cpsl-color-background-4);
+  --button-primary-hover-border-color: var(--cpsl-color-background-4);
+  --button-primary-hover-icon-color: var(--cpsl-color-text-primary);
+  --button-primary-active-color: var(--cpsl-color-text-primary);
+  --button-primary-active-background-color: var(--cpsl-color-background-4);
+  --button-primary-active-border-color: var(--cpsl-color-background-4);
+  --button-primary-active-icon-color: var(--cpsl-color-text-primary);
+}

package/dist/collection/components/cpsl-nav-button/cpsl-nav-button.js

@@ -0,0 +1,175 @@
+import { Host, h } from "@stencil/core";
+export class CpslNavButton {
+    constructor() {
+        this.handleNavButtonClick = () => {
+            this.cpslNavButtonClick.emit(this.route);
+        };
+        this.handleSubRouteClick = (route) => () => {
+            this.cpslNavButtonSubRouteClick.emit(route);
+        };
+        this.disabled = false;
+        this.exactMainRouteMatch = undefined;
+        this.exactSubRouteMatch = undefined;
+        this.route = undefined;
+        this.subRoutes = undefined;
+        this.path = undefined;
+    }
+    render() {
+        var _a, _b;
+        const selectedSubRoute = (_a = this.subRoutes) === null || _a === void 0 ? void 0 : _a.find(sr => (this.exactSubRouteMatch ? this.path === `${this.route}/${sr.value}` : this.path.includes(`${this.route}/${sr.value}`)));
+        const isMainRouteSelected = this.exactMainRouteMatch ? this.path === this.route : this.path.includes(this.route);
+        return (h(Host, { key: '8f8bd86051b11efc848491e7f5628c331ad2b208' }, h("cpsl-button", { key: '1e7a1a43032764760d4240a9af75a80fbf432d7e', id: this.route, class: { 'main-route': true, 'selected': !!selectedSubRoute || isMainRouteSelected }, fullWidth: true, variant: "primary", disabled: this.disabled, onClick: this.handleNavButtonClick }, h("slot", { key: '3adfced15f2744d0e49e5627e7b3d1ae35fe2e64', name: "start" }), h("slot", { key: '0a0480f72a68d0af0a279ba086a9915138212bd6' }), h("slot", { key: '624cf7807db283f33e7c727f00e32083d2b483b1', name: "end" })), (!!selectedSubRoute || isMainRouteSelected) && !!((_b = this.subRoutes) === null || _b === void 0 ? void 0 : _b.length) && (h("div", { key: '88039fa248445cc6f0cd641abdfdc2a3a5c45f26', class: "sub-route-container" }, this.subRoutes.map(sr => (h("cpsl-button", { key: sr.value, id: `${this.route}/${sr.value}`, class: { 'sub-route': true, 'selected': sr.value === (selectedSubRoute === null || selectedSubRoute === void 0 ? void 0 : selectedSubRoute.value) }, onClick: this.handleSubRouteClick(`${this.route}/${sr.value}`), fullWidth: true, variant: "primary" }, sr.label)))))));
+    }
+    static get is() { return "cpsl-nav-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-nav-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-nav-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If the button is disabled.\nDefault is: false."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "exactMainRouteMatch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not to use exact matching for the selected main route."
+                },
+                "attribute": "exact-main-route-match",
+                "reflect": false
+            },
+            "exactSubRouteMatch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not to use exact matching for the selected sub route."
+                },
+                "attribute": "exact-sub-route-match",
+                "reflect": false
+            },
+            "route": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The route for the button."
+                },
+                "attribute": "route",
+                "reflect": false
+            },
+            "subRoutes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ label: string; value: string }[]",
+                    "resolved": "{ label: string; value: string; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The id of the selected button."
+                }
+            },
+            "path": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Path used to determine what button is selected"
+                },
+                "attribute": "path",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cpslNavButtonClick",
+                "name": "cpslNavButtonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Called when the nav button is clicked."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "cpslNavButtonSubRouteClick",
+                "name": "cpslNavButtonSubRouteClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Called when a nav button sub route is clicked."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=cpsl-nav-button.js.map

package/dist/collection/components/cpsl-nav-button/cpsl-nav-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-nav-button.js","sourceRoot":"","sources":["../../../../src/components/cpsl-nav-button/cpsl-nav-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOvF,MAAM,OAAO,aAAa;;QAuChB,yBAAoB,GAAG,GAAG,EAAE;YAClC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3C,CAAC,CAAC;QAOM,wBAAmB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,GAAG,EAAE;YACpD,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9C,CAAC,CAAC;wBA3C4C,KAAK;;;;;;;IA6CnD,MAAM;;QACJ,MAAM,gBAAgB,GAAG,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;QAC7K,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEjH,OAAO,CACL,EAAC,IAAI;YACH,oEACE,EAAE,EAAE,IAAI,CAAC,KAAK,EACd,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,gBAAgB,IAAI,mBAAmB,EAAE,EACpF,SAAS,QACT,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,oBAAoB;gBAElC,6DAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,8DAAa;gBACb,6DAAM,IAAI,EAAC,KAAK,GAAQ,CACZ;YACb,CAAC,CAAC,CAAC,gBAAgB,IAAI,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,MAAM,CAAA,IAAI,CAC1E,4DAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,CACxB,mBACE,GAAG,EAAE,EAAE,CAAC,KAAK,EACb,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,KAAK,EAAE,EAC/B,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,CAAC,KAAK,MAAK,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,KAAK,CAAA,EAAE,EAC9E,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC,EAC9D,SAAS,QACT,OAAO,EAAC,SAAS,IAEhB,EAAE,CAAC,KAAK,CACG,CACf,CAAC,CACE,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, EventEmitter, Host, Prop, h, Event, Element } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-nav-button',\n  styleUrl: 'cpsl-nav-button.scss',\n  shadow: true,\n})\nexport class CpslNavButton {\n  @Element() el!: HTMLCpslNavButtonElement;\n\n  /**\n   * If the button is disabled.\n   * Default is: false.\n   */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /**\n   * Whether or not to use exact matching for the selected main route.\n   */\n  @Prop() exactMainRouteMatch?: boolean;\n\n  /**\n   * Whether or not to use exact matching for the selected sub route.\n   */\n  @Prop() exactSubRouteMatch?: boolean;\n\n  /**\n   * The route for the button.\n   */\n  @Prop() route: string;\n\n  /**\n   * The id of the selected button.\n   */\n  @Prop() subRoutes?: { label: string; value: string }[];\n\n  /**\n   * Path used to determine what button is selected\n   */\n  @Prop() path?: string;\n\n  /**\n   * Called when the nav button is clicked.\n   */\n  @Event() cpslNavButtonClick: EventEmitter<string>;\n\n  private handleNavButtonClick = () => {\n    this.cpslNavButtonClick.emit(this.route);\n  };\n\n  /**\n   * Called when a nav button sub route is clicked.\n   */\n  @Event() cpslNavButtonSubRouteClick: EventEmitter<string>;\n\n  private handleSubRouteClick = (route: string) => () => {\n    this.cpslNavButtonSubRouteClick.emit(route);\n  };\n\n  render() {\n    const selectedSubRoute = this.subRoutes?.find(sr => (this.exactSubRouteMatch ? this.path === `${this.route}/${sr.value}` : this.path.includes(`${this.route}/${sr.value}`)));\n    const isMainRouteSelected = this.exactMainRouteMatch ? this.path === this.route : this.path.includes(this.route);\n\n    return (\n      <Host>\n        <cpsl-button\n          id={this.route}\n          class={{ 'main-route': true, 'selected': !!selectedSubRoute || isMainRouteSelected }}\n          fullWidth\n          variant=\"primary\"\n          disabled={this.disabled}\n          onClick={this.handleNavButtonClick}\n        >\n          <slot name=\"start\"></slot>\n          <slot></slot>\n          <slot name=\"end\"></slot>\n        </cpsl-button>\n        {(!!selectedSubRoute || isMainRouteSelected) && !!this.subRoutes?.length && (\n          <div class=\"sub-route-container\">\n            {this.subRoutes.map(sr => (\n              <cpsl-button\n                key={sr.value}\n                id={`${this.route}/${sr.value}`}\n                class={{ 'sub-route': true, 'selected': sr.value === selectedSubRoute?.value }}\n                onClick={this.handleSubRouteClick(`${this.route}/${sr.value}`)}\n                fullWidth\n                variant=\"primary\"\n              >\n                {sr.label}\n              </cpsl-button>\n            ))}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}