@getpara/core-components 0.1.0

package/dist/esm/cpsl-identicon.entry.js

@@ -0,0 +1,104 @@
+import { r as registerInstance, h, H as Host } from './index-91db3414.js';
+import { C as COLORS, P as Prando } from './prand-4c0d6ea7.js';
+
+const cpslIdenticonCss = ":host{--identicon-background-red:linear-gradient(136deg, #ff4270 6.86%, #ff7c7c 93.78%);--identicon-background-orange:linear-gradient(136deg, #f45532 6.86%, #ff9b63 93.78%);--identicon-background-yellow:linear-gradient(136deg, #ffa756 6.86%, #fbff47 93.78%);--identicon-background-green:linear-gradient(136deg, #0cae60 6.86%, #7bffd0 93.78%);--identicon-background-blue:linear-gradient(136deg, #476fff 6.86%, #47c8ff 93.78%);--identicon-background-purple:linear-gradient(136deg, #9747ff 6.86%, #da47ff 93.78%);--identicon-background-empty:linear-gradient(136deg, #aaaaaa 6.86%, #999999 93.78%);display:block;aspect-ratio:1;border-radius:25%;position:relative;border:1px solid var(--cpsl-color-background-8)}:host>svg{fill:rgba(255, 255, 255, 0.6);position:absolute;width:30%}:host>svg.rotate90{transform:rotate(0.25turn)}:host>svg.rotate180{transform:rotate(0.5turn)}:host>svg.rotate270{transform:rotate(0.75turn)}:host>svg:nth-child(1){right:50%;bottom:50%}:host>svg:nth-child(2){left:50%;bottom:50%}:host>svg:nth-child(3){right:50%;top:50%}:host>svg:nth-child(4){left:50%;top:50%}:host(.red){background:var(--identicon-background-red)}:host(.orange){background:var(--identicon-background-orange)}:host(.green){background:var(--identicon-background-green)}:host(.yellow){background:var(--identicon-background-yellow)}:host(.blue){background:var(--identicon-background-blue)}:host(.purple){background:var(--identicon-background-purple)}:host(.empty){background:var(--identicon-background-empty)}:host(.avatar){border-radius:1000px}";
+const CpslIdenticonStyle0 = cpslIdenticonCss;
+
+const SingleArc = (rotation) => (h("svg", { class: {
+        rotate90: rotation === 1,
+        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_66)" }, 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("defs", null, h("clipPath", { id: "clip0_674_66" }, h("rect", { width: "12", height: "12" })))));
+const DoubleArc = (rotation) => (h("svg", { class: {
+        rotate90: rotation === 1,
+        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],
+    ],
+];
+const CpslIdenticon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.hash = undefined;
+        this.size = '40px';
+        this.variant = 'default';
+    }
+    render() {
+        let props;
+        const isEmpty = !this.hash;
+        if (!isEmpty)
+            props = getIdenticonProps(this.hash);
+        return (h(Host, { key: '55072485ad5993ad8eb075a9d7d83e7e137ec9cd', 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]);
+            })));
+    }
+};
+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)),
+    };
+}
+CpslIdenticon.style = CpslIdenticonStyle0;
+
+export { CpslIdenticon as cpsl_identicon };
+
+//# sourceMappingURL=cpsl-identicon.entry.js.map

package/dist/esm/cpsl-identicon.entry.js.map

