@usecapsule/core-components 3.2.0-dev.1 → 3.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"cpsl-modal.js","sourceRoot":"","sources":["../../../../src/components/cpsl-modal/cpsl-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 Draggable from 'gsap/Draggable';\nimport { MOBILE_SIZE } from '../../constants';\n\ngsap.registerPlugin(Draggable);\nconst mm = gsap.matchMedia();\n@Component({\n  tag: 'cpsl-modal',\n  styleUrl: 'cpsl-modal.scss',\n  shadow: true,\n})\nexport class CpslModal {\n  private draggable: Draggable;\n  private expandFooterTl: gsap.core.Timeline;\n  private hasAnimatedIn: boolean;\n\n  @Element() el!: HTMLCpslModalElement;\n\n  @State() hasFooter: 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 `footerExpandedFooter` and `footerExpandedHeader` slots.\n   */\n  @Prop() footerExpanded?: boolean;\n\n  /**\n   * Duration in seconds of the footer expansion animation.\n   * Default is 0.15.\n   */\n  @Prop() footerTransitionDuration?: 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('footerExpanded')\n  toggleHeight() {\n    this.footerExpanded ? this.expandFooterTl.play() : this.expandFooterTl.reverse();\n  }\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      this.draggable?.disable();\n      gsap.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });\n    });\n    mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {\n      this.initDraggable();\n      gsap.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });\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.addExpandAnim();\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.addExpandAnim();\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 addExpandAnim() {\n    setTimeout(() => {\n      this.expandFooterTl = gsap\n        .timeline({\n          reversed: true,\n          paused: true,\n          onReverseComplete: () => {\n            this.contentEl.style.setProperty('height', 'auto');\n          },\n          defaults: {\n            duration: this.footerTransitionDuration,\n          },\n        })\n        .set(this.footerExpandedEl, { overflow: 'auto', display: 'block' })\n        .set(this.headerExpandedEl, { display: 'block' })\n        .to(this.innerContainerEl, { paddingBottom: '8px' })\n        .to(this.contentEl, { height: '0px', overflow: 'hidden', opacity: 0 }, '<')\n        .to(this.footerEl, { height: '0px', overflow: 'hidden', opacity: 0 }, '<')\n        .to(this.footerExpandedEl, { height: 'auto', opacity: 1 }, '<')\n        .to(this.headerExpandedEl, { height: 'auto', opacity: 1 }, '<');\n    }, 10);\n  }\n\n  private getDraggableHeight = () => {\n    return this.innerContainerEl.clientHeight;\n  };\n\n  private initDraggable() {\n    this.draggable = Draggable.create(this.modalContainerEl, {\n      trigger: this.headerEl,\n      dragClickables: false,\n      type: 'y',\n      edgeResistance: 0.2,\n      liveSnap: {\n        y: function (y) {\n          if (y < 0) return 0; // Restricts dragging to down\n          return y;\n        },\n      },\n      onDrag: () => {\n        const y = gsap.utils.mapRange(0, this.getDraggableHeight(), 1, 0, this.draggable.y);\n        gsap.set(this.overlayEl, { opacity: y });\n      },\n      onDragEnd: () => {\n        if (this.draggable.y > 60) {\n          this.cpslModalRequestClose.emit();\n        } else {\n          gsap.set(this.overlayEl, { opacity: 1 });\n          gsap.set(this.modalWrapperEl, { yPercent: -100 });\n          gsap.set(this.modalContainerEl, { y: 0 });\n        }\n      },\n    })[0];\n  }\n\n  private get footerEl() {\n    return this.el.shadowRoot.getElementById('modal-footer');\n  }\n\n  private get footerExpandedEl() {\n    return this.el.shadowRoot.getElementById('modal-footer-expanded');\n  }\n\n  private get headerExpandedEl() {\n    return this.el.shadowRoot.getElementById('modal-header-expanded');\n  }\n\n  private get innerContainerEl() {\n    return this.el.shadowRoot.getElementById('modal-inner-container');\n  }\n\n  private get contentEl() {\n    return this.el.shadowRoot.getElementById('modal-content');\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 overlayEl() {\n    return this.el.shadowRoot.getElementById('overlay');\n  }\n\n  private get footerSlotEl() {\n    return this.footerEl.querySelectorAll('slot')[0];\n  }\n\n  private get headerEl() {\n    return this.el.shadowRoot.getElementById('modal-header');\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        <slot></slot>\n        <div id=\"modal-inner-container\" class={{ 'modal-inner-container': true, 'no-footer': !this.hasFooter }} part=\"modal-inner-container\">\n          <div id=\"modal-content\" part=\"modal-content\">\n            <div id=\"modal-header\" class=\"modal-header\" part=\"modal-header\">\n              <slot name=\"header\"></slot>\n            </div>\n            <div id=\"modal-body\" class=\"modal-body\" part=\"modal-body\">\n              <slot name=\"body\"></slot>\n            </div>\n          </div>\n          <div id=\"modal-header-expanded\" class={{ 'modal-header': true, 'expanded': true, 'no-opacity': true }} part=\"modal-header-expanded\">\n            <slot name=\"footerExpandedHeader\"></slot>\n          </div>\n        </div>\n        <div id=\"modal-footer\" part=\"modal-footer\">\n          <slot name=\"footer\"></slot>\n        </div>\n        <div id=\"modal-footer-expanded\" class={{ 'expanded': true, 'no-opacity': true }} part=\"modal-footer-expanded\">\n          <slot name=\"footerExpandedFooter\"></slot>\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    if (this.noOverlay) {\n      return (\n        <Host style={Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {}} class=\"no-overlay\">\n          {this.Modal}\n        </Host>\n      );\n    }\n\n    return (\n      <Host style={Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {}} class={{ 'include-mobile-styling': true }}>\n        <cpsl-overlay\n          zIndexOverride={Boolean(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-modal.js","sourceRoot":"","sources":["../../../../src/components/cpsl-modal/cpsl-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 Draggable from 'gsap/Draggable';\nimport { MOBILE_SIZE } from '../../constants';\n\ngsap.registerPlugin(Draggable);\nconst mm = gsap.matchMedia();\n@Component({\n  tag: 'cpsl-modal',\n  styleUrl: 'cpsl-modal.scss',\n  shadow: true,\n})\nexport class CpslModal {\n  private draggable: Draggable;\n  private expandFooterTl: gsap.core.Timeline;\n  private hasAnimatedIn: boolean;\n\n  @Element() el!: HTMLCpslModalElement;\n\n  @State() hasFooter: 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 `footerExpandedFooter` and `footerExpandedHeader` slots.\n   */\n  @Prop() footerExpanded?: boolean;\n\n  /**\n   * Duration in seconds of the footer expansion animation.\n   * Default is 0.15.\n   */\n  @Prop() footerTransitionDuration?: 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('footerExpanded')\n  toggleHeight() {\n    this.footerExpanded ? this.expandFooterTl.play() : this.expandFooterTl.reverse();\n  }\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      this.draggable?.disable();\n      gsap.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });\n    });\n    mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {\n      this.initDraggable();\n      gsap.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });\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.addExpandAnim();\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.addExpandAnim();\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 addExpandAnim() {\n    setTimeout(() => {\n      this.expandFooterTl = gsap\n        .timeline({\n          reversed: true,\n          paused: true,\n          onReverseComplete: () => {\n            this.contentEl.style.setProperty('height', 'auto');\n          },\n          defaults: {\n            duration: this.footerTransitionDuration,\n          },\n        })\n        .set(this.footerExpandedEl, { overflow: 'auto', display: 'block' })\n        .set(this.headerExpandedEl, { display: 'block' })\n        .to(this.innerContainerEl, { paddingBottom: '8px' })\n        .to(this.contentEl, { height: '0px', overflow: 'hidden', opacity: 0 }, '<')\n        .to(this.footerEl, { height: '0px', overflow: 'hidden', opacity: 0 }, '<')\n        .to(this.footerExpandedEl, { height: 'auto', opacity: 1 }, '<')\n        .to(this.headerExpandedEl, { height: 'auto', opacity: 1 }, '<');\n    }, 10);\n  }\n\n  private getDraggableHeight = () => {\n    return this.innerContainerEl.clientHeight;\n  };\n\n  private initDraggable() {\n    this.draggable = Draggable.create(this.modalContainerEl, {\n      trigger: this.headerEl,\n      dragClickables: false,\n      type: 'y',\n      edgeResistance: 0.2,\n      liveSnap: {\n        y: function (y) {\n          if (y < 0) return 0; // Restricts dragging to down\n          return y;\n        },\n      },\n      onDrag: () => {\n        const y = gsap.utils.mapRange(0, this.getDraggableHeight(), 1, 0, this.draggable.y);\n        gsap.set(this.overlayEl, { opacity: y });\n      },\n      onDragEnd: () => {\n        if (this.draggable.y > 60) {\n          this.cpslModalRequestClose.emit();\n        } else {\n          gsap.set(this.overlayEl, { opacity: 1 });\n          gsap.set(this.modalWrapperEl, { yPercent: -100 });\n          gsap.set(this.modalContainerEl, { y: 0 });\n        }\n      },\n    })[0];\n  }\n\n  private get footerEl() {\n    return this.el.shadowRoot.getElementById('modal-footer');\n  }\n\n  private get footerExpandedEl() {\n    return this.el.shadowRoot.getElementById('modal-footer-expanded');\n  }\n\n  private get headerExpandedEl() {\n    return this.el.shadowRoot.getElementById('modal-header-expanded');\n  }\n\n  private get innerContainerEl() {\n    return this.el.shadowRoot.getElementById('modal-inner-container');\n  }\n\n  private get contentEl() {\n    return this.el.shadowRoot.getElementById('modal-content');\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 overlayEl() {\n    return this.el.shadowRoot.getElementById('overlay');\n  }\n\n  private get footerSlotEl() {\n    return this.footerEl.querySelectorAll('slot')[0];\n  }\n\n  private get headerEl() {\n    return this.el.shadowRoot.getElementById('modal-header');\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        <slot></slot>\n        <div\n          id=\"modal-inner-container\"\n          class={{ 'modal-inner-container': true, 'no-footer': !this.hasFooter }}\n          part=\"modal-inner-container\"\n        >\n          <div id=\"modal-content\" part=\"modal-content\">\n            <div id=\"modal-header\" class=\"modal-header\" part=\"modal-header\">\n              <slot name=\"header\"></slot>\n            </div>\n            <div id=\"modal-body\" class=\"modal-body\" part=\"modal-body\">\n              <slot name=\"body\"></slot>\n            </div>\n          </div>\n          <div\n            id=\"modal-header-expanded\"\n            class={{ 'modal-header': true, 'expanded': true, 'no-opacity': true }}\n            part=\"modal-header-expanded\"\n          >\n            <slot name=\"footerExpandedHeader\"></slot>\n          </div>\n        </div>\n        <div id=\"modal-footer\" part=\"modal-footer\">\n          <slot name=\"footer\"></slot>\n        </div>\n        <div id=\"modal-footer-expanded\" class={{ 'expanded': true, 'no-opacity': true }} part=\"modal-footer-expanded\">\n          <slot name=\"footerExpandedFooter\"></slot>\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    if (this.noOverlay) {\n      return (\n        <Host style={Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {}} class=\"no-overlay\">\n          {this.Modal}\n        </Host>\n      );\n    }\n\n    return (\n      <Host\n        style={Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {}}\n        class={{ 'include-mobile-styling': true }}\n      >\n        <cpsl-overlay\n          zIndexOverride={Boolean(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-modal-v2/cpsl-modal-v2.js

@@ -11,6 +11,7 @@ export class CpslModalV2 {
     toggleHeight() {
         if (!this.open) {
             this.cpslModalExiting.emit();
+            // Animate out before setting display to none
             setTimeout(() => {
                 this.el.style.display = 'none';
                 this.cpslModalExited.emit();
@@ -28,7 +29,7 @@ export class CpslModalV2 {
         this.toggleHeight();
     }
     render() {
-        return (h(Host, { key: '8a43f4163d195bb2062c57a1edbab0740b69bdf5', class: { 'open': this.open, 'elevated': this.elevated, 'no-overlay': this.noOverlay } }, !this.noOverlay && (h("cpsl-overlay", { zIndexOverride: Boolean(this.zIndexOverride) ? this.zIndexOverride : undefined, id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration })), h("cpsl-card", { key: '488be1c056c32f634ec8b534e67a462dcde32736', class: "card", style: { transitionDuration: this.open ? `${this.exitTransitionDuration}s` : `${this.enterTransitionDuration}s` } }, h("slot", { key: 'dbf4835d6aab5454ff6b582471bbb34e3cfca1c3' }))));
+        return (h(Host, { key: '0682407f6320fe77b42e4ceed6a9b7738a1b5541', class: { 'open': this.open, 'elevated': this.elevated, 'no-overlay': this.noOverlay } }, !this.noOverlay && (h("cpsl-overlay", { key: '2b9a8280643c0b665864c6b3ea863211125d941e', zIndexOverride: Boolean(this.zIndexOverride) ? this.zIndexOverride : undefined, id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration })), h("cpsl-card", { key: 'd4aac4aeba42590762fec771bd9053982d02324b', class: "card", style: { transitionDuration: this.open ? `${this.exitTransitionDuration}s` : `${this.enterTransitionDuration}s` } }, h("slot", { key: '39043016d1b266aeedd62471e70e91c6cbcbc0f1' }))));
     }
     static get is() { return "cpsl-modal-v2"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"cpsl-modal-v2.js","sourceRoot":"","sources":["../../../../src/components/cpsl-modal-v2/cpsl-modal-v2.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAgB,MAAM,eAAe,CAAC;AAO9F,MAAM,OAAO,WAAW;;uCAOqB,IAAI;sCAML,IAAI;;;;;;IA2C9C,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;YAE7B,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;YAC9B,CAAC,EAAE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,CAAC;QACzC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;YAC9B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YAC/B,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;YAC/B,CAAC,EAAE,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,CAAC;QAC1C,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE;YACxF,CAAC,IAAI,CAAC,SAAS,IAAI,CAClB,oBACE,cAAc,EAAE,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,EAC9E,EAAE,EAAC,SAAS,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,uBAAuB,EAAE,IAAI,CAAC,uBAAuB,EACrD,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,GACnD,CACH;YACD,kEAAW,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,sBAAsB,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,uBAAuB,GAAG,EAAE;gBACvI,8DAAa,CACH,CACP,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, Watch, Element, Event, h, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-modal-v2',\n  styleUrl: 'cpsl-modal-v2.scss',\n  shadow: true,\n})\nexport class CpslModalV2 {\n  @Element() el!: HTMLCpslModalV2Element;\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 modal with a box shadow.\n   */\n  @Prop() elevated: boolean;\n\n  /**\n   * Whether or not to show the overlay.\n   */\n  @Prop() noOverlay: boolean;\n\n  /**\n   * Whether or not to show the modal.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * Override z-index.\n   */\n  @Prop() zIndexOverride?: number;\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  @Watch('open')\n  toggleHeight() {\n    if (!this.open) {\n      this.cpslModalExiting.emit();\n      // Animate out before setting display to none\n      setTimeout(() => {\n        this.el.style.display = 'none';\n        this.cpslModalExited.emit();\n      }, this.exitTransitionDuration * 1000);\n    } else {\n      this.cpslModalEntering.emit();\n      this.el.style.display = 'flex';\n      setTimeout(() => {\n        this.cpslModalEntered.emit();\n      }, this.enterTransitionDuration * 1000);\n    }\n  }\n\n  componentDidLoad() {\n    this.toggleHeight();\n  }\n\n  render() {\n    return (\n      <Host class={{ 'open': this.open, 'elevated': this.elevated, 'no-overlay': this.noOverlay }}>\n        {!this.noOverlay && (\n          <cpsl-overlay\n            zIndexOverride={Boolean(this.zIndexOverride) ? this.zIndexOverride : undefined}\n            id=\"overlay\"\n            open={this.open}\n            enterTransitionDuration={this.enterTransitionDuration}\n            exitTransitionDuration={this.exitTransitionDuration}\n          />\n        )}\n        <cpsl-card class=\"card\" style={{ transitionDuration: this.open ? `${this.exitTransitionDuration}s` : `${this.enterTransitionDuration}s` }}>\n          <slot></slot>\n        </cpsl-card>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-modal-v2.js","sourceRoot":"","sources":["../../../../src/components/cpsl-modal-v2/cpsl-modal-v2.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAgB,MAAM,eAAe,CAAC;AAO9F,MAAM,OAAO,WAAW;;uCAOqB,IAAI;sCAML,IAAI;;;;;;IA2C9C,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;YAC7B,6CAA6C;YAC7C,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;YAC9B,CAAC,EAAE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,CAAC;QACzC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;YAC9B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YAC/B,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;YAC/B,CAAC,EAAE,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,CAAC;QAC1C,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE;YACxF,CAAC,IAAI,CAAC,SAAS,IAAI,CAClB,qEACE,cAAc,EAAE,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,EAC9E,EAAE,EAAC,SAAS,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,uBAAuB,EAAE,IAAI,CAAC,uBAAuB,EACrD,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,GACnD,CACH;YACD,kEACE,KAAK,EAAC,MAAM,EACZ,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,sBAAsB,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,uBAAuB,GAAG,EAAE;gBAEjH,8DAAa,CACH,CACP,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, Watch, Element, Event, h, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-modal-v2',\n  styleUrl: 'cpsl-modal-v2.scss',\n  shadow: true,\n})\nexport class CpslModalV2 {\n  @Element() el!: HTMLCpslModalV2Element;\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 modal with a box shadow.\n   */\n  @Prop() elevated: boolean;\n\n  /**\n   * Whether or not to show the overlay.\n   */\n  @Prop() noOverlay: boolean;\n\n  /**\n   * Whether or not to show the modal.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * Override z-index.\n   */\n  @Prop() zIndexOverride?: number;\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  @Watch('open')\n  toggleHeight() {\n    if (!this.open) {\n      this.cpslModalExiting.emit();\n      // Animate out before setting display to none\n      setTimeout(() => {\n        this.el.style.display = 'none';\n        this.cpslModalExited.emit();\n      }, this.exitTransitionDuration * 1000);\n    } else {\n      this.cpslModalEntering.emit();\n      this.el.style.display = 'flex';\n      setTimeout(() => {\n        this.cpslModalEntered.emit();\n      }, this.enterTransitionDuration * 1000);\n    }\n  }\n\n  componentDidLoad() {\n    this.toggleHeight();\n  }\n\n  render() {\n    return (\n      <Host class={{ 'open': this.open, 'elevated': this.elevated, 'no-overlay': this.noOverlay }}>\n        {!this.noOverlay && (\n          <cpsl-overlay\n            zIndexOverride={Boolean(this.zIndexOverride) ? this.zIndexOverride : undefined}\n            id=\"overlay\"\n            open={this.open}\n            enterTransitionDuration={this.enterTransitionDuration}\n            exitTransitionDuration={this.exitTransitionDuration}\n          />\n        )}\n        <cpsl-card\n          class=\"card\"\n          style={{ transitionDuration: this.open ? `${this.exitTransitionDuration}s` : `${this.enterTransitionDuration}s` }}\n        >\n          <slot></slot>\n        </cpsl-card>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-nav-button-group/cpsl-nav-button-group.js

@@ -32,7 +32,7 @@ export class CpslNavButtonGroup {
         return this.el.querySelectorAll('&> *:not(cpsl-button)');
     }
     render() {
-        return (h(Host, { key: 'c1d80cf6de655e2f8d67de7e9f60f1faa671a63c' }, h("slot", { key: '27db1e6328971b99c904e991fe791978ba31639e' })));
+        return (h(Host, { key: 'b9d10d5d01a10dc63887d524468096b3741b1df8' }, h("slot", { key: 'b27f6cdf9b85fff82445dba96732e9644a3d597b' })));
     }
     static get is() { return "cpsl-nav-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,6 +15,7 @@ export class CpslOverlay {
             document.documentElement.style.overflow = 'hidden';
         }
         else {
+            // Setting a timeout here to prevent modal from shifting when the scroll bar appears
             setTimeout(() => {
                 document.documentElement.style.overflow = 'auto';
             }, this.exitTransitionDuration * 1000);
@@ -27,7 +28,7 @@ export class CpslOverlay {
         }
     }
     render() {
-        return (h(Host, { key: '919a85b739f0d93b6453780b447a7ab8abde3427', style: Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {} }, h("slot", { key: '743486d02a50741550ae49b36b7e0c11b949b46a' })));
+        return (h(Host, { key: 'c8eac44811db97343f9bfa769800cd2fc6528617', style: Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {} }, h("slot", { key: '2224cfed49cb4577b2d1939e53657ec5b8c85856' })));
     }
     static get is() { return "cpsl-overlay"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"cpsl-overlay.js","sourceRoot":"","sources":["../../../../src/components/cpsl-overlay/cpsl-overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,WAAW;;uCAOqB,GAAG;sCAMJ,GAAG;;;;IAa7C,YAAY;QACV,IAAI,CAAC,IAAI;YACP,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,uBAAuB,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;YACvH,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,sBAAsB,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;QAExH,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACrD,CAAC;aAAM,CAAC;YAEN,UAAU,CAAC,GAAG,EAAE;gBACd,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC;YACnD,CAAC,EAAE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,CAAC;QACzC,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,uBAAuB,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;YACtH,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACrD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE;YACnF,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Element, Watch } from '@stencil/core';\nimport gsap from 'gsap';\n\n@Component({\n  tag: 'cpsl-overlay',\n  styleUrl: 'cpsl-overlay.scss',\n  shadow: true,\n})\nexport class CpslOverlay {\n  @Element() el!: HTMLCpslOverlayElement;\n\n  /**\n   * Duration in seconds of the fade out animation.\n   * Default is .5.\n   */\n  @Prop() enterTransitionDuration?: number = 0.5;\n\n  /**\n   * Duration in seconds of the fade out animation.\n   * Default is .5.\n   */\n  @Prop() exitTransitionDuration?: number = 0.5;\n\n  /**\n   * Whether or not to show the overlay.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * Override z-index.\n   */\n  @Prop() zIndexOverride?: number;\n\n  @Watch('open')\n  toggleHeight() {\n    this.open\n      ? gsap.timeline({ defaults: { duration: this.enterTransitionDuration } }).to(this.el, { display: 'block', opacity: 1 })\n      : gsap.timeline({ defaults: { duration: this.exitTransitionDuration } }).to(this.el, { display: 'none', opacity: 0 });\n\n    if (this.open) {\n      document.documentElement.style.overflow = 'hidden';\n    } else {\n      // Setting a timeout here to prevent modal from shifting when the scroll bar appears\n      setTimeout(() => {\n        document.documentElement.style.overflow = 'auto';\n      }, this.exitTransitionDuration * 1000);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.open) {\n      gsap.timeline({ defaults: { duration: this.enterTransitionDuration } }).to(this.el, { display: 'block', opacity: 1 });\n      document.documentElement.style.overflow = 'hidden';\n    }\n  }\n\n  render() {\n    return (\n      <Host style={Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {}}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-overlay.js","sourceRoot":"","sources":["../../../../src/components/cpsl-overlay/cpsl-overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,WAAW;;uCAOqB,GAAG;sCAMJ,GAAG;;;;IAa7C,YAAY;QACV,IAAI,CAAC,IAAI;YACP,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,uBAAuB,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;YACvH,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,sBAAsB,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;QAExH,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACrD,CAAC;aAAM,CAAC;YACN,oFAAoF;YACpF,UAAU,CAAC,GAAG,EAAE;gBACd,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC;YACnD,CAAC,EAAE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,CAAC;QACzC,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,uBAAuB,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;YACtH,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACrD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE;YACnF,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Element, Watch } from '@stencil/core';\nimport gsap from 'gsap';\n\n@Component({\n  tag: 'cpsl-overlay',\n  styleUrl: 'cpsl-overlay.scss',\n  shadow: true,\n})\nexport class CpslOverlay {\n  @Element() el!: HTMLCpslOverlayElement;\n\n  /**\n   * Duration in seconds of the fade out animation.\n   * Default is .5.\n   */\n  @Prop() enterTransitionDuration?: number = 0.5;\n\n  /**\n   * Duration in seconds of the fade out animation.\n   * Default is .5.\n   */\n  @Prop() exitTransitionDuration?: number = 0.5;\n\n  /**\n   * Whether or not to show the overlay.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * Override z-index.\n   */\n  @Prop() zIndexOverride?: number;\n\n  @Watch('open')\n  toggleHeight() {\n    this.open\n      ? gsap.timeline({ defaults: { duration: this.enterTransitionDuration } }).to(this.el, { display: 'block', opacity: 1 })\n      : gsap.timeline({ defaults: { duration: this.exitTransitionDuration } }).to(this.el, { display: 'none', opacity: 0 });\n\n    if (this.open) {\n      document.documentElement.style.overflow = 'hidden';\n    } else {\n      // Setting a timeout here to prevent modal from shifting when the scroll bar appears\n      setTimeout(() => {\n        document.documentElement.style.overflow = 'auto';\n      }, this.exitTransitionDuration * 1000);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.open) {\n      gsap.timeline({ defaults: { duration: this.enterTransitionDuration } }).to(this.el, { display: 'block', opacity: 1 });\n      document.documentElement.style.overflow = 'hidden';\n    }\n  }\n\n  render() {\n    return (\n      <Host style={Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {}}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -71,7 +71,7 @@ export class CpslPagination {
                 filteredPages.push(this.totalPages - 1);
             }
         }
-        return (h(Host, { key: '0256d628867d9f9e48fbe9959267d75c3bd31637' }, h("cpsl-button-group", { key: '33ca6823866c975e1e17bba0009bed1da9e42d25', selectedId: `${this.currentPage}` }, h("cpsl-button", { key: '3f2727aa63723afc21ca07c634de14ba3d613db9', class: "arrow-button", onClick: this.handlePrevClick }, h("cpsl-icon", { key: '732be305dd09deddab8cfdaab33de67f701b0ecf', class: { 'icon': true, 'start-icon': true }, icon: "arrowNarrow" })), filteredPages.map(page => (h("cpsl-button", { key: page, variant: "secondary", fullWidth: true, id: `${page}`, onClick: this.handlePageClick(page) }, h("cpsl-text", { variant: "bodyS" }, page + 1)))), h("cpsl-button", { key: 'e5f88f5dbf1070170f686fb4dd8e42a5573746a7', class: "arrow-button", onClick: this.handleNextClick }, h("cpsl-icon", { key: 'b85203ed5334aeece97829633d6385cbe52aa1e7', class: "icon", icon: "arrowNarrow" })))));
+        return (h(Host, { key: 'eba12366b85a2dd993d0fd42818e0f554bf668a2' }, h("cpsl-button-group", { key: 'c3558fe7307148dc511d4e182a4acdc97505f097', selectedId: `${this.currentPage}` }, h("cpsl-button", { key: 'da83c5c93894ba987db7223c474748b1f799739a', class: "arrow-button", onClick: this.handlePrevClick }, h("cpsl-icon", { key: '6584bf060a9b2c9c62877833852d7a2da4e3dd99', class: { 'icon': true, 'start-icon': true }, icon: "arrowNarrow" })), filteredPages.map(page => (h("cpsl-button", { key: page, variant: "secondary", fullWidth: true, id: `${page}`, onClick: this.handlePageClick(page) }, h("cpsl-text", { variant: "bodyS" }, page + 1)))), h("cpsl-button", { key: 'c39747f5464ca621788c075a8d75a8293c6889f1', class: "arrow-button", onClick: this.handleNextClick }, h("cpsl-icon", { key: '6cf1ab917fa25442534e105e27d9a883697d7a72', class: "icon", icon: "arrowNarrow" })))));
     }
     static get is() { return "cpsl-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"cpsl-pagination.js","sourceRoot":"","sources":["../../../../src/components/cpsl-pagination/cpsl-pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAO5F,MAAM,OAAO,cAAc;;QAwCjB,oBAAe,GAAG,GAAG,EAAE;YAC7B,IAAI,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE,CAAC;gBACzB,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC;QACH,CAAC,CAAC;QAEM,oBAAe,GAAG,GAAG,EAAE;YAC7B,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,EAAE,CAAC;gBAC3C,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC;QACH,CAAC,CAAC;QAEM,oBAAe,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,GAAG,EAAE;YAChD,IAAI,KAAK,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,EAAE,CAAC;gBAC/C,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YAC3B,CAAC;QACH,CAAC,CAAC;2BAvDqB,CAAC;;;4BAoByB,CAAC;;IAQlD,WAAW;QACT,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACpD,CAAC;IAED,iBAAiB;;QACf,IAAI,CAAC,WAAW,GAAG,MAAA,IAAI,CAAC,WAAW,mCAAI,CAAC,CAAC;QACzC,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;QACxB,CAAC;IACH,CAAC;IAoBD,MAAM;QACJ,MAAM,aAAa,GAAa,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAE/G,IAAI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;YACxC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAEtB,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,KAAK,CAAC,CAAC;YAC/C,MAAM,cAAc,GAAG,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;YAChE,MAAM,qBAAqB,GAAG,eAAe,IAAI,cAAc,CAAC;YAEhE,IAAI,gBAAgB,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC3E,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC;YACvD,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;YACvD,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;YACxE,IAAI,UAAU,GAAG,aAAa,CAAC;YAC/B,IAAI,SAAS,GAAG,gBAAgB,GAAG,aAAa,CAAC;YAEjD,IAAI,YAAY,IAAI,UAAU,EAAE,CAAC;gBAC/B,IAAI,WAAW,GAAG,SAAS,EAAE,CAAC;oBAC5B,UAAU,IAAI,SAAS,GAAG,WAAW,CAAC;oBACtC,SAAS,GAAG,WAAW,CAAC;gBAC1B,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,SAAS,IAAI,UAAU,GAAG,YAAY,CAAC;gBACvC,UAAU,GAAG,YAAY,CAAC;YAC5B,CAAC;YAED,OAAO,UAAU,GAAG,CAAC,EAAE,CAAC;gBACtB,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,CAAC;gBAClD,UAAU,EAAE,CAAC;YACf,CAAC;YAED,IAAI,CAAC,eAAe,EAAE,CAAC;gBACrB,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACvC,CAAC;YAED,MAAM,UAAU,GAAa,EAAE,CAAC;YAChC,OAAO,SAAS,GAAG,CAAC,EAAE,CAAC;gBACrB,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC,CAAC;gBAC9C,SAAS,EAAE,CAAC;YACd,CAAC;YAED,aAAa,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC;YAE5C,IAAI,CAAC,cAAc,EAAE,CAAC;gBACpB,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;YAC1C,CAAC;QACH,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH,0EAAmB,UAAU,EAAE,GAAG,IAAI,CAAC,WAAW,EAAE;gBAClD,oEAAa,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,eAAe;oBAC7D,kEAAW,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,EAAE,IAAI,EAAC,aAAa,GAAG,CACjE;gBACb,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACzB,mBAAa,GAAG,EAAE,IAAI,EAAE,OAAO,EAAC,WAAW,EAAC,SAAS,QAAC,EAAE,EAAE,GAAG,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;oBACtG,iBAAW,OAAO,EAAC,OAAO,IAAE,IAAI,GAAG,CAAC,CAAa,CACrC,CACf,CAAC;gBACF,oEAAa,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,eAAe;oBAC7D,kEAAW,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,aAAa,GAAG,CACjC,CACI,CACf,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, State, Event, h, EventEmitter, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-pagination',\n  styleUrl: 'cpsl-pagination.scss',\n  shadow: true,\n})\nexport class CpslPagination {\n  @State() currentPage = 0;\n\n  /**\n   * The initial page to select.\n   * Default is 0.\n   */\n  @Prop() initialPage?: number;\n\n  /**\n   * The total number of pages.\n   */\n  @Prop() totalPages: number;\n\n  /**\n   * The number of pages visible to select.\n   * Default is 5.\n   * Min is 5.\n   */\n\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ mutable: true }) visiblePages?: number = 5;\n\n  /**\n   * Emitted when exit animation finishes.\n   */\n  @Event() cpslPaginationChanged!: EventEmitter<number>;\n\n  @Watch('currentPage')\n  watchChange() {\n    this.cpslPaginationChanged.emit(this.currentPage);\n  }\n\n  componentWillLoad() {\n    this.currentPage = this.initialPage ?? 0;\n    if (this.visiblePages < 5) {\n      this.visiblePages = 5;\n    }\n  }\n\n  private handlePrevClick = () => {\n    if (this.currentPage > 0) {\n      this.currentPage--;\n    }\n  };\n\n  private handleNextClick = () => {\n    if (this.currentPage < this.totalPages - 1) {\n      this.currentPage++;\n    }\n  };\n\n  private handlePageClick = (value: number) => () => {\n    if (value >= 0 && value <= this.totalPages - 1) {\n      this.currentPage = value;\n    }\n  };\n\n  render() {\n    const filteredPages: number[] = this.totalPages <= this.visiblePages ? [...Array(this.totalPages).keys()] : [];\n\n    if (this.totalPages > this.visiblePages) {\n      filteredPages.push(0);\n\n      const isFirstSelected = this.currentPage === 0;\n      const isLastSelected = this.currentPage === this.totalPages - 1;\n      const isFirstOrLastSelected = isFirstSelected || isLastSelected;\n\n      let remainingVisible = this.visiblePages - (isFirstOrLastSelected ? 2 : 3);\n      const halfRemaining = Math.round(remainingVisible / 2);\n      const numberBefore = Math.max(this.currentPage - 1, 0);\n      const numberAfter = Math.max(this.totalPages - 2 - this.currentPage, 0);\n      let beforeHalf = halfRemaining;\n      let afterHalf = remainingVisible - halfRemaining;\n\n      if (numberBefore >= beforeHalf) {\n        if (numberAfter < afterHalf) {\n          beforeHalf += afterHalf - numberAfter;\n          afterHalf = numberAfter;\n        }\n      } else {\n        afterHalf += beforeHalf - numberBefore;\n        beforeHalf = numberBefore;\n      }\n\n      while (beforeHalf > 0) {\n        filteredPages.push(this.currentPage - beforeHalf);\n        beforeHalf--;\n      }\n\n      if (!isFirstSelected) {\n        filteredPages.push(this.currentPage);\n      }\n\n      const pagesAfter: number[] = [];\n      while (afterHalf > 0) {\n        pagesAfter.push(this.currentPage + afterHalf);\n        afterHalf--;\n      }\n\n      filteredPages.push(...pagesAfter.reverse());\n\n      if (!isLastSelected) {\n        filteredPages.push(this.totalPages - 1);\n      }\n    }\n\n    return (\n      <Host>\n        <cpsl-button-group selectedId={`${this.currentPage}`}>\n          <cpsl-button class=\"arrow-button\" onClick={this.handlePrevClick}>\n            <cpsl-icon class={{ 'icon': true, 'start-icon': true }} icon=\"arrowNarrow\" />\n          </cpsl-button>\n          {filteredPages.map(page => (\n            <cpsl-button key={page} variant=\"secondary\" fullWidth id={`${page}`} onClick={this.handlePageClick(page)}>\n              <cpsl-text variant=\"bodyS\">{page + 1}</cpsl-text>\n            </cpsl-button>\n          ))}\n          <cpsl-button class=\"arrow-button\" onClick={this.handleNextClick}>\n            <cpsl-icon class=\"icon\" icon=\"arrowNarrow\" />\n          </cpsl-button>\n        </cpsl-button-group>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-pagination.js","sourceRoot":"","sources":["../../../../src/components/cpsl-pagination/cpsl-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, State, Event, h, EventEmitter, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-pagination',\n  styleUrl: 'cpsl-pagination.scss',\n  shadow: true,\n})\nexport class CpslPagination {\n  @State() currentPage = 0;\n\n  /**\n   * The initial page to select.\n   * Default is 0.\n   */\n  @Prop() initialPage?: number;\n\n  /**\n   * The total number of pages.\n   */\n  @Prop() totalPages: number;\n\n  /**\n   * The number of pages visible to select.\n   * Default is 5.\n   * Min is 5.\n   */\n\n  @Prop({ mutable: true }) visiblePages?: number = 5;\n\n  /**\n   * Emitted when exit animation finishes.\n   */\n  @Event() cpslPaginationChanged!: EventEmitter<number>;\n\n  @Watch('currentPage')\n  watchChange() {\n    this.cpslPaginationChanged.emit(this.currentPage);\n  }\n\n  componentWillLoad() {\n    this.currentPage = this.initialPage ?? 0;\n    if (this.visiblePages < 5) {\n      this.visiblePages = 5;\n    }\n  }\n\n  private handlePrevClick = () => {\n    if (this.currentPage > 0) {\n      this.currentPage--;\n    }\n  };\n\n  private handleNextClick = () => {\n    if (this.currentPage < this.totalPages - 1) {\n      this.currentPage++;\n    }\n  };\n\n  private handlePageClick = (value: number) => () => {\n    if (value >= 0 && value <= this.totalPages - 1) {\n      this.currentPage = value;\n    }\n  };\n\n  render() {\n    const filteredPages: number[] = this.totalPages <= this.visiblePages ? [...Array(this.totalPages).keys()] : [];\n\n    if (this.totalPages > this.visiblePages) {\n      filteredPages.push(0);\n\n      const isFirstSelected = this.currentPage === 0;\n      const isLastSelected = this.currentPage === this.totalPages - 1;\n      const isFirstOrLastSelected = isFirstSelected || isLastSelected;\n\n      let remainingVisible = this.visiblePages - (isFirstOrLastSelected ? 2 : 3);\n      const halfRemaining = Math.round(remainingVisible / 2);\n      const numberBefore = Math.max(this.currentPage - 1, 0);\n      const numberAfter = Math.max(this.totalPages - 2 - this.currentPage, 0);\n      let beforeHalf = halfRemaining;\n      let afterHalf = remainingVisible - halfRemaining;\n\n      if (numberBefore >= beforeHalf) {\n        if (numberAfter < afterHalf) {\n          beforeHalf += afterHalf - numberAfter;\n          afterHalf = numberAfter;\n        }\n      } else {\n        afterHalf += beforeHalf - numberBefore;\n        beforeHalf = numberBefore;\n      }\n\n      while (beforeHalf > 0) {\n        filteredPages.push(this.currentPage - beforeHalf);\n        beforeHalf--;\n      }\n\n      if (!isFirstSelected) {\n        filteredPages.push(this.currentPage);\n      }\n\n      const pagesAfter: number[] = [];\n      while (afterHalf > 0) {\n        pagesAfter.push(this.currentPage + afterHalf);\n        afterHalf--;\n      }\n\n      filteredPages.push(...pagesAfter.reverse());\n\n      if (!isLastSelected) {\n        filteredPages.push(this.totalPages - 1);\n      }\n    }\n\n    return (\n      <Host>\n        <cpsl-button-group selectedId={`${this.currentPage}`}>\n          <cpsl-button class=\"arrow-button\" onClick={this.handlePrevClick}>\n            <cpsl-icon class={{ 'icon': true, 'start-icon': true }} icon=\"arrowNarrow\" />\n          </cpsl-button>\n          {filteredPages.map(page => (\n            <cpsl-button key={page} variant=\"secondary\" fullWidth id={`${page}`} onClick={this.handlePageClick(page)}>\n              <cpsl-text variant=\"bodyS\">{page + 1}</cpsl-text>\n            </cpsl-button>\n          ))}\n          <cpsl-button class=\"arrow-button\" onClick={this.handleNextClick}>\n            <cpsl-icon class=\"icon\" icon=\"arrowNarrow\" />\n          </cpsl-button>\n        </cpsl-button-group>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -4,7 +4,7 @@ export class CpslPill {
         this.text = undefined;
     }
     render() {
-        return (h(Host, { key: '81f5ffe5b0eab569386324c33d0b1eb2c4b21058' }, h("div", { key: '6d989b02dcd2651574503154c662e960e9b86881', class: "pill-container" }, h("span", { key: 'f686ad83dd9bca59a9b199fd6517d0c2fccb191c' }, this.text))));
+        return (h(Host, { key: '3ae506c7d53a529397d0b6e6c54c52501cff2561' }, h("div", { key: '0e3eebbb2a622e62c1bcd83c3d5fab24e31b9f3f', class: "pill-container" }, h("span", { key: 'e4277fc6af1abffa05e6037d68fa2ac8f998b51b' }, this.text))));
     }
     static get is() { return "cpsl-pill"; }
     static get encapsulation() { return "shadow"; }

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

@@ -35,6 +35,11 @@ export class CpslPopover {
                 return;
             }
             let triggerCallbacks = [];
+            /**
+             * Based upon the kind of trigger interaction
+             * the user wants, we setup the correct event
+             * listeners.
+             */
             switch (triggerAction) {
                 case 'hover':
                     triggerCallbacks = [
@@ -171,6 +176,9 @@ export class CpslPopover {
         this.trigger = undefined;
         this.windowPadding = 16;
     }
+    /**
+     * Call to close the popover manually.
+     */
     closePopover() {
         return __awaiter(this, void 0, void 0, function* () {
             this.close();
@@ -201,7 +209,7 @@ export class CpslPopover {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'bd7eae025737b5aa941191dbe9d8812134c360e3', class: {
+        return (h(Host, { key: '6e949ffef54dfbc76c739243e222e58ea93db103', class: {
                 'open': this.open,
                 'transform-h-left': this.transformOriginHorizontal === 'left',
                 'transform-h-center': this.transformOriginHorizontal === 'center',
@@ -209,7 +217,11 @@ export class CpslPopover {
                 'transform-v-top': this.transformOriginVertical === 'top',
                 'transform-v-center': this.transformOriginVertical === 'center',
                 'transform-v-bottom': this.transformOriginVertical === 'bottom',
-            }, style: { top: `${this.positionY}px`, left: `${this.positionX}px`, width: this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, h("div", { key: '10a1464f27c340faf62a5dafad0860b1d25c4041', id: "container", class: { container: true, open: this.open } }, h("slot", { key: '575660d8738d4cecc1ad8b4c5ffeb035cd1bba66' }))));
+            }, style: {
+                top: `${this.positionY}px`,
+                left: `${this.positionX}px`,
+                width: this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px`,
+            } }, h("div", { key: '4cb74feb1ddb1157deb138c22b4ebd6fe423f163', id: "container", class: { container: true, open: this.open } }, h("slot", { key: '498c0f9f4e7770ec4b8bd3a4d50be843e0b9445c' }))));
     }
     static get is() { return "cpsl-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -443,8 +455,8 @@ export class CpslPopover {
                     "text": "Emitted when the popover opens."
                 },
                 "complexType": {
-                    "original": "void",
-                    "resolved": "void",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 }
             }, {
@@ -458,8 +470,8 @@ export class CpslPopover {
                     "text": "Emitted when the popover closes."
                 },
                 "complexType": {
-                    "original": "void",
-                    "resolved": "void",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 }
             }];

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';\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  private triggerClicked = false;\n  @State() positionX?: number;\n  @State() positionY?: number;\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('click', this.handleClickOutside);\n      window.addEventListener('scroll', () => this.setPosition(), true);\n    } else {\n      window.removeEventListener('click', this.handleClickOutside);\n      window.addEventListener('scroll', () => this.setPosition());\n    }\n  }\n\n  componentDidLoad() {\n    this.configureTriggerInteraction();\n  }\n\n  private configureTriggerInteraction = () => {\n    const { trigger, triggerAction, destroyTriggerInteraction } = this;\n\n    if (Boolean(destroyTriggerInteraction)) {\n      destroyTriggerInteraction();\n    }\n\n    if (trigger === undefined) {\n      return;\n    }\n\n    this.triggerEl = document.getElementById(trigger);\n    if (!Boolean(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        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 (Boolean(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 handleClickOutside = (event: MouseEvent) => {\n    if (!this.triggerClicked && this.triggerEl.contains(event.target as Node)) {\n      this.triggerClicked = true;\n      return;\n    }\n    if (this.open && !this.el.contains(event.target as Node)) {\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      this.setPosition();\n    }\n  };\n\n  private close = () => {\n    this.open = false;\n    this.triggerClicked = false;\n    this.cpslClose.emit();\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={{ top: `${this.positionY}px`, left: `${this.positionX}px`, width: this.autoWidth ? 'auto' : `${this.triggerEl?.clientWidth}px` }}\n      >\n        <div id=\"container\" class={{ container: true, open: this.open }}>\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';\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  private triggerClicked = false;\n  @State() positionX?: number;\n  @State() positionY?: number;\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;\n\n  /**\n   * Emitted when the popover closes.\n   */\n  @Event() cpslClose!: EventEmitter;\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('click', this.handleClickOutside);\n      window.addEventListener('scroll', () => this.setPosition(), true);\n    } else {\n      window.removeEventListener('click', this.handleClickOutside);\n      window.addEventListener('scroll', () => this.setPosition());\n    }\n  }\n\n  componentDidLoad() {\n    this.configureTriggerInteraction();\n  }\n\n  private configureTriggerInteraction = () => {\n    const { trigger, triggerAction, destroyTriggerInteraction } = this;\n\n    if (Boolean(destroyTriggerInteraction)) {\n      destroyTriggerInteraction();\n    }\n\n    if (trigger === undefined) {\n      return;\n    }\n\n    this.triggerEl = document.getElementById(trigger);\n    if (!Boolean(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        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 (Boolean(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 handleClickOutside = (event: MouseEvent) => {\n    if (!this.triggerClicked && this.triggerEl.contains(event.target as Node)) {\n      this.triggerClicked = true;\n      return;\n    }\n    if (this.open && !this.el.contains(event.target as Node)) {\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      this.setPosition();\n    }\n  };\n\n  private close = () => {\n    this.open = false;\n    this.triggerClicked = false;\n    this.cpslClose.emit();\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.autoWidth ? 'auto' : `${this.triggerEl?.clientWidth}px`,\n        }}\n      >\n        <div id=\"container\" class={{ container: true, open: this.open }}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -32,7 +32,7 @@ export class CpslQrCode {
         qrCode.append(container);
     }
     render() {
-        return (h(Host, { key: '5655e021ffef542b385c133d6e624be3cef16c1d' }, h("div", { key: '96eb780f5b5f61815f63e6e3c85368b7bc5b42e6', id: "qr-container", class: "qr-container" })));
+        return (h(Host, { key: '95d0a5a4e2cab2a3487895e16255c78a9df322c1' }, h("div", { key: 'd63c1985e90491be78e24945c6bdb9aae44c8f7d', id: "qr-container", class: "qr-container" })));
     }
     static get is() { return "cpsl-qr-code"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@ export class CpslRadio {
         this.checked = undefined;
     }
     render() {
-        return (h(Host, { key: '56ac31a17d3aebb35c2b0bfe54aefb2e9a99ecdb' }, h("input", { key: '294dd0e233b1921218a20726819c1b6f62a9545f', type: "radio", checked: this.checked }), h("span", { key: '23eb0b6319a39c1435df495b4491b9ec226be325', onClick: this.handleRadioClick, class: { container: true, checked: this.checked } })));
+        return (h(Host, { key: '96a55091ded8f5437089b71617066f2312c8e496' }, h("input", { key: '0aed505c49051a99fbfc90225fd057cc0a1f525e', type: "radio", checked: this.checked }), h("span", { key: 'f44d22c6ac7152ca0760f17d810e4b3fe12ff78f', onClick: this.handleRadioClick, class: { container: true, checked: this.checked } })));
     }
     static get is() { return "cpsl-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CpslRow {
     render() {
-        return (h(Host, { key: 'a7103593a92c7db3ff20e95c7f9a0b7a14897e34' }, h("slot", { key: 'e7980a87253ac57393a246aae808cfa47f7c20dc' })));
+        return (h(Host, { key: '63ac746920b1acf41ea6083e67dd61c9b1f480f1' }, h("slot", { key: '35cf9026a0009abf96f990114afec3d509c81063' })));
     }
     static get is() { return "cpsl-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -83,7 +83,9 @@ export class CpslSelect {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '3d3f052d6702fc9b74b03fc55b2766eec299c449', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (h("label", { class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '90ef0cd5ae49233665debddbfe9dd096e6434374', id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { name: "selected-item" }), h("div", { key: '6bee82c04abdfc2ad735f63e2ab793304fb6996a', class: "selected-container-content", id: "selected-container-content" }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { class: { 'selected-text': true, 'placeholder': !Boolean(this.selectedValue) } }, !Boolean(this.selectedValue) ? (_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select' : (_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : this.selectedValue))), h("cpsl-icon", { key: 'f74f7d8b6201ba9032d5e1ccd75c487f0e4251bb', class: { 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: "chevronUp" }), h("input", { key: '0f14ad55bc376590da75f5e4f8664f9fcb893c6d', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", null, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText))), h("cpsl-popover", { key: 'df6d347b953633d1f8ecb71d4ee5767da4ddb223', autoWidth: false, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: '524ffcfc61bcba174422770542516028ee37ad48', class: "dropdown" }, h("div", { key: 'fb72dace14c9dd43b48654e22bb268b2ffb06876', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: 'a67f1f8ebcb08b0827dbff2e2a5896cf707d6182', name: "items" }))))));
+        return (h(Host, { key: '9c23dd95815c6d29eb5212084fcc311f93e57267', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (h("label", { key: '130663a00456e3e5bfa04002563bdd028094ba00', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '05b090f1bb9857913e33cd34b5a6d506834b0cca', id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { key: 'cbf9d5764d4f2d1c3052ad88913a6d3b2e818015', name: "selected-item" }), h("div", { key: '3319b3aa5316e63430c6d4cc4d3d4ecd70585650', class: "selected-container-content", id: "selected-container-content" }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { key: '28dff14553ba27719041fc3097b3a48e9ff186e5', class: { 'selected-text': true, 'placeholder': !Boolean(this.selectedValue) } }, !Boolean(this.selectedValue)
+            ? ((_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select')
+            : ((_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : this.selectedValue)))), h("cpsl-icon", { key: '632319f9681e4f1c7700c92af8c2739f5d32553e', class: { 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: "chevronUp" }), h("input", { key: '72b317986e3b0c331edac92d3ab56d101624984d', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" })), (this.errorText || this.helperText) && (h("div", { key: 'ee9231bf262b822f61e168bd6f6f9d07d083fe2e', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '9483445ed8c6e4e18c408e68e6a2aac602f9510f' }, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText))), h("cpsl-popover", { key: 'b6f9b73041dfb1f8795858e7c34551ce126c7b56', autoWidth: false, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: 'ab43501553973078936c80f1af92b34beb4d1d4a', class: "dropdown" }, h("div", { key: '76a0edc77e408927b7ccd987e292b0e4b9498582', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: '087e283b2cd807455a4732e8d67799add3362089', name: "items" }))))));
     }
     static get is() { return "cpsl-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"cpsl-select.js","sourceRoot":"","sources":["../../../../src/components/cpsl-select/cpsl-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Element, h, Prop, State, EventEmitter, Event, Watch, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-select',\n  styleUrl: 'cpsl-select.scss',\n  shadow: true,\n})\nexport class CpslSelect {\n  @Element() el!: HTMLCpslSelectElement;\n  private popoverEl!: HTMLCpslPopoverElement;\n  private inputId = `cpsl-select-${inputIds++}`;\n\n  @State() anchorEl!: HTMLDivElement;\n  @State() hasFocus = false;\n  @State() popoverOpen = false;\n  @State() hasSelectedItem = false;\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set the max height of the dropdown.\n   */\n  @Prop() dropdownMaxHeight?: number;\n\n  /**\n   * Error text to show below the input. If this is provided the input will enter an error state.\n   */\n  @Prop() errorText?: string;\n\n  /**\n   * Format value for display when selected.\n   */\n  @Prop() formatValue?: (value: string) => string;\n\n  /**\n   * Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * ID of the element, must be unique for the popover trigger.\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() id: string = `${this.inputId}-trigger`;\n\n  /**\n   * The label for the input.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Placeholder to display if `selectedValue` is empty.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * Value of the selected item.\n   */\n  @Prop() selectedValue?: string;\n\n  /**\n   * Will show the formatted selected item (passed in the `selected-item` slot) in the select rather than the item value.\n   */\n  @Prop() showFormattedSelectedItem?: boolean;\n\n  /**\n   * If `true`, the label will display an \"optional\" tag.\n   */\n  @Prop() showOptionalLabel = false;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() cpslBlur!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() cpslFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the value changes.\n   */\n  @Event() cpslSelectValueChange!: EventEmitter<string>;\n\n  @Watch('selectedValue')\n  onValueChange() {\n    this.popoverEl.closePopover();\n  }\n\n  @Watch('selectedValue')\n  handleValueChange() {\n    this.selectItem();\n  }\n\n  @Listen('cpslSelectItemClick')\n  selectItemClickHandler(event: CustomEvent<string>) {\n    this.cpslSelectValueChange.emit(event.detail);\n  }\n\n  @Listen('cpslOpen')\n  onPopoverOpen() {\n    this.popoverOpen = true;\n  }\n\n  @Listen('cpslClose')\n  onPopoverClose() {\n    this.popoverOpen = false;\n  }\n\n  componentDidLoad() {\n    this.popoverEl = this.el.shadowRoot.querySelector(`cpsl-popover`) as HTMLCpslPopoverElement;\n    this.anchorEl = this.el.shadowRoot.getElementById('select-container') as HTMLDivElement;\n\n    this.selectItem();\n  }\n\n  private onBlur = (ev: FocusEvent) => {\n    this.hasFocus = false;\n\n    this.popoverEl.closePopover();\n\n    this.cpslBlur.emit(ev);\n  };\n\n  private onFocus = (ev: FocusEvent) => {\n    this.hasFocus = true;\n\n    this.cpslFocus.emit(ev);\n  };\n\n  private handleEnterPress = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter') {\n      ev.preventDefault();\n      this.el.dispatchEvent(new MouseEvent('mousedown'));\n    }\n  };\n\n  private selectItem = () => {\n    const items = Array.from(this.el.querySelectorAll('cpsl-select-item')) as HTMLCpslSelectItemElement[];\n\n    items.forEach(item => {\n      if (item.value === this.selectedValue) {\n        item.setAttribute('selected', 'true');\n        this.hasSelectedItem = true;\n      } else {\n        item.setAttribute('selected', 'false');\n      }\n    });\n\n    if (!Boolean(this.selectedValue)) {\n      this.hasSelectedItem = false;\n    }\n  };\n\n  private handleClickOutside = (event: MouseEvent) => {\n    if (this.hasFocus && !this.el.contains(event.target as Node)) {\n      this.hasFocus = false;\n      window.removeEventListener('click', this.handleClickOutside);\n    }\n  };\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      this.hasFocus = true;\n      window.addEventListener('click', this.handleClickOutside);\n    }\n  };\n\n  render() {\n    return (\n      <Host id={this.id} class={{ 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) }}>\n        {this.label && (\n          <label class=\"label\" htmlFor={this.inputId}>\n            {this.label}\n            {this.required ? '*' : ' '}\n            {!this.required && this.showOptionalLabel ? <span class=\"optional-label\">(optional)</span> : ''}\n          </label>\n        )}\n        <div id=\"select-container\" class={{ 'select-container': true, 'error-container': Boolean(this.errorText) }} onMouseDown={this.handleClick}>\n          {this.hasSelectedItem && this.showFormattedSelectedItem && <slot name=\"selected-item\"></slot>}\n          <div class=\"selected-container-content\" id=\"selected-container-content\">\n            {(!this.hasSelectedItem || !this.showFormattedSelectedItem) && (\n              <cpsl-text class={{ 'selected-text': true, 'placeholder': !Boolean(this.selectedValue) }}>\n                {!Boolean(this.selectedValue) ? this.placeholder ?? 'Select' : this.formatValue?.(this.selectedValue) ?? this.selectedValue}\n              </cpsl-text>\n            )}\n          </div>\n          <cpsl-icon class={{ 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }} icon=\"chevronUp\" />\n          <input\n            id={this.inputId}\n            disabled={this.disabled}\n            class={{ disabled: this.disabled }}\n            value={this.selectedValue}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onKeyPress={this.handleEnterPress}\n            inputmode=\"none\"\n          />\n        </div>\n        {(this.errorText || this.helperText) && (\n          <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n            <span>{this.errorText ?? this.helperText}</span>\n          </div>\n        )}\n        <cpsl-popover autoWidth={false} trigger={this.id} preventBlur={this.hasFocus} disabled={this.disabled} anchorEl={this.anchorEl}>\n          <div class=\"dropdown\">\n            <div class=\"dropdown-inner\" style={{ maxHeight: `${this.dropdownMaxHeight}px` }}>\n              <slot name=\"items\"></slot>\n            </div>\n          </div>\n        </cpsl-popover>\n      </Host>\n    );\n  }\n}\n\nlet inputIds = 0;\n"]}
+{"version":3,"file":"cpsl-select.js","sourceRoot":"","sources":["../../../../src/components/cpsl-select/cpsl-select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAO7G,MAAM,OAAO,UAAU;;QAGb,YAAO,GAAG,eAAe,QAAQ,EAAE,EAAE,CAAC;QAmHtC,WAAM,GAAG,CAAC,EAAc,EAAE,EAAE;YAClC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YAEtB,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC;YAE9B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACzB,CAAC,CAAC;QAEM,YAAO,GAAG,CAAC,EAAc,EAAE,EAAE;YACnC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YAErB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC1B,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,EAAiB,EAAE,EAAE;YAC/C,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBACvB,EAAE,CAAC,cAAc,EAAE,CAAC;gBACpB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC;YACrD,CAAC;QACH,CAAC,CAAC;QAEM,eAAU,GAAG,GAAG,EAAE;YACxB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAgC,CAAC;YAEtG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBACnB,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,aAAa,EAAE,CAAC;oBACtC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;oBACtC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;gBAC9B,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;gBACzC,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC;gBACjC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAC/B,CAAC;QACH,CAAC,CAAC;QAEM,uBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YACjD,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;gBAC7D,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;gBACtB,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;YAC/D,CAAC;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACrB,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;YAC5D,CAAC;QACH,CAAC,CAAC;;wBAlKkB,KAAK;2BACF,KAAK;+BACD,KAAK;wBAKb,KAAK;;;;;kBA0BH,GAAG,IAAI,CAAC,OAAO,UAAU;;;wBAe3B,KAAK;;;iCAeI,KAAK;;IAkBjC,aAAa;QACX,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC;IAChC,CAAC;IAGD,iBAAiB;QACf,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAGD,sBAAsB,CAAC,KAA0B;QAC/C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAChD,CAAC;IAGD,aAAa;QACX,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC1B,CAAC;IAGD,cAAc;QACZ,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAA2B,CAAC;QAC5F,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,kBAAkB,CAAmB,CAAC;QAExF,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAsDD,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE;YAEvG,IAAI,CAAC,KAAK,IAAI,CACb,8DAAO,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO;gBACvC,IAAI,CAAC,KAAK;gBACV,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;gBACzB,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,YAAM,KAAK,EAAC,gBAAgB,iBAAkB,CAAC,CAAC,CAAC,EAAE,CACzF,CACT;YACD,4DACE,EAAE,EAAC,kBAAkB,EACrB,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,iBAAiB,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,EAC/E,WAAW,EAAE,IAAI,CAAC,WAAW;gBAE5B,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,yBAAyB,IAAI,6DAAM,IAAI,EAAC,eAAe,GAAQ;gBAC7F,4DAAK,KAAK,EAAC,4BAA4B,EAAC,EAAE,EAAC,4BAA4B,IACpE,CAAC,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAC7D,kEAAW,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,IACrF,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC;oBAC3B,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,QAAQ,CAAC;oBAChC,CAAC,CAAC,CAAC,MAAA,MAAA,IAAI,CAAC,WAAW,qDAAG,IAAI,CAAC,aAAa,CAAC,mCAAI,IAAI,CAAC,aAAa,CAAC,CACxD,CACb,CACG;gBACN,kEACE,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,EAC9F,IAAI,EAAC,WAAW,GAChB;gBACF,8DACE,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAClC,KAAK,EAAE,IAAI,CAAC,aAAa,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,UAAU,EAAE,IAAI,CAAC,gBAAgB,EACjC,SAAS,EAAC,MAAM,GAChB,CACE;YACL,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CACtC,4DAAK,KAAK,EAAE,EAAE,uBAAuB,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;gBAClF,+DAAO,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,UAAU,CAAQ,CAC5C,CACP;YACD,qEACE,SAAS,EAAE,KAAK,EAChB,OAAO,EAAE,IAAI,CAAC,EAAE,EAChB,WAAW,EAAE,IAAI,CAAC,QAAQ,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBAEvB,4DAAK,KAAK,EAAC,UAAU;oBACnB,4DAAK,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,iBAAiB,IAAI,EAAE;wBAC7E,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF,CACO,CACV,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,QAAQ,GAAG,CAAC,CAAC","sourcesContent":["import { Component, Host, Element, h, Prop, State, EventEmitter, Event, Watch, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-select',\n  styleUrl: 'cpsl-select.scss',\n  shadow: true,\n})\nexport class CpslSelect {\n  @Element() el!: HTMLCpslSelectElement;\n  private popoverEl!: HTMLCpslPopoverElement;\n  private inputId = `cpsl-select-${inputIds++}`;\n\n  @State() anchorEl!: HTMLDivElement;\n  @State() hasFocus = false;\n  @State() popoverOpen = false;\n  @State() hasSelectedItem = false;\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set the max height of the dropdown.\n   */\n  @Prop() dropdownMaxHeight?: number;\n\n  /**\n   * Error text to show below the input. If this is provided the input will enter an error state.\n   */\n  @Prop() errorText?: string;\n\n  /**\n   * Format value for display when selected.\n   */\n  @Prop() formatValue?: (value: string) => string;\n\n  /**\n   * Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * ID of the element, must be unique for the popover trigger.\n   */\n\n  @Prop() id: string = `${this.inputId}-trigger`;\n\n  /**\n   * The label for the input.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Placeholder to display if `selectedValue` is empty.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * Value of the selected item.\n   */\n  @Prop() selectedValue?: string;\n\n  /**\n   * Will show the formatted selected item (passed in the `selected-item` slot) in the select rather than the item value.\n   */\n  @Prop() showFormattedSelectedItem?: boolean;\n\n  /**\n   * If `true`, the label will display an \"optional\" tag.\n   */\n  @Prop() showOptionalLabel = false;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() cpslBlur!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() cpslFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the value changes.\n   */\n  @Event() cpslSelectValueChange!: EventEmitter<string>;\n\n  @Watch('selectedValue')\n  onValueChange() {\n    this.popoverEl.closePopover();\n  }\n\n  @Watch('selectedValue')\n  handleValueChange() {\n    this.selectItem();\n  }\n\n  @Listen('cpslSelectItemClick')\n  selectItemClickHandler(event: CustomEvent<string>) {\n    this.cpslSelectValueChange.emit(event.detail);\n  }\n\n  @Listen('cpslOpen')\n  onPopoverOpen() {\n    this.popoverOpen = true;\n  }\n\n  @Listen('cpslClose')\n  onPopoverClose() {\n    this.popoverOpen = false;\n  }\n\n  componentDidLoad() {\n    this.popoverEl = this.el.shadowRoot.querySelector(`cpsl-popover`) as HTMLCpslPopoverElement;\n    this.anchorEl = this.el.shadowRoot.getElementById('select-container') as HTMLDivElement;\n\n    this.selectItem();\n  }\n\n  private onBlur = (ev: FocusEvent) => {\n    this.hasFocus = false;\n\n    this.popoverEl.closePopover();\n\n    this.cpslBlur.emit(ev);\n  };\n\n  private onFocus = (ev: FocusEvent) => {\n    this.hasFocus = true;\n\n    this.cpslFocus.emit(ev);\n  };\n\n  private handleEnterPress = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter') {\n      ev.preventDefault();\n      this.el.dispatchEvent(new MouseEvent('mousedown'));\n    }\n  };\n\n  private selectItem = () => {\n    const items = Array.from(this.el.querySelectorAll('cpsl-select-item')) as HTMLCpslSelectItemElement[];\n\n    items.forEach(item => {\n      if (item.value === this.selectedValue) {\n        item.setAttribute('selected', 'true');\n        this.hasSelectedItem = true;\n      } else {\n        item.setAttribute('selected', 'false');\n      }\n    });\n\n    if (!Boolean(this.selectedValue)) {\n      this.hasSelectedItem = false;\n    }\n  };\n\n  private handleClickOutside = (event: MouseEvent) => {\n    if (this.hasFocus && !this.el.contains(event.target as Node)) {\n      this.hasFocus = false;\n      window.removeEventListener('click', this.handleClickOutside);\n    }\n  };\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      this.hasFocus = true;\n      window.addEventListener('click', this.handleClickOutside);\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        id={this.id}\n        class={{ 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) }}\n      >\n        {this.label && (\n          <label class=\"label\" htmlFor={this.inputId}>\n            {this.label}\n            {this.required ? '*' : ' '}\n            {!this.required && this.showOptionalLabel ? <span class=\"optional-label\">(optional)</span> : ''}\n          </label>\n        )}\n        <div\n          id=\"select-container\"\n          class={{ 'select-container': true, 'error-container': Boolean(this.errorText) }}\n          onMouseDown={this.handleClick}\n        >\n          {this.hasSelectedItem && this.showFormattedSelectedItem && <slot name=\"selected-item\"></slot>}\n          <div class=\"selected-container-content\" id=\"selected-container-content\">\n            {(!this.hasSelectedItem || !this.showFormattedSelectedItem) && (\n              <cpsl-text class={{ 'selected-text': true, 'placeholder': !Boolean(this.selectedValue) }}>\n                {!Boolean(this.selectedValue)\n                  ? (this.placeholder ?? 'Select')\n                  : (this.formatValue?.(this.selectedValue) ?? this.selectedValue)}\n              </cpsl-text>\n            )}\n          </div>\n          <cpsl-icon\n            class={{ 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }}\n            icon=\"chevronUp\"\n          />\n          <input\n            id={this.inputId}\n            disabled={this.disabled}\n            class={{ disabled: this.disabled }}\n            value={this.selectedValue}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onKeyPress={this.handleEnterPress}\n            inputmode=\"none\"\n          />\n        </div>\n        {(this.errorText || this.helperText) && (\n          <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n            <span>{this.errorText ?? this.helperText}</span>\n          </div>\n        )}\n        <cpsl-popover\n          autoWidth={false}\n          trigger={this.id}\n          preventBlur={this.hasFocus}\n          disabled={this.disabled}\n          anchorEl={this.anchorEl}\n        >\n          <div class=\"dropdown\">\n            <div class=\"dropdown-inner\" style={{ maxHeight: `${this.dropdownMaxHeight}px` }}>\n              <slot name=\"items\"></slot>\n            </div>\n          </div>\n        </cpsl-popover>\n      </Host>\n    );\n  }\n}\n\nlet inputIds = 0;\n"]}

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

@@ -8,7 +8,7 @@ export class CpslSelectItem {
         this.value = undefined;
     }
     render() {
-        return (h(Host, { key: '5bc53f915d04dbdbad5a301cec8b7a6dcef21d82' }, h("div", { key: 'cd3beea4b16d1c01b21ca1b54d03da6e501f52bb', class: "outer-container", onClick: this.handleItemClick }, h("div", { key: 'c63a0a44649b4837d0d67f983d274785f41204c6', class: { 'inner-container': true, 'selected': this.selected } }, h("slot", { key: '99e548871325528b7d52295c9e6740324f5add51' })))));
+        return (h(Host, { key: 'd85e6949e98e760b903a4bd3d2c02e000d15d466' }, h("div", { key: '548f93d1c69ee629a8ddba96d475d58d5ada93d1', class: "outer-container", onClick: this.handleItemClick }, h("div", { key: '47ba74f738353a4924410e0ec74289d23ba73756', class: { 'inner-container': true, 'selected': this.selected } }, h("slot", { key: 'ec50860e3996bbb673199d8d6d9df7aa7304b0e3' })))));
     }
     static get is() { return "cpsl-select-item"; }
     static get encapsulation() { return "shadow"; }