@usecapsule/core-components 3.1.0 → 3.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/capsule/capsule.esm.js +1 -1
- package/dist/capsule/capsule.esm.js.map +1 -1
- package/dist/capsule/index.esm.js.map +1 -1
- package/dist/capsule/{p-5ed5e96c.entry.js → p-02072c68.entry.js} +2 -2
- package/dist/capsule/{p-5ed5e96c.entry.js.map → p-02072c68.entry.js.map} +1 -1
- package/dist/capsule/p-1474c545.entry.js +29 -0
- package/dist/capsule/{p-6e900654.entry.js.map → p-1474c545.entry.js.map} +1 -1
- package/dist/capsule/p-2c16694d.entry.js +2 -0
- package/dist/capsule/{p-397edab5.entry.js.map → p-2c16694d.entry.js.map} +1 -1
- package/dist/capsule/{p-52d6ebee.entry.js → p-41088cd4.entry.js} +2 -2
- package/dist/capsule/{p-52d6ebee.entry.js.map → p-41088cd4.entry.js.map} +1 -1
- package/dist/capsule/{p-f9351426.entry.js → p-6dcaee48.entry.js} +2 -2
- package/dist/capsule/{p-f9351426.entry.js.map → p-6dcaee48.entry.js.map} +1 -1
- package/dist/capsule/p-7dde3172.js +3 -0
- package/dist/capsule/p-7dde3172.js.map +1 -0
- package/dist/capsule/p-a6aaf3f4.entry.js +10 -0
- package/dist/capsule/{p-86e6cba5.entry.js.map → p-a6aaf3f4.entry.js.map} +1 -1
- package/dist/capsule/{p-70f95c93.entry.js → p-b976b6f0.entry.js} +2 -2
- package/dist/capsule/{p-70f95c93.entry.js.map → p-b976b6f0.entry.js.map} +1 -1
- package/dist/cjs/capsule.cjs.js +9 -9
- package/dist/cjs/capsule.cjs.js.map +1 -1
- package/dist/cjs/cpsl-alert_33.cjs.entry.js +45 -39
- package/dist/cjs/cpsl-alert_33.cjs.entry.js.map +1 -1
- package/dist/cjs/cpsl-animation.cjs.entry.js +2 -2
- package/dist/cjs/cpsl-col.cjs.entry.js +2 -2
- package/dist/cjs/cpsl-grid.cjs.entry.js +3 -3
- package/dist/cjs/cpsl-info-box.cjs.entry.js +2 -2
- package/dist/cjs/cpsl-modal-v2.cjs.entry.js +2 -2
- package/dist/cjs/cpsl-modal-v2.cjs.entry.js.map +1 -1
- package/dist/cjs/cpsl-row.cjs.entry.js +2 -2
- package/dist/cjs/index-528f7428.js +2103 -0
- package/dist/cjs/index-528f7428.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/cpsl-alert/cpsl-alert.js +1 -1
- package/dist/collection/components/cpsl-alert/cpsl-alert.js.map +1 -1
- package/dist/collection/components/cpsl-animation/cpsl-animation.js +1 -1
- package/dist/collection/components/cpsl-app-bar/cpsl-app-bar.js +2 -2
- package/dist/collection/components/cpsl-app-bar/cpsl-app-bar.js.map +1 -1
- package/dist/collection/components/cpsl-avatar/cpsl-avatar.js +1 -1
- package/dist/collection/components/cpsl-button/cpsl-button.js +2 -2
- package/dist/collection/components/cpsl-button-group/cpsl-button-group.js +1 -1
- package/dist/collection/components/cpsl-card/cpsl-card.js +1 -1
- package/dist/collection/components/cpsl-checkbox/cpsl-checkbox.js +1 -1
- package/dist/collection/components/cpsl-code-input/cpsl-code-input.js +2 -2
- package/dist/collection/components/cpsl-code-input/cpsl-code-input.js.map +1 -1
- package/dist/collection/components/cpsl-col/cpsl-col.js +1 -1
- package/dist/collection/components/cpsl-divider/cpsl-divider.js +1 -1
- package/dist/collection/components/cpsl-drawer/cpsl-drawer.js +2 -2
- package/dist/collection/components/cpsl-drawer/cpsl-drawer.js.map +1 -1
- package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js +1 -1
- package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js.map +1 -1
- package/dist/collection/components/cpsl-file-upload/cpsl-file-upload.js +1 -1
- package/dist/collection/components/cpsl-file-upload/cpsl-file-upload.js.map +1 -1
- package/dist/collection/components/cpsl-grid/cpsl-grid.js +2 -2
- package/dist/collection/components/cpsl-icon/cpsl-icon.js +1 -1
- package/dist/collection/components/cpsl-info-box/cpsl-info-box.js +1 -1
- package/dist/collection/components/cpsl-input/cpsl-input.js +1 -1
- package/dist/collection/components/cpsl-input/cpsl-input.js.map +1 -1
- package/dist/collection/components/cpsl-modal-v2/cpsl-modal-v2.js +1 -1
- package/dist/collection/components/cpsl-modal-v2/cpsl-modal-v2.js.map +1 -1
- package/dist/collection/components/cpsl-nav-button-group/cpsl-nav-button-group.js +1 -1
- package/dist/collection/components/cpsl-overlay/cpsl-overlay.js +1 -1
- package/dist/collection/components/cpsl-pagination/cpsl-pagination.js +1 -1
- package/dist/collection/components/cpsl-pill/cpsl-pill.js +1 -1
- package/dist/collection/components/cpsl-popover/cpsl-popover.js +2 -2
- package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.js +1 -1
- package/dist/collection/components/cpsl-radio/cpsl-radio.js +1 -1
- package/dist/collection/components/cpsl-row/cpsl-row.js +1 -1
- package/dist/collection/components/cpsl-select/cpsl-select.js +1 -1
- package/dist/collection/components/cpsl-select/cpsl-select.js.map +1 -1
- package/dist/collection/components/cpsl-select-item/cpsl-select-item.js +1 -1
- package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js +1 -1
- package/dist/collection/components/cpsl-spinner/cpsl-spinner.js +2 -2
- package/dist/collection/components/cpsl-switch/cpsl-switch.js +1 -1
- package/dist/collection/components/cpsl-tab/cpsl-tab.js +1 -1
- package/dist/collection/components/cpsl-table/cpsl-table.css +1 -9
- package/dist/collection/components/cpsl-table/cpsl-table.js +7 -1
- package/dist/collection/components/cpsl-table/cpsl-table.js.map +1 -1
- package/dist/collection/components/cpsl-tabs/cpsl-tabs.js +1 -1
- package/dist/collection/components/cpsl-text/cpsl-text.js +1 -1
- package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js +1 -1
- package/dist/esm/capsule.js +10 -10
- package/dist/esm/capsule.js.map +1 -1
- package/dist/esm/cpsl-alert_33.entry.js +45 -39
- package/dist/esm/cpsl-alert_33.entry.js.map +1 -1
- package/dist/esm/cpsl-animation.entry.js +2 -2
- package/dist/esm/cpsl-col.entry.js +2 -2
- package/dist/esm/cpsl-grid.entry.js +3 -3
- package/dist/esm/cpsl-info-box.entry.js +2 -2
- package/dist/esm/cpsl-modal-v2.entry.js +2 -2
- package/dist/esm/cpsl-modal-v2.entry.js.map +1 -1
- package/dist/esm/cpsl-row.entry.js +2 -2
- package/dist/esm/index-b188f201.js +2072 -0
- package/dist/esm/index-b188f201.js.map +1 -0
- package/dist/esm/loader.js +2 -2
- package/dist/esm/polyfills/core-js.js +11 -0
- package/dist/esm/polyfills/dom.js +79 -0
- package/dist/esm/polyfills/es5-html-element.js +1 -0
- package/dist/esm/polyfills/index.js +34 -0
- package/dist/esm/polyfills/system.js +6 -0
- package/dist/loader/cdn.js +3 -1
- package/dist/loader/index.cjs.js +3 -1
- package/dist/loader/index.es2017.js +3 -1
- package/dist/loader/index.js +3 -1
- package/dist/types/components/cpsl-table/cpsl-table.d.ts +2 -0
- package/dist/types/stencil-public-runtime.d.ts +8 -3
- package/package.json +2 -2
- package/dist/capsule/p-397edab5.entry.js +0 -2
- package/dist/capsule/p-6e71539d.js +0 -3
- package/dist/capsule/p-6e71539d.js.map +0 -1
- package/dist/capsule/p-6e900654.entry.js +0 -29
- package/dist/capsule/p-86e6cba5.entry.js +0 -10
- package/dist/cjs/index-85125285.js +0 -1414
- package/dist/cjs/index-85125285.js.map +0 -1
- package/dist/esm/index-b9a060b3.js +0 -1383
- package/dist/esm/index-b9a060b3.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as d,f as i,h as n,H as a}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as d,f as i,h as n,H as a}from"./p-7dde3172.js";const p={xs:"(min-width: 0px)",sm:"(min-width: 576px)",md:"(min-width: 768px)",lg:"(min-width: 992px)",xl:"(min-width: 1200px)"};const l=d=>{if(d===undefined||d===""){return true}if(window.matchMedia){const i=p[d];return window.matchMedia(i).matches}return false};const r=":host{-webkit-padding-start:var(--cpsl-grid-column-padding-xs, var(--cpsl-grid-column-padding, 0px));padding-inline-start:var(--cpsl-grid-column-padding-xs, var(--cpsl-grid-column-padding, 0px));-webkit-padding-end:var(--cpsl-grid-column-padding-xs, var(--cpsl-grid-column-padding, 0px));padding-inline-end:var(--cpsl-grid-column-padding-xs, var(--cpsl-grid-column-padding, 0px));padding-top:var(--cpsl-grid-column-padding-xs, var(--cpsl-grid-column-padding, 0px));padding-bottom:var(--cpsl-grid-column-padding-xs, var(--cpsl-grid-column-padding, 0px));margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;box-sizing:border-box;position:relative;flex-basis:0;flex-grow:1;width:100%;max-width:100%;min-height:1px}@media (min-width: 576px){:host{-webkit-padding-start:var(--cpsl-grid-column-padding-sm, var(--cpsl-grid-column-padding, 0px));padding-inline-start:var(--cpsl-grid-column-padding-sm, var(--cpsl-grid-column-padding, 0px));-webkit-padding-end:var(--cpsl-grid-column-padding-sm, var(--cpsl-grid-column-padding, 0px));padding-inline-end:var(--cpsl-grid-column-padding-sm, var(--cpsl-grid-column-padding, 0px));padding-top:var(--cpsl-grid-column-padding-sm, var(--cpsl-grid-column-padding, 0px));padding-bottom:var(--cpsl-grid-column-padding-sm, var(--cpsl-grid-column-padding, 0px))}}@media (min-width: 768px){:host{-webkit-padding-start:var(--cpsl-grid-column-padding-md, var(--cpsl-grid-column-padding, 0px));padding-inline-start:var(--cpsl-grid-column-padding-md, var(--cpsl-grid-column-padding, 0px));-webkit-padding-end:var(--cpsl-grid-column-padding-md, var(--cpsl-grid-column-padding, 0px));padding-inline-end:var(--cpsl-grid-column-padding-md, var(--cpsl-grid-column-padding, 0px));padding-top:var(--cpsl-grid-column-padding-md, var(--cpsl-grid-column-padding, 0px));padding-bottom:var(--cpsl-grid-column-padding-md, var(--cpsl-grid-column-padding, 0px))}}@media (min-width: 992px){:host{-webkit-padding-start:var(--cpsl-grid-column-padding-lg, var(--cpsl-grid-column-padding, 0px));padding-inline-start:var(--cpsl-grid-column-padding-lg, var(--cpsl-grid-column-padding, 0px));-webkit-padding-end:var(--cpsl-grid-column-padding-lg, var(--cpsl-grid-column-padding, 0px));padding-inline-end:var(--cpsl-grid-column-padding-lg, var(--cpsl-grid-column-padding, 0px));padding-top:var(--cpsl-grid-column-padding-lg, var(--cpsl-grid-column-padding, 0px));padding-bottom:var(--cpsl-grid-column-padding-lg, var(--cpsl-grid-column-padding, 0px))}}@media (min-width: 1200px){:host{-webkit-padding-start:var(--cpsl-grid-column-padding-xl, var(--cpsl-grid-column-padding, 0px));padding-inline-start:var(--cpsl-grid-column-padding-xl, var(--cpsl-grid-column-padding, 0px));-webkit-padding-end:var(--cpsl-grid-column-padding-xl, var(--cpsl-grid-column-padding, 0px));padding-inline-end:var(--cpsl-grid-column-padding-xl, var(--cpsl-grid-column-padding, 0px));padding-top:var(--cpsl-grid-column-padding-xl, var(--cpsl-grid-column-padding, 0px));padding-bottom:var(--cpsl-grid-column-padding-xl, var(--cpsl-grid-column-padding, 0px))}}";const c=r;const g=typeof window!=="undefined"?window:undefined;const s=g&&!!(g.CSS&&g.CSS.supports&&g.CSS.supports("--a: 0"));const t=["","xs","sm","md","lg","xl"];const e=class{constructor(i){d(this,i);this.offset=undefined;this.offsetXs=undefined;this.offsetSm=undefined;this.offsetMd=undefined;this.offsetLg=undefined;this.offsetXl=undefined;this.pull=undefined;this.pullXs=undefined;this.pullSm=undefined;this.pullMd=undefined;this.pullLg=undefined;this.pullXl=undefined;this.push=undefined;this.pushXs=undefined;this.pushSm=undefined;this.pushMd=undefined;this.pushLg=undefined;this.pushXl=undefined;this.size=undefined;this.sizeXs=undefined;this.sizeSm=undefined;this.sizeMd=undefined;this.sizeLg=undefined;this.sizeXl=undefined}onResize(){i(this)}getColumns(d){let i;for(const n of t){const a=l(n);const p=this[d+n.charAt(0).toUpperCase()+n.slice(1)];if(a&&p!==undefined){i=p}}return i}calculateSize(){const d=this.getColumns("size");if(!d||d===""){return}const i=d==="auto"?"auto":s?`calc(calc(${d} / var(--ion-grid-columns, 12)) * 100%)`:d/12*100+"%";return{flex:`0 0 ${i}`,width:`${i}`,"max-width":`${i}`}}calculatePosition(d,i){const n=this.getColumns(d);if(!n){return}const a=s?`calc(calc(${n} / var(--ion-grid-columns, 12)) * 100%)`:n>0&&n<12?n/12*100+"%":"auto";return{[i]:a}}calculateOffset(d){return this.calculatePosition("offset",d?"margin-right":"margin-left")}calculatePull(d){return this.calculatePosition("pull",d?"left":"right")}calculatePush(d){return this.calculatePosition("push",d?"right":"left")}render(){const d=document.dir==="rtl";return n(a,{key:"e883138d5be5bfcffaa61fc3f440cfaf3c2c567d",style:Object.assign(Object.assign(Object.assign(Object.assign({},this.calculateOffset(d)),this.calculatePull(d)),this.calculatePush(d)),this.calculateSize())},n("slot",{key:"51c74a5a0895f34074b65441be91f02c3243ba8c"}))}};e.style=c;export{e as cpsl_col};
|
|
2
|
+
//# sourceMappingURL=p-b976b6f0.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["SIZE_TO_MEDIA","xs","sm","md","lg","xl","matchBreakpoint","breakpoint","undefined","window","matchMedia","mediaQuery","matches","cpslColCss","CpslColStyle0","win","SUPPORTS_VARS","CSS","supports","BREAKPOINTS","CpslCol","onResize","forceUpdate","this","getColumns","property","matched","columns","charAt","toUpperCase","slice","calculateSize","colSize","flex","width","calculatePosition","modifier","amount","calculateOffset","isRTL","calculatePull","calculatePush","render","document","dir","h","Host","key","style","Object","assign"],"sources":["src/utils/media.ts","src/components/cpsl-col/cpsl-col.scss?tag=cpsl-col&encapsulation=shadow","src/components/cpsl-col/cpsl-col.tsx"],"sourcesContent":["export const SIZE_TO_MEDIA: any = {\n xs: '(min-width: 0px)',\n sm: '(min-width: 576px)',\n md: '(min-width: 768px)',\n lg: '(min-width: 992px)',\n xl: '(min-width: 1200px)',\n};\n\n// Check if the window matches the media query\n// at the breakpoint passed\n// e.g. matchBreakpoint('sm') => true if screen width exceeds 576px\nexport const matchBreakpoint = (breakpoint: string | undefined) => {\n if (breakpoint === undefined || breakpoint === '') {\n return true;\n }\n if ((window as any).matchMedia) {\n const mediaQuery = SIZE_TO_MEDIA[breakpoint];\n return window.matchMedia(mediaQuery).matches;\n }\n return false;\n};\n","@import './cpsl-col.vars';\n\n// Column\n// --------------------------------------------------\n\n:host {\n /**\n * @prop --cpsl-grid-columns: The number of total Columns in the Grid\n * @prop --cpsl-grid-column-padding: Padding for the Column\n * @prop --cpsl-grid-column-padding-xs: Padding for the Column on xs screens and up\n * @prop --cpsl-grid-column-padding-sm: Padding for the Column on sm screens and up\n * @prop --cpsl-grid-column-padding-md: Padding for the Column on md screens and up\n * @prop --cpsl-grid-column-padding-lg: Padding for the Column on lg screens and up\n * @prop --cpsl-grid-column-padding-xl: Padding for the Column on xl screens and up\n */\n @include make-breakpoint-padding($grid-column-paddings);\n @include margin(0);\n\n box-sizing: border-box;\n\n position: relative;\n\n flex-basis: 0;\n flex-grow: 1;\n\n width: 100%;\n max-width: 100%;\n min-height: 1px; // Prevent columns from collapsing when empty\n}\n","import { Component, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';\nimport { matchBreakpoint } from '../../utils/media';\n\nconst win = typeof (window as any) !== 'undefined' ? (window as any) : undefined;\nconst SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));\nconst BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];\n\n@Component({\n tag: 'cpsl-col',\n styleUrl: 'cpsl-col.scss',\n shadow: true,\n})\nexport class CpslCol {\n /**\n * The amount to offset the column, in terms of how many columns it should shift to the end\n * of the total available.\n */\n @Prop() offset?: string;\n\n /**\n * The amount to offset the column for xs screens, in terms of how many columns it should shift\n * to the end of the total available.\n */\n @Prop() offsetXs?: string;\n\n /**\n * The amount to offset the column for sm screens, in terms of how many columns it should shift\n * to the end of the total available.\n */\n @Prop() offsetSm?: string;\n\n /**\n * The amount to offset the column for md screens, in terms of how many columns it should shift\n * to the end of the total available.\n */\n @Prop() offsetMd?: string;\n\n /**\n * The amount to offset the column for lg screens, in terms of how many columns it should shift\n * to the end of the total available.\n */\n @Prop() offsetLg?: string;\n\n /**\n * The amount to offset the column for xl screens, in terms of how many columns it should shift\n * to the end of the total available.\n */\n @Prop() offsetXl?: string;\n\n /**\n * The amount to pull the column, in terms of how many columns it should shift to the start of\n * the total available.\n */\n @Prop() pull?: string;\n\n /**\n * The amount to pull the column for xs screens, in terms of how many columns it should shift\n * to the start of the total available.\n */\n @Prop() pullXs?: string;\n /**\n * The amount to pull the column for sm screens, in terms of how many columns it should shift\n * to the start of the total available.\n */\n @Prop() pullSm?: string;\n /**\n * The amount to pull the column for md screens, in terms of how many columns it should shift\n * to the start of the total available.\n */\n @Prop() pullMd?: string;\n /**\n * The amount to pull the column for lg screens, in terms of how many columns it should shift\n * to the start of the total available.\n */\n @Prop() pullLg?: string;\n /**\n * The amount to pull the column for xl screens, in terms of how many columns it should shift\n * to the start of the total available.\n */\n @Prop() pullXl?: string;\n\n /**\n * The amount to push the column, in terms of how many columns it should shift to the end\n * of the total available.\n */\n @Prop() push?: string;\n\n /**\n * The amount to push the column for xs screens, in terms of how many columns it should shift\n * to the end of the total available.\n */\n @Prop() pushXs?: string;\n\n /**\n * The amount to push the column for sm screens, in terms of how many columns it should shift\n * to the end of the total available.\n */\n @Prop() pushSm?: string;\n\n /**\n * The amount to push the column for md screens, in terms of how many columns it should shift\n * to the end of the total available.\n */\n @Prop() pushMd?: string;\n\n /**\n * The amount to push the column for lg screens, in terms of how many columns it should shift\n * to the end of the total available.\n */\n @Prop() pushLg?: string;\n\n /**\n * The amount to push the column for xl screens, in terms of how many columns it should shift\n * to the end of the total available.\n */\n @Prop() pushXl?: string;\n\n /**\n * The size of the column, in terms of how many columns it should take up out of the total\n * available. If `\"auto\"` is passed, the column will be the size of its content.\n */\n @Prop() size?: string;\n\n /**\n * The size of the column for xs screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n */\n @Prop() sizeXs?: string;\n\n /**\n * The size of the column for sm screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n */\n @Prop() sizeSm?: string;\n\n /**\n * The size of the column for md screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n */\n @Prop() sizeMd?: string;\n\n /**\n * The size of the column for lg screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n */\n @Prop() sizeLg?: string;\n\n /**\n * The size of the column for xl screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n */\n @Prop() sizeXl?: string;\n\n @Listen('resize', { target: 'window' })\n onResize() {\n forceUpdate(this);\n }\n\n // Loop through all of the breakpoints to see if the media query\n // matches and grab the column value from the relevant prop if so\n private getColumns(property: string) {\n let matched;\n\n for (const breakpoint of BREAKPOINTS) {\n const matches = matchBreakpoint(breakpoint);\n\n // Grab the value of the property, if it exists and our\n // media query matches we return the value\n const columns = (this as any)[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];\n\n if (matches && columns !== undefined) {\n matched = columns;\n }\n }\n\n // Return the last matched columns since the breakpoints\n // increase in size and we want to return the largest match\n return matched;\n }\n\n private calculateSize() {\n const columns = this.getColumns('size');\n\n // If size wasn't set for any breakpoint\n // or if the user set the size without a value\n // it means we need to stick with the default and return\n // e.g. <ion-col size-md>\n if (!columns || columns === '') {\n return;\n }\n\n // If the size is set to auto then don't calculate a size\n const colSize =\n columns === 'auto'\n ? 'auto'\n : // If CSS supports variables we should use the grid columns var\n SUPPORTS_VARS\n ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`\n : // Convert the columns to a percentage by dividing by the total number\n // of columns (12) and then multiplying by 100\n (columns / 12) * 100 + '%';\n\n return {\n 'flex': `0 0 ${colSize}`,\n 'width': `${colSize}`,\n 'max-width': `${colSize}`,\n };\n }\n\n // Called by push, pull, and offset since they use the same calculations\n private calculatePosition(property: string, modifier: string) {\n const columns = this.getColumns(property);\n\n if (!columns) {\n return;\n }\n\n // If the number of columns passed are greater than 0 and less than\n // 12 we can position the column, else default to auto\n const amount = SUPPORTS_VARS\n ? // If CSS supports variables we should use the grid columns var\n `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`\n : // Convert the columns to a percentage by dividing by the total number\n // of columns (12) and then multiplying by 100\n columns > 0 && columns < 12\n ? (columns / 12) * 100 + '%'\n : 'auto';\n\n return {\n [modifier]: amount,\n };\n }\n\n private calculateOffset(isRTL: boolean) {\n return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');\n }\n\n private calculatePull(isRTL: boolean) {\n return this.calculatePosition('pull', isRTL ? 'left' : 'right');\n }\n\n private calculatePush(isRTL: boolean) {\n return this.calculatePosition('push', isRTL ? 'right' : 'left');\n }\n\n render() {\n const isRTL = document.dir === 'rtl';\n return (\n <Host\n style={{\n ...this.calculateOffset(isRTL),\n ...this.calculatePull(isRTL),\n ...this.calculatePush(isRTL),\n ...this.calculateSize(),\n }}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAO,MAAMA,EAAqB,CAChCC,GAAI,mBACJC,GAAI,qBACJC,GAAI,qBACJC,GAAI,qBACJC,GAAI,uBAMC,MAAMC,EAAmBC,IAC9B,GAAIA,IAAeC,WAAaD,IAAe,GAAI,CACjD,OAAO,I,CAET,GAAKE,OAAeC,WAAY,CAC9B,MAAMC,EAAaX,EAAcO,GACjC,OAAOE,OAAOC,WAAWC,GAAYC,O,CAEvC,OAAO,KAAK,ECnBd,MAAMC,EAAa,i+FACnB,MAAAC,EAAeD,ECEf,MAAME,SAAcN,SAAmB,YAAeA,OAAiBD,UACvE,MAAMQ,EAAgBD,MAAUA,EAAIE,KAAOF,EAAIE,IAAIC,UAAYH,EAAIE,IAAIC,SAAS,WAChF,MAAMC,EAAc,CAAC,GAAI,KAAM,KAAM,KAAM,KAAM,M,MAOpCC,EAAO,M,6iBA8IlB,QAAAC,GACEC,EAAYC,K,CAKN,UAAAC,CAAWC,GACjB,IAAIC,EAEJ,IAAK,MAAMnB,KAAcY,EAAa,CACpC,MAAMP,EAAUN,EAAgBC,GAIhC,MAAMoB,EAAWJ,KAAaE,EAAWlB,EAAWqB,OAAO,GAAGC,cAAgBtB,EAAWuB,MAAM,IAE/F,GAAIlB,GAAWe,IAAYnB,UAAW,CACpCkB,EAAUC,C,EAMd,OAAOD,C,CAGD,aAAAK,GACN,MAAMJ,EAAUJ,KAAKC,WAAW,QAMhC,IAAKG,GAAWA,IAAY,GAAI,CAC9B,M,CAIF,MAAMK,EACJL,IAAY,OACR,OAEFX,EACE,aAAaW,2CAGZA,EAAU,GAAM,IAAM,IAE7B,MAAO,CACLM,KAAQ,OAAOD,IACfE,MAAS,GAAGF,IACZ,YAAa,GAAGA,I,CAKZ,iBAAAG,CAAkBV,EAAkBW,GAC1C,MAAMT,EAAUJ,KAAKC,WAAWC,GAEhC,IAAKE,EAAS,CACZ,M,CAKF,MAAMU,EAASrB,EAEX,aAAaW,2CAGfA,EAAU,GAAKA,EAAU,GACtBA,EAAU,GAAM,IAAM,IACvB,OAEJ,MAAO,CACLS,CAACA,GAAWC,E,CAIR,eAAAC,CAAgBC,GACtB,OAAOhB,KAAKY,kBAAkB,SAAUI,EAAQ,eAAiB,c,CAG3D,aAAAC,CAAcD,GACpB,OAAOhB,KAAKY,kBAAkB,OAAQI,EAAQ,OAAS,Q,CAGjD,aAAAE,CAAcF,GACpB,OAAOhB,KAAKY,kBAAkB,OAAQI,EAAQ,QAAU,O,CAG1D,MAAAG,GACE,MAAMH,EAAQI,SAASC,MAAQ,MAC/B,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAKC,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,GACA3B,KAAKe,gBAAgBC,IACrBhB,KAAKiB,cAAcD,IACnBhB,KAAKkB,cAAcF,IACnBhB,KAAKQ,kBAGVc,EAAA,QAAAE,IAAA,6C","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["SIZE_TO_MEDIA","xs","sm","md","lg","xl","matchBreakpoint","breakpoint","undefined","window","matchMedia","mediaQuery","matches","cpslColCss","CpslColStyle0","win","SUPPORTS_VARS","CSS","supports","BREAKPOINTS","CpslCol","onResize","forceUpdate","this","getColumns","property","matched","columns","charAt","toUpperCase","slice","calculateSize","colSize","flex","width","calculatePosition","modifier","amount","calculateOffset","isRTL","calculatePull","calculatePush","render","document","dir","h","Host","key","style","Object","assign"],"sources":["src/utils/media.ts","src/components/cpsl-col/cpsl-col.scss?tag=cpsl-col&encapsulation=shadow","src/components/cpsl-col/cpsl-col.tsx"],"sourcesContent":["export const SIZE_TO_MEDIA: any = {\n xs: '(min-width: 0px)',\n sm: '(min-width: 576px)',\n md: '(min-width: 768px)',\n lg: '(min-width: 992px)',\n xl: '(min-width: 1200px)',\n};\n\n// Check if the window matches the media query\n// at the breakpoint passed\n// e.g. matchBreakpoint('sm') => true if screen width exceeds 576px\nexport const matchBreakpoint = (breakpoint: string | undefined) => {\n if (breakpoint === undefined || breakpoint === '') {\n return true;\n }\n if ((window as any).matchMedia) {\n const mediaQuery = SIZE_TO_MEDIA[breakpoint];\n return window.matchMedia(mediaQuery).matches;\n }\n return false;\n};\n","@import './cpsl-col.vars';\n\n// Column\n// --------------------------------------------------\n\n:host {\n /**\n * @prop --cpsl-grid-columns: The number of total Columns in the Grid\n * @prop --cpsl-grid-column-padding: Padding for the Column\n * @prop --cpsl-grid-column-padding-xs: Padding for the Column on xs screens and up\n * @prop --cpsl-grid-column-padding-sm: Padding for the Column on sm screens and up\n * @prop --cpsl-grid-column-padding-md: Padding for the Column on md screens and up\n * @prop --cpsl-grid-column-padding-lg: Padding for the Column on lg screens and up\n * @prop --cpsl-grid-column-padding-xl: Padding for the Column on xl screens and up\n */\n @include make-breakpoint-padding($grid-column-paddings);\n @include margin(0);\n\n box-sizing: border-box;\n\n position: relative;\n\n flex-basis: 0;\n flex-grow: 1;\n\n width: 100%;\n max-width: 100%;\n min-height: 1px; // Prevent columns from collapsing when empty\n}\n","import { Component, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';\nimport { matchBreakpoint } from '../../utils/media';\n\nconst win = typeof (window as any) !== 'undefined' ? (window as any) : undefined;\nconst SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));\nconst BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];\n\n@Component({\n tag: 'cpsl-col',\n styleUrl: 'cpsl-col.scss',\n shadow: true,\n})\nexport class CpslCol {\n /**\n * The amount to offset the column, in terms of how many columns it should shift to the end\n * of the total available.\n */\n @Prop() offset?: string;\n\n /**\n * The amount to offset the column for xs screens, in terms of how many columns it should shift\n * to the end of the total available.\n */\n @Prop() offsetXs?: string;\n\n /**\n * The amount to offset the column for sm screens, in terms of how many columns it should shift\n * to the end of the total available.\n */\n @Prop() offsetSm?: string;\n\n /**\n * The amount to offset the column for md screens, in terms of how many columns it should shift\n * to the end of the total available.\n */\n @Prop() offsetMd?: string;\n\n /**\n * The amount to offset the column for lg screens, in terms of how many columns it should shift\n * to the end of the total available.\n */\n @Prop() offsetLg?: string;\n\n /**\n * The amount to offset the column for xl screens, in terms of how many columns it should shift\n * to the end of the total available.\n */\n @Prop() offsetXl?: string;\n\n /**\n * The amount to pull the column, in terms of how many columns it should shift to the start of\n * the total available.\n */\n @Prop() pull?: string;\n\n /**\n * The amount to pull the column for xs screens, in terms of how many columns it should shift\n * to the start of the total available.\n */\n @Prop() pullXs?: string;\n /**\n * The amount to pull the column for sm screens, in terms of how many columns it should shift\n * to the start of the total available.\n */\n @Prop() pullSm?: string;\n /**\n * The amount to pull the column for md screens, in terms of how many columns it should shift\n * to the start of the total available.\n */\n @Prop() pullMd?: string;\n /**\n * The amount to pull the column for lg screens, in terms of how many columns it should shift\n * to the start of the total available.\n */\n @Prop() pullLg?: string;\n /**\n * The amount to pull the column for xl screens, in terms of how many columns it should shift\n * to the start of the total available.\n */\n @Prop() pullXl?: string;\n\n /**\n * The amount to push the column, in terms of how many columns it should shift to the end\n * of the total available.\n */\n @Prop() push?: string;\n\n /**\n * The amount to push the column for xs screens, in terms of how many columns it should shift\n * to the end of the total available.\n */\n @Prop() pushXs?: string;\n\n /**\n * The amount to push the column for sm screens, in terms of how many columns it should shift\n * to the end of the total available.\n */\n @Prop() pushSm?: string;\n\n /**\n * The amount to push the column for md screens, in terms of how many columns it should shift\n * to the end of the total available.\n */\n @Prop() pushMd?: string;\n\n /**\n * The amount to push the column for lg screens, in terms of how many columns it should shift\n * to the end of the total available.\n */\n @Prop() pushLg?: string;\n\n /**\n * The amount to push the column for xl screens, in terms of how many columns it should shift\n * to the end of the total available.\n */\n @Prop() pushXl?: string;\n\n /**\n * The size of the column, in terms of how many columns it should take up out of the total\n * available. If `\"auto\"` is passed, the column will be the size of its content.\n */\n @Prop() size?: string;\n\n /**\n * The size of the column for xs screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n */\n @Prop() sizeXs?: string;\n\n /**\n * The size of the column for sm screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n */\n @Prop() sizeSm?: string;\n\n /**\n * The size of the column for md screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n */\n @Prop() sizeMd?: string;\n\n /**\n * The size of the column for lg screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n */\n @Prop() sizeLg?: string;\n\n /**\n * The size of the column for xl screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n */\n @Prop() sizeXl?: string;\n\n @Listen('resize', { target: 'window' })\n onResize() {\n forceUpdate(this);\n }\n\n // Loop through all of the breakpoints to see if the media query\n // matches and grab the column value from the relevant prop if so\n private getColumns(property: string) {\n let matched;\n\n for (const breakpoint of BREAKPOINTS) {\n const matches = matchBreakpoint(breakpoint);\n\n // Grab the value of the property, if it exists and our\n // media query matches we return the value\n const columns = (this as any)[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];\n\n if (matches && columns !== undefined) {\n matched = columns;\n }\n }\n\n // Return the last matched columns since the breakpoints\n // increase in size and we want to return the largest match\n return matched;\n }\n\n private calculateSize() {\n const columns = this.getColumns('size');\n\n // If size wasn't set for any breakpoint\n // or if the user set the size without a value\n // it means we need to stick with the default and return\n // e.g. <ion-col size-md>\n if (!columns || columns === '') {\n return;\n }\n\n // If the size is set to auto then don't calculate a size\n const colSize =\n columns === 'auto'\n ? 'auto'\n : // If CSS supports variables we should use the grid columns var\n SUPPORTS_VARS\n ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`\n : // Convert the columns to a percentage by dividing by the total number\n // of columns (12) and then multiplying by 100\n (columns / 12) * 100 + '%';\n\n return {\n 'flex': `0 0 ${colSize}`,\n 'width': `${colSize}`,\n 'max-width': `${colSize}`,\n };\n }\n\n // Called by push, pull, and offset since they use the same calculations\n private calculatePosition(property: string, modifier: string) {\n const columns = this.getColumns(property);\n\n if (!columns) {\n return;\n }\n\n // If the number of columns passed are greater than 0 and less than\n // 12 we can position the column, else default to auto\n const amount = SUPPORTS_VARS\n ? // If CSS supports variables we should use the grid columns var\n `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`\n : // Convert the columns to a percentage by dividing by the total number\n // of columns (12) and then multiplying by 100\n columns > 0 && columns < 12\n ? (columns / 12) * 100 + '%'\n : 'auto';\n\n return {\n [modifier]: amount,\n };\n }\n\n private calculateOffset(isRTL: boolean) {\n return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');\n }\n\n private calculatePull(isRTL: boolean) {\n return this.calculatePosition('pull', isRTL ? 'left' : 'right');\n }\n\n private calculatePush(isRTL: boolean) {\n return this.calculatePosition('push', isRTL ? 'right' : 'left');\n }\n\n render() {\n const isRTL = document.dir === 'rtl';\n return (\n <Host\n style={{\n ...this.calculateOffset(isRTL),\n ...this.calculatePull(isRTL),\n ...this.calculatePush(isRTL),\n ...this.calculateSize(),\n }}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAO,MAAMA,EAAqB,CAChCC,GAAI,mBACJC,GAAI,qBACJC,GAAI,qBACJC,GAAI,qBACJC,GAAI,uBAMC,MAAMC,EAAmBC,IAC9B,GAAIA,IAAeC,WAAaD,IAAe,GAAI,CACjD,OAAO,I,CAET,GAAKE,OAAeC,WAAY,CAC9B,MAAMC,EAAaX,EAAcO,GACjC,OAAOE,OAAOC,WAAWC,GAAYC,O,CAEvC,OAAO,KAAK,ECnBd,MAAMC,EAAa,i+FACnB,MAAAC,EAAeD,ECEf,MAAME,SAAcN,SAAmB,YAAeA,OAAiBD,UACvE,MAAMQ,EAAgBD,MAAUA,EAAIE,KAAOF,EAAIE,IAAIC,UAAYH,EAAIE,IAAIC,SAAS,WAChF,MAAMC,EAAc,CAAC,GAAI,KAAM,KAAM,KAAM,KAAM,M,MAOpCC,EAAO,M,6iBA8IlB,QAAAC,GACEC,EAAYC,K,CAKN,UAAAC,CAAWC,GACjB,IAAIC,EAEJ,IAAK,MAAMnB,KAAcY,EAAa,CACpC,MAAMP,EAAUN,EAAgBC,GAIhC,MAAMoB,EAAWJ,KAAaE,EAAWlB,EAAWqB,OAAO,GAAGC,cAAgBtB,EAAWuB,MAAM,IAE/F,GAAIlB,GAAWe,IAAYnB,UAAW,CACpCkB,EAAUC,C,EAMd,OAAOD,C,CAGD,aAAAK,GACN,MAAMJ,EAAUJ,KAAKC,WAAW,QAMhC,IAAKG,GAAWA,IAAY,GAAI,CAC9B,M,CAIF,MAAMK,EACJL,IAAY,OACR,OAEFX,EACE,aAAaW,2CAGZA,EAAU,GAAM,IAAM,IAE7B,MAAO,CACLM,KAAQ,OAAOD,IACfE,MAAS,GAAGF,IACZ,YAAa,GAAGA,I,CAKZ,iBAAAG,CAAkBV,EAAkBW,GAC1C,MAAMT,EAAUJ,KAAKC,WAAWC,GAEhC,IAAKE,EAAS,CACZ,M,CAKF,MAAMU,EAASrB,EAEX,aAAaW,2CAGfA,EAAU,GAAKA,EAAU,GACtBA,EAAU,GAAM,IAAM,IACvB,OAEJ,MAAO,CACLS,CAACA,GAAWC,E,CAIR,eAAAC,CAAgBC,GACtB,OAAOhB,KAAKY,kBAAkB,SAAUI,EAAQ,eAAiB,c,CAG3D,aAAAC,CAAcD,GACpB,OAAOhB,KAAKY,kBAAkB,OAAQI,EAAQ,OAAS,Q,CAGjD,aAAAE,CAAcF,GACpB,OAAOhB,KAAKY,kBAAkB,OAAQI,EAAQ,QAAU,O,CAG1D,MAAAG,GACE,MAAMH,EAAQI,SAASC,MAAQ,MAC/B,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAKC,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,GACA3B,KAAKe,gBAAgBC,IACrBhB,KAAKiB,cAAcD,IACnBhB,KAAKkB,cAAcF,IACnBhB,KAAKQ,kBAGVc,EAAA,QAAAE,IAAA,6C"}
|
package/dist/cjs/capsule.cjs.js
CHANGED
|
@@ -2,19 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-528f7428.js');
|
|
6
6
|
const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
7
7
|
|
|
8
8
|
/*
|
|
9
|
-
Stencil Client Patch Browser v4.
|
|
9
|
+
Stencil Client Patch Browser v4.12.5 | MIT Licensed | https://stenciljs.com
|
|
10
10
|
*/
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
11
|
+
const patchBrowser = () => {
|
|
12
|
+
const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('capsule.cjs.js', document.baseURI).href));
|
|
13
|
+
const opts = {};
|
|
14
|
+
if (importMeta !== '') {
|
|
15
|
+
opts.resourcesUrl = new URL('.', importMeta).href;
|
|
16
|
+
}
|
|
17
|
+
return index.promiseResolve(opts);
|
|
18
18
|
};
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"capsule.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;
|
|
1
|
+
{"file":"capsule.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;AAGA,MAAM,YAAY,GAAG,MAAM;AAa3B,IAAI,MAAM,UAAU,GAAG,yMAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAClF,IAAI,IAAI,UAAU,KAAK,EAAE,EAAE;AAC3B,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D,KAAK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACpBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,wBAAa,EAAE,CAAC;AACxB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","globalScripts","bootstrapLazy"],"sources":["../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.12.5 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n if (importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n }\n return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-528f7428.js');
|
|
6
6
|
const constants = require('./constants-9b1b01bb.js');
|
|
7
7
|
const _commonjsHelpers = require('./_commonjsHelpers-b3309d7b.js');
|
|
8
8
|
|
|
@@ -33,7 +33,7 @@ const CpslAlert = class {
|
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
render() {
|
|
36
|
-
return (index.h(index.Host, { key: 'f7534f6c528225bc1c5704870eceb202304a8f37', class: { error: this.variant === 'error', warning: this.variant === 'warning', success: this.variant === 'success' } }, index.h("div", { key: 'fade95f15517a992708d924cd7a1ca17a6077c22', class: "alert-container" }, this.iconType && index.h("cpsl-icon", {
|
|
36
|
+
return (index.h(index.Host, { key: 'f7534f6c528225bc1c5704870eceb202304a8f37', class: { error: this.variant === 'error', warning: this.variant === 'warning', success: this.variant === 'success' } }, index.h("div", { key: 'fade95f15517a992708d924cd7a1ca17a6077c22', class: "alert-container" }, this.iconType && index.h("cpsl-icon", { icon: this.iconType }), index.h("slot", { key: '8a2ed501e583e444203fa6168c7eb10011ec57fe' }))));
|
|
37
37
|
}
|
|
38
38
|
};
|
|
39
39
|
CpslAlert.style = CpslAlertStyle0;
|
|
@@ -49,10 +49,10 @@ const CpslAppBar = class {
|
|
|
49
49
|
this.zIndexOverride = undefined;
|
|
50
50
|
}
|
|
51
51
|
render() {
|
|
52
|
-
return (index.h(index.Host, { key: '
|
|
52
|
+
return (index.h(index.Host, { key: '045bc58e1719b02dea67276200abb0cd05d6f717', style: Object.assign({ height: `${this.height}px` }, (Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {})) }, index.h("div", { key: 'e29aa3326057f15b83e4ca9e2718074fda98e177', class: "container", part: "container", style: {
|
|
53
53
|
position: this.position,
|
|
54
54
|
height: `${this.height}px`,
|
|
55
|
-
} }, index.h("slot", { key: '
|
|
55
|
+
} }, index.h("slot", { key: '566c990b33134045c54195b7c762f07049a6bd22' })), this.position === 'fixed' && (index.h("div", { style: {
|
|
56
56
|
height: `${this.height}px`,
|
|
57
57
|
} }))));
|
|
58
58
|
}
|
|
@@ -71,7 +71,7 @@ const CpslAvatar = class {
|
|
|
71
71
|
}
|
|
72
72
|
render() {
|
|
73
73
|
var _a;
|
|
74
|
-
return (index.h(index.Host, { key: '
|
|
74
|
+
return (index.h(index.Host, { key: 'c148e7d268c681fa6a7273c109b9ab418f433c24' }, index.h("span", { key: 'd1f977ab0c5d6f6758f84fb33ed9e72d9a1270c9', class: { round: this.variant === 'round' } }, index.h("img", { key: '3a13f96266ee6476df2154a09b433dcf7ba44daf', src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : 'avatar' }))));
|
|
75
75
|
}
|
|
76
76
|
};
|
|
77
77
|
CpslAvatar.style = CpslAvatarStyle0;
|
|
@@ -91,7 +91,7 @@ const CpslButton = class {
|
|
|
91
91
|
this.variant = 'primary';
|
|
92
92
|
}
|
|
93
93
|
render() {
|
|
94
|
-
return (index.h(index.Host, { key: '
|
|
94
|
+
return (index.h(index.Host, { key: 'c8c19be90600d9ca236b51e4e112d8350d7f611c', class: {
|
|
95
95
|
'primary': this.variant === 'primary',
|
|
96
96
|
'secondary': this.variant === 'secondary',
|
|
97
97
|
'ghost': this.variant === 'ghost',
|
|
@@ -100,7 +100,7 @@ const CpslButton = class {
|
|
|
100
100
|
'full-width': this.fullWidth,
|
|
101
101
|
'small': this.size === 'small',
|
|
102
102
|
'medium': this.size === 'medium',
|
|
103
|
-
} }, index.h(this.as, { key: '
|
|
103
|
+
} }, index.h(this.as, { key: '9ba756220f648f1d4123bd42df8d4db311800705', href: this.href, target: this.target, part: "button-native", class: "button-native" }, index.h("slot", { key: '7156e673a1a43ea808aeca1574b5f251c38bdc22', name: "start" }), index.h("slot", { key: 'a74790e4d6deb92b6e0380f6ca8551aacf5c3b8f' }), index.h("slot", { key: '73219152509968a55aeff2cdc56beefa9b9e5995', name: "end" }))));
|
|
104
104
|
}
|
|
105
105
|
};
|
|
106
106
|
CpslButton.style = CpslButtonStyle0;
|
|
@@ -142,7 +142,7 @@ const CpslButtonGroup = class {
|
|
|
142
142
|
return this.el.querySelectorAll('&> *:not(cpsl-button)');
|
|
143
143
|
}
|
|
144
144
|
render() {
|
|
145
|
-
return (index.h(index.Host, { key: '
|
|
145
|
+
return (index.h(index.Host, { key: 'e15232f4180db66b6b7bd21b5e22980f197514be' }, index.h("slot", { key: 'f3c566eaf9574fb38331e8a44c5c369d1edd5223' })));
|
|
146
146
|
}
|
|
147
147
|
get el() { return index.getElement(this); }
|
|
148
148
|
static get watchers() { return {
|
|
@@ -159,7 +159,7 @@ const CpslCard = class {
|
|
|
159
159
|
index.registerInstance(this, hostRef);
|
|
160
160
|
}
|
|
161
161
|
render() {
|
|
162
|
-
return (index.h(index.Host, { key: '
|
|
162
|
+
return (index.h(index.Host, { key: '8633aeaedaaf81af67835ee3ffc8964ec28ced92' }, index.h("div", { key: '432fabd329701f8ef51fc43ba0ca8af3d5182a47', class: { card: true }, part: "card-container" }, index.h("slot", { key: 'a23d1063d0a1c74ebc076fc67b63c4023f7f8565' }))));
|
|
163
163
|
}
|
|
164
164
|
};
|
|
165
165
|
CpslCard.style = CpslCardStyle0;
|
|
@@ -177,7 +177,7 @@ const CpslCheckbox = class {
|
|
|
177
177
|
this.checked = undefined;
|
|
178
178
|
}
|
|
179
179
|
render() {
|
|
180
|
-
return (index.h(index.Host, { key: '
|
|
180
|
+
return (index.h(index.Host, { key: 'b5d7963285854a20983f8655c8a9545b8d0735e9' }, index.h("input", { key: 'b822a505e826f06d47f1da51fff0c7f310d9c9ce', type: "checkbox", checked: this.checked }), index.h("span", { key: '3747cf548b8d88ceee19eae5c1df78cdc5f9c87e', onClick: this.handleCheckboxClick, class: { container: true, checked: this.checked } }, index.h("cpsl-icon", { key: '9d5d0cdba4b22bc2167aed23e7748201320a6553', icon: "check" }))));
|
|
181
181
|
}
|
|
182
182
|
};
|
|
183
183
|
CpslCheckbox.style = CpslCheckboxStyle0;
|
|
@@ -272,10 +272,10 @@ const CpslCodeInput = class {
|
|
|
272
272
|
}
|
|
273
273
|
render() {
|
|
274
274
|
var _a;
|
|
275
|
-
return (index.h(index.Host, { key: '
|
|
275
|
+
return (index.h(index.Host, { key: '2f52778c8b8b51ef7c875b53394e7275bd93412f' }, index.h("div", { key: 'e96c3deea7d1e4eaaef4c72fbaca702b6bb46cf1', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
|
|
276
276
|
var _a;
|
|
277
277
|
return (index.h("input", { class: { 'code-input': true, 'error': Boolean(this.errorText) }, id: `code-input-${i}`, maxLength: 1, onKeyDown: ev => this.handleKeyDown(i, ev), onInput: ev => this.handleInput(i, ev), onFocus: () => this.handleFocus(i), onPaste: this.handlePaste, min: 0, max: 9, value: (_a = this.code) === null || _a === void 0 ? void 0 : _a[i], inputMode: this.type === 'number' ? 'numeric' : 'text' }));
|
|
278
|
-
})), (this.errorText || this.helperText) && (index.h("div", {
|
|
278
|
+
})), (this.errorText || this.helperText) && (index.h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), index.h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
|
|
279
279
|
}
|
|
280
280
|
get el() { return index.getElement(this); }
|
|
281
281
|
};
|
|
@@ -289,7 +289,7 @@ const CpslDivider = class {
|
|
|
289
289
|
index.registerInstance(this, hostRef);
|
|
290
290
|
}
|
|
291
291
|
render() {
|
|
292
|
-
return (index.h(index.Host, { key: '
|
|
292
|
+
return (index.h(index.Host, { key: '1ed13a5022a89b899e6a16f168bff6b71c3c2ad8' }, index.h("div", { key: 'e9fec054de82d84298ac7cf7fc45f239a9a78442' }), index.h("slot", { key: 'c6ab3f0e787ee245d206b300c68192bfb3515aa6' }), index.h("div", { key: '5591e16b69c4cdce5cd5b9932923a189440b7fd5' })));
|
|
293
293
|
}
|
|
294
294
|
};
|
|
295
295
|
CpslDivider.style = CpslDividerStyle0;
|
|
@@ -330,12 +330,12 @@ const CpslDrawer = class {
|
|
|
330
330
|
const setHeight = this.anchor === 'top' || this.anchor === 'bottom';
|
|
331
331
|
const startingAnchor = (_a = `${this.anchorPosition}px`) !== null && _a !== void 0 ? _a : '0px';
|
|
332
332
|
const size = this.size === 'auto' ? 'auto' : `${this.size}px`;
|
|
333
|
-
return (index.h(index.Host, { key: '
|
|
333
|
+
return (index.h(index.Host, { key: 'c8f7717bd060bdd83edec49865d99d2bc885aace', style: Object.assign({ width: setHeight ? '100vw' : size, height: setHeight ? size : '100vh', transitionDuration: `${this.showTransition ? this.transitionDuration : 0}s`, transitionTimingFunction: `${this.transitionFunction}`, [this.anchor]: this.open || this.variant === 'permanent' ? startingAnchor : this.closedAnchorPosition, opacity: this.closedAnchorPosition === undefined ? '0' : '1' }, (Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {})), class: {
|
|
334
334
|
top: this.anchor === 'top',
|
|
335
335
|
bottom: this.anchor === 'bottom',
|
|
336
336
|
left: this.anchor === 'left',
|
|
337
337
|
right: this.anchor === 'right',
|
|
338
|
-
} }, this.variant === 'temporary' && !this.noOverlay && index.h("cpsl-overlay", {
|
|
338
|
+
} }, this.variant === 'temporary' && !this.noOverlay && index.h("cpsl-overlay", { open: this.open, zIndexOverride: constants.DEFAULT_Z_INDICES.modal + 1 }), index.h("div", { key: 'f63a22d66da7ed0b7cb2bd0f9b68dbf7e7c4f985', id: "container", class: "container", part: "container" }, index.h("slot", { key: 'c5d208e37ea87f4ae95c5d9064218f1d1edbc304' }))));
|
|
339
339
|
}
|
|
340
340
|
get el() { return index.getElement(this); }
|
|
341
341
|
};
|
|
@@ -5147,7 +5147,7 @@ const CpslDropdown = class {
|
|
|
5147
5147
|
}
|
|
5148
5148
|
render() {
|
|
5149
5149
|
var _a, _b, _c;
|
|
5150
|
-
return (index.h(index.Host, { key: '
|
|
5150
|
+
return (index.h(index.Host, { key: '121a65b9e15c7fb81a1ecd98c30f2d3d47a0af2c' }, index.h("button", { key: 'bdea591df3159d30de22a3615362abcd3f222c65', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, index.h("div", { key: '778a3ea1cc1d6c7df3b961acb2b687aefcce38b3', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), index.h("ul", { key: '490af95f8b21a330a7432e10b0591b4ed81aa1b7', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (index.h("li", { class: "search-bar" }, index.h("input", { type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (index.h("li", { onClick: this.handleItemSelect(item) }, index.h("span", { innerHTML: Icons[item.icon] }), item.label, " ", index.h("span", { class: "dropdown-value" }, item.value)))))));
|
|
5151
5151
|
}
|
|
5152
5152
|
get el() { return index.getElement(this); }
|
|
5153
5153
|
static get watchers() { return {
|
|
@@ -5282,7 +5282,7 @@ const CpslFileUpload = class {
|
|
|
5282
5282
|
}
|
|
5283
5283
|
render() {
|
|
5284
5284
|
var _a, _b, _c;
|
|
5285
|
-
return (index.h(index.Host, { key: '
|
|
5285
|
+
return (index.h(index.Host, { key: '71d945bcac5d443719737781fd9ec5166952760d' }, this.label && (index.h("label", { class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? index.h("span", { class: "optional-label" }, "(optional)") : '')), index.h("slot", { key: '63786e91e0a230d85344da507d0508ac1524cc88', name: "label" }), index.h("div", { key: '74e7296a0c8ef732094c0e7fab3e0a7db916694b', class: { 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError } }, index.h("div", { key: '1a3030a828d8e7a742f3dfbff784e213f845859e', class: { 'label-container': true } }, index.h("slot", { key: '1f77e4c6566deffe7cd830fccb96d21c22daee4b', name: "left-content" })), index.h("div", { key: '3dc0a113348d15d52aae929792de6ee48da795ca', class: { 'file-container': true } }, this.FileContent), index.h("input", { key: 'a6fc37d212b5e4284f4eeec56dc4e7a32ff8374b', id: this.inputId, type: "file", accept: (_b = (_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.join(', ')) !== null && _b !== void 0 ? _b : '*', files: Boolean(this.file) ? [this.file] : undefined, onDrop: this.handleDrop, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onChange: this.handleInputChange })), (this.errorText || this.helperText) && (index.h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("span", null, (_c = this.errorText) !== null && _c !== void 0 ? _c : this.helperText)))));
|
|
5286
5286
|
}
|
|
5287
5287
|
get el() { return index.getElement(this); }
|
|
5288
5288
|
};
|
|
@@ -5299,7 +5299,7 @@ const CpslIcon = class {
|
|
|
5299
5299
|
this.icon = undefined;
|
|
5300
5300
|
}
|
|
5301
5301
|
render() {
|
|
5302
|
-
return (index.h(index.Host, { key: '
|
|
5302
|
+
return (index.h(index.Host, { key: '06850dc9a6d40b95e8b92ea8722bedfa1dc7b36f', part: "icon", role: "img" }, !Boolean(this.icon) ? index.h("img", { src: this.src }) : index.h("div", { innerHTML: Icons[this.icon] })));
|
|
5303
5303
|
}
|
|
5304
5304
|
};
|
|
5305
5305
|
CpslIcon.style = CpslIconStyle0;
|
|
@@ -5445,7 +5445,7 @@ const CpslInput = class {
|
|
|
5445
5445
|
}
|
|
5446
5446
|
render() {
|
|
5447
5447
|
var _a;
|
|
5448
|
-
return (index.h(index.Host, { key: '
|
|
5448
|
+
return (index.h(index.Host, { key: '28937d4a0e8c5a4e7b7a00e610013e52fa171f3a', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (index.h("label", { class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? index.h("span", { class: "optional-label" }, "(optional)") : '')), index.h("div", { key: '8a2c5e7d32c93af2b0d463563c48e8104c639604', class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, index.h("slot", { key: 'd24440dff32cd3837638565764d2683bf16414ca', name: "start" }), index.h("input", { key: 'a3df402a5fd5f9a9d2483a1f0b65f9061468df15', class: "native-input", ref: input => (this.nativeInput = input), id: this.inputId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.focusInput, onPaste: this.onPaste }), index.h("slot", { key: 'f7472b02d119b4a458252128da5e61ebbfbdee56', name: "end" })), (this.errorText || this.helperText) && (index.h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
|
|
5449
5449
|
}
|
|
5450
5450
|
get el() { return index.getElement(this); }
|
|
5451
5451
|
static get watchers() { return {
|
|
@@ -14868,7 +14868,7 @@ const CpslNavButtonGroup = class {
|
|
|
14868
14868
|
return this.el.querySelectorAll('&> *:not(cpsl-button)');
|
|
14869
14869
|
}
|
|
14870
14870
|
render() {
|
|
14871
|
-
return (index.h(index.Host, { key: '
|
|
14871
|
+
return (index.h(index.Host, { key: 'e5cf1902a3d5f8b6df197441e144987dcb016762' }, index.h("slot", { key: '56322f15e640f356fae1c9eb16f525753d91fdae' })));
|
|
14872
14872
|
}
|
|
14873
14873
|
get el() { return index.getElement(this); }
|
|
14874
14874
|
static get watchers() { return {
|
|
@@ -14908,7 +14908,7 @@ const CpslOverlay = class {
|
|
|
14908
14908
|
}
|
|
14909
14909
|
}
|
|
14910
14910
|
render() {
|
|
14911
|
-
return (index.h(index.Host, { key: '
|
|
14911
|
+
return (index.h(index.Host, { key: 'daa05884bc8489f8227873b6778e129bdf922ffd', style: Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {} }, index.h("slot", { key: 'd0783d37893a51fe16fe292c5847dc4acee627ee' })));
|
|
14912
14912
|
}
|
|
14913
14913
|
get el() { return index.getElement(this); }
|
|
14914
14914
|
static get watchers() { return {
|
|
@@ -14994,7 +14994,7 @@ const CpslPagination = class {
|
|
|
14994
14994
|
filteredPages.push(this.totalPages - 1);
|
|
14995
14995
|
}
|
|
14996
14996
|
}
|
|
14997
|
-
return (index.h(index.Host, { key: '
|
|
14997
|
+
return (index.h(index.Host, { key: '42ae13b8cdb18ea35db7abc8195d49e36ee4494e' }, index.h("cpsl-button-group", { key: 'a031f2cda1cbd10724ef65cd2fd74b5b237b9841', selectedId: `${this.currentPage}` }, index.h("cpsl-button", { key: '83d653a99ce0eea881eb6332c9d7088b328c20dd', class: "arrow-button", onClick: this.handlePrevClick }, index.h("cpsl-icon", { key: '2e6650d7c873a9e2de4922c08c5b5b2fe27f2b33', class: { 'icon': true, 'start-icon': true }, icon: "arrowNarrow" })), filteredPages.map(page => (index.h("cpsl-button", { key: page, variant: "secondary", fullWidth: true, id: `${page}`, onClick: this.handlePageClick(page) }, index.h("cpsl-text", { variant: "bodyS" }, page + 1)))), index.h("cpsl-button", { key: '4cd4c8623368c96f3457d818a0542fd7ab560182', class: "arrow-button", onClick: this.handleNextClick }, index.h("cpsl-icon", { key: '52865869846d7afbe7a66f44f9564913caf97380', class: "icon", icon: "arrowNarrow" })))));
|
|
14998
14998
|
}
|
|
14999
14999
|
static get watchers() { return {
|
|
15000
15000
|
"currentPage": ["watchChange"]
|
|
@@ -15011,7 +15011,7 @@ const CpslPill = class {
|
|
|
15011
15011
|
this.text = undefined;
|
|
15012
15012
|
}
|
|
15013
15013
|
render() {
|
|
15014
|
-
return (index.h(index.Host, { key: '
|
|
15014
|
+
return (index.h(index.Host, { key: 'c57c4206cb82aef700747dee7712ed15ff5907b9' }, index.h("div", { key: 'bc60013838c2d7a7632269b711a506aa83e5b98c', class: "pill-container" }, index.h("span", { key: '6eb81137bfbe02e9fa68a5ef1399b7d73b6bc89b' }, this.text))));
|
|
15015
15015
|
}
|
|
15016
15016
|
};
|
|
15017
15017
|
CpslPill.style = CpslPillStyle0;
|
|
@@ -15224,7 +15224,7 @@ const CpslPopover = class {
|
|
|
15224
15224
|
}
|
|
15225
15225
|
render() {
|
|
15226
15226
|
var _a;
|
|
15227
|
-
return (index.h(index.Host, { key: '
|
|
15227
|
+
return (index.h(index.Host, { key: '0932bff390ad54961067dcae19e121dc2ed701a0', class: {
|
|
15228
15228
|
'open': this.open,
|
|
15229
15229
|
'transform-h-left': this.transformOriginHorizontal === 'left',
|
|
15230
15230
|
'transform-h-center': this.transformOriginHorizontal === 'center',
|
|
@@ -15232,7 +15232,7 @@ const CpslPopover = class {
|
|
|
15232
15232
|
'transform-v-top': this.transformOriginVertical === 'top',
|
|
15233
15233
|
'transform-v-center': this.transformOriginVertical === 'center',
|
|
15234
15234
|
'transform-v-bottom': this.transformOriginVertical === 'bottom',
|
|
15235
|
-
}, style: { top: `${this.positionY}px`, left: `${this.positionX}px`, width: this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, index.h("div", { key: '
|
|
15235
|
+
}, style: { top: `${this.positionY}px`, left: `${this.positionX}px`, width: this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, index.h("div", { key: 'a320096955a8ba71b14f8620fbe69eed66b4dc5d', id: "container", class: { container: true, open: this.open } }, index.h("slot", { key: '745bbee183c48bdbe079d7219690c556e9a9b442' }))));
|
|
15236
15236
|
}
|
|
15237
15237
|
get el() { return index.getElement(this); }
|
|
15238
15238
|
static get watchers() { return {
|
|
@@ -15316,7 +15316,7 @@ const CpslQrCode = class {
|
|
|
15316
15316
|
qrCode.append(container);
|
|
15317
15317
|
}
|
|
15318
15318
|
render() {
|
|
15319
|
-
return (index.h(index.Host, { key: '
|
|
15319
|
+
return (index.h(index.Host, { key: '7f549a58192515bbb5a8b42948f042e7b4eaf271' }, index.h("div", { key: '4464496f4e8236abcdbde9e6e0f20f2e04b5b392', id: "qr-container", class: "qr-container" })));
|
|
15320
15320
|
}
|
|
15321
15321
|
get el() { return index.getElement(this); }
|
|
15322
15322
|
};
|
|
@@ -15337,7 +15337,7 @@ const CpslRadio = class {
|
|
|
15337
15337
|
this.checked = undefined;
|
|
15338
15338
|
}
|
|
15339
15339
|
render() {
|
|
15340
|
-
return (index.h(index.Host, { key: '
|
|
15340
|
+
return (index.h(index.Host, { key: '15b4fdf30799927941280b3f11f4611e4e4d27b2' }, index.h("input", { key: 'd5bf9704061977610d98b99a6188933f720ffce3', type: "radio", checked: this.checked }), index.h("span", { key: 'd56242703448531efc847167b55013b420f17715', onClick: this.handleRadioClick, class: { container: true, checked: this.checked } })));
|
|
15341
15341
|
}
|
|
15342
15342
|
};
|
|
15343
15343
|
CpslRadio.style = CpslRadioStyle0;
|
|
@@ -15433,7 +15433,7 @@ const CpslSelect = class {
|
|
|
15433
15433
|
}
|
|
15434
15434
|
render() {
|
|
15435
15435
|
var _a, _b, _c, _d;
|
|
15436
|
-
return (index.h(index.Host, { key: '
|
|
15436
|
+
return (index.h(index.Host, { key: '96b15a986afbf40228adfb0ddfb5934ea79a9df0', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (index.h("label", { class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? index.h("span", { class: "optional-label" }, "(optional)") : '')), index.h("div", { key: 'b43bb6ef5670aff411a82391c5695f8840412f85', id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && index.h("slot", { name: "selected-item" }), index.h("div", { key: 'fa5654cfbeb30c963fd918599c4fc304e9d894c5', class: "selected-container-content", id: "selected-container-content" }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (index.h("cpsl-text", { class: { 'selected-text': true, 'placeholder': !Boolean(this.selectedValue) } }, !Boolean(this.selectedValue) ? (_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select' : (_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : this.selectedValue))), index.h("cpsl-icon", { key: '063de47032a31e2c7d114467cc4eaedfcf8d59a8', class: { 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: "chevronUp" }), index.h("input", { key: '760922353c0971b766d80ac45430ebc806833a9a', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" })), (this.errorText || this.helperText) && (index.h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("span", null, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText))), index.h("cpsl-popover", { key: 'fcbf94fcc199d5415dc62faa3b7a0280f16418fa', autoWidth: false, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, index.h("div", { key: '95aa9ce659bf279c502b0f8b6e068765a1f29d5d', class: "dropdown" }, index.h("div", { key: '4b83c05b33d370d9ce8fa7450b11b24c75ddb025', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, index.h("slot", { key: 'a94a087322953b56c4b9e488b5e23ab6f020d37f', name: "items" }))))));
|
|
15437
15437
|
}
|
|
15438
15438
|
get el() { return index.getElement(this); }
|
|
15439
15439
|
static get watchers() { return {
|
|
@@ -15457,7 +15457,7 @@ const CpslSelectItem = class {
|
|
|
15457
15457
|
this.value = undefined;
|
|
15458
15458
|
}
|
|
15459
15459
|
render() {
|
|
15460
|
-
return (index.h(index.Host, { key: '
|
|
15460
|
+
return (index.h(index.Host, { key: '5841f3aa3d70c17dcdfc8b1e0517ac822667ec87' }, index.h("div", { key: 'cbac6744fdce3f011765f0588f51fe89112239ad', class: "outer-container", onClick: this.handleItemClick }, index.h("div", { key: '30aee519e6dfd394a01d7ff9c503752cff1c7d64', class: { 'inner-container': true, 'selected': this.selected } }, index.h("slot", { key: '9458a0da2d73be3de5703c0dde0b6208cdd8a196' })))));
|
|
15461
15461
|
}
|
|
15462
15462
|
};
|
|
15463
15463
|
CpslSelectItem.style = CpslSelectItemStyle0;
|
|
@@ -15582,7 +15582,7 @@ const CpslSlideButton = class {
|
|
|
15582
15582
|
return this.el.shadowRoot.getElementById('end-icon');
|
|
15583
15583
|
}
|
|
15584
15584
|
render() {
|
|
15585
|
-
return (index.h(index.Host, { key: '
|
|
15585
|
+
return (index.h(index.Host, { key: '0538d1828e3eed534326536946e16b205e34fd96' }, index.h("div", { key: 'dfca014b41bcdb615a0fd8ce6242cf361a0399d7', id: "slider-container", class: "slider-container" }, index.h("div", { key: '8cad818d06a7fcc8b7e5a22b7714a6faf777db16', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: '0692e2b89ba22df7dca29d3b927810492591dd51', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: '865dc1b876daa97033541efeb32779ac07078179', id: "slider", class: { slider: true, disabled: this.disabled } }, index.h("cpsl-icon", { key: '2e5e0049eee016583715ae1a33dff74e36c6a515', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), index.h("cpsl-icon", { key: '6e484c8497bf2e7777ebf93d3af141477d8f82e8', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), index.h("span", { key: 'b7b8064fa212af5802ee21c170133ef0e32ff14c', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), index.h("span", { key: 'b42e78a763a983bb17e7d02ed51253982be4546f', id: "end-text", class: "end-text" }, this.endText))));
|
|
15586
15586
|
}
|
|
15587
15587
|
get el() { return index.getElement(this); }
|
|
15588
15588
|
};
|
|
@@ -15598,13 +15598,13 @@ const CpslSpinner = class {
|
|
|
15598
15598
|
this.speed = 1;
|
|
15599
15599
|
}
|
|
15600
15600
|
render() {
|
|
15601
|
-
return (index.h(index.Host, { key: '
|
|
15601
|
+
return (index.h(index.Host, { key: '146fc6a1a8101f6738263e432b49ed6c927d8eb3', style: {
|
|
15602
15602
|
'height': `${this.size}px`,
|
|
15603
15603
|
'width': `${this.size}px`,
|
|
15604
15604
|
'animation': `spin ${this.speed}s linear infinite`,
|
|
15605
15605
|
'-webkit-animation': `spin ${this.speed}s linear infinite`,
|
|
15606
15606
|
'-moz-animation': `spin ${this.speed}s linear infinite`,
|
|
15607
|
-
} }, index.h("svg", { key: '
|
|
15607
|
+
} }, index.h("svg", { key: '2f7fadd536c94b7919180bcb38a64e54cf8ff073', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, index.h("path", { key: '427351f7b255cbf337f8b1d45272339b3fef873e', d: "M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37", "stroke-width": "6", "stroke-linecap": "round" }), index.h("circle", { key: '43787fa0376df4defda8a47f5c5c8d01258dde10', cx: "45", cy: "27", r: "5" }))));
|
|
15608
15608
|
}
|
|
15609
15609
|
};
|
|
15610
15610
|
CpslSpinner.style = CpslSpinnerStyle0;
|
|
@@ -15622,7 +15622,7 @@ const CpslSwitch = class {
|
|
|
15622
15622
|
this.checked = undefined;
|
|
15623
15623
|
}
|
|
15624
15624
|
render() {
|
|
15625
|
-
return (index.h(index.Host, { key: '
|
|
15625
|
+
return (index.h(index.Host, { key: '5757a05c5149c8fb785bcb796d7c110f4725bbfa' }, index.h("input", { key: 'fdbbc3cdac8674bc3bbcf5563302a763d3678905', type: "checkbox", checked: this.checked }), index.h("span", { key: '471c0ae137ad553c6b7186a08722e156959ed3cc', onClick: this.handleSwitchClick, class: { container: true, checked: this.checked } }, index.h("span", { key: '53bbfd9b807c36bc49130ad71611d274757b5fb1', class: { thumb: true, checked: this.checked } }))));
|
|
15626
15626
|
}
|
|
15627
15627
|
};
|
|
15628
15628
|
CpslSwitch.style = CpslSwitchStyle0;
|
|
@@ -15654,13 +15654,13 @@ const CpslTab = class {
|
|
|
15654
15654
|
}
|
|
15655
15655
|
}
|
|
15656
15656
|
render() {
|
|
15657
|
-
return (index.h(index.Host, { key: '
|
|
15657
|
+
return (index.h(index.Host, { key: 'b899e8122b57fdf859c43d9cf9ade27af3bf5c5f', onClick: this.onTabClicked }, index.h("div", { key: 'f96ead5f65606af3fe63c708af511adfb022f386', class: { 'tab-container': true } }, index.h("slot", { key: '780d6deda346635aaced9c3dfa875b44ffece7eb' }))));
|
|
15658
15658
|
}
|
|
15659
15659
|
get el() { return index.getElement(this); }
|
|
15660
15660
|
};
|
|
15661
15661
|
CpslTab.style = CpslTabStyle0;
|
|
15662
15662
|
|
|
15663
|
-
const cpslTableCss = ":host{--container-border-radius:var(--cpsl-border-radius-table-container);--container-border-color:var(--cpsl-color-background-16);--container-background-color:var(--cpsl-color-background-0);--container-border-width:1px;--container-header-padding-top:24px;--container-header-padding-bottom:24px;--container-header-padding-start:24px;--container-header-padding-end:24px;--container-header-border-width:1px;--container-header-border-color:var(--cpsl-color-background-16);--container-footer-padding-top:16px;--container-footer-padding-bottom:16px;--container-footer-padding-start:24px;--container-footer-padding-end:24px;--container-footer-border-width:1px;--container-footer-border-color:var(--cpsl-color-background-8);--table-header-padding-top:16px;--table-header-padding-bottom:16px;--table-header-padding-start:24px;--table-header-padding-end:24px;--table-header-background-color:var(--cpsl-color-background-4);--table-header-border-color:var(--cpsl-color-background-16);--table-header-border-width:1px;--table-content-padding-top:16px;--table-content-padding-bottom:16px;--table-content-padding-start:24px;--table-content-padding-end:24px;--table-content-border-color:var(--cpsl-color-background-8);--table-content-border-width:1px;display:block}:host cpsl-card{height:100%;--card-padding-top:0px;--card-padding-bottom:0px;--card-padding-start:0px;--card-padding-end:0px;--card-border-width:var(--container-border-width);--card-border-color:var(--container-border-color);--card-border-radius:var(--container-border-radius);--card-background-color:var(--container-background-color)}:host cpsl-card::part(card-container){height:100%;display:flex;flex-direction:column}.content{overflow:auto;position:
|
|
15663
|
+
const cpslTableCss = ":host{--container-border-radius:var(--cpsl-border-radius-table-container);--container-border-color:var(--cpsl-color-background-16);--container-background-color:var(--cpsl-color-background-0);--container-border-width:1px;--container-header-padding-top:24px;--container-header-padding-bottom:24px;--container-header-padding-start:24px;--container-header-padding-end:24px;--container-header-border-width:1px;--container-header-border-color:var(--cpsl-color-background-16);--container-footer-padding-top:16px;--container-footer-padding-bottom:16px;--container-footer-padding-start:24px;--container-footer-padding-end:24px;--container-footer-border-width:1px;--container-footer-border-color:var(--cpsl-color-background-8);--table-header-padding-top:16px;--table-header-padding-bottom:16px;--table-header-padding-start:24px;--table-header-padding-end:24px;--table-header-background-color:var(--cpsl-color-background-4);--table-header-border-color:var(--cpsl-color-background-16);--table-header-border-width:1px;--table-content-padding-top:16px;--table-content-padding-bottom:16px;--table-content-padding-start:24px;--table-content-padding-end:24px;--table-content-border-color:var(--cpsl-color-background-8);--table-content-border-width:1px;display:block}:host cpsl-card{height:100%;--card-padding-top:0px;--card-padding-bottom:0px;--card-padding-start:0px;--card-padding-end:0px;--card-border-width:var(--container-border-width);--card-border-color:var(--container-border-color);--card-border-radius:var(--container-border-radius);--card-background-color:var(--container-background-color)}:host cpsl-card::part(card-container){height:100%;display:flex;flex-direction:column}.content{flex:1;overflow:auto;position:relative}.overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.overlay.horizontal-scroll:not(.vertical-scroll){box-shadow:-24px 0px 24px -24px rgba(0, 0, 0, 0.1) inset}.overlay.vertical-scroll:not(.horizontal-scroll){box-shadow:0px -24px 24px -24px rgba(0, 0, 0, 0.1) inset}.overlay.horizontal-scroll.vertical-scroll{box-shadow:-24px -24px 24px -24px rgba(0, 0, 0, 0.1) inset}.table-wrapper{overflow:auto;height:100%}.container-header{display:none;-webkit-padding-start:var(--container-header-padding-start);padding-inline-start:var(--container-header-padding-start);-webkit-padding-end:var(--container-header-padding-end);padding-inline-end:var(--container-header-padding-end);padding-top:var(--container-header-padding-top);padding-bottom:var(--container-header-padding-bottom);border-bottom:var(--container-header-border-width) solid var(--container-header-border-color)}.container-footer{display:none;-webkit-padding-start:var(--container-footer-padding-start);padding-inline-start:var(--container-footer-padding-start);-webkit-padding-end:var(--container-footer-padding-end);padding-inline-end:var(--container-footer-padding-end);padding-top:var(--container-footer-padding-top);padding-bottom:var(--container-footer-padding-bottom);border-top:var(--container-footer-border-width) solid var(--container-footer-border-color)}.shown{display:block}";
|
|
15664
15664
|
const CpslTableStyle0 = cpslTableCss;
|
|
15665
15665
|
|
|
15666
15666
|
const CpslTable = class {
|
|
@@ -15700,11 +15700,17 @@ const CpslTable = class {
|
|
|
15700
15700
|
get contentContainerEl() {
|
|
15701
15701
|
return this.el.shadowRoot.getElementById('content-container');
|
|
15702
15702
|
}
|
|
15703
|
+
get headerEl() {
|
|
15704
|
+
return this.el.shadowRoot.getElementById('header-container');
|
|
15705
|
+
}
|
|
15703
15706
|
get containerSlotEl() {
|
|
15704
15707
|
return this.el.querySelector('[slot="content"]');
|
|
15705
15708
|
}
|
|
15709
|
+
get footerEl() {
|
|
15710
|
+
return this.el.shadowRoot.getElementById('footer-container');
|
|
15711
|
+
}
|
|
15706
15712
|
render() {
|
|
15707
|
-
return (index.h(index.Host, { key: '
|
|
15713
|
+
return (index.h(index.Host, { key: 'c697e33ff0d764f2a99ea98fbbedbb8b3813fb2d' }, index.h("cpsl-card", { key: 'a1ac41d42ef793cd3d5acd2e7d0468586351b3b4', part: "table-container", style: { position: 'relative' } }, index.h("div", { key: '5dcce6e3711ce9bdee0e890ab697c2452abdf29e', id: "header-container", class: { 'container-header': true, 'shown': Boolean(this.containerHeaderEl) } }, index.h("slot", { key: '6256e32a37806f8f6e1fb62a5bc61f937ee16c19', name: "header" })), index.h("div", { key: 'd151946e88ed755bac82490a237a9336be339abc', id: "content-container", class: { 'content': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll }, part: "content" }, index.h("slot", { key: '2afa462b208482a645e88060b74ef8150e4fc0d0', name: "content" })), this.headerEl && this.contentContainerEl && this.footerEl && (index.h("div", { style: { top: `${this.headerEl.clientHeight + 2}px`, height: `${this.contentContainerEl.clientHeight}px` }, class: { 'overlay': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll } })), index.h("div", { key: '0c8aceeb251955750a45017d5d44eb9be9e2fafc', id: "footer-container", class: { 'container-footer': true, 'shown': Boolean(this.containerFooterEl) } }, index.h("slot", { key: '0e9f35d9f1d50654a1cca75e008a3cc162fb316c', name: "footer" })))));
|
|
15708
15714
|
}
|
|
15709
15715
|
get el() { return index.getElement(this); }
|
|
15710
15716
|
};
|
|
@@ -15763,7 +15769,7 @@ const CpslTabs = class {
|
|
|
15763
15769
|
const tabsPosition = this.el.getBoundingClientRect();
|
|
15764
15770
|
const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);
|
|
15765
15771
|
const selectedTabRect = this.selectedTabRect;
|
|
15766
|
-
return (index.h(index.Host, { key: '
|
|
15772
|
+
return (index.h(index.Host, { key: 'f12c604fc3dadd8088792f02b42bd36618afa298', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, index.h("div", { key: 'be9cfe9c9e069c9593c40d32f474dd23bb8a63fd', class: "tabs-container" }, index.h("slot", { key: '50ec843d4ae261a0c4f0034d6f60366f5114f55c' }), index.h("div", { key: '814c5513a2945059ff240912b26a7936a0ee7478', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
|
|
15767
15773
|
}
|
|
15768
15774
|
get el() { return index.getElement(this); }
|
|
15769
15775
|
static get watchers() { return {
|
|
@@ -15813,7 +15819,7 @@ const CpslText = class {
|
|
|
15813
15819
|
}
|
|
15814
15820
|
}
|
|
15815
15821
|
render() {
|
|
15816
|
-
return (index.h(index.Host, { key: '
|
|
15822
|
+
return (index.h(index.Host, { key: '97db3be68cbcd4a59851a74bfefac921b9f7efc0', class: {
|
|
15817
15823
|
'primary': this.color === 'primary',
|
|
15818
15824
|
'secondary': this.color === 'secondary',
|
|
15819
15825
|
'tertiary': this.color === 'tertiary',
|
|
@@ -15850,7 +15856,7 @@ const CpslTileButton = class {
|
|
|
15850
15856
|
this.icon = undefined;
|
|
15851
15857
|
}
|
|
15852
15858
|
render() {
|
|
15853
|
-
return (index.h(index.Host, { key: '
|
|
15859
|
+
return (index.h(index.Host, { key: 'e12a3acf1adac28cb7ed464426bd50b48e5727d8' }, index.h("button", { key: '005df699f7b93807598568cd6542907f851d0234', class: "button-native" }, index.h("cpsl-icon", { key: 'af574fff1782925d1bc8d4146538fb179f63dead', exportparts: "icon", src: this.src, icon: this.icon }), index.h("slot", { key: 'b6a1d9557e7dbf974411496c7a29b1c0e5d648f3' }))));
|
|
15854
15860
|
}
|
|
15855
15861
|
};
|
|
15856
15862
|
CpslTileButton.style = CpslTileButtonStyle0;
|