@getflip/swirl-components 0.87.0 → 0.87.2

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-08-22T13:59:57",
+  "timestamp": "2023-08-23T13:55:31",
   "compiler": {
     "name": "@stencil/core",
     "version": "3.3.1",

package/dist/cjs/swirl-autocomplete.cjs.entry.js

@@ -7,7 +7,7 @@ const floatingUi_dom_esm = require('./floating-ui.dom.esm-39236b6a.js');
 const index$1 = require('./index-2ddd0598.js');
 const utils = require('./utils-c00c09b9.js');
 
-const swirlAutocompleteCss = ".sc-swirl-autocomplete-h{display:block}.sc-swirl-autocomplete-h *.sc-swirl-autocomplete{box-sizing:border-box}.autocomplete--inactive.sc-swirl-autocomplete .autocomplete__listbox-container.sc-swirl-autocomplete{display:none}.autocomplete__listbox-container.sc-swirl-autocomplete{position:fixed;z-index:var(--s-z-40);overflow:hidden;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface-overlay-default);animation:autocomplete-enter 0.1s;box-shadow:var(--s-shadow-level-1)}.autocomplete__listbox-container.sc-swirl-autocomplete:empty{display:none}.autocomplete__spinner.sc-swirl-autocomplete{display:flex;padding:var(--s-space-16);justify-content:center;align-items:center}.autocomplete__multi-select-tags.sc-swirl-autocomplete{margin-bottom:var(--s-space-4);margin-top:var(--swirl-autocomplete-tags-margin-top)}@keyframes autocomplete-enter{from{opacity:0}to{opacity:1}}";
+const swirlAutocompleteCss = ".sc-swirl-autocomplete-h{display:block}.sc-swirl-autocomplete-h *.sc-swirl-autocomplete{box-sizing:border-box}.autocomplete--inactive.sc-swirl-autocomplete .autocomplete__listbox-container.sc-swirl-autocomplete{display:none}.autocomplete__listbox-container.sc-swirl-autocomplete{position:fixed;z-index:var(--s-z-40);overflow-x:hidden;overflow-y:auto;max-height:18rem;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface-overlay-default);animation:autocomplete-enter 0.1s;box-shadow:var(--s-shadow-level-1)}.autocomplete__listbox-container.sc-swirl-autocomplete:empty{display:none}.autocomplete__spinner.sc-swirl-autocomplete{display:flex;padding:var(--s-space-16);justify-content:center;align-items:center}.autocomplete__multi-select-tags.sc-swirl-autocomplete{margin-top:var(--swirl-autocomplete-tags-margin-top);margin-bottom:var(--s-space-4)}@keyframes autocomplete-enter{from{opacity:0}to{opacity:1}}";
 
 const SwirlAutocomplete = class {
   constructor(hostRef) {

package/dist/cjs/swirl-button.cjs.entry.js

@@ -39,11 +39,15 @@ const SwirlButton = class {
   }
   componentDidLoad() {
     this.forceIconProps(this.desktopMediaQuery.matches);
+    this.updateFormAttribute();
     this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   componentDidRender() {
     this.forceIconProps(this.desktopMediaQuery.matches);
   }
+  watchFormProp() {
+    this.updateFormAttribute();
+  }
   disconnectedCallback() {
     this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
   }
@@ -63,6 +67,17 @@ const SwirlButton = class {
     }
     return undefined;
   }
+  updateFormAttribute() {
+    // Workaround: form attribute cannot be set via Stencil JSX
+    // https://github.com/ionic-team/stencil/issues/2703
+    const isLink = Boolean(this.href);
+    if (isLink || !Boolean(this.form)) {
+      this.buttonEl?.removeAttribute("form");
+    }
+    else {
+      this.buttonEl?.setAttribute("form", this.form);
+    }
+  }
   render() {
     const hideLabel = (this.hideLabel && Boolean(this.icon)) ||
       (this.variant === "floating" && this.intent === "default");
@@ -73,8 +88,12 @@ const SwirlButton = class {
       "button--pill": this.pill,
     });
     const Tag = isLink ? "a" : "button";
-    return (index.h(index.Host, { style: { pointerEvents: this.disabled ? "none" : "" } }, index.h(Tag, { "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value }, this.icon && (index.h("span", { class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !hideLabel && index.h("span", { class: "button__label" }, this.label))));
+    return (index.h(index.Host, { style: { pointerEvents: this.disabled ? "none" : "" } }, index.h(Tag, { "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value }, this.icon && (index.h("span", { class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !hideLabel && index.h("span", { class: "button__label" }, this.label))));
   }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "form": ["watchFormProp"]
+  }; }
 };
 SwirlButton.style = swirlButtonCss;