npm - @getflip/swirl-components - Versions diffs - 0.12.0 → 0.13.0 - Mend

@getflip/swirl-components 0.12.0 → 0.13.0

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.

Files changed (392) hide show

package/dist/esm/swirl-form-control.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-5a3b2828.js';
-import { c as classnames } from './index-c3028f7d.js';
-import './_commonjsHelpers-44457d8d.js';
+import { c as classnames } from './index-47862d62.js';
+import './_commonjsHelpers-10467d11.js';
-const swirlFormControlCss = ".sc-swirl-form-control-h{display:block;width:100%}.sc-swirl-form-control-h *.sc-swirl-form-control{box-sizing:border-box}.form-control.sc-swirl-form-control{display:block;width:100%;line-height:var(--s-line-height-sm)}.form-control.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-highlight);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select) .form-control__input.sc-swirl-form-control{overflow:hidden;max-height:0}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select) .form-control__label-text.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .select__label.sc-swirl-form-control{overflow:hidden;max-height:0;pointer-events:none}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control--invalid.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--disabled.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-disabled);color:var(--s-text-disabled)}.form-control--disabled.sc-swirl-form-control .form-control__description.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control__label.sc-swirl-form-control{position:relative;display:flex;width:100%;min-height:4.375rem;padding:calc(var(--s-space-12) + 1.25rem) var(--s-space-16) var(--s-space-12);justify-content:center;border:var(--s-border-width-default) solid var(--s-border-strong);border-radius:var(--s-border-radius-sm);color:var(--s-text-subdued);flex-direction:column;gap:var(--s-space-2)}.form-control__label-text.sc-swirl-form-control{position:absolute;right:var(--s-space-16);bottom:calc(100% - 1.25rem - var(--s-space-12));left:var(--s-space-16);overflow:hidden;font-size:var(--s-font-size-sm);white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.form-control__description.sc-swirl-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}.form-control__error-message.sc-swirl-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4)}";
+const swirlFormControlCss = ".sc-swirl-form-control-h{display:block;width:100%}.sc-swirl-form-control-h *.sc-swirl-form-control{box-sizing:border-box}.form-control.sc-swirl-form-control{display:block;width:100%;line-height:var(--s-line-height-sm)}.form-control.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-highlight);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select) .form-control__input.sc-swirl-form-control{overflow:hidden;max-height:0}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select) .form-control__label-text.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .select__label.sc-swirl-form-control{overflow:hidden;max-height:0;pointer-events:none}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control--invalid.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--disabled.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-disabled);color:var(--s-text-disabled)}.form-control--disabled.sc-swirl-form-control .form-control__description.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--inline.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{right:var(--s-space-12);left:var(--s-space-12);transition:none;opacity:0}.form-control__label.sc-swirl-form-control{position:relative;display:flex;width:100%;min-height:4.375rem;padding:calc(var(--s-space-12) + 1.25rem) var(--s-space-16) var(--s-space-12);justify-content:center;border:var(--s-border-width-default) solid var(--s-border-strong);border-radius:var(--s-border-radius-sm);color:var(--s-text-subdued);flex-direction:column;gap:var(--s-space-2)}.form-control__label-text.sc-swirl-form-control{position:absolute;right:var(--s-space-16);bottom:calc(100% - 1.25rem - var(--s-space-12));left:var(--s-space-16);overflow:hidden;font-size:var(--s-font-size-sm);white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.form-control__description.sc-swirl-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}.form-control__error-message.sc-swirl-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4)}";
 const SwirlFormControl = class {
   constructor(hostRef) {
@@ -29,6 +29,7 @@ const SwirlFormControl = class {
     this.inputEl = this.el.children[0];
     this.associateDescriptionWithInputElement();
     this.setInputElementDisabledState();
+    this.setInputElementInlineState();
     this.setInputElementInvalidState();
     this.setInputElementLabel();
     this.checkInputValue();
@@ -51,6 +52,17 @@ const SwirlFormControl = class {
       this.inputEl.removeAttribute("disabled");
     }
   }
+  setInputElementInlineState() {
+    if (!Boolean(this.inputEl)) {
+      return;
+    }
+    if (this.inline) {
+      this.inputEl.setAttribute("inline", "true");
+    }
+    else {
+      this.inputEl.removeAttribute("inline");
+    }
+  }
   setInputElementInvalidState() {
     if (!Boolean(this.inputEl)) {
       return;
@@ -87,6 +99,7 @@ const SwirlFormControl = class {
     const isSelect = this.inputEl.tagName === "SWIRL-SELECT";
     const className = classnames("form-control", {
       "form-control--disabled": this.disabled,
+      "form-control--inline": this.inline,
       "form-control--has-focus": this.hasFocus,
       "form-control--has-value": hasValue,
       "form-control--invalid": this.invalid,
@@ -98,6 +111,7 @@ const SwirlFormControl = class {
   static get watchers() { return {
     "description": ["associateDescriptionWithInputElement"],
     "disabled": ["setInputElementDisabledState"],
+    "inline": ["setInputElementInlineState"],
     "invalid": ["setInputElementInvalidState"],
     "label": ["setInputElementLabel"]
   }; }

package/dist/esm/swirl-form-group.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-5a3b2828.js';
-import { c as classnames } from './index-c3028f7d.js';
-import './_commonjsHelpers-44457d8d.js';
+import { c as classnames } from './index-47862d62.js';
+import './_commonjsHelpers-10467d11.js';
 const swirlFormGroupCss = ".sc-swirl-form-group-h{display:block;width:100%}.sc-swirl-form-group-h *.sc-swirl-form-group{box-sizing:border-box}.form-group.sc-swirl-form-group{display:flex;flex-direction:column;gap:var(--s-space-16)}@media (min-width: 768px){.form-group.sc-swirl-form-group{gap:var(--s-space-24)}}.form-group--orientation-horizontal.sc-swirl-form-group{gap:var(--s-space-16)}@media (min-width: 768px){.form-group--orientation-horizontal.sc-swirl-form-group{flex-direction:row}}";

package/dist/esm/swirl-heading.entry.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { r as registerInstance, h, H as Host } from './index-5a3b2828.js';
-import { c as classnames } from './index-c3028f7d.js';
-import './_commonjsHelpers-44457d8d.js';
+import { c as classnames } from './index-47862d62.js';
+import { b as balancetext } from './balancetext-31f1ec68.js';
+import './_commonjsHelpers-10467d11.js';
 const swirlHeadingCss = ".sc-swirl-heading-h{display:block;width:100%}.sc-swirl-heading-h *.sc-swirl-heading{box-sizing:border-box}.heading.sc-swirl-heading{display:block;width:100%;margin:0;padding:0;text-align:start}.heading--align-start.sc-swirl-heading{text-align:start}.heading--align-center.sc-swirl-heading{text-align:center}.heading--align-end.sc-swirl-heading{text-align:end}.heading--level-1.sc-swirl-heading{font-size:var(--s-font-size-2xl);font-weight:var(--s-font-weight-bold);line-height:var(--s-line-height-2xl);letter-spacing:var(--s-letter-spacing-tight)}.heading--level-2.sc-swirl-heading{font-size:var(--s-font-size-xl);font-weight:var(--s-font-weight-bold);line-height:var(--s-line-height-xl)}.heading--level-3.sc-swirl-heading{font-size:var(--s-font-size-lg);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-lg)}.heading--level-4.sc-swirl-heading,.heading--level-5.sc-swirl-heading,.heading--level-6.sc-swirl-heading{font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-base)}";
@@ -8,12 +9,25 @@ const SwirlHeading = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.align = "start";
+    this.balance = true;
     this.level = 1;
   }
+  componentDidRender() {
+    this.rebalance();
+  }
+  onWindowResize() {
+    this.rebalance();
+  }
+  rebalance() {
+    if (!this.balance || !Boolean(this.headingEl)) {
+      return;
+    }
+    balancetext(this.headingEl);
+  }
   render() {
     const Tag = this.as || `h${this.level}`;
     const className = classnames("heading", `heading--align-${this.align}`, `heading--level-${this.level}`);
-    return (h(Host, null, h(Tag, { class: className, id: this.headingId }, this.text)));
+    return (h(Host, null, h(Tag, { class: className, id: this.headingId, ref: (el) => (this.headingEl = el) }, this.text)));
   }
 };
 SwirlHeading.style = swirlHeadingCss;

package/dist/esm/swirl-icon-add-photo.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, F as Fragment } from './index-5a3b2828.js';
-import { c as classnames } from './index-c3028f7d.js';
-import './_commonjsHelpers-44457d8d.js';
+import { c as classnames } from './index-47862d62.js';
+import './_commonjsHelpers-10467d11.js';
 const swirlIconCss = ":host{display:inline-flex}";

package/dist/esm/swirl-icon-add_4.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, F as Fragment } from './index-5a3b2828.js';
-import { c as classnames } from './index-c3028f7d.js';
-import './_commonjsHelpers-44457d8d.js';
+import { c as classnames } from './index-47862d62.js';
+import './_commonjsHelpers-10467d11.js';
 const swirlIconCss$3 = ":host{display:inline-flex}";

package/dist/esm/swirl-icon-admin-panel-settings.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, F as Fragment } from './index-5a3b2828.js';
-import { c as classnames } from './index-c3028f7d.js';
-import './_commonjsHelpers-44457d8d.js';
+import { c as classnames } from './index-47862d62.js';
+import './_commonjsHelpers-10467d11.js';
 const swirlIconCss = ":host{display:inline-flex}";

package/dist/esm/swirl-icon-arrow-back.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, F as Fragment } from './index-5a3b2828.js';
-import { c as classnames } from './index-c3028f7d.js';
-import './_commonjsHelpers-44457d8d.js';
+import { c as classnames } from './index-47862d62.js';
+import './_commonjsHelpers-10467d11.js';
 const swirlIconCss = ":host{display:inline-flex}";

package/dist/esm/swirl-icon-arrow-downward_2.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, F as Fragment } from './index-5a3b2828.js';
-import { c as classnames } from './index-c3028f7d.js';
-import './_commonjsHelpers-44457d8d.js';
+import { c as classnames } from './index-47862d62.js';
+import './_commonjsHelpers-10467d11.js';
 const swirlIconCss$1 = ":host{display:inline-flex}";

package/dist/esm/swirl-icon-arrow-forward.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, F as Fragment } from './index-5a3b2828.js';
-import { c as classnames } from './index-c3028f7d.js';
-import './_commonjsHelpers-44457d8d.js';
+import { c as classnames } from './index-47862d62.js';
+import './_commonjsHelpers-10467d11.js';
 const swirlIconCss = ":host{display:inline-flex}";

