@getpara/core-components 0.1.0

package/dist/collection/components/cpsl-progress-indicator/cpsl-progress-indicator.js

@@ -0,0 +1,71 @@
+import { Host, h } from "@stencil/core";
+export class CpslProgressIndicator {
+    constructor() {
+        this.totalSteps = undefined;
+        this.step = undefined;
+    }
+    render() {
+        const steps = new Array(this.totalSteps).fill(0).map((_, i) => {
+            let resp = { active: false, previous: false };
+            if (i === this.step) {
+                resp.active = true;
+            }
+            else if (i < this.step) {
+                resp.previous = true;
+            }
+            return resp;
+        });
+        return (h(Host, null, steps.map(step => (h("div", { class: { step: true, active: step.active, previous: step.previous } })))));
+    }
+    static get is() { return "cpsl-progress-indicator"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-progress-indicator.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-progress-indicator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "totalSteps": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of steps."
+                },
+                "attribute": "total-steps",
+                "reflect": false
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current zero based step."
+                },
+                "attribute": "step",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=cpsl-progress-indicator.js.map

package/dist/collection/components/cpsl-progress-indicator/cpsl-progress-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-progress-indicator.js","sourceRoot":"","sources":["../../../../src/components/cpsl-progress-indicator/cpsl-progress-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,qBAAqB;;;;;IAWhC,MAAM;QACJ,MAAM,KAAK,GAAW,IAAI,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACpE,IAAI,IAAI,GAAS,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;YACpD,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;gBACpB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACrB,CAAC;iBAAM,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;gBACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACvB,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;QAEH,OAAO,CACL,EAAC,IAAI,QACF,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,WAAK,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAI,CAC7E,CAAC,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { Step } from './progress-indicator-interface.js';\n\n@Component({\n  tag: 'cpsl-progress-indicator',\n  styleUrl: 'cpsl-progress-indicator.scss',\n  shadow: true,\n})\nexport class CpslProgressIndicator {\n  /**\n   * Total number of steps.\n   */\n  @Prop() totalSteps: number;\n\n  /**\n   * Current zero based step.\n   */\n  @Prop() step: number;\n\n  render() {\n    const steps: Step[] = new Array(this.totalSteps).fill(0).map((_, i) => {\n      let resp: Step = { active: false, previous: false };\n      if (i === this.step) {\n        resp.active = true;\n      } else if (i < this.step) {\n        resp.previous = true;\n      }\n      return resp;\n    });\n\n    return (\n      <Host>\n        {steps.map(step => (\n          <div class={{ step: true, active: step.active, previous: step.previous }} />\n        ))}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-progress-indicator/progress-indicator-interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=progress-indicator-interface.js.map

package/dist/collection/components/cpsl-progress-indicator/progress-indicator-interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-indicator-interface.js","sourceRoot":"","sources":["../../../../src/components/cpsl-progress-indicator/progress-indicator-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface Step {\n  active: boolean;\n  previous: boolean;\n}\n"]}

package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.css

@@ -0,0 +1,90 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+:host {
+  --qr-color: var(--cpsl-color-qr-fill);
+  --qr-background-color: var(--cpsl-color-qr-background);
+  --qr-border-color: var(--cpsl-color-qr-border);
+  --qr-border-radius: var(--cpsl-border-radius-qr-code);
+  --qr-border-width: 0px;
+  --qr-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.06);
+  --qr-padding-top: 12px;
+  --qr-padding-end: 12px;
+  --qr-padding-bottom: 12px;
+  --qr-padding-start: 12px;
+  display: inline-block;
+}
+
+.qr-container {
+  -webkit-padding-start: var(--qr-padding-start);
+  padding-inline-start: var(--qr-padding-start);
+  -webkit-padding-end: var(--qr-padding-end);
+  padding-inline-end: var(--qr-padding-end);
+  padding-top: var(--qr-padding-top);
+  padding-bottom: var(--qr-padding-bottom);
+  box-sizing: border-box;
+  color: var(--qr-color);
+  border-style: solid;
+  border-width: var(--qr-border-width);
+  border-color: var(--qr-border-color);
+  border-radius: var(--qr-border-radius);
+  background: var(--qr-background-color);
+  box-shadow: var(--qr-box-shadow);
+}
+
+.qr-code {
+  width: 100%;
+  height: 100%;
+}

package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.js

@@ -0,0 +1,139 @@
+import { Host, h } from "@stencil/core";
+import QrCodeWithLogo from "qrcode-with-logos";
+import { Icons } from "../../assets/icons/index.js";
+export class CpslQrCode {
+    constructor() {
+        this.url = undefined;
+        this.imageSrc = undefined;
+        this.size = 286;
+        this.icon = undefined;
+    }
+    componentDidLoad() {
+        const imageSrc = this.icon && typeof window !== undefined ? `data:image/svg+xml;base64,${window === null || window === void 0 ? void 0 : window.btoa(Icons[this.icon])}` : this.imageSrc;
+        new QrCodeWithLogo({
+            content: this.url,
+            width: 1000,
+            image: this.imgEl,
+            logo: imageSrc
+                ? {
+                    src: imageSrc,
+                    borderRadius: 16,
+                    borderWidth: -20,
+                }
+                : '',
+            dotsOptions: {
+                type: 'dot',
+            },
+            cornersOptions: {
+                type: 'rounded',
+                radius: {
+                    inner: 8,
+                    outer: 32,
+                },
+            },
+            nodeQrCodeOptions: {
+                margin: 0,
+                errorCorrectionLevel: 'H',
+            },
+        });
+    }
+    get imgEl() {
+        return this.el.shadowRoot.getElementById('qr-code');
+    }
+    render() {
+        return (h(Host, { key: '5d33fffc63f8435f8811909016ff6dd844f34ef1' }, h("div", { key: '8b0c863ee11da247165c8ca73aa53fb3b597c421', id: "qr-container", class: "qr-container", style: { width: `${this.size}px`, height: `${this.size}px` } }, h("img", { key: '700d4fd92201aee190a069cfbe89c124eb54e5c6', id: "qr-code", class: "qr-code" }))));
+    }
+    static get is() { return "cpsl-qr-code"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-qr-code.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-qr-code.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL for the QR code to link to."
+                },
+                "attribute": "url",
+                "reflect": false
+            },
+            "imageSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Source for the center image of the QR code."
+                },
+                "attribute": "image-src",
+                "reflect": false
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the QR code in pixels.\nDefault is 250."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "286"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconType",
+                    "resolved": "\"search\" | \"lg\" | \"alertCircle\" | \"alertTriangle\" | \"alignVerticalCenter\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arbitrumBrand\" | \"arrowCircleBrokenDownLeft\" | \"arrowCircleDownFilled\" | \"arrowNarrow\" | \"arrow\" | \"asterisk\" | \"backupKit\" | \"bank\" | \"baseBrand\" | \"brush\" | \"celoBrand\" | \"checkCircleFilled\" | \"checkCircle\" | \"checkSquare\" | \"check\" | \"chevronDown\" | \"chevronRight\" | \"chevronSelectorVertical\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"code\" | \"copy07\" | \"copy\" | \"cosmos\" | \"creditCard02\" | \"creditCard\" | \"cube03\" | \"cubeOutline\" | \"cube\" | \"currencyDollar\" | \"decentBrand\" | \"decent\" | \"dell\" | \"discordBrand\" | \"discord\" | \"dot\" | \"dots\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"edit02\" | \"emptyCircle\" | \"ethereum\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"folder\" | \"githubBrand\" | \"github\" | \"globe\" | \"googleBrand\" | \"google\" | \"gridDots\" | \"helpCircle\" | \"heroAlertCircle\" | \"heroCheckmarkCapsule\" | \"heroCheckmark\" | \"heroEmail\" | \"heroExternalConnection\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroPlusCircleCapsule\" | \"heroPlusCircle\" | \"heroWallet\" | \"home\" | \"hp\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"laptop\" | \"lenovo\" | \"lightning01\" | \"lightning\" | \"linkExternal\" | \"linkedinBrand\" | \"linkedin\" | \"lockKeyholeCircle\" | \"logOut\" | \"mail\" | \"menu\" | \"monitor\" | \"moonpayBrand\" | \"moreLoginOptions\" | \"motorola\" | \"nobleBrand\" | \"optimismBrand\" | \"paraBlackBg\" | \"paraBrand\" | \"paraIconBrand\" | \"paraIconQr\" | \"paraIcon\" | \"paraLogo\" | \"paraRingsDark\" | \"paraRings\" | \"para\" | \"passcode\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"plus\" | \"polygonBrand\" | \"polygon\" | \"puzzlePiece\" | \"qrCode02\" | \"qrCode\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"samsung\" | \"send\" | \"settings\" | \"share\" | \"shield\" | \"signalBrand\" | \"signal\" | \"sliders\" | \"snapchatBrand\" | \"snapchat\" | \"solana\" | \"spacingHeight\" | \"star04Filled\" | \"stars01Filled\" | \"stars\" | \"stopSquare\" | \"stripeBrand\" | \"telegramBrand\" | \"telegram\" | \"tetherBrand\" | \"tikTokBrand\" | \"tikTok\" | \"trash\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"usdcBrand\" | \"userCircle\" | \"user\" | \"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",
+                            "path": "../../interface.js",
+                            "id": "src/interface.ts::IconType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the icon. If both `icon` and `src` are provided, `icon` will be used."
+                },
+                "attribute": "icon",
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=cpsl-qr-code.js.map

