@getflip/swirl-components-react 0.221.0 → 0.222.0

package/dist/swirl-form-control.entry.4df08ed2.js

@@ -1,86 +0,0 @@
-import { r as d, h as o, H as m, g as h } from "./index.fc703b5d.js";
-import { c as p } from "./index-267776a4.6beb4f4b.js";
-import { a as b, b as u } from "./utils-9b747dd7.4c4c7dc0.js";
-import "react";
-import "react-dom";
-const w = `.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{--swirl-autocomplete-tags-margin-top:var(--s-space-4);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.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .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.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .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.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .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)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-base);--swirl-autocomplete-tags-margin-top:0;padding-top:calc(var(--s-line-height-sm) + var(--s-space-4))}.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--is-select) .form-control__label.sc-swirl-form-control{cursor:text}.form-control--label-position-outside.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--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--label-position-outside.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:calc(100% + var(--s-space-4));left:0;color:var(--s-text-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);transform:none;opacity:1}.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--label-position-outside.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{display:flex;align-items:center}}.form-control--label-position-outside.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control{display:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control{display:flex;margin-left:var(--s-space-4)}.form-control--label-position-outside.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control:hover{cursor:default}}.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__prefix.sc-swirl-form-control{border-color: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:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{right:var(--s-space-12);left:var(--s-space-12);transition:none;opacity:0}.form-control--inline.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--hide-label.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}.form-control--has-prefix.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{position:static}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__prefix.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--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-highlight);border-right-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-top-left-radius:0;border-bottom-left-radius:0}.form-control--has-prefix.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control{display:flex}.form-control__controls.sc-swirl-form-control{position:relative;display:flex;align-items:stretch}.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);text-align:start;white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.form-control__prefix.sc-swirl-form-control{z-index:1;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:center;align-items:center;border-top:var(--s-border-width-default) solid var(--s-border-strong);border-bottom:var(--s-border-width-default) solid var(--s-border-strong);border-left:var(--s-border-width-default) solid var(--s-border-strong);border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm);background-color:var(--s-surface-raised-default)}.form-control__prefix.sc-swirl-form-control-s>select{height:100%;margin-right:calc(-1 * var(--s-space-16));margin-left:calc(-1 * var(--s-space-16));padding-right:calc(var(--s-space-16) + 1.25rem);padding-left:var(--s-space-16);border:none;color:var(--s-text-default);background:url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 12.4579C9.88889 12.4579 9.78472 12.4404 9.6875 12.4054C9.59027 12.3709 9.5 12.312 9.41666 12.2287L5.5625 8.37453C5.40972 8.22175 5.33694 8.03064 5.34416 7.8012C5.35083 7.57231 5.43055 7.38148 5.58333 7.2287C5.73611 7.07592 5.93055 6.99953 6.16666 6.99953C6.40277 6.99953 6.59722 7.07592 6.75 7.2287L10 10.4787L13.2708 7.20787C13.4236 7.05509 13.6147 6.98203 13.8442 6.9887C14.0731 6.99592 14.2639 7.07592 14.4167 7.2287C14.5694 7.38148 14.6458 7.57592 14.6458 7.81203C14.6458 8.04814 14.5694 8.24259 14.4167 8.39537L10.5833 12.2287C10.5 12.312 10.4097 12.3709 10.3125 12.4054C10.2153 12.4404 10.1111 12.4579 10 12.4579Z" fill="%236E6E6E"/></svg>');background-color:transparent;background-repeat:no-repeat;background-position:right var(--s-space-8) center;font:inherit;line-height:var(--s-line-height-base);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-control__prefix.sc-swirl-form-control-s>select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__prefix.sc-swirl-form-control-s>select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.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)}.form-control__input.sc-swirl-form-control-s>[contenteditable]:focus{outline:none}.form-control__input.sc-swirl-form-control-s>[contenteditable]{width:100%;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__input.sc-swirl-form-control-s>[contenteditable]{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}`, v = w, _ = class {
-  constructor(t) {
-    d(this, t), this.descriptionId = `form-control-description-${Math.round(Math.random() * 1e5)}`, this.labelId = `form-control-label-${Math.round(Math.random() * 1e5)}`, this.listenToInputValueChanges = () => {
-      this.inputEl.addEventListener("valueChange", this.checkInputValue);
-    }, this.checkInputValue = () => {
-      var r;
-      this.inputValue = (r = this.inputEl) == null ? void 0 : r.value;
-    }, this.onFocusIn = () => {
-      this.hasFocus = !0;
-    }, this.onFocusOut = () => {
-      this.hasFocus = !1;
-    }, this.onKeyDown = (r) => {
-      r.key === "Tab" && setTimeout(() => {
-        b(u(), this.el) || (this.hasFocus = !1);
-      });
-    }, this.onLabelClick = () => {
-      Boolean(this.inputEl.getAttribute("contenteditable")) && this.inputEl.focus();
-    }, this.description = void 0, this.disabled = void 0, this.errorMessage = void 0, this.hideLabel = void 0, this.inline = void 0, this.invalid = void 0, this.label = void 0, this.labelPosition = "inside", this.tooltip = void 0, this.hasFocus = void 0, this.inputValue = void 0;
-  }
-  componentWillLoad() {
-    this.inputEl = this.el.children[0], this.associateDescriptionWithInputElement(), this.associateLabelWithInputElement(), this.setInputElementDisabledState(), this.setInputElementInlineState(), this.setInputElementInvalidState(), this.setInputElementLabel(), this.checkInputValue(), this.listenToInputValueChanges();
-  }
-  componentDidRender() {
-    this.checkInputValue();
-  }
-  associateDescriptionWithInputElement() {
-    !Boolean(this.description) || !Boolean(this.inputEl) || (Boolean(this.inputEl.getAttribute("contenteditable")) ? this.inputEl.setAttribute("aria-describedby", this.descriptionId) : this.inputEl.setAttribute("swirl-aria-describedby", this.descriptionId));
-  }
-  setInputElementDisabledState() {
-    !Boolean(this.inputEl) || (this.disabled ? this.inputEl.setAttribute("disabled", "true") : this.inputEl.removeAttribute("disabled"));
-  }
-  setInputElementInlineState() {
-    !Boolean(this.inputEl) || (this.inline || this.labelPosition === "outside" ? this.inputEl.setAttribute("inline", "true") : this.inputEl.removeAttribute("inline"));
-  }
-  setInputElementInvalidState() {
-    !Boolean(this.inputEl) || (this.invalid ? this.inputEl.setAttribute("invalid", "true") : this.inputEl.removeAttribute("invalid"));
-  }
-  setInputElementLabel() {
-    !Boolean(this.inputEl) || this.inputEl.setAttribute("label", this.label);
-  }
-  onWindowClick(t) {
-    if (!this.hasFocus)
-      return;
-    const r = t.target;
-    this.el.contains(r) || (t.stopPropagation(), this.hasFocus = !1);
-  }
-  associateLabelWithInputElement() {
-    !Boolean(this.inputEl.getAttribute("contenteditable")) || (this.inputEl.setAttribute("aria-labelledby", this.labelId), this.inputEl.setAttribute("aria-describedby", this.descriptionId));
-  }
-  render() {
-    const t = Boolean(this.errorMessage), r = Boolean(this.description) && !t, e = Boolean(this.inputEl.getAttribute("contenteditable")), l = Boolean(this.el.querySelector('[slot="prefix"]')), s = Array.isArray(this.inputValue) ? this.inputValue.length > 0 : Boolean(this.inputValue) || e && Boolean(this.inputEl.innerHTML), i = Boolean(this.inputEl.getAttribute("show-character-counter")), n = Boolean(this.inputEl.getAttribute("placeholder")), a = this.inputEl.tagName === "SWIRL-SELECT", c = p("form-control", `form-control--label-position-${this.labelPosition}`, {
-      "form-control--disabled": this.disabled,
-      "form-control--has-character-counter": i,
-      "form-control--has-focus": this.hasFocus,
-      "form-control--has-placeholder": n,
-      "form-control--has-prefix": l,
-      "form-control--has-value": s,
-      "form-control--hide-label": this.hideLabel,
-      "form-control--inline": this.inline,
-      "form-control--invalid": this.invalid,
-      "form-control--is-select": a
-    }), f = e ? "div" : "label";
-    return o(m, { key: "2f8517e4da6cb5645086bbb534b9ff05f9e2c944", onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, o("div", { key: "ec0d6515dbad497b3ce6271b403c89a80e208f5b", class: c, role: "group" }, o("span", { key: "f0d2032d28b9cf9d6391f7b6a3d35154a7162448", class: "form-control__controls" }, o("span", { key: "2328dde727ac0fe2d86e7e7100c80d5f1563ef3d", class: "form-control__prefix" }, o("slot", { key: "bb6f83667ab50fec147902659d7a2dfb5c44dbc4", name: "prefix" })), o(f, { key: "28c008c0eab8eff3294521a14d0d497559796062", class: "form-control__label", onClick: this.onLabelClick }, o("span", { key: "b65a5eb66eb04430ca26cbff202472f418bcd39f", class: "form-control__label-text", id: this.labelId }, this.label, this.tooltip && this.labelPosition === "outside" && o("span", { key: "ed6a3627c0d98dbff128a347fb9a20d2a0b82dbe", class: "form-control__tooltip" }, o("swirl-tooltip", { key: "68f83eab0c81ed5c20d072476aed87245ab51b1d", content: this.tooltip, positioning: "fixed", position: "top" }, o("swirl-icon-help", { key: "b5e209d73707c3c1a864d9687dc390e434b9de34", size: 16, tabindex: "0" })))), o("span", { key: "4bafa2778577c47bd882a8b30fda7565c3d1e3f3", class: "form-control__input" }, o("slot", { key: "3857d4ffeb0bc7683130e79e5d6ea72372eca2e7" })))), r && o("span", { key: "b599725e334cdca3c02451b95dafa45ff6c58812", class: "form-control__description", id: this.descriptionId }, this.description), t && o("span", { key: "5f6135c8d24bbc598a37dd3a3a0a1682d7a386fb", "aria-live": "polite", class: "form-control__error-message", id: this.descriptionId }, o("swirl-inline-error", { key: "be8e528485a079070764793a7bdf826aad11511e", message: this.errorMessage, size: "s" }))));
-  }
-  get el() {
-    return h(this);
-  }
-  static get watchers() {
-    return {
-      description: ["associateDescriptionWithInputElement"],
-      disabled: ["setInputElementDisabledState"],
-      inline: ["setInputElementInlineState"],
-      invalid: ["setInputElementInvalidState"],
-      label: ["setInputElementLabel"]
-    };
-  }
-};
-_.style = v;
-export {
-  _ as swirl_form_control
-};

package/dist/swirl-text-input.entry.cac95d6f.js

@@ -1,91 +0,0 @@
-import { r as d, c as n, h as i, H as h } from "./index.fc703b5d.js";
-import { c } from "./index-267776a4.6beb4f4b.js";
-import { g as x } from "./utils-9b747dd7.4c4c7dc0.js";
-import "react";
-import "react-dom";
-const w = '.sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-h *.sc-swirl-text-input{box-sizing:border-box}.text-input.sc-swirl-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.text-input--auto-grow.sc-swirl-text-input .text-input__input.sc-swirl-text-input{max-height:none}.text-input--clearable.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-swirl-text-input .text-input__input.sc-swirl-text-input{width:100%}.text-input--disabled.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{color:var(--s-text-disabled)}.text-input--has-suffix.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type="password"]){width:0.25rem;min-width:0.25rem}.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input{width:2rem;height:1.125rem;justify-content:center;background-color:var(--s-surface-raised-default)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:first-of-type{border-top-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:last-of-type{border-bottom-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:hover{background-color:var(--s-surface-raised-hovered)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-less.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-more.sc-swirl-text-input{width:1rem}.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:0}}.text-input--inline.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{top:calc(100% + var(--s-space-12) + var(--s-border-width-default));right:calc(-1 * var(--s-space-12));max-width:6rem}.text-input__input.sc-swirl-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-swirl-text-input:focus{outline:none}.text-input__input.sc-swirl-text-input:disabled{color:var(--s-text-disabled);background-color:transparent}.text-input__input.sc-swirl-text-input::-webkit-outer-spin-button,.text-input__input.sc-swirl-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type="number"].sc-swirl-text-input{-moz-appearance:textfield}.text-input__input.sc-swirl-text-input::-moz-placeholder{font-size:var(--swirl-text-input-placeholder-size)}.text-input__input.sc-swirl-text-input::placeholder{font-size:var(--swirl-text-input-placeholder-size)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--disable-dynamic-width.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type="password"]){width:100%;min-width:0}.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-swirl-text-input:focus:not(:focus-visible),.text-input__password-toggle.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__clear-button.sc-swirl-text-input:focus-visible,.text-input__password-toggle.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{top:-0.625rem}}.text-input__stepper.sc-swirl-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__stepper.sc-swirl-text-input{top:-1.25rem}}.text-input__step-button.sc-swirl-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__step-button.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-swirl-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__character-counter.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input__prefix.sc-swirl-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-swirl-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}', b = w, f = class {
-  constructor(e) {
-    d(this, e), this.inputBlur = n(this, "inputBlur", 7), this.inputFocus = n(this, "inputFocus", 7), this.valueChange = n(this, "valueChange", 7), this.desktopMediaQuery = x(), this.desktopMediaQueryHandler = (t) => {
-      this.updateIconSize(t.matches);
-    }, this.clear = () => {
-      this.inputEl.value = "", this.value = "", this.valueChange.emit(""), this.inputEl.focus();
-    }, this.onChange = (t) => {
-      const s = t.target;
-      this.value = s.value;
-    }, this.onBlur = (t) => {
-      this.inputBlur.emit(t);
-    }, this.onFocus = (t) => {
-      this.inputFocus.emit(t), this.handleAutoSelect(t);
-    }, this.onInput = (t) => {
-      this.onChange(t);
-    }, this.onKeyPress = (t) => {
-      this.type === "number" && ["+", "-", "e"].includes(t.key) && t.preventDefault();
-    }, this.decreaseValue = () => {
-      if (this.type !== "number")
-        return;
-      const t = this.step || 1;
-      let s = this.inputEl.valueAsNumber;
-      isNaN(this.inputEl.valueAsNumber) && (s = this.min !== void 0 ? this.min + 1 : 1), this.value = String(Math.max(this.min || -1 / 0, s - t)), this.valueChange.emit(this.value);
-    }, this.increaseValue = () => {
-      if (this.type !== "number")
-        return;
-      const t = this.step || 1;
-      let s = this.inputEl.valueAsNumber;
-      isNaN(this.inputEl.valueAsNumber) && (s = this.min !== void 0 ? this.min - 1 : -1), this.value = String(Math.min(this.max || 1 / 0, s + t)), this.valueChange.emit(this.value);
-    }, this.togglePassword = () => {
-      this.type === "password" && (this.showPassword = !this.showPassword);
-    }, this.autoComplete = "on", this.autoFocus = void 0, this.autoGrow = void 0, this.autoSelect = void 0, this.clearable = void 0, this.clearButtonLabel = "Clear input", this.disabled = void 0, this.disableDynamicWidth = void 0, this.swirlAriaAutocomplete = void 0, this.swirlAriaControls = void 0, this.swirlAriaDescribedby = void 0, this.swirlAriaExpanded = void 0, this.swirlRole = void 0, this.inline = void 0, this.invalid = void 0, this.maxLength = void 0, this.max = void 0, this.min = void 0, this.mode = void 0, this.placeholder = void 0, this.prefixLabel = void 0, this.required = void 0, this.rows = 1, this.showCharacterCounter = void 0, this.spellCheck = void 0, this.suffixLabel = void 0, this.step = void 0, this.passwordToggleLabel = "Toggle password display", this.type = "text", this.value = void 0, this.iconSize = 24, this.showPassword = !1;
-  }
-  componentDidLoad() {
-    this.updateIconSize(this.desktopMediaQuery.matches), this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler, this.autoFocus && setTimeout(() => {
-      this.inputEl.focus();
-    });
-  }
-  componentDidRender() {
-    this.adjustInputSize();
-  }
-  disconnectedCallback() {
-    var e, t;
-    (t = (e = this.desktopMediaQuery).removeEventListener) == null || t.call(e, "change", this.desktopMediaQueryHandler);
-  }
-  async blurInput() {
-    this.inputEl.blur();
-  }
-  async focusInput() {
-    this.inputEl.focus();
-  }
-  watchValue(e, t) {
-    e !== t && this.valueChange.emit(e);
-  }
-  updateIconSize(e) {
-    this.iconSize = e ? 20 : 24;
-  }
-  adjustInputSize() {
-    (this.rows > 1 || this.autoGrow) && (this.inputEl.style.width = "", this.inputEl.style.height = "", this.inputEl.style.height = Boolean(this.inputEl.scrollHeight) ? this.inputEl.scrollHeight / 16 + "rem" : ""), this.rows === 1 && !this.autoGrow && (this.inputEl.style.height = "", this.inputEl.style.width = "", this.suffixLabel && this.type !== "password" && !this.disableDynamicWidth && !Boolean(this.placeholder) && (this.inputEl.style.width = this.inputEl.scrollWidth / 16 + "rem"));
-  }
-  handleAutoSelect(e) {
-    !this.autoSelect || e.target.select();
-  }
-  render() {
-    var r;
-    const e = this.rows === 1 && !this.autoGrow ? "input" : "textarea", t = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, s = this.type === "number" && !this.disabled, a = this.type === "password" && !this.disabled, u = this.clearable && !this.disabled && Boolean(this.value) && !a && !s && !this.showCharacterCounter, l = this.type === "password" && this.showPassword ? "text" : this.type, o = c("text-input", `text-input--type-${this.type}`, {
-      "text-input--auto-grow": this.autoGrow,
-      "text-input--clearable": this.clearable,
-      "text-input--disabled": this.disabled,
-      "text-input--disable-dynamic-width": this.disableDynamicWidth || Boolean(this.placeholder),
-      "text-input--has-suffix": Boolean(this.suffixLabel),
-      "text-input--inline": this.inline,
-      "text-input--show-password": this.type === "password" && this.showPassword
-    });
-    return i(h, { key: "c28a27d2de16b8bab0bcbdedeb4577cc3c5926f1" }, i("div", { key: "de1f6b38914d6dc549145a3a37730689429c9647", class: o }, this.prefixLabel && i("span", { key: "188008d2d73f51127abe4de37306c82110344b29", class: "text-input__prefix" }, this.prefixLabel), i(e, { key: "2264633163429eb618346241bbc99384a62fd4bb", "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": t, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : void 0, min: this.type === "number" ? this.min : void 0, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: Boolean(this.suffixLabel) ? void 0 : this.placeholder, ref: (p) => this.inputEl = p, required: this.required, role: this.swirlRole, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : void 0, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : void 0, type: l, value: this.value }, this.rows > 1 && this.value), this.suffixLabel && i("span", { key: "5c226c6d35fe35b226c08182bce3ee479584d3bc", class: "text-input__suffix" }, this.suffixLabel), u && i("button", { key: "0825d6c0aa246d8ec97d0f47ca7a33e7437c69fb", "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, i("swirl-icon-cancel", { key: "cb6d259a99c490949d946014aaccb9b92dd18a45", size: this.iconSize })), a && i("button", { key: "5638f04a71fac455dc1a2dc9aff4a19ad55bf9b3", "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? i("swirl-icon-visibility-off", { size: this.iconSize }) : i("swirl-icon-visibility", { size: this.iconSize })), s && i("span", { key: "6f8f117c6690ea375472c86befa0bc82d5c1b04d", class: "text-input__stepper" }, i("button", { key: "38ddc8bcc00c22f54a4f60195420179bfce8916d", "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, i("swirl-icon-expand-less", { key: "d7445a23fa97ec57672d65f1334be7ac74368347", size: this.iconSize })), i("button", { key: "0295b7bd2bdcb0b3afb431e35c714c01d305eaa5", "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, i("swirl-icon-expand-more", { key: "ad77b5281090dcf3dbbdc2adaf2147f937be7273", size: this.iconSize }))), this.showCharacterCounter && i("span", { key: "c3cdea8f4d70aba88baba76c6c74c39ca83ca367", class: "text-input__character-counter" }, ((r = this.value) == null ? void 0 : r.length) || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")));
-  }
-  static get watchers() {
-    return {
-      value: ["watchValue"]
-    };
-  }
-};
-f.style = b;
-export {
-  f as swirl_text_input
-};