package/dist/esm/swirl-icon-arrow-left_3.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, F as Fragment } from './index-5a3b2828.js';
-import { c as classnames } from './index-c3028f7d.js';
-import './_commonjsHelpers-44457d8d.js';
+import { c as classnames } from './index-47862d62.js';
+import './_commonjsHelpers-10467d11.js';
 const swirlIconCss$2 = ":host{display:inline-flex}";

package/dist/esm/swirl-icon-arrow-right-small.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, F as Fragment } from './index-5a3b2828.js';
-import { c as classnames } from './index-c3028f7d.js';
-import './_commonjsHelpers-44457d8d.js';
+import { c as classnames } from './index-47862d62.js';
+import './_commonjsHelpers-10467d11.js';
 const swirlIconCss = ":host{display:inline-flex}";

package/dist/esm/swirl-icon-attachment.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, F as Fragment } from './index-5a3b2828.js';
-import { c as classnames } from './index-c3028f7d.js';
-import './_commonjsHelpers-44457d8d.js';
+import { c as classnames } from './index-47862d62.js';
+import './_commonjsHelpers-10467d11.js';
 const swirlIconCss = ":host{display:inline-flex}";

package/dist/esm/swirl-icon-block.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, F as Fragment } from './index-5a3b2828.js';
-import { c as classnames } from './index-c3028f7d.js';
-import './_commonjsHelpers-44457d8d.js';
+import { c as classnames } from './index-47862d62.js';
+import './_commonjsHelpers-10467d11.js';
 const swirlIconCss = ":host{display:inline-flex}";