@@ -0,0 +1 @@
+{"file":"cpsl-identicon.entry.js","mappings":"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","names":[],"sources":["src/components/cpsl-identicon/cpsl-identicon.scss?tag=cpsl-identicon&encapsulation=shadow","src/components/cpsl-identicon/cpsl-identicon.tsx"],"sourcesContent":[":host {\n  --identicon-background-red: linear-gradient(136deg, #ff4270 6.86%, #ff7c7c 93.78%);\n  --identicon-background-orange: linear-gradient(136deg, #f45532 6.86%, #ff9b63 93.78%);\n  --identicon-background-yellow: linear-gradient(136deg, #ffa756 6.86%, #fbff47 93.78%);\n  --identicon-background-green: linear-gradient(136deg, #0cae60 6.86%, #7bffd0 93.78%);\n  --identicon-background-blue: linear-gradient(136deg, #476fff 6.86%, #47c8ff 93.78%);\n  --identicon-background-purple: linear-gradient(136deg, #9747ff 6.86%, #da47ff 93.78%);\n  --identicon-background-empty: linear-gradient(136deg, #aaaaaa 6.86%, #999999 93.78%);\n\n  display: block;\n  aspect-ratio: 1;\n  border-radius: 25%;\n  position: relative;\n  border: 1px solid var(--cpsl-color-background-8);\n\n  & > svg {\n    fill: rgba(255, 255, 255, 0.6);\n    position: absolute;\n    width: 30%;\n  }\n\n  & > svg.rotate90 {\n    transform: rotate(0.25turn);\n  }\n\n  & > svg.rotate180 {\n    transform: rotate(0.5turn);\n  }\n\n  & > svg.rotate270 {\n    transform: rotate(0.75turn);\n  }\n\n  & > svg:nth-child(1) {\n    right: 50%;\n    bottom: 50%;\n  }\n\n  & > svg:nth-child(2) {\n    left: 50%;\n    bottom: 50%;\n  }\n\n  & > svg:nth-child(3) {\n    right: 50%;\n    top: 50%;\n  }\n\n  & > svg:nth-child(4) {\n    left: 50%;\n    top: 50%;\n  }\n}\n\n:host(.red) {\n  background: var(--identicon-background-red);\n}\n\n:host(.orange) {\n  background: var(--identicon-background-orange);\n}\n\n:host(.green) {\n  background: var(--identicon-background-green);\n}\n\n:host(.yellow) {\n  background: var(--identicon-background-yellow);\n}\n\n:host(.blue) {\n  background: var(--identicon-background-blue);\n}\n\n:host(.purple) {\n  background: var(--identicon-background-purple);\n}\n\n:host(.empty) {\n  background: var(--identicon-background-empty);\n}\n\n:host(.avatar) {\n  border-radius: 1000px;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport Prando from '../../lib/prando.js';\nimport { Color, COLORS } from '../../utils/prand.js';\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"],"version":3}

package/dist/esm/cpsl-info-box.entry.js

@@ -0,0 +1,18 @@
+import { r as registerInstance, h, H as Host } from './index-91db3414.js';
+
+const cpslInfoBoxCss = ":host{--box-border-radius:var(--cpsl-border-radius-info-box);--box-padding-top:16px;--box-padding-bottom:16px;--box-padding-start:16px;--box-padding-end:16px;--box-border-width:1px}.info-box-container{border-radius:var(--input-border-radius);-webkit-padding-start:var(--box-padding-start);padding-inline-start:var(--box-padding-start);-webkit-padding-end:var(--box-padding-end);padding-inline-end:var(--box-padding-end);padding-top:var(--box-padding-top);padding-bottom:var(--box-padding-bottom);display:flex;background:var(--cpsl-color-background-4);border-radius:var(--box-border-radius)}";
+const CpslInfoBoxStyle0 = cpslInfoBoxCss;
+
+const CpslInfoBox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: '93726eb6ef05c505f409ec5b313e7db50c0d0a78' }, h("div", { key: '4cfe6525e289eca68319c9651efe20b640da05d3', class: "info-box-container" }, h("slot", { key: '81955b1e2f49839cddd514f00777de3870846929' }))));
+    }
+};
+CpslInfoBox.style = CpslInfoBoxStyle0;
+
+export { CpslInfoBox as cpsl_info_box };
+
+//# sourceMappingURL=cpsl-info-box.entry.js.map

package/dist/esm/cpsl-info-box.entry.js.map

