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

package/dist/esm/cpsl-modal-v2.entry.js.map

@@ -1 +1 @@
-{"file":"cpsl-modal-v2.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,ocAAoc,CAAC;AAC5d,0BAAe,cAAc;;MCMhB,WAAW;;;;;;;uCAOqB,IAAI;sCAML,IAAI;;;;;;IA2C9C,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;YAE7B,UAAU,CAAC;gBACT,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;aAC7B,EAAE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,CAAC;SACxC;aAAM;YACL,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;YAC9B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YAC/B,UAAU,CAAC;gBACT,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;aAC9B,EAAE,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,CAAC;SACzC;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE,IACxF,CAAC,IAAI,CAAC,SAAS,KACd,oBACE,cAAc,EAAE,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,cAAc,GAAG,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,EACD,kEAAW,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,CAAC,IAAI,GAAG,GAAG,IAAI,CAAC,sBAAsB,GAAG,GAAG,GAAG,IAAI,CAAC,uBAAuB,GAAG,EAAE,IACvI,8DAAa,CACH,CACP,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/cpsl-modal-v2/cpsl-modal-v2.scss?tag=cpsl-modal-v2&encapsulation=shadow","src/components/cpsl-modal-v2/cpsl-modal-v2.tsx"],"sourcesContent":["@use 'sass:map';\n@import '../../themes/capsule.globals';\n\n:host {\n  display: none;\n\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  justify-content: center;\n  align-items: center;\n\n  z-index: map.get($z-indices, 'modal');\n\n  & .card {\n    z-index: map.get($z-indices, 'modal');\n    opacity: 0;\n\n    position: relative;\n\n    transition: all;\n  }\n}\n\n:host(.no-overlay) {\n  position: relative;\n  top: unset;\n  left: unset;\n  width: 100%;\n  height: auto;\n}\n\n:host(.open) {\n  & .card {\n    opacity: 1;\n  }\n}\n\n:host(.elevated) {\n  & .card {\n    --card-border-width: 0px;\n\n    &::part(card-container) {\n      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.12);\n    }\n  }\n}\n","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.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,ocAAoc,CAAC;AAC5d,0BAAe,cAAc;;MCMhB,WAAW;;;;;;;uCAOqB,IAAI;sCAML,IAAI;;;;;;IA2C9C,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;;YAE7B,UAAU,CAAC;gBACT,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;aAC7B,EAAE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,CAAC;SACxC;aAAM;YACL,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;YAC9B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YAC/B,UAAU,CAAC;gBACT,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;aAC9B,EAAE,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,CAAC;SACzC;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE,IACxF,CAAC,IAAI,CAAC,SAAS,KACd,qEACE,cAAc,EAAE,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,cAAc,GAAG,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,EACD,kEACE,KAAK,EAAC,MAAM,EACZ,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,CAAC,IAAI,GAAG,GAAG,IAAI,CAAC,sBAAsB,GAAG,GAAG,GAAG,IAAI,CAAC,uBAAuB,GAAG,EAAE,IAEjH,8DAAa,CACH,CACP,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/cpsl-modal-v2/cpsl-modal-v2.scss?tag=cpsl-modal-v2&encapsulation=shadow","src/components/cpsl-modal-v2/cpsl-modal-v2.tsx"],"sourcesContent":["@use 'sass:map';\n@import '../../themes/capsule.globals';\n\n:host {\n  display: none;\n\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  justify-content: center;\n  align-items: center;\n\n  z-index: map.get($z-indices, 'modal');\n\n  & .card {\n    z-index: map.get($z-indices, 'modal');\n    opacity: 0;\n\n    position: relative;\n\n    transition: all;\n  }\n}\n\n:host(.no-overlay) {\n  position: relative;\n  top: unset;\n  left: unset;\n  width: 100%;\n  height: auto;\n}\n\n:host(.open) {\n  & .card {\n    opacity: 1;\n  }\n}\n\n:host(.elevated) {\n  & .card {\n    --card-border-width: 0px;\n\n    &::part(card-container) {\n      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.12);\n    }\n  }\n}\n","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"],"version":3}

package/dist/esm/cpsl-row.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-b188f201.js';
+import { r as registerInstance, h, H as Host } from './index-91db3414.js';
 
 const cpslRowCss = ":host{display:flex;flex-wrap:wrap}";
 const CpslRowStyle0 = cpslRowCss;
@@ -8,7 +8,7 @@ const CpslRow = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '557a2f245ec7a47aa32d26c27cd2d944d63311a3' }, h("slot", { key: 'e39a195e96e045812dfda0f1509cc6e05c6efab6' })));
+        return (h(Host, { key: '63ac746920b1acf41ea6083e67dd61c9b1f480f1' }, h("slot", { key: '35cf9026a0009abf96f990114afec3d509c81063' })));
     }
 };
 CpslRow.style = CpslRowStyle0;