package/dist/esm/swirl-icon-cancel_4.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, F as Fragment } from './index-5a3b2828.js';
-import { c as classnames } from './index-c3028f7d.js';
-import './_commonjsHelpers-44457d8d.js';
+import { c as classnames } from './index-47862d62.js';
+import './_commonjsHelpers-10467d11.js';
 const swirlIconCss$3 = ":host{display:inline-flex}";

package/dist/esm/swirl-icon-chat-bubble.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, F as Fragment } from './index-5a3b2828.js';
-import { c as classnames } from './index-c3028f7d.js';
-import './_commonjsHelpers-44457d8d.js';
+import { c as classnames } from './index-47862d62.js';
+import './_commonjsHelpers-10467d11.js';
 const swirlIconCss = ":host{display:inline-flex}";

package/dist/esm/swirl-icon-chats-filled.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, F as Fragment } from './index-5a3b2828.js';
-import { c as classnames } from './index-c3028f7d.js';
-import './_commonjsHelpers-44457d8d.js';
+import { c as classnames } from './index-47862d62.js';
+import './_commonjsHelpers-10467d11.js';
 const swirlIconCss = ":host{display:inline-flex}";

package/dist/esm/swirl-icon-chats-outlined.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, F as Fragment } from './index-5a3b2828.js';
-import { c as classnames } from './index-c3028f7d.js';
-import './_commonjsHelpers-44457d8d.js';
+import { c as classnames } from './index-47862d62.js';
+import './_commonjsHelpers-10467d11.js';
 const swirlIconCss = ":host{display:inline-flex}";

package/dist/esm/swirl-icon-check-circle.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, F as Fragment } from './index-5a3b2828.js';
-import { c as classnames } from './index-c3028f7d.js';
-import './_commonjsHelpers-44457d8d.js';
+import { c as classnames } from './index-47862d62.js';
+import './_commonjsHelpers-10467d11.js';
 const swirlIconCss = ":host{display:inline-flex}";