@@ -0,0 +1 @@
+{"file":"cpsl-info-box.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,glBAAglB,CAAC;AACxmB,0BAAe,cAAc;;MCMhB,WAAW;;;;IACtB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,8DAAa,CACT,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/cpsl-info-box/cpsl-info-box.scss?tag=cpsl-info-box&encapsulation=shadow","src/components/cpsl-info-box/cpsl-info-box.tsx"],"sourcesContent":["@import '../../themes/capsule.globals';\n\n:host {\n  --box-border-radius: var(--cpsl-border-radius-info-box);\n  --box-padding-top: 16px;\n  --box-padding-bottom: 16px;\n  --box-padding-start: 16px;\n  --box-padding-end: 16px;\n  --box-border-width: 1px;\n}\n\n.info-box-container {\n  @include border-radius(var(--input-border-radius));\n  @include padding(var(--box-padding-top), var(--box-padding-end), var(--box-padding-bottom), var(--box-padding-start));\n\n  display: flex;\n  background: var(--cpsl-color-background-4);\n  border-radius: var(--box-border-radius);\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-info-box',\n  styleUrl: 'cpsl-info-box.scss',\n  shadow: true,\n})\nexport class CpslInfoBox {\n  render() {\n    return (\n      <Host>\n        <div class=\"info-box-container\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/cpsl-modal-v2.entry.js

@@ -0,0 +1,52 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-91db3414.js';
+
+const cpslModalV2Css = ":host{display:none;position:absolute;top:0;left:0;width:100vw;height:100vh;justify-content:center;align-items:center;z-index:10005}:host .card{z-index:10005;opacity:0;position:relative;transition:all}:host(.no-overlay){position:relative;top:unset;left:unset;width:100%;height:auto}:host(.open) .card{opacity:1}:host(.elevated) .card{--card-border-width:0px}:host(.elevated) .card::part(card-container){box-shadow:0px 8px 16px 0px rgba(0, 0, 0, 0.12)}";
+const CpslModalV2Style0 = cpslModalV2Css;
+
+const CpslModalV2 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.cpslModalEntering = createEvent(this, "cpslModalEntering", 7);
+        this.cpslModalEntered = createEvent(this, "cpslModalEntered", 7);
+        this.cpslModalExiting = createEvent(this, "cpslModalExiting", 7);
+        this.cpslModalExited = createEvent(this, "cpslModalExited", 7);
+        this.enterTransitionDuration = 0.15;
+        this.exitTransitionDuration = 0.15;
+        this.elevated = undefined;
+        this.noOverlay = undefined;
+        this.open = undefined;
+        this.zIndexOverride = undefined;
+    }
+    toggleHeight() {
+        if (!this.open) {
+            this.cpslModalExiting.emit();
+            // Animate out before setting display to none
+            setTimeout(() => {
+                this.el.style.display = 'none';
+                this.cpslModalExited.emit();
+            }, this.exitTransitionDuration * 1000);
+        }
+        else {
+            this.cpslModalEntering.emit();
+            this.el.style.display = 'flex';
+            setTimeout(() => {
+                this.cpslModalEntered.emit();
+            }, this.enterTransitionDuration * 1000);
+        }
+    }
+    componentDidLoad() {
+        this.toggleHeight();
+    }
+    render() {
+        return (h(Host, { key: '54037c194116e64864a47ea8eeedee31f804a736', class: { 'open': this.open, 'elevated': this.elevated, 'no-overlay': this.noOverlay } }, !this.noOverlay && (h("cpsl-overlay", { key: '152760c8eabdfca0dda636d7d28adc3030532558', zIndexOverride: this.zIndexOverride ? this.zIndexOverride : undefined, id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration })), h("cpsl-card", { key: '3e062561091c6831ece6a1abfd2b2e1dd67baefb', class: "card", style: { transitionDuration: this.open ? `${this.exitTransitionDuration}s` : `${this.enterTransitionDuration}s` } }, h("slot", { key: '94e26e323e40fd5bcc899d0311c044483442f5a4' }))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "open": ["toggleHeight"]
+    }; }
+};
+CpslModalV2.style = CpslModalV2Style0;
+
+export { CpslModalV2 as cpsl_modal_v2 };
+
+//# sourceMappingURL=cpsl-modal-v2.entry.js.map

