@getpara/core-components 1.1.0 → 1.3.0
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/p-48826e01.entry.js +28 -0
- package/dist/capsule/p-48826e01.entry.js.map +1 -0
- package/dist/capsule/p-a6214f0a.entry.js +2 -0
- package/dist/capsule/p-a6214f0a.entry.js.map +1 -0
- package/dist/cjs/cpsl-alert_34.cjs.entry.js +114 -108
- package/dist/cjs/cpsl-alert_34.cjs.entry.js.map +1 -1
- package/dist/cjs/cpsl-col.cjs.entry.js +1 -1
- package/dist/cjs/cpsl-col.cjs.entry.js.map +1 -1
- package/dist/collection/components/cpsl-auth-modal/cpsl-auth-modal.js +71 -69
- package/dist/collection/components/cpsl-auth-modal/cpsl-auth-modal.js.map +1 -1
- package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js +20 -18
- package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js.map +1 -1
- package/dist/collection/components/cpsl-popover/cpsl-popover.js +19 -17
- package/dist/collection/components/cpsl-popover/cpsl-popover.js.map +1 -1
- package/dist/collection/components/cpsl-select/cpsl-select.js +4 -4
- package/dist/collection/components/cpsl-select/cpsl-select.js.map +1 -1
- package/dist/collection/utils/media.js +1 -1
- package/dist/collection/utils/media.js.map +1 -1
- package/dist/esm/cpsl-alert_34.entry.js +114 -108
- package/dist/esm/cpsl-alert_34.entry.js.map +1 -1
- package/dist/esm/cpsl-col.entry.js +1 -1
- package/dist/esm/cpsl-col.entry.js.map +1 -1
- package/package.json +4 -4
- package/dist/capsule/p-0a4c8cdc.entry.js +0 -2
- package/dist/capsule/p-0a4c8cdc.entry.js.map +0 -1
- package/dist/capsule/p-d813dac5.entry.js +0 -28
- package/dist/capsule/p-d813dac5.entry.js.map +0 -1
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as d,f as i,h as n,H as a}from"./p-fa6b7678.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(typeof window!=="undefined"&&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:"c9d2d0d4c021bc38e672ef6a8db36b1f50f53e2c",style:Object.assign(Object.assign(Object.assign(Object.assign({},this.calculateOffset(d)),this.calculatePull(d)),this.calculatePush(d)),this.calculateSize())},n("slot",{key:"a9f61e679573d1ec7cf26ac9837b0fabf9f885eb"}))}};e.style=c;export{e as cpsl_col};
|
|
2
|
+
//# sourceMappingURL=p-a6214f0a.entry.js.map
|
|
@@ -0,0 +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 (typeof window !== 'undefined' && (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.js';\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,UAAWE,SAAW,aAAgBA,OAAeC,WAAY,CAC/D,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,OAEAX,EACE,aAAaW,2CAGZA,EAAU,GAAM,IAAM,IAE/B,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,2CAGbA,EAAU,GAAKA,EAAU,GACtBA,EAAU,GAAM,IAAM,IACvB,OAEN,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":[]}
|
|
@@ -6153,77 +6153,79 @@ const CpslAuthModal = class {
|
|
|
6153
6153
|
});
|
|
6154
6154
|
}
|
|
6155
6155
|
handleAnimation() {
|
|
6156
|
-
if (
|
|
6157
|
-
if (
|
|
6158
|
-
|
|
6159
|
-
|
|
6160
|
-
|
|
6161
|
-
|
|
6162
|
-
|
|
6163
|
-
|
|
6164
|
-
|
|
6165
|
-
|
|
6166
|
-
|
|
6167
|
-
|
|
6168
|
-
|
|
6169
|
-
|
|
6170
|
-
|
|
6171
|
-
|
|
6172
|
-
|
|
6173
|
-
|
|
6174
|
-
|
|
6175
|
-
|
|
6176
|
-
|
|
6177
|
-
|
|
6178
|
-
|
|
6179
|
-
|
|
6180
|
-
|
|
6181
|
-
|
|
6182
|
-
|
|
6183
|
-
|
|
6184
|
-
|
|
6185
|
-
|
|
6186
|
-
|
|
6187
|
-
|
|
6188
|
-
|
|
6189
|
-
|
|
6190
|
-
|
|
6191
|
-
else {
|
|
6192
|
-
if (window.innerWidth >= constants.MOBILE_SIZE + 1) {
|
|
6193
|
-
gsapWithCSS
|
|
6194
|
-
.timeline({
|
|
6195
|
-
onStart: () => {
|
|
6196
|
-
this.cpslModalExiting.emit();
|
|
6197
|
-
},
|
|
6198
|
-
onComplete: () => {
|
|
6199
|
-
var _a;
|
|
6200
|
-
this.cpslModalExited.emit();
|
|
6201
|
-
(_a = this.modalWrapperEl) === null || _a === void 0 ? void 0 : _a.style.setProperty('display', 'none');
|
|
6202
|
-
},
|
|
6203
|
-
})
|
|
6204
|
-
.to(this.modalWrapperEl, {
|
|
6205
|
-
scale: 0.8,
|
|
6206
|
-
opacity: 0,
|
|
6207
|
-
duration: this.exitTransitionDuration,
|
|
6208
|
-
});
|
|
6156
|
+
if (typeof window !== 'undefined') {
|
|
6157
|
+
if (this.open) {
|
|
6158
|
+
if (window.innerWidth >= constants.MOBILE_SIZE + 1) {
|
|
6159
|
+
gsapWithCSS
|
|
6160
|
+
.timeline({
|
|
6161
|
+
onStart: () => {
|
|
6162
|
+
this.cpslModalEntering.emit();
|
|
6163
|
+
},
|
|
6164
|
+
onComplete: () => {
|
|
6165
|
+
this.cpslModalEntered.emit();
|
|
6166
|
+
},
|
|
6167
|
+
})
|
|
6168
|
+
.set(this.modalWrapperEl, { display: 'flex', yPercent: 0 })
|
|
6169
|
+
.to(this.modalWrapperEl, {
|
|
6170
|
+
scale: 1,
|
|
6171
|
+
opacity: 1,
|
|
6172
|
+
duration: this.enterTransitionDuration,
|
|
6173
|
+
});
|
|
6174
|
+
}
|
|
6175
|
+
else {
|
|
6176
|
+
gsapWithCSS
|
|
6177
|
+
.timeline({
|
|
6178
|
+
onStart: () => {
|
|
6179
|
+
this.cpslModalEntering.emit();
|
|
6180
|
+
},
|
|
6181
|
+
onComplete: () => {
|
|
6182
|
+
this.cpslModalEntered.emit();
|
|
6183
|
+
},
|
|
6184
|
+
})
|
|
6185
|
+
.set(this.modalWrapperEl, { display: 'flex', scale: 1, opacity: 1 })
|
|
6186
|
+
.to(this.modalWrapperEl, {
|
|
6187
|
+
yPercent: -100,
|
|
6188
|
+
duration: this.enterTransitionDuration,
|
|
6189
|
+
});
|
|
6190
|
+
}
|
|
6209
6191
|
}
|
|
6210
6192
|
else {
|
|
6211
|
-
|
|
6212
|
-
|
|
6213
|
-
|
|
6214
|
-
|
|
6215
|
-
|
|
6216
|
-
|
|
6217
|
-
|
|
6218
|
-
|
|
6219
|
-
|
|
6220
|
-
|
|
6221
|
-
|
|
6222
|
-
|
|
6223
|
-
|
|
6224
|
-
|
|
6225
|
-
|
|
6226
|
-
|
|
6193
|
+
if (window.innerWidth >= constants.MOBILE_SIZE + 1) {
|
|
6194
|
+
gsapWithCSS
|
|
6195
|
+
.timeline({
|
|
6196
|
+
onStart: () => {
|
|
6197
|
+
this.cpslModalExiting.emit();
|
|
6198
|
+
},
|
|
6199
|
+
onComplete: () => {
|
|
6200
|
+
var _a;
|
|
6201
|
+
this.cpslModalExited.emit();
|
|
6202
|
+
(_a = this.modalWrapperEl) === null || _a === void 0 ? void 0 : _a.style.setProperty('display', 'none');
|
|
6203
|
+
},
|
|
6204
|
+
})
|
|
6205
|
+
.to(this.modalWrapperEl, {
|
|
6206
|
+
scale: 0.8,
|
|
6207
|
+
opacity: 0,
|
|
6208
|
+
duration: this.exitTransitionDuration,
|
|
6209
|
+
});
|
|
6210
|
+
}
|
|
6211
|
+
else {
|
|
6212
|
+
gsapWithCSS
|
|
6213
|
+
.timeline({
|
|
6214
|
+
onStart: () => {
|
|
6215
|
+
this.cpslModalExiting.emit();
|
|
6216
|
+
},
|
|
6217
|
+
onComplete: () => {
|
|
6218
|
+
var _a;
|
|
6219
|
+
this.cpslModalExited.emit();
|
|
6220
|
+
(_a = this.modalWrapperEl) === null || _a === void 0 ? void 0 : _a.style.setProperty('display', 'none');
|
|
6221
|
+
},
|
|
6222
|
+
})
|
|
6223
|
+
.to(this.modalWrapperEl, {
|
|
6224
|
+
yPercent: 0,
|
|
6225
|
+
duration: this.exitTransitionDuration,
|
|
6226
|
+
})
|
|
6227
|
+
.set(this.modalContainerEl, { y: 0 });
|
|
6228
|
+
}
|
|
6227
6229
|
}
|
|
6228
6230
|
}
|
|
6229
6231
|
}
|
|
@@ -12462,29 +12464,31 @@ const CpslDropdown = class {
|
|
|
12462
12464
|
}
|
|
12463
12465
|
adjustPosition() {
|
|
12464
12466
|
var _a;
|
|
12465
|
-
|
|
12466
|
-
|
|
12467
|
-
|
|
12468
|
-
|
|
12469
|
-
|
|
12470
|
-
|
|
12471
|
-
|
|
12472
|
-
|
|
12473
|
-
|
|
12474
|
-
|
|
12475
|
-
|
|
12476
|
-
|
|
12467
|
+
if (typeof window !== 'undefined') {
|
|
12468
|
+
const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options');
|
|
12469
|
+
const parentRect = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
12470
|
+
const searchBar = this.el.shadowRoot.querySelector('.search-bar');
|
|
12471
|
+
const viewportHeight = window.innerHeight;
|
|
12472
|
+
if (parentRect) {
|
|
12473
|
+
this.width = `${parentRect.width}px`;
|
|
12474
|
+
dropdownOptions.style.left = `${parentRect.x}px`;
|
|
12475
|
+
if (window.innerWidth <= 480) {
|
|
12476
|
+
searchBar.style.maxHeight = `30px`;
|
|
12477
|
+
dropdownOptions.style.top = `425px`;
|
|
12478
|
+
dropdownOptions.style.maxHeight = '110px';
|
|
12479
|
+
return;
|
|
12480
|
+
}
|
|
12481
|
+
dropdownOptions.style.top = `${parentRect.y + parentRect.height}px`;
|
|
12482
|
+
const availableHeight = viewportHeight - parentRect.bottom;
|
|
12483
|
+
dropdownOptions.style.maxHeight = `${availableHeight - 8}px`;
|
|
12477
12484
|
}
|
|
12478
|
-
dropdownOptions.style.top = `${parentRect.y + parentRect.height}px`;
|
|
12479
|
-
const availableHeight = viewportHeight - parentRect.bottom;
|
|
12480
|
-
dropdownOptions.style.maxHeight = `${availableHeight - 8}px`;
|
|
12481
12485
|
}
|
|
12482
12486
|
}
|
|
12483
12487
|
addClickOutsideListener() {
|
|
12484
|
-
window.addEventListener('click', this.handleClickOutside);
|
|
12488
|
+
typeof window !== 'undefined' && window.addEventListener('click', this.handleClickOutside);
|
|
12485
12489
|
}
|
|
12486
12490
|
removeClickOutsideListener() {
|
|
12487
|
-
window.removeEventListener('click', this.handleClickOutside);
|
|
12491
|
+
typeof window !== 'undefined' && window.removeEventListener('click', this.handleClickOutside);
|
|
12488
12492
|
}
|
|
12489
12493
|
componentWillLoad() {
|
|
12490
12494
|
if (this.items.length > 0) {
|
|
@@ -12502,7 +12506,7 @@ const CpslDropdown = class {
|
|
|
12502
12506
|
}
|
|
12503
12507
|
render() {
|
|
12504
12508
|
var _a, _b, _c;
|
|
12505
|
-
return (index.h(index.Host, { key: '
|
|
12509
|
+
return (index.h(index.Host, { key: '918eabdb23ab1f6c136c2ade37b572b60966ce75' }, index.h("button", { key: '53cde2c1780c6ceb1c08667fac003910810472b2', 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: '9dded62f6bcd83665f2af693f2ac6cff20de4d52', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), index.h("ul", { key: '10a3cfc29eb61e9a2c64b0075c0b9b2985d08c70', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (index.h("li", { key: '702a1282cb816da185a0ce435146443daddb1d6c', class: "search-bar" }, index.h("input", { key: 'da05fa6019d2c0bd1dab4336378cd449172a3cae', 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)))))));
|
|
12506
12510
|
}
|
|
12507
12511
|
get el() { return index.getElement(this); }
|
|
12508
12512
|
static get watchers() { return {
|
|
@@ -16956,7 +16960,7 @@ const CpslPopover = class {
|
|
|
16956
16960
|
this.setPosition = () => {
|
|
16957
16961
|
var _a;
|
|
16958
16962
|
const anchorEl = (_a = this.anchorEl) !== null && _a !== void 0 ? _a : this.triggerEl;
|
|
16959
|
-
if (anchorEl) {
|
|
16963
|
+
if (anchorEl && typeof window !== 'undefined') {
|
|
16960
16964
|
const windowWidth = window.innerWidth;
|
|
16961
16965
|
const windowHeight = window.innerHeight;
|
|
16962
16966
|
const elWidth = this.el.clientWidth;
|
|
@@ -17069,19 +17073,21 @@ const CpslPopover = class {
|
|
|
17069
17073
|
this.setPosition();
|
|
17070
17074
|
}
|
|
17071
17075
|
onOpenChange() {
|
|
17072
|
-
if (
|
|
17073
|
-
|
|
17074
|
-
|
|
17075
|
-
|
|
17076
|
-
|
|
17077
|
-
|
|
17078
|
-
|
|
17079
|
-
|
|
17080
|
-
|
|
17081
|
-
|
|
17082
|
-
|
|
17083
|
-
|
|
17084
|
-
|
|
17076
|
+
if (typeof window !== 'undefined') {
|
|
17077
|
+
if (this.open) {
|
|
17078
|
+
window.addEventListener('mousedown', this.validateEventStart);
|
|
17079
|
+
window.addEventListener('touchstart', this.validateEventStart);
|
|
17080
|
+
window.addEventListener('click', this.handleClickOutside);
|
|
17081
|
+
window.addEventListener('scroll', () => this.setPosition(), true);
|
|
17082
|
+
window.addEventListener('resize', () => this.setPosition(), true);
|
|
17083
|
+
}
|
|
17084
|
+
else {
|
|
17085
|
+
window.removeEventListener('mousedown', this.validateEventStart);
|
|
17086
|
+
window.removeEventListener('touchstart', this.validateEventStart);
|
|
17087
|
+
window.removeEventListener('click', this.handleClickOutside);
|
|
17088
|
+
window.removeEventListener('scroll', () => this.setPosition(), true);
|
|
17089
|
+
window.removeEventListener('resize', () => this.setPosition(), true);
|
|
17090
|
+
}
|
|
17085
17091
|
}
|
|
17086
17092
|
}
|
|
17087
17093
|
componentDidLoad() {
|
|
@@ -17093,7 +17099,7 @@ const CpslPopover = class {
|
|
|
17093
17099
|
}
|
|
17094
17100
|
render() {
|
|
17095
17101
|
var _a;
|
|
17096
|
-
return (index.h(index.Host, { key: '
|
|
17102
|
+
return (index.h(index.Host, { key: 'ef05d515c8622a70f143f460538a422c010de2e5', class: {
|
|
17097
17103
|
'open': this.open,
|
|
17098
17104
|
'transform-h-left': this.transformOriginHorizontal === 'left',
|
|
17099
17105
|
'transform-h-center': this.transformOriginHorizontal === 'center',
|
|
@@ -17105,9 +17111,9 @@ const CpslPopover = class {
|
|
|
17105
17111
|
top: `${this.positionY}px`,
|
|
17106
17112
|
left: `${this.positionX}px`,
|
|
17107
17113
|
width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px`,
|
|
17108
|
-
} }, index.h("div", { key: '
|
|
17114
|
+
} }, index.h("div", { key: 'd9134dc8de72f5802ce8ebf8b31f0a9a1cb09775', id: "container", class: { container: true, open: this.open }, style: {
|
|
17109
17115
|
visibility: this.hasSetInitialPosition ? 'visible' : 'hidden',
|
|
17110
|
-
} }, index.h("slot", { key: '
|
|
17116
|
+
} }, index.h("slot", { key: '6461c7a0c09cd8a0b03e5c42ba9fae303e571146' }))));
|
|
17111
17117
|
}
|
|
17112
17118
|
get el() { return index.getElement(this); }
|
|
17113
17119
|
static get watchers() { return {
|
|
@@ -21335,13 +21341,13 @@ const CpslSelect = class {
|
|
|
21335
21341
|
this.handleClickOutside = (event) => {
|
|
21336
21342
|
if (this.hasFocus && !this.el.contains(event.target)) {
|
|
21337
21343
|
this.hasFocus = false;
|
|
21338
|
-
window.removeEventListener('click', this.handleClickOutside);
|
|
21344
|
+
typeof window !== 'undefined' && window.removeEventListener('click', this.handleClickOutside);
|
|
21339
21345
|
}
|
|
21340
21346
|
};
|
|
21341
21347
|
this.handleClick = () => {
|
|
21342
21348
|
if (!this.disabled) {
|
|
21343
21349
|
this.hasFocus = true;
|
|
21344
|
-
window.addEventListener('click', this.handleClickOutside);
|
|
21350
|
+
typeof window !== 'undefined' && window.addEventListener('click', this.handleClickOutside);
|
|
21345
21351
|
}
|
|
21346
21352
|
};
|
|
21347
21353
|
this.anchorEl = undefined;
|
|
@@ -21396,10 +21402,10 @@ const CpslSelect = class {
|
|
|
21396
21402
|
render() {
|
|
21397
21403
|
var _a, _b, _c, _d, _e;
|
|
21398
21404
|
const selectedValueAsString = typeof this.selectedValue === 'string' ? this.selectedValue : this.selectedValue.join(', ');
|
|
21399
|
-
return (index.h(index.Host, { key: '
|
|
21405
|
+
return (index.h(index.Host, { key: '0b366a3c097d845993afaa7d27c894c5c0f03e44', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': this.hasSelectedItem } }, this.label && (index.h("label", { key: 'cfa4ae1a802f98d1beeea74bce33dd1844f821bf', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? index.h("span", { class: "optional-label" }, "(optional)") : '')), index.h("div", { key: '971c488bbadbaa9ade8e17d0ec91bbaaccd1c3df', part: "select-container", id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && index.h("slot", { key: 'c4cb233ece4d06a3cc7ef4b7aa5d9ccb6fada6c2', name: "selected-item" }), index.h("div", { key: '78e52b91db67e50205601902074610c4841d73db', class: { 'selected-container-content': true, 'hidden': this.hasSelectedItem && this.showFormattedSelectedItem }, id: "selected-container-content", style: {} }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (index.h("cpsl-text", { key: '682ce440ce404b1549eec38f6a523026eb48ea0d', class: { 'selected-text': true, 'placeholder': !this.selectedValue }, part: "selected-text", color: this.selectedItemColor, variant: this.selectedItemVariant, weight: this.selectedItemWeight }, !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 : selectedValueAsString)))), index.h("cpsl-icon", { key: '96355103fb2e94e3c2bce8be308c643de03cb94c', part: "icon", class: { 'chevron': true, 'open': !this.noIconAnimation && this.popoverOpen, 'has-value': this.hasSelectedItem }, icon: this.icon }), index.h("input", { key: '60eb6ad37fcaa568b3166f10b6c8dd59b8ca6e10', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" }), index.h("cpsl-popover", { key: '4bd5c2e243c05671786dded417234bdb3ae4e5ef', part: "popover", autoWidth: this.autoWidth, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, index.h("div", { key: '0d1bb3a829f31e211cc99e28e3650d21a353ec75', part: "dropdown", class: "dropdown" }, this.showSearch && (index.h("div", { key: 'af48dfde2c8fd8717b9602ad6870a7b8da86c6db', class: "search-container" }, index.h("cpsl-input", { key: '3a3d0197b1fe0f6a91568fb2c0530a34d8f68c8d', onClick: e => e.stopPropagation(), placeholder: (_d = this.searchPlaceholder) !== null && _d !== void 0 ? _d : 'Search', value: "", onCpslInput: e => {
|
|
21400
21406
|
e.stopPropagation();
|
|
21401
21407
|
this.cpslSearchChange.emit(e.detail.value);
|
|
21402
|
-
} }))), index.h("div", { key: '
|
|
21408
|
+
} }))), index.h("div", { key: 'fb7d1dc0be277669ad804766f7ebb03218268a17', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, index.h("slot", { key: 'f63682b1d61aeab270cd2bf8683bf9b2f100274d', name: "items" }))))), (this.errorText || this.helperText) && (index.h("div", { key: '66ff41128e6faa920cd1a3e7cea36995921b89b6', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("span", { key: '77f56f4d6c7bff3836cdb54392b7938a0aa2ef9a' }, (_e = this.errorText) !== null && _e !== void 0 ? _e : this.helperText)))));
|
|
21403
21409
|
}
|
|
21404
21410
|
get el() { return index.getElement(this); }
|
|
21405
21411
|
static get watchers() { return {
|