@usecapsule/core-components 3.1.0 → 3.1.1
Sign up to get free protection for your applications and to get access to all the features.
- 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;
|