package/dist/esm/cpsl-modal-v2.entry.js.map

@@ -0,0 +1 @@
+{"file":"cpsl-modal-v2.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,ocAAoc,CAAC;AAC5d,0BAAe,cAAc;;MCMhB,WAAW;;;;;;;uCAOqB,IAAI;sCAML,IAAI;;;;;;IA2C9C,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;;YAE7B,UAAU,CAAC;gBACT,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;aAC7B,EAAE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,CAAC;SACxC;aAAM;YACL,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;YAC9B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YAC/B,UAAU,CAAC;gBACT,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;aAC9B,EAAE,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,CAAC;SACzC;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE,IACxF,CAAC,IAAI,CAAC,SAAS,KACd,qEACE,cAAc,EAAE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,GAAG,SAAS,EACrE,EAAE,EAAC,SAAS,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,uBAAuB,EAAE,IAAI,CAAC,uBAAuB,EACrD,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,GACnD,CACH,EACD,kEAAW,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,CAAC,IAAI,GAAG,GAAG,IAAI,CAAC,sBAAsB,GAAG,GAAG,GAAG,IAAI,CAAC,uBAAuB,GAAG,EAAE,IACvI,8DAAa,CACH,CACP,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/cpsl-modal-v2/cpsl-modal-v2.scss?tag=cpsl-modal-v2&encapsulation=shadow","src/components/cpsl-modal-v2/cpsl-modal-v2.tsx"],"sourcesContent":["@use 'sass:map';\n@import '../../themes/capsule.globals';\n\n:host {\n  display: none;\n\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  justify-content: center;\n  align-items: center;\n\n  z-index: map.get($z-indices, 'modal');\n\n  & .card {\n    z-index: map.get($z-indices, 'modal');\n    opacity: 0;\n\n    position: relative;\n\n    transition: all;\n  }\n}\n\n:host(.no-overlay) {\n  position: relative;\n  top: unset;\n  left: unset;\n  width: 100%;\n  height: auto;\n}\n\n:host(.open) {\n  & .card {\n    opacity: 1;\n  }\n}\n\n:host(.elevated) {\n  & .card {\n    --card-border-width: 0px;\n\n    &::part(card-container) {\n      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.12);\n    }\n  }\n}\n","import { Component, Host, Prop, Watch, Element, Event, h, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-modal-v2',\n  styleUrl: 'cpsl-modal-v2.scss',\n  shadow: true,\n})\nexport class CpslModalV2 {\n  @Element() el!: HTMLCpslModalV2Element;\n\n  /**\n   * Duration in seconds of the modal entering.\n   * Default is .15.\n   */\n  @Prop() enterTransitionDuration?: number = 0.15;\n\n  /**\n   * Duration in seconds of the modal exiting.\n   * Default is .15.\n   */\n  @Prop() exitTransitionDuration?: number = 0.15;\n\n  /**\n   * Whether or not to show the modal with a box shadow.\n   */\n  @Prop() elevated: boolean;\n\n  /**\n   * Whether or not to show the overlay.\n   */\n  @Prop() noOverlay: boolean;\n\n  /**\n   * Whether or not to show the modal.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * Override z-index.\n   */\n  @Prop() zIndexOverride?: number;\n\n  /**\n   * Emitted when enter animation starts.\n   */\n  @Event() cpslModalEntering!: EventEmitter<null>;\n\n  /**\n   * Emitted when enter animation finishes.\n   */\n  @Event() cpslModalEntered!: EventEmitter<null>;\n\n  /**\n   * Emitted when exit animation starts.\n   */\n  @Event() cpslModalExiting!: EventEmitter<null>;\n\n  /**\n   * Emitted when exit animation finishes.\n   */\n  @Event() cpslModalExited!: EventEmitter<null>;\n\n  @Watch('open')\n  toggleHeight() {\n    if (!this.open) {\n      this.cpslModalExiting.emit();\n      // Animate out before setting display to none\n      setTimeout(() => {\n        this.el.style.display = 'none';\n        this.cpslModalExited.emit();\n      }, this.exitTransitionDuration * 1000);\n    } else {\n      this.cpslModalEntering.emit();\n      this.el.style.display = 'flex';\n      setTimeout(() => {\n        this.cpslModalEntered.emit();\n      }, this.enterTransitionDuration * 1000);\n    }\n  }\n\n  componentDidLoad() {\n    this.toggleHeight();\n  }\n\n  render() {\n    return (\n      <Host class={{ 'open': this.open, 'elevated': this.elevated, 'no-overlay': this.noOverlay }}>\n        {!this.noOverlay && (\n          <cpsl-overlay\n            zIndexOverride={this.zIndexOverride ? this.zIndexOverride : undefined}\n            id=\"overlay\"\n            open={this.open}\n            enterTransitionDuration={this.enterTransitionDuration}\n            exitTransitionDuration={this.exitTransitionDuration}\n          />\n        )}\n        <cpsl-card class=\"card\" style={{ transitionDuration: this.open ? `${this.exitTransitionDuration}s` : `${this.enterTransitionDuration}s` }}>\n          <slot></slot>\n        </cpsl-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/cpsl-nav-button.entry.js

@@ -0,0 +1,36 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-91db3414.js';
+
+const cpslNavButtonCss = ":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)}";
+const CpslNavButtonStyle0 = cpslNavButtonCss;
+
+const CpslNavButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.cpslNavButtonClick = createEvent(this, "cpslNavButtonClick", 7);
+        this.cpslNavButtonSubRouteClick = createEvent(this, "cpslNavButtonSubRouteClick", 7);
+        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: '502ee237751a59264f26e3cc0bb1d98c3b27416c' }, h("cpsl-button", { key: 'bd3ad1ae9cf793a62c706912cabcf944b1519684', id: this.route, class: { 'main-route': true, 'selected': !!selectedSubRoute || isMainRouteSelected }, fullWidth: true, variant: "primary", disabled: this.disabled, onClick: this.handleNavButtonClick }, h("slot", { key: '45f67ecbb581fda045d786bf4d82ef7740fd4ee7', name: "start" }), h("slot", { key: '53ef86ef731b99344e398162429217adc8807b3f' }), h("slot", { key: '248fdf014c63862a45a9faa5b03a9994c9ddd50c', name: "end" })), (!!selectedSubRoute || isMainRouteSelected) && !!((_b = this.subRoutes) === null || _b === void 0 ? void 0 : _b.length) && (h("div", { key: '766e04ef327cb4291a5cde6c38e267b97703dbb0', 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)))))));
+    }
+    get el() { return getElement(this); }
+};
+CpslNavButton.style = CpslNavButtonStyle0;
+
+export { CpslNavButton as cpsl_nav_button };
+
+//# sourceMappingURL=cpsl-nav-button.entry.js.map

