@getpara/core-components 1.1.0 → 1.3.0

package/dist/cjs/cpsl-col.cjs.entry.js

@@ -18,7 +18,7 @@ const matchBreakpoint = (breakpoint) => {
     if (breakpoint === undefined || breakpoint === '') {
         return true;
     }
-    if (window.matchMedia) {
+    if (typeof window !== 'undefined' && window.matchMedia) {
         const mediaQuery = SIZE_TO_MEDIA[breakpoint];
         return window.matchMedia(mediaQuery).matches;
     }

package/dist/cjs/cpsl-col.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"cpsl-col.entry.cjs.js","mappings":"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","names":["forceUpdate","h","Host"],"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.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"],"version":3}
+{"file":"cpsl-col.entry.cjs.js","mappings":"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","names":["forceUpdate","h","Host"],"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"],"version":3}

package/dist/collection/components/cpsl-auth-modal/cpsl-auth-modal.js

@@ -39,77 +39,79 @@ export class CpslAuthModal {
         });
     }
     handleAnimation() {
-        if (this.open) {
-            if (window.innerWidth >= MOBILE_SIZE + 1) {
-                gsap
-                    .timeline({
-                    onStart: () => {
-                        this.cpslModalEntering.emit();
-                    },
-                    onComplete: () => {
-                        this.cpslModalEntered.emit();
-                    },
-                })
-                    .set(this.modalWrapperEl, { display: 'flex', yPercent: 0 })
-                    .to(this.modalWrapperEl, {
-                    scale: 1,
-                    opacity: 1,
-                    duration: this.enterTransitionDuration,
-                });
-            }
-            else {
-                gsap
-                    .timeline({
-                    onStart: () => {
-                        this.cpslModalEntering.emit();
-                    },
-                    onComplete: () => {
-                        this.cpslModalEntered.emit();
-                    },
-                })
-                    .set(this.modalWrapperEl, { display: 'flex', scale: 1, opacity: 1 })
-                    .to(this.modalWrapperEl, {
-                    yPercent: -100,
-                    duration: this.enterTransitionDuration,
-                });
-            }
-        }
-        else {
-            if (window.innerWidth >= MOBILE_SIZE + 1) {
-                gsap
-                    .timeline({
-                    onStart: () => {
-                        this.cpslModalExiting.emit();
-                    },
-                    onComplete: () => {
-                        var _a;
-                        this.cpslModalExited.emit();
-                        (_a = this.modalWrapperEl) === null || _a === void 0 ? void 0 : _a.style.setProperty('display', 'none');
-                    },
-                })
-                    .to(this.modalWrapperEl, {
-                    scale: 0.8,
-                    opacity: 0,
-                    duration: this.exitTransitionDuration,
-                });
+        if (typeof window !== 'undefined') {
+            if (this.open) {
+                if (window.innerWidth >= MOBILE_SIZE + 1) {
+                    gsap
+                        .timeline({
+                        onStart: () => {
+                            this.cpslModalEntering.emit();
+                        },
+                        onComplete: () => {
+                            this.cpslModalEntered.emit();
+                        },
+                    })
+                        .set(this.modalWrapperEl, { display: 'flex', yPercent: 0 })
+                        .to(this.modalWrapperEl, {
+                        scale: 1,
+                        opacity: 1,
+                        duration: this.enterTransitionDuration,
+                    });
+                }
+                else {
+                    gsap
+                        .timeline({
+                        onStart: () => {
+                            this.cpslModalEntering.emit();
+                        },
+                        onComplete: () => {
+                            this.cpslModalEntered.emit();
+                        },
+                    })
+                        .set(this.modalWrapperEl, { display: 'flex', scale: 1, opacity: 1 })
+                        .to(this.modalWrapperEl, {
+                        yPercent: -100,
+                        duration: this.enterTransitionDuration,
+                    });
+                }
             }
             else {
-                gsap
-                    .timeline({
-                    onStart: () => {
-                        this.cpslModalExiting.emit();
-                    },
-                    onComplete: () => {
-                        var _a;
-                        this.cpslModalExited.emit();
-                        (_a = this.modalWrapperEl) === null || _a === void 0 ? void 0 : _a.style.setProperty('display', 'none');
-                    },
-                })
-                    .to(this.modalWrapperEl, {
-                    yPercent: 0,
-                    duration: this.exitTransitionDuration,
-                })
-                    .set(this.modalContainerEl, { y: 0 });
+                if (window.innerWidth >= MOBILE_SIZE + 1) {
+                    gsap
+                        .timeline({
+                        onStart: () => {
+                            this.cpslModalExiting.emit();
+                        },
+                        onComplete: () => {
+                            var _a;
+                            this.cpslModalExited.emit();
+                            (_a = this.modalWrapperEl) === null || _a === void 0 ? void 0 : _a.style.setProperty('display', 'none');
+                        },
+                    })
+                        .to(this.modalWrapperEl, {
+                        scale: 0.8,
+                        opacity: 0,
+                        duration: this.exitTransitionDuration,
+                    });
+                }
+                else {
+                    gsap
+                        .timeline({
+                        onStart: () => {
+                            this.cpslModalExiting.emit();
+                        },
+                        onComplete: () => {
+                            var _a;
+                            this.cpslModalExited.emit();
+                            (_a = this.modalWrapperEl) === null || _a === void 0 ? void 0 : _a.style.setProperty('display', 'none');
+                        },
+                    })
+                        .to(this.modalWrapperEl, {
+                        yPercent: 0,
+                        duration: this.exitTransitionDuration,
+                    })
+                        .set(this.modalContainerEl, { y: 0 });
+                }
             }
         }
     }

package/dist/collection/components/cpsl-auth-modal/cpsl-auth-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"cpsl-auth-modal.js","sourceRoot":"","sources":["../../../../src/components/cpsl-auth-modal/cpsl-auth-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, Watch, h, Event, EventEmitter } from '@stencil/core';\nimport gsap from 'gsap';\nimport { MOBILE_SIZE } from '../../constants.js';\n\nconst mm = gsap.matchMedia();\n@Component({\n  tag: 'cpsl-auth-modal',\n  styleUrl: 'cpsl-auth-modal.scss',\n  shadow: true,\n})\nexport class CpslAuthModal {\n  private hasAnimatedIn: boolean;\n\n  @Element() el!: HTMLCpslAuthModalElement;\n\n  @State() hasFooter: boolean;\n  @State() isMobile: boolean;\n\n  /**\n   * Duration in seconds of the modal entering.\n   * Default is .15.\n   */\n  @Prop() enterTransitionDuration?: number = 0.15;\n\n  /**\n   * Duration in seconds of the modal exiting.\n   * Default is .15.\n   */\n  @Prop() exitTransitionDuration?: number = 0.15;\n\n  /**\n   * Whether or not to show the overlay. This will always show the modal, regardless of the value of `open`.\n   */\n  @Prop() noOverlay?: boolean;\n\n  /**\n   * Whether or not to show the modal.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * Emitted when enter animation starts.\n   */\n  @Event() cpslModalEntering!: EventEmitter<null>;\n\n  /**\n   * Emitted when enter animation finishes.\n   */\n  @Event() cpslModalEntered!: EventEmitter<null>;\n\n  /**\n   * Emitted when exit animation starts.\n   */\n  @Event() cpslModalExiting!: EventEmitter<null>;\n\n  /**\n   * Emitted when exit animation finishes.\n   */\n  @Event() cpslModalExited!: EventEmitter<null>;\n\n  /**\n   * Emitted when exit animation finishes.\n   */\n  @Event() cpslModalRequestClose!: EventEmitter<null>;\n\n  /**\n   * Override z-index.\n   */\n  @Prop() zIndexOverride?: number;\n\n  @Watch('open')\n  toggleModal() {\n    if (this.hasAnimatedIn) {\n      this.handleAnimation();\n    }\n  }\n\n  componentDidLoad() {\n    this.handleAnimation();\n    this.hasAnimatedIn = true;\n\n    mm.add(`(min-width: ${MOBILE_SIZE + 1}px)`, () => {\n      gsap.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });\n      this.isMobile = false;\n    });\n    mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {\n      gsap.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });\n      this.isMobile = true;\n    });\n\n    this.hasFooter = this.footerSlotEl.assignedNodes().length >= 1;\n    this.footerSlotEl.addEventListener('slotchange', () => {\n      if (this.footerSlotEl.assignedNodes().length >= 1) {\n        this.hasFooter = true;\n      } else {\n        this.hasFooter = false;\n      }\n    });\n  }\n\n  private handleAnimation() {\n    if (this.open) {\n      if (window.innerWidth >= MOBILE_SIZE + 1) {\n        gsap\n          .timeline({\n            onStart: () => {\n              this.cpslModalEntering.emit();\n            },\n            onComplete: () => {\n              this.cpslModalEntered.emit();\n            },\n          })\n          .set(this.modalWrapperEl, { display: 'flex', yPercent: 0 })\n          .to(this.modalWrapperEl, {\n            scale: 1,\n            opacity: 1,\n            duration: this.enterTransitionDuration,\n          });\n      } else {\n        gsap\n          .timeline({\n            onStart: () => {\n              this.cpslModalEntering.emit();\n            },\n            onComplete: () => {\n              this.cpslModalEntered.emit();\n            },\n          })\n          .set(this.modalWrapperEl, { display: 'flex', scale: 1, opacity: 1 })\n          .to(this.modalWrapperEl, {\n            yPercent: -100,\n            duration: this.enterTransitionDuration,\n          });\n      }\n    } else {\n      if (window.innerWidth >= MOBILE_SIZE + 1) {\n        gsap\n          .timeline({\n            onStart: () => {\n              this.cpslModalExiting.emit();\n            },\n            onComplete: () => {\n              this.cpslModalExited.emit();\n              this.modalWrapperEl?.style.setProperty('display', 'none');\n            },\n          })\n          .to(this.modalWrapperEl, {\n            scale: 0.8,\n            opacity: 0,\n            duration: this.exitTransitionDuration,\n          });\n      } else {\n        gsap\n          .timeline({\n            onStart: () => {\n              this.cpslModalExiting.emit();\n            },\n            onComplete: () => {\n              this.cpslModalExited.emit();\n              this.modalWrapperEl?.style.setProperty('display', 'none');\n            },\n          })\n          .to(this.modalWrapperEl, {\n            yPercent: 0,\n            duration: this.exitTransitionDuration,\n          })\n          .set(this.modalContainerEl, { y: 0 });\n      }\n    }\n  }\n\n  private get footerEl() {\n    return this.el.shadowRoot.getElementById('modal-footer');\n  }\n\n  private get modalWrapperEl() {\n    return this.el.shadowRoot.getElementById('modal-wrapper');\n  }\n\n  private get modalContainerEl() {\n    return this.el.shadowRoot.getElementById('modal-container');\n  }\n\n  private get footerSlotEl() {\n    return this.footerEl.querySelectorAll('slot')[0];\n  }\n\n  private get Modal() {\n    return (\n      <div class={{ 'modal-container': true, 'no-footer': !this.hasFooter }} part=\"modal-container\" id=\"modal-container\">\n        <cpsl-card id=\"modal-body-card\" class={{ 'modal-body-card': true, 'body': true }} part=\"modal-body-card\">\n          <slot name=\"body\"></slot>\n          {this.isMobile && (\n            <div class=\"mobile-footer\" part=\"modal-mobile-footer\">\n              <slot name=\"footer\"></slot>\n            </div>\n          )}\n        </cpsl-card>\n        <cpsl-card\n          id=\"modal-footer\"\n          part=\"modal-footer\"\n          class={{ 'footer-hidden': !this.hasFooter, 'modal-body-card': true }}\n          style={{ display: !this.isMobile ? 'block' : 'none' }}\n        >\n          <slot name=\"footer\"></slot>\n        </cpsl-card>\n      </div>\n    );\n  }\n\n  render() {\n    if (this.noOverlay) {\n      return (\n        <Host style={this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {}} class=\"no-overlay\">\n          {this.Modal}\n        </Host>\n      );\n    }\n\n    return (\n      <Host style={this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {}} class={{ 'include-mobile-styling': true }}>\n        <cpsl-overlay\n          zIndexOverride={this.zIndexOverride ? this.zIndexOverride : undefined}\n          id=\"overlay\"\n          open={this.open}\n          enterTransitionDuration={this.enterTransitionDuration}\n          exitTransitionDuration={this.exitTransitionDuration}\n        />\n        <div id=\"modal-wrapper\" class=\"modal-wrapper\">\n          {this.Modal}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-auth-modal.js","sourceRoot":"","sources":["../../../../src/components/cpsl-auth-modal/cpsl-auth-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, Watch, h, Event, EventEmitter } from '@stencil/core';\nimport gsap from 'gsap';\nimport { MOBILE_SIZE } from '../../constants.js';\n\nconst mm = gsap.matchMedia();\n@Component({\n  tag: 'cpsl-auth-modal',\n  styleUrl: 'cpsl-auth-modal.scss',\n  shadow: true,\n})\nexport class CpslAuthModal {\n  private hasAnimatedIn: boolean;\n\n  @Element() el!: HTMLCpslAuthModalElement;\n\n  @State() hasFooter: boolean;\n  @State() isMobile: boolean;\n\n  /**\n   * Duration in seconds of the modal entering.\n   * Default is .15.\n   */\n  @Prop() enterTransitionDuration?: number = 0.15;\n\n  /**\n   * Duration in seconds of the modal exiting.\n   * Default is .15.\n   */\n  @Prop() exitTransitionDuration?: number = 0.15;\n\n  /**\n   * Whether or not to show the overlay. This will always show the modal, regardless of the value of `open`.\n   */\n  @Prop() noOverlay?: boolean;\n\n  /**\n   * Whether or not to show the modal.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * Emitted when enter animation starts.\n   */\n  @Event() cpslModalEntering!: EventEmitter<null>;\n\n  /**\n   * Emitted when enter animation finishes.\n   */\n  @Event() cpslModalEntered!: EventEmitter<null>;\n\n  /**\n   * Emitted when exit animation starts.\n   */\n  @Event() cpslModalExiting!: EventEmitter<null>;\n\n  /**\n   * Emitted when exit animation finishes.\n   */\n  @Event() cpslModalExited!: EventEmitter<null>;\n\n  /**\n   * Emitted when exit animation finishes.\n   */\n  @Event() cpslModalRequestClose!: EventEmitter<null>;\n\n  /**\n   * Override z-index.\n   */\n  @Prop() zIndexOverride?: number;\n\n  @Watch('open')\n  toggleModal() {\n    if (this.hasAnimatedIn) {\n      this.handleAnimation();\n    }\n  }\n\n  componentDidLoad() {\n    this.handleAnimation();\n    this.hasAnimatedIn = true;\n\n    mm.add(`(min-width: ${MOBILE_SIZE + 1}px)`, () => {\n      gsap.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });\n      this.isMobile = false;\n    });\n    mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {\n      gsap.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });\n      this.isMobile = true;\n    });\n\n    this.hasFooter = this.footerSlotEl.assignedNodes().length >= 1;\n    this.footerSlotEl.addEventListener('slotchange', () => {\n      if (this.footerSlotEl.assignedNodes().length >= 1) {\n        this.hasFooter = true;\n      } else {\n        this.hasFooter = false;\n      }\n    });\n  }\n\n  private handleAnimation() {\n    if (typeof window !== 'undefined') {\n      if (this.open) {\n        if (window.innerWidth >= MOBILE_SIZE + 1) {\n          gsap\n            .timeline({\n              onStart: () => {\n                this.cpslModalEntering.emit();\n              },\n              onComplete: () => {\n                this.cpslModalEntered.emit();\n              },\n            })\n            .set(this.modalWrapperEl, { display: 'flex', yPercent: 0 })\n            .to(this.modalWrapperEl, {\n              scale: 1,\n              opacity: 1,\n              duration: this.enterTransitionDuration,\n            });\n        } else {\n          gsap\n            .timeline({\n              onStart: () => {\n                this.cpslModalEntering.emit();\n              },\n              onComplete: () => {\n                this.cpslModalEntered.emit();\n              },\n            })\n            .set(this.modalWrapperEl, { display: 'flex', scale: 1, opacity: 1 })\n            .to(this.modalWrapperEl, {\n              yPercent: -100,\n              duration: this.enterTransitionDuration,\n            });\n        }\n      } else {\n        if (window.innerWidth >= MOBILE_SIZE + 1) {\n          gsap\n            .timeline({\n              onStart: () => {\n                this.cpslModalExiting.emit();\n              },\n              onComplete: () => {\n                this.cpslModalExited.emit();\n                this.modalWrapperEl?.style.setProperty('display', 'none');\n              },\n            })\n            .to(this.modalWrapperEl, {\n              scale: 0.8,\n              opacity: 0,\n              duration: this.exitTransitionDuration,\n            });\n        } else {\n          gsap\n            .timeline({\n              onStart: () => {\n                this.cpslModalExiting.emit();\n              },\n              onComplete: () => {\n                this.cpslModalExited.emit();\n                this.modalWrapperEl?.style.setProperty('display', 'none');\n              },\n            })\n            .to(this.modalWrapperEl, {\n              yPercent: 0,\n              duration: this.exitTransitionDuration,\n            })\n            .set(this.modalContainerEl, { y: 0 });\n        }\n      }\n    }\n  }\n\n  private get footerEl() {\n    return this.el.shadowRoot.getElementById('modal-footer');\n  }\n\n  private get modalWrapperEl() {\n    return this.el.shadowRoot.getElementById('modal-wrapper');\n  }\n\n  private get modalContainerEl() {\n    return this.el.shadowRoot.getElementById('modal-container');\n  }\n\n  private get footerSlotEl() {\n    return this.footerEl.querySelectorAll('slot')[0];\n  }\n\n  private get Modal() {\n    return (\n      <div class={{ 'modal-container': true, 'no-footer': !this.hasFooter }} part=\"modal-container\" id=\"modal-container\">\n        <cpsl-card id=\"modal-body-card\" class={{ 'modal-body-card': true, 'body': true }} part=\"modal-body-card\">\n          <slot name=\"body\"></slot>\n          {this.isMobile && (\n            <div class=\"mobile-footer\" part=\"modal-mobile-footer\">\n              <slot name=\"footer\"></slot>\n            </div>\n          )}\n        </cpsl-card>\n        <cpsl-card\n          id=\"modal-footer\"\n          part=\"modal-footer\"\n          class={{ 'footer-hidden': !this.hasFooter, 'modal-body-card': true }}\n          style={{ display: !this.isMobile ? 'block' : 'none' }}\n        >\n          <slot name=\"footer\"></slot>\n        </cpsl-card>\n      </div>\n    );\n  }\n\n  render() {\n    if (this.noOverlay) {\n      return (\n        <Host style={this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {}} class=\"no-overlay\">\n          {this.Modal}\n        </Host>\n      );\n    }\n\n    return (\n      <Host style={this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {}} class={{ 'include-mobile-styling': true }}>\n        <cpsl-overlay\n          zIndexOverride={this.zIndexOverride ? this.zIndexOverride : undefined}\n          id=\"overlay\"\n          open={this.open}\n          enterTransitionDuration={this.enterTransitionDuration}\n          exitTransitionDuration={this.exitTransitionDuration}\n        />\n        <div id=\"modal-wrapper\" class=\"modal-wrapper\">\n          {this.Modal}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -54,29 +54,31 @@ export class CpslDropdown {
     }
     adjustPosition() {
         var _a;
-        const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options');
-        const parentRect = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        const searchBar = this.el.shadowRoot.querySelector('.search-bar');
-        const viewportHeight = window.innerHeight;
-        if (parentRect) {
-            this.width = `${parentRect.width}px`;
-            dropdownOptions.style.left = `${parentRect.x}px`;
-            if (window.innerWidth <= 480) {
-                searchBar.style.maxHeight = `30px`;
-                dropdownOptions.style.top = `425px`;
-                dropdownOptions.style.maxHeight = '110px';
-                return;
+        if (typeof window !== 'undefined') {
+            const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options');
+            const parentRect = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            const searchBar = this.el.shadowRoot.querySelector('.search-bar');
+            const viewportHeight = window.innerHeight;
+            if (parentRect) {
+                this.width = `${parentRect.width}px`;
+                dropdownOptions.style.left = `${parentRect.x}px`;
+                if (window.innerWidth <= 480) {
+                    searchBar.style.maxHeight = `30px`;
+                    dropdownOptions.style.top = `425px`;
+                    dropdownOptions.style.maxHeight = '110px';
+                    return;
+                }
+                dropdownOptions.style.top = `${parentRect.y + parentRect.height}px`;
+                const availableHeight = viewportHeight - parentRect.bottom;
+                dropdownOptions.style.maxHeight = `${availableHeight - 8}px`;
             }
-            dropdownOptions.style.top = `${parentRect.y + parentRect.height}px`;
-            const availableHeight = viewportHeight - parentRect.bottom;
-            dropdownOptions.style.maxHeight = `${availableHeight - 8}px`;
         }
     }
     addClickOutsideListener() {
-        window.addEventListener('click', this.handleClickOutside);
+        typeof window !== 'undefined' && window.addEventListener('click', this.handleClickOutside);
     }
     removeClickOutsideListener() {
-        window.removeEventListener('click', this.handleClickOutside);
+        typeof window !== 'undefined' && window.removeEventListener('click', this.handleClickOutside);
     }
     componentWillLoad() {
         if (this.items.length > 0) {
@@ -94,7 +96,7 @@ export class CpslDropdown {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '95a5e98e81c71d0d22fb92dc7669a071c8982d5d' }, h("button", { key: '56b6bfca6283796be4a68b4bf2eb2404637c50e7', 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}`, h("div", { key: 'd589fca8b9ac25d0884b5a059c618b14547ca9fc', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: 'ae1977c621830127463fcc142e26141a93780048', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { key: '98225551b1a3f5fcd744c873d09ea606e2b3141f', class: "search-bar" }, h("input", { key: '71988503de0b51e3e3cd771c11f25809da813db5', type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value)))))));
+        return (h(Host, { key: '918eabdb23ab1f6c136c2ade37b572b60966ce75' }, 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}`, h("div", { key: '9dded62f6bcd83665f2af693f2ac6cff20de4d52', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: '10a3cfc29eb61e9a2c64b0075c0b9b2985d08c70', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { key: '702a1282cb816da185a0ce435146443daddb1d6c', class: "search-bar" }, h("input", { key: 'da05fa6019d2c0bd1dab4336378cd449172a3cae', type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value)))))));
     }
     static get is() { return "cpsl-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"cpsl-dropdown.js","sourceRoot":"","sources":["../../../../src/components/cpsl-dropdown/cpsl-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Element, ComponentInterface, Watch, Listen, EventEmitter, Event } from '@stencil/core';\nimport { Icons } from '../../assets/icons/index.js';\nimport { DropdownInputEventDetail } from './dropdown-interface.js';\n\n@Component({\n  tag: 'cpsl-dropdown',\n  styleUrl: 'cpsl-dropdown.scss',\n  shadow: true,\n})\nexport class CpslDropdown implements ComponentInterface {\n  @Element() el: HTMLCpslDropdownElement;\n\n  /**\n   * Width of the dropdown\n   */\n  @Prop() width: string = '100%';\n\n  /**\n   * Whether or not to include search capability\n   */\n  @Prop() hasCpslSearch: boolean = false;\n\n  @State() isOpen: boolean = false;\n  @State() searchQuery: string = '';\n  @State() filteredItems: Array<DropdownInputEventDetail> = [];\n\n  /**\n   * Items to be presented in the dropdown\n   */\n  @Prop() items: Array<DropdownInputEventDetail> = [];\n\n  /**\n   * The selected item in the dropdown\n   */\n  @Prop({ mutable: true }) selectedItem?: DropdownInputEventDetail | null = null;\n\n  /**\n   * Event emitted when the selected item changes\n   */\n  @Event() selectedItemChange!: EventEmitter<DropdownInputEventDetail>;\n\n  @Watch('selectedItem')\n  handleSelectedItemChange(newValue: DropdownInputEventDetail | null) {\n    if (newValue !== null) {\n      this.selectItem(newValue, false);\n    }\n  }\n\n  private toggleDropdown = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  private selectItem = (item: DropdownInputEventDetail, emitEvent: boolean = true) => {\n    this.selectedItem = item;\n    this.isOpen = false;\n    if (emitEvent) {\n      this.selectedItemChange.emit(this.selectedItem);\n    }\n  };\n\n  private handleItemSelect = (item: DropdownInputEventDetail) => () => {\n    this.selectItem(item);\n  };\n\n  private handleSearchQueryChange = (event: InputEvent) => {\n    const target = event.target as HTMLInputElement;\n    this.searchQuery = target.value;\n    this.filteredItems = this.items.filter(item => item.label.toLowerCase().includes(this.searchQuery.toLowerCase()));\n  };\n\n  @Watch('isOpen')\n  handleOpenChange() {\n    if (this.isOpen) {\n      this.adjustPosition();\n      this.addClickOutsideListener();\n    } else {\n      this.removeClickOutsideListener();\n    }\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    if (this.isOpen) {\n      this.adjustPosition();\n    }\n  }\n\n  private adjustPosition() {\n    const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options') as HTMLElement;\n    const parentRect = this.el.parentElement?.getBoundingClientRect();\n    const searchBar = this.el.shadowRoot.querySelector('.search-bar') as HTMLElement;\n    const viewportHeight = window.innerHeight;\n\n    if (parentRect) {\n      this.width = `${parentRect.width}px`;\n      dropdownOptions.style.left = `${parentRect.x}px`;\n      if (window.innerWidth <= 480) {\n        searchBar.style.maxHeight = `30px`;\n        dropdownOptions.style.top = `425px`;\n        dropdownOptions.style.maxHeight = '110px';\n        return;\n      }\n      dropdownOptions.style.top = `${parentRect.y + parentRect.height}px`;\n\n      const availableHeight = viewportHeight - parentRect.bottom;\n      dropdownOptions.style.maxHeight = `${availableHeight - 8}px`;\n    }\n  }\n\n  private addClickOutsideListener() {\n    window.addEventListener('click', this.handleClickOutside);\n  }\n\n  private removeClickOutsideListener() {\n    window.removeEventListener('click', this.handleClickOutside);\n  }\n\n  private handleClickOutside = (event: MouseEvent) => {\n    if (this.isOpen && !this.el.contains(event.target as Node)) {\n      this.isOpen = false;\n    }\n  };\n\n  componentWillLoad() {\n    if (this.items.length > 0) {\n      this.filteredItems = [...this.items];\n      if (this.selectedItem !== null) {\n        this.selectItem(this.selectedItem, false);\n      } else {\n        this.selectedItem = this.items[0];\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    this.removeClickOutsideListener();\n  }\n\n  render() {\n    return (\n      <Host>\n        <button class=\"dropdown-button\" onClick={this.toggleDropdown}>\n          {`${this.selectedItem?.selectedLabel || this.selectedItem?.label} ${this.selectedItem?.value}`}\n          <div class={`chevron ${this.isOpen ? '' : 'closed'}`} innerHTML={Icons['chevronUp']} />\n        </button>\n        <ul class={{ 'dropdown-options': true, 'open': this.isOpen }} style={{ width: this.width }}>\n          {this.hasCpslSearch && (\n            <li class=\"search-bar\">\n              <input type=\"text\" placeholder=\"Search...\" value={this.searchQuery} onInput={this.handleSearchQueryChange} />\n            </li>\n          )}\n          {this.filteredItems.map(item => (\n            <li onClick={this.handleItemSelect(item)}>\n              <span innerHTML={Icons[item.icon]}></span>\n              {item.label} <span class=\"dropdown-value\">{item.value}</span>\n            </li>\n          ))}\n        </ul>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-dropdown.js","sourceRoot":"","sources":["../../../../src/components/cpsl-dropdown/cpsl-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Element, ComponentInterface, Watch, Listen, EventEmitter, Event } from '@stencil/core';\nimport { Icons } from '../../assets/icons/index.js';\nimport { DropdownInputEventDetail } from './dropdown-interface.js';\n\n@Component({\n  tag: 'cpsl-dropdown',\n  styleUrl: 'cpsl-dropdown.scss',\n  shadow: true,\n})\nexport class CpslDropdown implements ComponentInterface {\n  @Element() el: HTMLCpslDropdownElement;\n\n  /**\n   * Width of the dropdown\n   */\n  @Prop() width: string = '100%';\n\n  /**\n   * Whether or not to include search capability\n   */\n  @Prop() hasCpslSearch: boolean = false;\n\n  @State() isOpen: boolean = false;\n  @State() searchQuery: string = '';\n  @State() filteredItems: Array<DropdownInputEventDetail> = [];\n\n  /**\n   * Items to be presented in the dropdown\n   */\n  @Prop() items: Array<DropdownInputEventDetail> = [];\n\n  /**\n   * The selected item in the dropdown\n   */\n  @Prop({ mutable: true }) selectedItem?: DropdownInputEventDetail | null = null;\n\n  /**\n   * Event emitted when the selected item changes\n   */\n  @Event() selectedItemChange!: EventEmitter<DropdownInputEventDetail>;\n\n  @Watch('selectedItem')\n  handleSelectedItemChange(newValue: DropdownInputEventDetail | null) {\n    if (newValue !== null) {\n      this.selectItem(newValue, false);\n    }\n  }\n\n  private toggleDropdown = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  private selectItem = (item: DropdownInputEventDetail, emitEvent: boolean = true) => {\n    this.selectedItem = item;\n    this.isOpen = false;\n    if (emitEvent) {\n      this.selectedItemChange.emit(this.selectedItem);\n    }\n  };\n\n  private handleItemSelect = (item: DropdownInputEventDetail) => () => {\n    this.selectItem(item);\n  };\n\n  private handleSearchQueryChange = (event: InputEvent) => {\n    const target = event.target as HTMLInputElement;\n    this.searchQuery = target.value;\n    this.filteredItems = this.items.filter(item => item.label.toLowerCase().includes(this.searchQuery.toLowerCase()));\n  };\n\n  @Watch('isOpen')\n  handleOpenChange() {\n    if (this.isOpen) {\n      this.adjustPosition();\n      this.addClickOutsideListener();\n    } else {\n      this.removeClickOutsideListener();\n    }\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    if (this.isOpen) {\n      this.adjustPosition();\n    }\n  }\n\n  private adjustPosition() {\n    if (typeof window !== 'undefined') {\n      const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options') as HTMLElement;\n      const parentRect = this.el.parentElement?.getBoundingClientRect();\n      const searchBar = this.el.shadowRoot.querySelector('.search-bar') as HTMLElement;\n      const viewportHeight = window.innerHeight;\n\n      if (parentRect) {\n        this.width = `${parentRect.width}px`;\n        dropdownOptions.style.left = `${parentRect.x}px`;\n        if (window.innerWidth <= 480) {\n          searchBar.style.maxHeight = `30px`;\n          dropdownOptions.style.top = `425px`;\n          dropdownOptions.style.maxHeight = '110px';\n          return;\n        }\n        dropdownOptions.style.top = `${parentRect.y + parentRect.height}px`;\n\n        const availableHeight = viewportHeight - parentRect.bottom;\n        dropdownOptions.style.maxHeight = `${availableHeight - 8}px`;\n      }\n    }\n  }\n\n  private addClickOutsideListener() {\n    typeof window !== 'undefined' && window.addEventListener('click', this.handleClickOutside);\n  }\n\n  private removeClickOutsideListener() {\n    typeof window !== 'undefined' && window.removeEventListener('click', this.handleClickOutside);\n  }\n\n  private handleClickOutside = (event: MouseEvent) => {\n    if (this.isOpen && !this.el.contains(event.target as Node)) {\n      this.isOpen = false;\n    }\n  };\n\n  componentWillLoad() {\n    if (this.items.length > 0) {\n      this.filteredItems = [...this.items];\n      if (this.selectedItem !== null) {\n        this.selectItem(this.selectedItem, false);\n      } else {\n        this.selectedItem = this.items[0];\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    this.removeClickOutsideListener();\n  }\n\n  render() {\n    return (\n      <Host>\n        <button class=\"dropdown-button\" onClick={this.toggleDropdown}>\n          {`${this.selectedItem?.selectedLabel || this.selectedItem?.label} ${this.selectedItem?.value}`}\n          <div class={`chevron ${this.isOpen ? '' : 'closed'}`} innerHTML={Icons['chevronUp']} />\n        </button>\n        <ul class={{ 'dropdown-options': true, 'open': this.isOpen }} style={{ width: this.width }}>\n          {this.hasCpslSearch && (\n            <li class=\"search-bar\">\n              <input type=\"text\" placeholder=\"Search...\" value={this.searchQuery} onInput={this.handleSearchQueryChange} />\n            </li>\n          )}\n          {this.filteredItems.map(item => (\n            <li onClick={this.handleItemSelect(item)}>\n              <span innerHTML={Icons[item.icon]}></span>\n              {item.label} <span class=\"dropdown-value\">{item.value}</span>\n            </li>\n          ))}\n        </ul>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -101,7 +101,7 @@ export class CpslPopover {
         this.setPosition = () => {
             var _a;
             const anchorEl = (_a = this.anchorEl) !== null && _a !== void 0 ? _a : this.triggerEl;
-            if (anchorEl) {
+            if (anchorEl && typeof window !== 'undefined') {
                 const windowWidth = window.innerWidth;
                 const windowHeight = window.innerHeight;
                 const elWidth = this.el.clientWidth;
@@ -214,19 +214,21 @@ export class CpslPopover {
         this.setPosition();
     }
     onOpenChange() {
-        if (this.open) {
-            window.addEventListener('mousedown', this.validateEventStart);
-            window.addEventListener('touchstart', this.validateEventStart);
-            window.addEventListener('click', this.handleClickOutside);
-            window.addEventListener('scroll', () => this.setPosition(), true);
-            window.addEventListener('resize', () => this.setPosition(), true);
-        }
-        else {
-            window.removeEventListener('mousedown', this.validateEventStart);
-            window.removeEventListener('touchstart', this.validateEventStart);
-            window.removeEventListener('click', this.handleClickOutside);
-            window.removeEventListener('scroll', () => this.setPosition(), true);
-            window.removeEventListener('resize', () => this.setPosition(), true);
+        if (typeof window !== 'undefined') {
+            if (this.open) {
+                window.addEventListener('mousedown', this.validateEventStart);
+                window.addEventListener('touchstart', this.validateEventStart);
+                window.addEventListener('click', this.handleClickOutside);
+                window.addEventListener('scroll', () => this.setPosition(), true);
+                window.addEventListener('resize', () => this.setPosition(), true);
+            }
+            else {
+                window.removeEventListener('mousedown', this.validateEventStart);
+                window.removeEventListener('touchstart', this.validateEventStart);
+                window.removeEventListener('click', this.handleClickOutside);
+                window.removeEventListener('scroll', () => this.setPosition(), true);
+                window.removeEventListener('resize', () => this.setPosition(), true);
+            }
         }
     }
     componentDidLoad() {
@@ -238,7 +240,7 @@ export class CpslPopover {
     }
     render() {
         var _a;
-        return (h(Host, { key: '970851fd64ee282b5ce8fb8ca470c8ceca0c89df', class: {
+        return (h(Host, { key: 'ef05d515c8622a70f143f460538a422c010de2e5', class: {
                 'open': this.open,
                 'transform-h-left': this.transformOriginHorizontal === 'left',
                 'transform-h-center': this.transformOriginHorizontal === 'center',
@@ -250,9 +252,9 @@ export class CpslPopover {
                 top: `${this.positionY}px`,
                 left: `${this.positionX}px`,
                 width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px`,
-            } }, h("div", { key: '6928c32a091d7b7ae62ce30f3e03e92865e5a85b', id: "container", class: { container: true, open: this.open }, style: {
+            } }, h("div", { key: 'd9134dc8de72f5802ce8ebf8b31f0a9a1cb09775', id: "container", class: { container: true, open: this.open }, style: {
                 visibility: this.hasSetInitialPosition ? 'visible' : 'hidden',
-            } }, h("slot", { key: 'd5447218268672358c20356ec99ff284b62e5c4e' }))));
+            } }, h("slot", { key: '6461c7a0c09cd8a0b03e5c42ba9fae303e571146' }))));
     }
     static get is() { return "cpsl-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"cpsl-popover.js","sourceRoot":"","sources":["../../../../src/components/cpsl-popover/cpsl-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, State, Watch, Element, h, Method, Event, EventEmitter } from '@stencil/core';\nimport { InteractionCallback } from '../../interface.js';\n\n@Component({\n  tag: 'cpsl-popover',\n  styleUrl: 'cpsl-popover.scss',\n  shadow: true,\n})\nexport class CpslPopover {\n  private triggerEl?: HTMLElement | null;\n  private destroyTriggerInteraction?: () => void;\n\n  @Element() el!: HTMLCpslPopoverElement;\n\n  @State() open = false;\n  @State() hasSetInitialPosition = false;\n  @State() positionX?: number;\n  @State() positionY?: number;\n\n  private startedInside = false;\n  private startedWhenMounted = false;\n\n  /**\n   * ID for the element that the popover anchors to.\n   */\n  @Prop() anchorEl?: HTMLElement;\n\n  /**\n   * Vertical anchor origin.\n   * Options are: `\"left\"`, `\"center\"`, `\"right\"`.\n   * Default is: `\"left\"`.\n   */\n  @Prop() anchorOriginHorizontal?: 'left' | 'center' | 'right' = 'left';\n\n  /**\n   * Vertical anchor origin.\n   * Options are: `\"top\"`, `\"center\"`, `\"bottom\"`.\n   * Default is: `\"bottom\"`.\n   */\n  @Prop() anchorOriginVertical?: 'top' | 'center' | 'bottom' = 'bottom';\n\n  /**\n   * If `true` the container will use the width of the content, else it will be set to the width of the trigger.\n   * Default is `true`\n   */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() autoWidth?: boolean = true;\n\n  /**\n   * Whether or not to disable to popover.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Used internally to prevent select from blurring unintentionally.\n   */\n  @Prop() preventBlur: boolean;\n\n  /**\n   * Vertical transformation origin.\n   * Options are: `\"left\"`, `\"center\"`, `\"right\"`.\n   * Default is: `\"left\"`.\n   */\n  @Prop() transformOriginHorizontal?: 'left' | 'center' | 'right' = 'left';\n\n  /**\n   * Vertical transformation origin.\n   * Options are: `\"top\"`, `\"center\"`, `\"bottom\"`.\n   * Default is: `\"bottom\"`.\n   */\n  @Prop() transformOriginVertical?: 'top' | 'center' | 'bottom' = 'top';\n\n  /**\n   * Which trigger causes the popover to open.\n   * Options are: `\"click\"`, `\"hover\"`.\n   * Default is: `\"click\"`.\n   */\n  @Prop() triggerAction: 'click' | 'hover' = 'click';\n\n  /**\n   * ID for the element that triggers the popover to open.\n   */\n  @Prop() trigger: string;\n\n  /**\n   * Padding from edge of window for the popover container.\n   */\n  @Prop() windowPadding?: number = 16;\n\n  /**\n   * Emitted when the popover opens.\n   */\n  @Event() cpslOpen!: EventEmitter<void>;\n\n  /**\n   * Emitted when the popover closes.\n   */\n  @Event() cpslClose!: EventEmitter<void>;\n\n  /**\n   * Call to close the popover manually.\n   */\n  @Method()\n  async closePopover() {\n    this.close();\n  }\n\n  @Watch('trigger')\n  @Watch('triggerAction')\n  @Watch('preventBlur')\n  onTriggerChange() {\n    this.configureTriggerInteraction();\n  }\n\n  @Watch('anchorOriginHorizontal')\n  @Watch('anchorOriginVertical')\n  onAnchorChange() {\n    this.setPosition();\n  }\n\n  @Watch('open')\n  onOpenChange() {\n    if (this.open) {\n      window.addEventListener('mousedown', this.validateEventStart);\n      window.addEventListener('touchstart', this.validateEventStart);\n      window.addEventListener('click', this.handleClickOutside);\n      window.addEventListener('scroll', () => this.setPosition(), true);\n      window.addEventListener('resize', () => this.setPosition(), true);\n    } else {\n      window.removeEventListener('mousedown', this.validateEventStart);\n      window.removeEventListener('touchstart', this.validateEventStart);\n      window.removeEventListener('click', this.handleClickOutside);\n      window.removeEventListener('scroll', () => this.setPosition(), true);\n      window.removeEventListener('resize', () => this.setPosition(), true);\n    }\n  }\n\n  componentDidLoad() {\n    this.configureTriggerInteraction();\n  }\n\n  private configureTriggerInteraction = () => {\n    const { trigger, triggerAction, destroyTriggerInteraction } = this;\n\n    if (destroyTriggerInteraction) {\n      destroyTriggerInteraction();\n    }\n\n    if (trigger === undefined) {\n      return;\n    }\n\n    this.triggerEl = document.getElementById(trigger);\n    if (!this.triggerEl) {\n      console.error(`A trigger element with the ID \"${trigger}\" was not found in the DOM.`, this.el);\n      return;\n    }\n\n    let triggerCallbacks: InteractionCallback[] = [];\n    /**\n     * Based upon the kind of trigger interaction\n     * the user wants, we setup the correct event\n     * listeners.\n     */\n    switch (triggerAction) {\n      case 'hover':\n        triggerCallbacks = [\n          {\n            eventName: 'mouseenter',\n            callback: async () => {\n              this.present();\n            },\n          },\n          {\n            eventName: 'mouseleave',\n            callback: () => {\n              if (!this.containerEl.matches(':hover')) {\n                this.close();\n              } else {\n                this.containerEl.addEventListener('mouseleave', () => {\n                  this.close();\n                });\n              }\n            },\n          },\n          {\n            eventName: 'click',\n            callback: (ev: Event) => ev.stopPropagation(),\n          },\n        ];\n\n        break;\n      case 'click':\n      default:\n        triggerCallbacks = [\n          {\n            eventName: 'mousedown',\n            callback: e => {\n              if (this.preventBlur) {\n                e.preventDefault();\n              }\n              this.present();\n            },\n          },\n          {\n            eventName: 'touchstart',\n            callback: e => {\n              if (this.preventBlur) {\n                e.preventDefault();\n              }\n              this.present();\n            },\n          },\n        ];\n        break;\n    }\n\n    triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.addEventListener(eventName, callback));\n\n    this.destroyTriggerInteraction = () => {\n      triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.removeEventListener(eventName, callback));\n    };\n  };\n\n  private setPosition = () => {\n    const anchorEl = this.anchorEl ?? this.triggerEl;\n    if (anchorEl) {\n      const windowWidth = window.innerWidth;\n      const windowHeight = window.innerHeight;\n      const elWidth = this.el.clientWidth;\n      const elHeight = this.el.clientHeight;\n      const { top, left, height, width } = anchorEl.getBoundingClientRect();\n\n      switch (this.anchorOriginHorizontal) {\n        case 'left': {\n          this.positionX = left;\n          break;\n        }\n        case 'center': {\n          this.positionX = left + width / 2;\n          break;\n        }\n        case 'right': {\n          this.positionX = left + width;\n          break;\n        }\n      }\n\n      switch (this.anchorOriginVertical) {\n        case 'top': {\n          this.positionY = top;\n          break;\n        }\n        case 'center': {\n          this.positionY = top + height / 2;\n          break;\n        }\n        case 'bottom': {\n          this.positionY = top + height;\n          break;\n        }\n      }\n\n      if (this.positionY < this.windowPadding) {\n        this.positionY = this.windowPadding;\n      }\n      if (this.positionY + elHeight > windowHeight - 16) {\n        this.positionY = windowHeight - this.windowPadding - elHeight;\n      }\n\n      if (this.positionX < this.windowPadding) {\n        this.positionX = this.windowPadding;\n      }\n      if (this.positionX + elWidth > windowWidth - 16) {\n        this.positionX = windowWidth - this.windowPadding - elWidth;\n      }\n    }\n  };\n\n  private validateEventStart = event => {\n    this.startedWhenMounted = !!this.triggerEl;\n    this.startedInside = this.triggerEl.contains(event.target);\n    this.present();\n  };\n\n  private handleClickOutside = (event: MouseEvent) => {\n    // Do nothing if `mousedown` or `touchstart` started inside ref element\n    if (this.startedInside || !this.startedWhenMounted) return;\n\n    // Do nothing if clicking ref's element or descendent elements\n    if (!this.triggerEl || this.triggerEl.contains(event.target as Node)) return;\n\n    if (this.open) {\n      event.preventDefault();\n      this.close();\n    }\n  };\n\n  private present = () => {\n    if (!this.open && !this.disabled) {\n      this.open = true;\n      this.cpslOpen.emit();\n\n      // Using a small timeout here to ensure the popover is open before attempting to do position calculations\n      setTimeout(() => {\n        this.setPosition();\n        this.hasSetInitialPosition = true;\n      }, 20);\n    }\n  };\n\n  private close = () => {\n    this.open = false;\n    this.startedInside = false;\n    this.cpslClose.emit();\n    this.hasSetInitialPosition = false;\n  };\n\n  get containerEl() {\n    return this.el?.shadowRoot?.getElementById('container');\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'open': this.open,\n          'transform-h-left': this.transformOriginHorizontal === 'left',\n          'transform-h-center': this.transformOriginHorizontal === 'center',\n          'transform-h-right': this.transformOriginHorizontal === 'right',\n          'transform-v-top': this.transformOriginVertical === 'top',\n          'transform-v-center': this.transformOriginVertical === 'center',\n          'transform-v-bottom': this.transformOriginVertical === 'bottom',\n        }}\n        style={{\n          top: `${this.positionY}px`,\n          left: `${this.positionX}px`,\n          width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${this.triggerEl?.clientWidth}px`,\n        }}\n      >\n        <div\n          id=\"container\"\n          class={{ container: true, open: this.open }}\n          style={{\n            visibility: this.hasSetInitialPosition ? 'visible' : 'hidden',\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-popover.js","sourceRoot":"","sources":["../../../../src/components/cpsl-popover/cpsl-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, State, Watch, Element, h, Method, Event, EventEmitter } from '@stencil/core';\nimport { InteractionCallback } from '../../interface.js';\n\n@Component({\n  tag: 'cpsl-popover',\n  styleUrl: 'cpsl-popover.scss',\n  shadow: true,\n})\nexport class CpslPopover {\n  private triggerEl?: HTMLElement | null;\n  private destroyTriggerInteraction?: () => void;\n\n  @Element() el!: HTMLCpslPopoverElement;\n\n  @State() open = false;\n  @State() hasSetInitialPosition = false;\n  @State() positionX?: number;\n  @State() positionY?: number;\n\n  private startedInside = false;\n  private startedWhenMounted = false;\n\n  /**\n   * ID for the element that the popover anchors to.\n   */\n  @Prop() anchorEl?: HTMLElement;\n\n  /**\n   * Vertical anchor origin.\n   * Options are: `\"left\"`, `\"center\"`, `\"right\"`.\n   * Default is: `\"left\"`.\n   */\n  @Prop() anchorOriginHorizontal?: 'left' | 'center' | 'right' = 'left';\n\n  /**\n   * Vertical anchor origin.\n   * Options are: `\"top\"`, `\"center\"`, `\"bottom\"`.\n   * Default is: `\"bottom\"`.\n   */\n  @Prop() anchorOriginVertical?: 'top' | 'center' | 'bottom' = 'bottom';\n\n  /**\n   * If `true` the container will use the width of the content, else it will be set to the width of the trigger.\n   * Default is `true`\n   */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() autoWidth?: boolean = true;\n\n  /**\n   * Whether or not to disable to popover.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Used internally to prevent select from blurring unintentionally.\n   */\n  @Prop() preventBlur: boolean;\n\n  /**\n   * Vertical transformation origin.\n   * Options are: `\"left\"`, `\"center\"`, `\"right\"`.\n   * Default is: `\"left\"`.\n   */\n  @Prop() transformOriginHorizontal?: 'left' | 'center' | 'right' = 'left';\n\n  /**\n   * Vertical transformation origin.\n   * Options are: `\"top\"`, `\"center\"`, `\"bottom\"`.\n   * Default is: `\"bottom\"`.\n   */\n  @Prop() transformOriginVertical?: 'top' | 'center' | 'bottom' = 'top';\n\n  /**\n   * Which trigger causes the popover to open.\n   * Options are: `\"click\"`, `\"hover\"`.\n   * Default is: `\"click\"`.\n   */\n  @Prop() triggerAction: 'click' | 'hover' = 'click';\n\n  /**\n   * ID for the element that triggers the popover to open.\n   */\n  @Prop() trigger: string;\n\n  /**\n   * Padding from edge of window for the popover container.\n   */\n  @Prop() windowPadding?: number = 16;\n\n  /**\n   * Emitted when the popover opens.\n   */\n  @Event() cpslOpen!: EventEmitter<void>;\n\n  /**\n   * Emitted when the popover closes.\n   */\n  @Event() cpslClose!: EventEmitter<void>;\n\n  /**\n   * Call to close the popover manually.\n   */\n  @Method()\n  async closePopover() {\n    this.close();\n  }\n\n  @Watch('trigger')\n  @Watch('triggerAction')\n  @Watch('preventBlur')\n  onTriggerChange() {\n    this.configureTriggerInteraction();\n  }\n\n  @Watch('anchorOriginHorizontal')\n  @Watch('anchorOriginVertical')\n  onAnchorChange() {\n    this.setPosition();\n  }\n\n  @Watch('open')\n  onOpenChange() {\n    if (typeof window !== 'undefined') {\n      if (this.open) {\n        window.addEventListener('mousedown', this.validateEventStart);\n        window.addEventListener('touchstart', this.validateEventStart);\n        window.addEventListener('click', this.handleClickOutside);\n        window.addEventListener('scroll', () => this.setPosition(), true);\n        window.addEventListener('resize', () => this.setPosition(), true);\n      } else {\n        window.removeEventListener('mousedown', this.validateEventStart);\n        window.removeEventListener('touchstart', this.validateEventStart);\n        window.removeEventListener('click', this.handleClickOutside);\n        window.removeEventListener('scroll', () => this.setPosition(), true);\n        window.removeEventListener('resize', () => this.setPosition(), true);\n      }\n    }\n  }\n\n  componentDidLoad() {\n    this.configureTriggerInteraction();\n  }\n\n  private configureTriggerInteraction = () => {\n    const { trigger, triggerAction, destroyTriggerInteraction } = this;\n\n    if (destroyTriggerInteraction) {\n      destroyTriggerInteraction();\n    }\n\n    if (trigger === undefined) {\n      return;\n    }\n\n    this.triggerEl = document.getElementById(trigger);\n    if (!this.triggerEl) {\n      console.error(`A trigger element with the ID \"${trigger}\" was not found in the DOM.`, this.el);\n      return;\n    }\n\n    let triggerCallbacks: InteractionCallback[] = [];\n    /**\n     * Based upon the kind of trigger interaction\n     * the user wants, we setup the correct event\n     * listeners.\n     */\n    switch (triggerAction) {\n      case 'hover':\n        triggerCallbacks = [\n          {\n            eventName: 'mouseenter',\n            callback: async () => {\n              this.present();\n            },\n          },\n          {\n            eventName: 'mouseleave',\n            callback: () => {\n              if (!this.containerEl.matches(':hover')) {\n                this.close();\n              } else {\n                this.containerEl.addEventListener('mouseleave', () => {\n                  this.close();\n                });\n              }\n            },\n          },\n          {\n            eventName: 'click',\n            callback: (ev: Event) => ev.stopPropagation(),\n          },\n        ];\n\n        break;\n      case 'click':\n      default:\n        triggerCallbacks = [\n          {\n            eventName: 'mousedown',\n            callback: e => {\n              if (this.preventBlur) {\n                e.preventDefault();\n              }\n              this.present();\n            },\n          },\n          {\n            eventName: 'touchstart',\n            callback: e => {\n              if (this.preventBlur) {\n                e.preventDefault();\n              }\n              this.present();\n            },\n          },\n        ];\n        break;\n    }\n\n    triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.addEventListener(eventName, callback));\n\n    this.destroyTriggerInteraction = () => {\n      triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.removeEventListener(eventName, callback));\n    };\n  };\n\n  private setPosition = () => {\n    const anchorEl = this.anchorEl ?? this.triggerEl;\n    if (anchorEl && typeof window !== 'undefined') {\n      const windowWidth = window.innerWidth;\n      const windowHeight = window.innerHeight;\n      const elWidth = this.el.clientWidth;\n      const elHeight = this.el.clientHeight;\n      const { top, left, height, width } = anchorEl.getBoundingClientRect();\n\n      switch (this.anchorOriginHorizontal) {\n        case 'left': {\n          this.positionX = left;\n          break;\n        }\n        case 'center': {\n          this.positionX = left + width / 2;\n          break;\n        }\n        case 'right': {\n          this.positionX = left + width;\n          break;\n        }\n      }\n\n      switch (this.anchorOriginVertical) {\n        case 'top': {\n          this.positionY = top;\n          break;\n        }\n        case 'center': {\n          this.positionY = top + height / 2;\n          break;\n        }\n        case 'bottom': {\n          this.positionY = top + height;\n          break;\n        }\n      }\n\n      if (this.positionY < this.windowPadding) {\n        this.positionY = this.windowPadding;\n      }\n      if (this.positionY + elHeight > windowHeight - 16) {\n        this.positionY = windowHeight - this.windowPadding - elHeight;\n      }\n\n      if (this.positionX < this.windowPadding) {\n        this.positionX = this.windowPadding;\n      }\n      if (this.positionX + elWidth > windowWidth - 16) {\n        this.positionX = windowWidth - this.windowPadding - elWidth;\n      }\n    }\n  };\n\n  private validateEventStart = event => {\n    this.startedWhenMounted = !!this.triggerEl;\n    this.startedInside = this.triggerEl.contains(event.target);\n    this.present();\n  };\n\n  private handleClickOutside = (event: MouseEvent) => {\n    // Do nothing if `mousedown` or `touchstart` started inside ref element\n    if (this.startedInside || !this.startedWhenMounted) return;\n\n    // Do nothing if clicking ref's element or descendent elements\n    if (!this.triggerEl || this.triggerEl.contains(event.target as Node)) return;\n\n    if (this.open) {\n      event.preventDefault();\n      this.close();\n    }\n  };\n\n  private present = () => {\n    if (!this.open && !this.disabled) {\n      this.open = true;\n      this.cpslOpen.emit();\n\n      // Using a small timeout here to ensure the popover is open before attempting to do position calculations\n      setTimeout(() => {\n        this.setPosition();\n        this.hasSetInitialPosition = true;\n      }, 20);\n    }\n  };\n\n  private close = () => {\n    this.open = false;\n    this.startedInside = false;\n    this.cpslClose.emit();\n    this.hasSetInitialPosition = false;\n  };\n\n  get containerEl() {\n    return this.el?.shadowRoot?.getElementById('container');\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'open': this.open,\n          'transform-h-left': this.transformOriginHorizontal === 'left',\n          'transform-h-center': this.transformOriginHorizontal === 'center',\n          'transform-h-right': this.transformOriginHorizontal === 'right',\n          'transform-v-top': this.transformOriginVertical === 'top',\n          'transform-v-center': this.transformOriginVertical === 'center',\n          'transform-v-bottom': this.transformOriginVertical === 'bottom',\n        }}\n        style={{\n          top: `${this.positionY}px`,\n          left: `${this.positionX}px`,\n          width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${this.triggerEl?.clientWidth}px`,\n        }}\n      >\n        <div\n          id=\"container\"\n          class={{ container: true, open: this.open }}\n          style={{\n            visibility: this.hasSetInitialPosition ? 'visible' : 'hidden',\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -44,13 +44,13 @@ export class CpslSelect {
         this.handleClickOutside = (event) => {
             if (this.hasFocus && !this.el.contains(event.target)) {
                 this.hasFocus = false;
-                window.removeEventListener('click', this.handleClickOutside);
+                typeof window !== 'undefined' && window.removeEventListener('click', this.handleClickOutside);
             }
         };
         this.handleClick = () => {
             if (!this.disabled) {
                 this.hasFocus = true;
-                window.addEventListener('click', this.handleClickOutside);
+                typeof window !== 'undefined' && window.addEventListener('click', this.handleClickOutside);
             }
         };
         this.anchorEl = undefined;
@@ -105,10 +105,10 @@ export class CpslSelect {
     render() {
         var _a, _b, _c, _d, _e;
         const selectedValueAsString = typeof this.selectedValue === 'string' ? this.selectedValue : this.selectedValue.join(', ');
-        return (h(Host, { key: '213225e1dff5c0be9244ba840db9f36340d823c8', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': this.hasSelectedItem } }, this.label && (h("label", { key: 'a11314ca36057ef2720d70365bf204211d416475', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: 'e2e9c237b8dccbaa4b46ddf9e55b77ff5f4f3911', part: "select-container", id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { key: 'aebc950ae782617c597767452d0eb1c0d2c31713', name: "selected-item" }), h("div", { key: '7cf714452e4c9c8b1d6163c8f85f27e83605f8d8', class: { 'selected-container-content': true, 'hidden': this.hasSelectedItem && this.showFormattedSelectedItem }, id: "selected-container-content", style: {} }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { key: '569de440845fe9b695c6d7d01509beca6cc2d9cf', 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)))), h("cpsl-icon", { key: 'e010b0ff105722fb2818ee6b9461807428878074', part: "icon", class: { 'chevron': true, 'open': !this.noIconAnimation && this.popoverOpen, 'has-value': this.hasSelectedItem }, icon: this.icon }), h("input", { key: 'c4046ff61d100e1340a0428272ff121fca2116e9', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" }), h("cpsl-popover", { key: '2bf1f90e80af6ad9027a82b06327c5dabd36ce03', part: "popover", autoWidth: this.autoWidth, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: '21458247dfcbc193ddca669fd2efd5d84b389cea', part: "dropdown", class: "dropdown" }, this.showSearch && (h("div", { key: '614a8a6a0ea3432168c4846173d850dfc62be91f', class: "search-container" }, h("cpsl-input", { key: 'e472ac25a98f50b6841dd14f2c65707741047821', onClick: e => e.stopPropagation(), placeholder: (_d = this.searchPlaceholder) !== null && _d !== void 0 ? _d : 'Search', value: "", onCpslInput: e => {
+        return (h(Host, { key: '0b366a3c097d845993afaa7d27c894c5c0f03e44', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': this.hasSelectedItem } }, this.label && (h("label", { key: 'cfa4ae1a802f98d1beeea74bce33dd1844f821bf', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), 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 && h("slot", { key: 'c4cb233ece4d06a3cc7ef4b7aa5d9ccb6fada6c2', name: "selected-item" }), h("div", { key: '78e52b91db67e50205601902074610c4841d73db', class: { 'selected-container-content': true, 'hidden': this.hasSelectedItem && this.showFormattedSelectedItem }, id: "selected-container-content", style: {} }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (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)))), h("cpsl-icon", { key: '96355103fb2e94e3c2bce8be308c643de03cb94c', part: "icon", class: { 'chevron': true, 'open': !this.noIconAnimation && this.popoverOpen, 'has-value': this.hasSelectedItem }, icon: this.icon }), 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" }), h("cpsl-popover", { key: '4bd5c2e243c05671786dded417234bdb3ae4e5ef', part: "popover", autoWidth: this.autoWidth, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: '0d1bb3a829f31e211cc99e28e3650d21a353ec75', part: "dropdown", class: "dropdown" }, this.showSearch && (h("div", { key: 'af48dfde2c8fd8717b9602ad6870a7b8da86c6db', class: "search-container" }, h("cpsl-input", { key: '3a3d0197b1fe0f6a91568fb2c0530a34d8f68c8d', onClick: e => e.stopPropagation(), placeholder: (_d = this.searchPlaceholder) !== null && _d !== void 0 ? _d : 'Search', value: "", onCpslInput: e => {
                 e.stopPropagation();
                 this.cpslSearchChange.emit(e.detail.value);
-            } }))), h("div", { key: '2c3c69610934da52ea28dffb3ff1846fd4dab71c', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: '74b0bae8d2de4a33cd5178a1f8c4e5a330b52884', name: "items" }))))), (this.errorText || this.helperText) && (h("div", { key: 'ba63db8cb977e363862ec31cd4d7798848a0dc4f', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '8dd1ecca150152548f5240152ee5d7f76d5bce8b' }, (_e = this.errorText) !== null && _e !== void 0 ? _e : this.helperText)))));
+            } }))), h("div", { key: 'fb7d1dc0be277669ad804766f7ebb03218268a17', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: 'f63682b1d61aeab270cd2bf8683bf9b2f100274d', name: "items" }))))), (this.errorText || this.helperText) && (h("div", { key: '66ff41128e6faa920cd1a3e7cea36995921b89b6', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '77f56f4d6c7bff3836cdb54392b7938a0aa2ef9a' }, (_e = this.errorText) !== null && _e !== void 0 ? _e : this.helperText)))));
     }
     static get is() { return "cpsl-select"; }
     static get encapsulation() { return "shadow"; }