package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-qr-code.js","sourceRoot":"","sources":["../../../../src/components/cpsl-qr-code/cpsl-qr-code.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAOpD,MAAM,OAAO,UAAU;;;;oBAiBG,GAAG;;;IAO3B,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,IAAI,OAAO,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,6BAA6B,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;QAE1I,IAAI,cAAc,CAAC;YACjB,OAAO,EAAE,IAAI,CAAC,GAAG;YACjB,KAAK,EAAE,IAAI;YACX,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,QAAQ;gBACZ,CAAC,CAAC;oBACE,GAAG,EAAE,QAAQ;oBACb,YAAY,EAAE,EAAE;oBAChB,WAAW,EAAE,CAAC,EAAE;iBACjB;gBACH,CAAC,CAAC,EAAE;YACN,WAAW,EAAE;gBACX,IAAI,EAAE,KAAK;aACZ;YACD,cAAc,EAAE;gBACd,IAAI,EAAE,SAAS;gBACf,MAAM,EAAE;oBACN,KAAK,EAAE,CAAC;oBACR,KAAK,EAAE,EAAE;iBACV;aACF;YACD,iBAAiB,EAAE;gBACjB,MAAM,EAAE,CAAC;gBACT,oBAAoB,EAAE,GAAG;aAC1B;SACF,CAAC,CAAC;IACL,CAAC;IAED,IAAY,KAAK;QACf,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,SAAS,CAAqB,CAAC;IAC1E,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,EAAE,EAAC,cAAc,EAAC,KAAK,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE;gBACtG,4DAAK,EAAE,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,GAAG,CAChC,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Prop } from '@stencil/core';\nimport QrCodeWithLogo from 'qrcode-with-logos';\nimport { IconType } from '../../interface.js';\nimport { Icons } from '../../assets/icons/index.js';\n\n@Component({\n  tag: 'cpsl-qr-code',\n  styleUrl: 'cpsl-qr-code.scss',\n  shadow: true,\n})\nexport class CpslQrCode {\n  @Element() el!: HTMLCpslQrCodeElement;\n\n  /**\n   * URL for the QR code to link to.\n   */\n  @Prop() url: string;\n\n  /**\n   * Source for the center image of the QR code.\n   */\n  @Prop() imageSrc?: string;\n\n  /**\n   * Size of the QR code in pixels.\n   * Default is 250.\n   */\n  @Prop() size?: number = 286;\n\n  /**\n   * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.\n   */\n  @Prop() icon?: IconType;\n\n  componentDidLoad() {\n    const imageSrc = this.icon && typeof window !== undefined ? `data:image/svg+xml;base64,${window?.btoa(Icons[this.icon])}` : this.imageSrc;\n\n    new QrCodeWithLogo({\n      content: this.url,\n      width: 1000,\n      image: this.imgEl,\n      logo: imageSrc\n        ? {\n            src: imageSrc,\n            borderRadius: 16,\n            borderWidth: -20,\n          }\n        : '',\n      dotsOptions: {\n        type: 'dot',\n      },\n      cornersOptions: {\n        type: 'rounded',\n        radius: {\n          inner: 8,\n          outer: 32,\n        },\n      },\n      nodeQrCodeOptions: {\n        margin: 0,\n        errorCorrectionLevel: 'H',\n      },\n    });\n  }\n\n  private get imgEl(): HTMLImageElement {\n    return this.el.shadowRoot.getElementById('qr-code') as HTMLImageElement;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div id=\"qr-container\" class=\"qr-container\" style={{ width: `${this.size}px`, height: `${this.size}px` }}>\n          <img id=\"qr-code\" class=\"qr-code\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-radio/cpsl-radio.css

@@ -0,0 +1,97 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+:host {
+  --container-height: 20px;
+  --container-width: 20px;
+  --container-border-radius: var(--cpsl-border-radius-radio);
+  --container-border-width-default: 2px;
+  --container-border-width-checked: 5px;
+  --container-background-color-default: var(--cpsl-color-radio-surface-default);
+  --container-border-color-default: var(--cpsl-color-radio-border-default);
+  --container-background-color-checked: var(--cpsl-color-radio-surface-checked);
+  --container-border-color-checked: var(--cpsl-color-radio-border-checked);
+  display: block;
+  position: relative;
+  height: var(--container-height);
+  width: var(--container-width);
+  cursor: pointer;
+}
+
+input {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+  opacity: 0;
+}
+
+span.container {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--container-border-radius);
+  border: var(--container-border-width-default) solid;
+  background: var(--container-background-color-default);
+  border-color: var(--container-border-color-default);
+  transition: all 0.15s ease-in-out;
+}
+span.container.checked {
+  background: var(--container-background-color-checked);
+  border-color: var(--container-border-color-checked);
+  border-width: var(--container-border-width-checked);
+}

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

@@ -0,0 +1,66 @@
+import { Host, h } from "@stencil/core";
+export class CpslRadio {
+    constructor() {
+        this.handleRadioClick = () => {
+            if (!this.checked) {
+                this.cpslRadioChanged.emit(!this.checked);
+            }
+        };
+        this.checked = undefined;
+    }
+    render() {
+        return (h(Host, { key: 'a0440f0feb4b7a67517d1d8278e9bcbb2c7ef764' }, h("input", { key: '54dc5c3e64777504d5c851940d785a90de2d2882', type: "radio", checked: this.checked }), h("span", { key: 'dc5d326b957993e0a14ae6827751e946e141d3e6', onClick: this.handleRadioClick, class: { container: true, checked: this.checked } })));
+    }
+    static get is() { return "cpsl-radio"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-radio.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-radio.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the radio is checked."
+                },
+                "attribute": "checked",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cpslRadioChanged",
+                "name": "cpslRadioChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the radio state changes."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=cpsl-radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-radio.js","sourceRoot":"","sources":["../../../../src/components/cpsl-radio/cpsl-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,SAAS;;QAWZ,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;gBAClB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC5C,CAAC;QACH,CAAC,CAAC;;;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAO,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI;YAC7C,6DAAM,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,GAAI,CACtF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, EventEmitter, Host, Prop, Event, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-radio',\n  styleUrl: 'cpsl-radio.scss',\n  shadow: true,\n})\nexport class CpslRadio {\n  /**\n   * Whether or not the radio is checked.\n   */\n  @Prop() checked: boolean;\n\n  /**\n   * Emitted when the radio state changes.\n   */\n  @Event() cpslRadioChanged!: EventEmitter<boolean>;\n\n  private handleRadioClick = () => {\n    if (!this.checked) {\n      this.cpslRadioChanged.emit(!this.checked);\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <input type=\"radio\" checked={this.checked} />\n        <span onClick={this.handleRadioClick} class={{ container: true, checked: this.checked }} />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-row/cpsl-row.css

@@ -0,0 +1,136 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+:host {
+  display: flex;
+  flex-wrap: wrap;
+}

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

@@ -0,0 +1,19 @@
+import { Host, h } from "@stencil/core";
+export class CpslRow {
+    render() {
+        return (h(Host, { key: '29ed5413502c575ff74a496ae6ee83ce375635b0' }, h("slot", { key: '864af3ce3db31f98f7effb837fabec43f5a0a6ac' })));
+    }
+    static get is() { return "cpsl-row"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-row.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-row.css"]
+        };
+    }
+}
+//# sourceMappingURL=cpsl-row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-row.js","sourceRoot":"","sources":["../../../../src/components/cpsl-row/cpsl-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,OAAO;IAClB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["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"]}