package/dist/esm/cpsl-nav-button.entry.js.map

@@ -0,0 +1 @@
+{"file":"cpsl-nav-button.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,w2JAAw2J,CAAC;AACl4J,4BAAe,gBAAgB;;MCMlB,aAAa;;;;;QAuChB,yBAAoB,GAAG;YAC7B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC1C,CAAC;QAOM,wBAAmB,GAAG,CAAC,KAAa,KAAK;YAC/C,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC7C,CAAC;wBA3C4C,KAAK;;;;;;;IA6CnD,MAAM;;QACJ,MAAM,gBAAgB,GAAG,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,KAAK,EAAE,GAAG,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,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEjH,QACE,EAAC,IAAI,uDACH,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,IAElC,6DAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,8DAAa,EACb,6DAAM,IAAI,EAAC,KAAK,GAAQ,CACZ,EACb,CAAC,CAAC,CAAC,gBAAgB,IAAI,mBAAmB,KAAK,CAAC,EAAC,MAAA,IAAI,CAAC,SAAS,0CAAE,MAAM,CAAA,KACtE,4DAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,KACpB,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,EACP;KACH;;;;;;;","names":[],"sources":["src/components/cpsl-nav-button/cpsl-nav-button.scss?tag=cpsl-nav-button&encapsulation=shadow","src/components/cpsl-nav-button/cpsl-nav-button.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n\n  gap: 8px;\n  padding: 0px;\n  box-sizing: border-box;\n  width: 100%;\n\n  background: var(--cpsl-color-background-4);\n  border-radius: var(--cpsl-border-radius-primary-button);\n  overflow: hidden;\n}\n\n.sub-route-container {\n  display: flex;\n  flex-direction: column;\n\n  gap: 8px;\n  border-left: 1px solid var(--cpsl-color-background-16);\n  padding-left: 16px;\n  margin-left: 16px;\n  margin-bottom: 8px;\n  margin-right: 8px;\n  background: var(--cpsl-color-background-4);\n}\n\n.sub-route {\n  --button-padding-start: 8px;\n  --button-padding-end: 8px;\n  --button-padding-top: 8px;\n  --button-padding-bottom: 8px;\n  --button-justify-content: start;\n\n  // DEFAULT\n  --button-primary-color: var(--cpsl-color-background-48);\n  --button-primary-background-color: var(--cpsl-color-background-4);\n  --button-primary-border-color: var(--cpsl-color-background-4);\n  --button-primary-icon-color: var(--cpsl-color-text-primary);\n  // DISABLED\n  --button-primary-disabled-color: var(--cpsl-color-text-primary);\n  --button-primary-disabled-background-color: var(--cpsl-color-background-4);\n  --button-primary-disabled-border-color: var(--cpsl-color-background-4);\n  --button-primary-disabled-icon-color: var(--cpsl-color-text-primary);\n  // HOVER\n  --button-primary-hover-color: var(--cpsl-color-background-48);\n  --button-primary-hover-background-color: var(--cpsl-color-background-0);\n  --button-primary-hover-border-color: var(--cpsl-color-background-4);\n  --button-primary-hover-icon-color: var(--cpsl-color-background-48);\n  // ACTIVE\n  --button-primary-active-color: var(--cpsl-color-text-primary);\n  --button-primary-active-background-color: var(--cpsl-color-background-4);\n  --button-primary-active-border-color: var(--cpsl-color-background-4);\n  --button-primary-active-icon-color: var(--cpsl-color-text-primary);\n\n  &.selected {\n    // DEFAULT\n    --button-primary-color: var(--cpsl-color-text-primary);\n    --button-primary-background-color: var(--cpsl-color-background-0);\n    --button-primary-border-color: var(--cpsl-color-background-0);\n    --button-primary-icon-color: var(--cpsl-color-background-48);\n    // DISABLED\n    --button-primary-disabled-color: var(--cpsl-color-background-48);\n    --button-primary-disabled-background-color: var(--cpsl-color-background-0);\n    --button-primary-disabled-border-color: var(--cpsl-color-background-0);\n    --button-primary-disabled-icon-color: var(--cpsl-color-background-48);\n    // HOVER\n    --button-primary-hover-color: var(--cpsl-color-text-primary);\n    --button-primary-hover-background-color: var(--cpsl-color-background-0);\n    --button-primary-hover-border-color: var(--cpsl-color-background-4);\n    --button-primary-hover-icon-color: var(--cpsl-color-background-48);\n    // ACTIVE\n    --button-primary-active-color: var(--cpsl-color-background-48);\n    --button-primary-active-background-color: var(--cpsl-color-background-4);\n    --button-primary-active-border-color: var(--cpsl-color-background-4);\n    --button-primary-active-icon-color: var(--cpsl-color-background-48);\n  }\n}\n\n.main-route {\n  --button-padding-start: 8px;\n  --button-padding-end: 8px;\n  --button-padding-top: 8px;\n  --button-padding-bottom: 8px;\n  --button-justify-content: start;\n\n  // DEFAULT\n  --button-primary-color: var(--cpsl-color-background-48);\n  --button-primary-background-color: var(--cpsl-color-background-0);\n  --button-primary-border-color: var(--cpsl-color-background-0);\n  --button-primary-icon-color: var(--cpsl-color-background-48);\n  // DISABLED\n  --button-primary-disabled-color: var(--cpsl-color-background-48);\n  --button-primary-disabled-background-color: var(--cpsl-color-background-0);\n  --button-primary-disabled-border-color: var(--cpsl-color-background-0);\n  --button-primary-disabled-icon-color: var(--cpsl-color-background-48);\n  // HOVER\n  --button-primary-hover-color: var(--cpsl-color-background-48);\n  --button-primary-hover-background-color: var(--cpsl-color-background-4);\n  --button-primary-hover-border-color: var(--cpsl-color-background-4);\n  --button-primary-hover-icon-color: var(--cpsl-color-background-48);\n  // ACTIVE\n  --button-primary-active-color: var(--cpsl-color-background-48);\n  --button-primary-active-background-color: var(--cpsl-color-background-4);\n  --button-primary-active-border-color: var(--cpsl-color-background-4);\n  --button-primary-active-icon-color: var(--cpsl-color-background-48);\n\n  &.selected {\n    // DEFAULT\n    --button-primary-color: var(--cpsl-color-text-primary);\n    --button-primary-background-color: var(--cpsl-color-background-4);\n    --button-primary-border-color: var(--cpsl-color-background-4);\n    --button-primary-icon-color: var(--cpsl-color-text-primary);\n    // DISABLED\n    --button-primary-disabled-color: var(--cpsl-color-text-primary);\n    --button-primary-disabled-background-color: var(--cpsl-color-background-4);\n    --button-primary-disabled-border-color: var(--cpsl-color-background-4);\n    --button-primary-disabled-icon-color: var(--cpsl-color-text-primary);\n    // HOVER\n    --button-primary-hover-color: var(--cpsl-color-text-primary);\n    --button-primary-hover-background-color: var(--cpsl-color-background-4);\n    --button-primary-hover-border-color: var(--cpsl-color-background-4);\n    --button-primary-hover-icon-color: var(--cpsl-color-text-primary);\n    // ACTIVE\n    --button-primary-active-color: var(--cpsl-color-text-primary);\n    --button-primary-active-background-color: var(--cpsl-color-background-4);\n    --button-primary-active-border-color: var(--cpsl-color-background-4);\n    --button-primary-active-icon-color: var(--cpsl-color-text-primary);\n  }\n}\n","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"],"version":3}

