@getflip/swirl-components 0.202.0 → 0.202.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/components.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2024-05-22T08:34:48",
2
+ "timestamp": "2024-05-22T10:13:31",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.18.1",
@@ -117,8 +117,10 @@ const SwirlModal = class {
117
117
  async open() {
118
118
  this.isOpen = true;
119
119
  this.modalOpen.emit();
120
- this.lockBodyScroll();
121
- this.determineScrollStatus();
120
+ setTimeout(() => {
121
+ this.lockBodyScroll();
122
+ this.determineScrollStatus();
123
+ });
122
124
  }
123
125
  /**
124
126
  * Close the modal. Pass `true` to force close even if the modal is not closable.
@@ -174,13 +176,13 @@ const SwirlModal = class {
174
176
  "modal--scrolled": this.scrolled,
175
177
  "modal--scrolled-down": this.scrolledDown,
176
178
  });
177
- return (index.h(index.Host, { key: 'd101cece24cb469e6300a88cda41a67281cd2b67' }, index.h("section", { key: 'ebad873d554eb02f4935d21d52e329320d31a47e', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, index.h("div", { key: 'bf4a0569609c57d8f13c98ea86dc2fa22bb608d8', class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: 'd8624f029c1a40a13159ec2f6eb244233a337b9b', class: "modal__body", style: {
179
+ return (index.h(index.Host, { key: 'bdaf0a414002e5fe8271cb0697f209a746113728' }, index.h("section", { key: 'd4b6fdca2fdac711fa33212025450b5e1d92577b', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, index.h("div", { key: '8c166fbbb3e267e124a378b6947dabcfb6625b5e', class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: '4559e3a79e991991654d7177d1e5533d2b5f91c8', class: "modal__body", style: {
178
180
  "--swirl-modal-max-height": this.maxHeight,
179
181
  "--swirl-modal-height": this.height,
180
182
  maxWidth: this.maxWidth,
181
- } }, index.h("header", { key: '1bd7f42348ca11ded0c28d5324b6f070949b44c9', class: "modal__custom-header" }, index.h("slot", { key: '39fbacbcd794a371b898943bce382fee3d86a44b', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (index.h("header", { key: 'c397f6bc837f3b8eb54615110f5938ed180cfb26', class: "modal__header" }, index.h("div", { key: '2a2624b81f447f14c4c02528a3cde361a9ce2dcb', class: "modal__header-bar" }, !this.hideCloseButton && (index.h("swirl-button", { key: 'eb1a57b60af155cfc640ef2ef0b6ec0e57889c88', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
183
+ } }, index.h("header", { key: '307c32e4f844096abcec1681743635a6f4a0e95c', class: "modal__custom-header" }, index.h("slot", { key: '7c5327e42c4319b94d5db64e3a61addebc879663', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (index.h("header", { key: '84880192185b7b00431eaa335e4469bb842db53c', class: "modal__header" }, index.h("div", { key: '45cc8d274f0f8d5180985adfb0af58c4be3c1a19', class: "modal__header-bar" }, !this.hideCloseButton && (index.h("swirl-button", { key: '4398cca8abe6662ce1e27629475ea071954a3d80', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
182
184
  ? "<swirl-icon-close></swirl-icon-close>"
183
- : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: '7d5e09b46ed9065e8d21830e4d7fa83687b0b911', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), index.h("div", { key: 'a2e87dc146c87c1f900c1692a3d00cc05691d032', class: "modal__content-container" }, index.h("div", { key: '413163c6bc7bd8057be1bb73e30f0db901d5d9c8', class: "modal__primary-content" }, index.h("div", { key: 'cd9db06581c8286137943e5a2f05d11bc7febe42', class: "modal__header-tools" }, index.h("slot", { key: '5a92044e76f842523e6e2e74413826d9d32180da', name: "header-tools" })), index.h("div", { key: 'f1eae6dde8e0cb56ec4dd5a92903a5f99738e4cf', class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, index.h("slot", { key: '22fe6f164c770c6b61b0c02f0aa8ce0bed9dbf49' }))), index.h("div", { key: '5bda225a1be3dc0e41a6fba093e430096ca372c3', class: "modal__secondary-content" }, index.h("slot", { key: '24bbcea293f3f849dfec59a00ba6c78d8d9adfa6', name: "secondary-content" }))), index.h("div", { key: '1d251bb36ac9267efaff5ebbb4dfbfeceae6b001', class: "modal__custom-footer" }, index.h("slot", { key: '64bac816af117d2c1ded2e3e2296e5dc3086f1eb', name: "custom-footer" })), showControls && (index.h("footer", { key: '84941235ca72a66ec1e8e880af177bf67d6264ba', class: "modal__controls" }, index.h("swirl-button-group", { key: 'f5e332e1831b8f168375673cc51f87fd56ef7f97', wrap: true }, this.secondaryActionLabel && (index.h("swirl-button", { key: '4c104649ec6bac6f17c1e57ea8b79762490c5da3', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: 'df096b033de95729cd0c12a70afc17b4afd5dbc0', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
185
+ : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: 'da444a88818f9c51a0961ff5e9255e24a28b21b2', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), index.h("div", { key: '5e2257006f2f690b26004f1d729b044b7bfd71e4', class: "modal__content-container" }, index.h("div", { key: '04936d630147439ef58791b39a30d534dfc16c6b', class: "modal__primary-content" }, index.h("div", { key: '3c638bfe1eeebbd766e035411f062a2a117f1b0a', class: "modal__header-tools" }, index.h("slot", { key: '645c3b8c10d1975cd663de2ae1e18ebdba6d9fcc', name: "header-tools" })), index.h("div", { key: '80b308e816d40b29a8bf2aa8923221c63713db38', class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, index.h("slot", { key: 'c8cdd431d561efecd6f7c335c40c175a8909335f' }))), index.h("div", { key: 'e5598533e84f1d80f099c02b6885fdafffbd1758', class: "modal__secondary-content" }, index.h("slot", { key: '30003e0f3c797449451f357e0ae277382e91743f', name: "secondary-content" }))), index.h("div", { key: '93d721e253953eace2e7334eafbe2bcbebe9cf2d', class: "modal__custom-footer" }, index.h("slot", { key: '381b95cb292ae7fdec5d172d498c4632f0d6e8b1', name: "custom-footer" })), showControls && (index.h("footer", { key: '0c9e13a301029114d3af75191c14976ee26f546a', class: "modal__controls" }, index.h("swirl-button-group", { key: '0467ea190a194bc11c5d322c6a5aeb359de2cb33', wrap: true }, this.secondaryActionLabel && (index.h("swirl-button", { key: '3bacbfdbfa6ffa771a1616c2e1f90dfda44c86c7', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: '3ea0528f01370a03a6896c5d532c6344098bd0c4', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
184
186
  }
185
187
  get el() { return index.getElement(this); }
186
188
  static get watchers() { return {
@@ -110,8 +110,10 @@ export class SwirlModal {
110
110
  async open() {
111
111
  this.isOpen = true;
112
112
  this.modalOpen.emit();
113
- this.lockBodyScroll();
114
- this.determineScrollStatus();
113
+ setTimeout(() => {
114
+ this.lockBodyScroll();
115
+ this.determineScrollStatus();
116
+ });
115
117
  }
116
118
  /**
117
119
  * Close the modal. Pass `true` to force close even if the modal is not closable.
@@ -167,13 +169,13 @@ export class SwirlModal {
167
169
  "modal--scrolled": this.scrolled,
168
170
  "modal--scrolled-down": this.scrolledDown,
169
171
  });
170
- return (h(Host, { key: 'd101cece24cb469e6300a88cda41a67281cd2b67' }, h("section", { key: 'ebad873d554eb02f4935d21d52e329320d31a47e', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { key: 'bf4a0569609c57d8f13c98ea86dc2fa22bb608d8', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'd8624f029c1a40a13159ec2f6eb244233a337b9b', class: "modal__body", style: {
172
+ return (h(Host, { key: 'bdaf0a414002e5fe8271cb0697f209a746113728' }, h("section", { key: 'd4b6fdca2fdac711fa33212025450b5e1d92577b', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { key: '8c166fbbb3e267e124a378b6947dabcfb6625b5e', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: '4559e3a79e991991654d7177d1e5533d2b5f91c8', class: "modal__body", style: {
171
173
  "--swirl-modal-max-height": this.maxHeight,
172
174
  "--swirl-modal-height": this.height,
173
175
  maxWidth: this.maxWidth,
174
- } }, h("header", { key: '1bd7f42348ca11ded0c28d5324b6f070949b44c9', class: "modal__custom-header" }, h("slot", { key: '39fbacbcd794a371b898943bce382fee3d86a44b', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: 'c397f6bc837f3b8eb54615110f5938ed180cfb26', class: "modal__header" }, h("div", { key: '2a2624b81f447f14c4c02528a3cde361a9ce2dcb', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: 'eb1a57b60af155cfc640ef2ef0b6ec0e57889c88', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
176
+ } }, h("header", { key: '307c32e4f844096abcec1681743635a6f4a0e95c', class: "modal__custom-header" }, h("slot", { key: '7c5327e42c4319b94d5db64e3a61addebc879663', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '84880192185b7b00431eaa335e4469bb842db53c', class: "modal__header" }, h("div", { key: '45cc8d274f0f8d5180985adfb0af58c4be3c1a19', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: '4398cca8abe6662ce1e27629475ea071954a3d80', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
175
177
  ? "<swirl-icon-close></swirl-icon-close>"
176
- : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '7d5e09b46ed9065e8d21830e4d7fa83687b0b911', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: 'a2e87dc146c87c1f900c1692a3d00cc05691d032', class: "modal__content-container" }, h("div", { key: '413163c6bc7bd8057be1bb73e30f0db901d5d9c8', class: "modal__primary-content" }, h("div", { key: 'cd9db06581c8286137943e5a2f05d11bc7febe42', class: "modal__header-tools" }, h("slot", { key: '5a92044e76f842523e6e2e74413826d9d32180da', name: "header-tools" })), h("div", { key: 'f1eae6dde8e0cb56ec4dd5a92903a5f99738e4cf', class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '22fe6f164c770c6b61b0c02f0aa8ce0bed9dbf49' }))), h("div", { key: '5bda225a1be3dc0e41a6fba093e430096ca372c3', class: "modal__secondary-content" }, h("slot", { key: '24bbcea293f3f849dfec59a00ba6c78d8d9adfa6', name: "secondary-content" }))), h("div", { key: '1d251bb36ac9267efaff5ebbb4dfbfeceae6b001', class: "modal__custom-footer" }, h("slot", { key: '64bac816af117d2c1ded2e3e2296e5dc3086f1eb', name: "custom-footer" })), showControls && (h("footer", { key: '84941235ca72a66ec1e8e880af177bf67d6264ba', class: "modal__controls" }, h("swirl-button-group", { key: 'f5e332e1831b8f168375673cc51f87fd56ef7f97', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '4c104649ec6bac6f17c1e57ea8b79762490c5da3', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: 'df096b033de95729cd0c12a70afc17b4afd5dbc0', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
178
+ : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), !this.hideLabel && (h("swirl-heading", { key: 'da444a88818f9c51a0961ff5e9255e24a28b21b2', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: '5e2257006f2f690b26004f1d729b044b7bfd71e4', class: "modal__content-container" }, h("div", { key: '04936d630147439ef58791b39a30d534dfc16c6b', class: "modal__primary-content" }, h("div", { key: '3c638bfe1eeebbd766e035411f062a2a117f1b0a', class: "modal__header-tools" }, h("slot", { key: '645c3b8c10d1975cd663de2ae1e18ebdba6d9fcc', name: "header-tools" })), h("div", { key: '80b308e816d40b29a8bf2aa8923221c63713db38', class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", { key: 'c8cdd431d561efecd6f7c335c40c175a8909335f' }))), h("div", { key: 'e5598533e84f1d80f099c02b6885fdafffbd1758', class: "modal__secondary-content" }, h("slot", { key: '30003e0f3c797449451f357e0ae277382e91743f', name: "secondary-content" }))), h("div", { key: '93d721e253953eace2e7334eafbe2bcbebe9cf2d', class: "modal__custom-footer" }, h("slot", { key: '381b95cb292ae7fdec5d172d498c4632f0d6e8b1', name: "custom-footer" })), showControls && (h("footer", { key: '0c9e13a301029114d3af75191c14976ee26f546a', class: "modal__controls" }, h("swirl-button-group", { key: '0467ea190a194bc11c5d322c6a5aeb359de2cb33', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '3bacbfdbfa6ffa771a1616c2e1f90dfda44c86c7', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '3ea0528f01370a03a6896c5d532c6344098bd0c4', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
177
179
  }
178
180
  static get is() { return "swirl-modal"; }
179
181
  static get originalStyleUrls() {