package/dist/esm/cpsl-row.entry.js

@@ -0,0 +1,18 @@
+import { r as registerInstance, h, H as Host } from './index-91db3414.js';
+
+const cpslRowCss = ":host{display:flex;flex-wrap:wrap}";
+const CpslRowStyle0 = cpslRowCss;
+
+const CpslRow = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: '29ed5413502c575ff74a496ae6ee83ce375635b0' }, h("slot", { key: '864af3ce3db31f98f7effb837fabec43f5a0a6ac' })));
+    }
+};
+CpslRow.style = CpslRowStyle0;
+
+export { CpslRow as cpsl_row };
+
+//# sourceMappingURL=cpsl-row.entry.js.map

package/dist/esm/cpsl-row.entry.js.map

@@ -0,0 +1 @@
+{"file":"cpsl-row.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,oCAAoC,CAAC;AACxD,sBAAe,UAAU;;MCMZ,OAAO;;;;IAClB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/cpsl-row/cpsl-row.scss?tag=cpsl-row&encapsulation=shadow","src/components/cpsl-row/cpsl-row.tsx"],"sourcesContent":["@import './cpsl-row.vars';\n\n// Row\n// --------------------------------------------------\n\n:host {\n  display: flex;\n\n  flex-wrap: wrap;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-row',\n  styleUrl: 'cpsl-row.scss',\n  shadow: true,\n})\nexport class CpslRow {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}