@getflip/swirl-components-react 0.2.1 → 0.4.0

package/dist/flip-option-list.entry.32d7928a.js

@@ -1,95 +0,0 @@
-import { r as o, c, h as l, H as h, g as n } from "./index.b70d4c92.js";
-import { q as u } from "./utils-b46bcd4f.79126bb2.js";
-import "react";
-import "react-dom";
-const d = ":host{display:block}:host *{box-sizing:border-box}", r = class {
-  constructor(t) {
-    o(this, t), this.valueChange = c(this, "valueChange", 7), this.value = [], this.onFocus = () => {
-      this.focusItem(0);
-    }, this.onClick = (e) => {
-      const s = e.target, i = s == null ? void 0 : s.closest("flip-option-list-item");
-      !Boolean(i) || this.selectItem(this.items.findIndex((a) => a.value === i.value));
-    }, this.onKeyDown = (e) => {
-      e.code === "ArrowDown" ? (e.preventDefault(), this.focusNextItem()) : e.code === "ArrowUp" ? (e.preventDefault(), this.focusPreviousItem()) : e.code === "Space" ? (e.preventDefault(), this.selectFocusedItem()) : e.code === "Home" ? (e.preventDefault(), this.focusItem(0)) : e.code === "End" ? (e.preventDefault(), this.focusItem(this.items.length - 1)) : e.code === "KeyA" && (e.metaKey || e.ctrlKey) && this.multiSelect && (e.preventDefault(), this.selectAllItems());
-    };
-  }
-  componentDidLoad() {
-    this.items = u(this.el, "flip-option-list-item"), this.setItemDisabledState(), this.setItemContext(), this.syncItemsWithValue();
-  }
-  watchDisabled() {
-    this.setItemDisabledState();
-  }
-  watchMultiSelect() {
-    this.setItemContext();
-  }
-  watchValue() {
-    this.syncItemsWithValue();
-  }
-  setItemDisabledState() {
-    this.items.forEach((t) => t.disabled = this.disabled);
-  }
-  setItemContext() {
-    this.multiSelect ? this.items.forEach((t) => t.context = "multi-select") : (this.items.forEach((t) => t.context = "single-select"), this.value.length > 1 && this.updateValue([this.value[0]]));
-  }
-  selectItem(t) {
-    if (this.disabled)
-      return;
-    const e = this.items[t], s = this.value.includes(e.value);
-    this.multiSelect || (this.value = []), s ? this.updateValue(this.value.filter((i) => i !== e.value)) : this.updateValue([...this.value, e.value]);
-  }
-  updateValue(t) {
-    this.value = t, this.valueChange.emit(this.value);
-  }
-  selectFocusedItem() {
-    this.disabled || this.getActiveItemIndex() === -1 || this.selectItem(this.getActiveItemIndex());
-  }
-  selectAllItems() {
-    if (this.disabled)
-      return;
-    this.items.every((e) => this.value.includes(e.value)) ? this.updateValue([]) : this.updateValue(this.items.map((e) => e.value));
-  }
-  syncItemsWithValue() {
-    this.items.forEach((t) => t.selected = this.value.includes(t.value));
-  }
-  focusItem(t) {
-    if (this.disabled)
-      return;
-    this.items.forEach((s) => s.shadowRoot.children[0].removeAttribute("tabIndex"));
-    const e = this.items[t].shadowRoot.children[0];
-    !Boolean(e) || (e.setAttribute("tabIndex", "0"), e.focus());
-  }
-  focusNextItem() {
-    if (this.disabled)
-      return;
-    const t = this.getActiveItemIndex(), e = Math.min(t + 1, this.items.length - 1);
-    this.focusItem(e);
-  }
-  focusPreviousItem() {
-    const t = this.getActiveItemIndex(), e = Math.max(t - 1, 0);
-    this.focusItem(e);
-  }
-  getActiveItemIndex() {
-    return this.items.map((t) => t.shadowRoot.children[0]).findIndex((t) => {
-      var e, s;
-      return t === document.activeElement || t === ((s = (e = document.activeElement) === null || e === void 0 ? void 0 : e.shadowRoot) === null || s === void 0 ? void 0 : s.querySelector('[role="option"]'));
-    });
-  }
-  render() {
-    const t = this.multiSelect ? "true" : void 0, e = this.disabled ? -1 : 0;
-    return l(h, null, l("div", { "aria-label": this.label, "aria-multiselectable": t, class: "option-list", onClick: this.onClick, onFocus: this.onFocus, onKeyDown: this.onKeyDown, role: "listbox", tabIndex: e }, l("slot", null)));
-  }
-  get el() {
-    return n(this);
-  }
-  static get watchers() {
-    return {
-      disabled: ["watchDisabled"],
-      multiSelect: ["watchMultiSelect"],
-      value: ["watchValue"]
-    };
-  }
-};
-r.style = d;
-export {
-  r as flip_option_list
-};

package/dist/flip-resource-list-item.entry.d9efc26d.js

@@ -1,41 +0,0 @@
-import { r as n, c as d, h as t, H as u, g as h } from "./index.b70d4c92.js";
-import { c as m } from "./index-6d2e18c6.289636d4.js";
-import "react";
-import "react-dom";
-import "./_commonjsHelpers-44457d8d.ba94af77.js";
-const b = ':host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-item{position:relative;width:100%}.resource-list-item--checked .resource-list-item__checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--has-menu .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-12))}@media (--from-tablet){.resource-list-item--selectable .resource-list-item__content{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (--from-tablet){.resource-list-item--selectable .resource-list-item__label-container{padding-right:var(--s-space-16)}}.resource-list-item--hide-divider .resource-list-item__label-container:after{display:none}.resource-list-item__content{--flip-avatar-group-border-color:var(--s-background-default);--flip-badge-border-color:var(--s-background-default);display:flex;width:100%;padding-top:var(--s-space-12);padding-right:0;padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-background-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;text-decoration:none;cursor:pointer;gap:var(--s-space-12)}.resource-list-item__content:hover:not(:disabled){background-color:var(--s-background-hovered)}.resource-list-item__content:hover:not(:disabled) .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-hovered);--flip-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:active:not(:disabled){background-color:var(--s-background-pressed)}.resource-list-item__content:active:not(:disabled) .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-pressed);--flip-badge-border-color:var(--s-background-pressed)}.resource-list-item__content:focus{background-color:var(--s-background-hovered);outline:none}.resource-list-item__content:focus .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-hovered);--flip-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:disabled{color:var(--s-text-disabled);background-color:var(--s-background-default);cursor:default}.resource-list-item__content:disabled .resource-list-item__description{color:var(--s-text-disabled)}.resource-list-item__media{display:inline-flex}.resource-list-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-item__label-container:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:""}.resource-list-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__description{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__checkbox{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.25rem;height:1.25rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%)}@media (--from-tablet){.resource-list-item__checkbox{right:auto;left:var(--s-space-16)}}.resource-list-item__checkbox-icon{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon>*::part(icon){width:1.0625rem;height:1.0625rem}.resource-list-item__meta{position:absolute;top:calc(var(--s-space-12) + var(--s-space-4));right:var(--s-space-16);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}', p = class {
-  constructor(e) {
-    n(this, e), this.valueChange = d(this, "valueChange", 7), this.checked = !1, this.menuTriggerLabel = "Options", this.onClick = () => {
-      !this.selectable || (this.checked = !this.checked, this.valueChange.emit(this.checked));
-    }, this.onMenuTriggerClick = (r) => {
-      this.disabled && !Boolean(this.href) && r.stopPropagation();
-    };
-  }
-  componentDidLoad() {
-    this.forceAvatarProps(), this.forceThumbnailProps();
-  }
-  forceAvatarProps() {
-    const e = this.el.querySelector("flip-avatar");
-    !Boolean(e) || (e.removeAttribute("interactive"), e.removeAttribute("show-label"), e.removeAttribute("variant"), e.setAttribute("size", "l"));
-  }
-  forceThumbnailProps() {
-    const e = this.el.querySelector("flip-thumbnail");
-    !Boolean(e) || (e.setAttribute("format", "landscape"), ["s", "m"].includes(e.getAttribute("size")) || e.setAttribute("size", "m"));
-  }
-  render() {
-    const e = Boolean(this.href) && !this.selectable ? "a" : "button", r = this.disabled && !Boolean(this.href), i = Boolean(this.menuTriggerId), s = i && !Boolean(this.meta) && !this.selectable, o = Boolean(this.meta) && !this.selectable, a = this.selectable ? String(this.checked) : void 0, l = this.selectable ? "checkbox" : void 0, c = m("resource-list-item", {
-      "resource-list-item--checked": this.checked,
-      "resource-list-item--has-menu": i,
-      "resource-list-item--hide-divider": this.hideDivider,
-      "resource-list-item--selectable": this.selectable
-    });
-    return t(u, { role: "row" }, t("div", { class: c, role: "gridcell" }, t(e, { "aria-checked": a, "aria-disabled": r ? "true" : void 0, "aria-labelledby": "label", class: "resource-list-item__content", href: this.href, disabled: r, onClick: this.onClick, role: l, tabIndex: 0 }, Boolean(this.media) && t("span", { class: "resource-list-item__media", innerHTML: this.media }), t("span", { class: "resource-list-item__label-container" }, t("span", { class: "resource-list-item__label", id: "label" }, this.label), this.description && t("span", { class: "resource-list-item__description" }, this.description))), this.selectable && t("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, t("span", { class: "resource-list-item__checkbox-icon" }, this.checked && t("flip-icon-check-strong", null))), o && t("span", { class: "resource-list-item__meta" }, this.meta), s && t("flip-button", { "aria-disabled": r ? "true" : void 0, class: "resource-list-item__menu-trigger", disabled: r, hideLabel: !0, icon: "<flip-icon-more-horizontal></flip-icon-more-horizontal>", id: this.menuTriggerId, intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })));
-  }
-  get el() {
-    return h(this);
-  }
-};
-p.style = b;
-export {
-  p as flip_resource_list_item
-};

package/dist/flip-resource-list.entry.dca2afcd.js

@@ -1,49 +0,0 @@
-import { r as i, h as o, H as r, g as l } from "./index.b70d4c92.js";
-import "react";
-import "react-dom";
-const n = ":host{display:block;width:100%}:host *{box-sizing:border-box}", c = class {
-  constructor(s) {
-    i(this, s), this.focusedIndex = 0, this.onFocus = () => {
-      this.focusItemAtIndex(this.focusedIndex);
-    }, this.onKeyDown = (e) => {
-      if (e.key === "ArrowDown")
-        e.preventDefault(), this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
-      else if (e.key === "ArrowUp") {
-        e.preventDefault();
-        const t = this.focusedIndex === 0 ? this.items.length - 1 : this.focusedIndex - 1;
-        this.focusItemAtIndex(t);
-      } else
-        e.key === "Home" ? (e.preventDefault(), this.focusItemAtIndex(0)) : e.key === "End" && (e.preventDefault(), this.focusItemAtIndex(this.items.length - 1));
-    };
-  }
-  componentDidLoad() {
-    this.collectItems(), this.removeItemsFromTabOrder();
-  }
-  collectItems() {
-    this.items = Array.from(this.el.querySelectorAll("flip-resource-list-item, flip-resource-list-file-item"));
-  }
-  removeItemsFromTabOrder() {
-    this.items.forEach((s) => {
-      var e, t;
-      return (t = (e = s.shadowRoot) === null || e === void 0 ? void 0 : e.querySelector(".resource-list-item__content, .resource-list-file-item")) === null || t === void 0 ? void 0 : t.setAttribute("tabIndex", "-1");
-    });
-  }
-  focusItemAtIndex(s) {
-    this.removeItemsFromTabOrder();
-    const e = this.items[s];
-    if (!Boolean(e))
-      return;
-    const t = e.shadowRoot.querySelector(".resource-list-item__content, .resource-list-file-item");
-    t.setAttribute("tabIndex", "0"), t.focus(), this.focusedIndex = s;
-  }
-  render() {
-    return o(r, { onKeyDown: this.onKeyDown }, o("flip-stack", { "aria-label": this.label, onFocus: this.onFocus, role: "grid", tabIndex: 0 }, o("slot", null)));
-  }
-  get el() {
-    return l(this);
-  }
-};
-c.style = n;
-export {
-  c as flip_resource_list
-};

package/dist/flip-tabs.entry.a42a1989.js

@@ -1,92 +0,0 @@
-import { r as o, c as r, h as s, H as n, g as b } from "./index.b70d4c92.js";
-import { c as l } from "./index-6d2e18c6.289636d4.js";
-import "react";
-import "react-dom";
-import "./_commonjsHelpers-44457d8d.ba94af77.js";
-const d = ".sc-flip-tabs-h{display:block;width:100%}.sc-flip-tabs-h *.sc-flip-tabs{box-sizing:border-box}.tabs.sc-flip-tabs{width:100%}.tabs__tab-bar.sc-flip-tabs{position:relative;display:flex;width:100%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:flex-start;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (--from-tablet){.tabs__tab-bar.sc-flip-tabs{padding-right:0;padding-left:0}}.tabs__tab.sc-flip-tabs{display:block;min-width:0;margin:0;padding:var(--s-space-4) 0;border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer}.tabs__tab.sc-flip-tabs:focus-visible{outline:none}.tabs__tab.sc-flip-tabs:focus-visible .tabs__tab-label.sc-flip-tabs{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tabs__tab.sc-flip-tabs:not(:first-of-type){padding-left:var(--s-space-8)}.tabs__tab.sc-flip-tabs:not(:last-of-type){padding-right:var(--s-space-8)}.tabs__tab-label.sc-flip-tabs{display:block;overflow:hidden;width:100%;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;text-overflow:ellipsis}.tabs__tab--active.sc-flip-tabs{color:var(--s-text-highlight)}.tabs__indicator.sc-flip-tabs{position:absolute;bottom:0;left:0;width:0;height:0.125rem;border-radius:0.0625rem;background-color:var(--s-border-highlight);transition:background-color 0.15s, transform 0.15s, width 0.15s;transform:translate3d(0, 0, 0);pointer-events:none}@media (prefers-reduced-motion){.tabs__indicator.sc-flip-tabs{transition:none}}", c = class {
-  constructor(t) {
-    o(this, t), this.tabActivated = r(this, "tabActivated", 7), this.tabs = [], this.onKeyDown = (i) => {
-      i.code === "ArrowLeft" ? (i.preventDefault(), this.activatePreviousTab()) : i.code === "ArrowRight" && (i.preventDefault(), this.activateNextTab());
-    }, this.onMouseEnter = (i, a) => {
-      if (a.tabId === this.activeTab) {
-        this.highlightedTab = void 0;
-        return;
-      }
-      this.highlightedTab = i.target.closest(".tabs__tab") || void 0;
-    }, this.onMouseLeave = () => {
-      this.highlightedTab = void 0;
-    };
-  }
-  componentWillLoad() {
-    this.collectTabs();
-  }
-  componentDidRender() {
-    this.updateIndicatorPosition();
-  }
-  onWindowResize() {
-    this.updateIndicatorPosition();
-  }
-  async activateTab(t) {
-    if (this.activeTab === t)
-      return;
-    this.activeTab = t, this.tabs.forEach((a) => a.active = !1);
-    const i = this.tabs.find((a) => a.tabId === t);
-    !Boolean(i) || (this.highlightedTab = void 0, i.active = !0, this.tabActivated.emit(i));
-  }
-  activateNextTab() {
-    const t = this.tabs.findIndex((a) => a.tabId === this.activeTab), i = Math.min(this.tabs.length - 1, t + 1);
-    this.activateTab(this.tabs[i].tabId), requestAnimationFrame(() => {
-      var a;
-      (a = this.el.querySelector(".tabs__tab--active")) === null || a === void 0 || a.focus();
-    });
-  }
-  activatePreviousTab() {
-    const t = this.tabs.findIndex((a) => a.tabId === this.activeTab), i = Math.max(0, t - 1);
-    this.activateTab(this.tabs[i].tabId), requestAnimationFrame(() => {
-      var a;
-      (a = this.el.querySelector(".tabs__tab--active")) === null || a === void 0 || a.focus();
-    });
-  }
-  collectTabs() {
-    if (this.tabs = Array.from(this.el.querySelectorAll("flip-tab")), this.tabs.length === 0)
-      return;
-    const t = this.tabs.find((i) => i.tabId === this.initialTab);
-    this.activateTab(Boolean(t) ? t.tabId : this.tabs[0].tabId);
-  }
-  updateIndicatorPosition() {
-    const t = this.tabs.find((e) => e.tabId === this.activeTab);
-    if (!Boolean(t) && !Boolean(this.highlightedTab)) {
-      this.indicatorEl.style.width = "", this.indicatorEl.style.transform = "", this.indicatorEl.style.backgroundColor = "";
-      return;
-    }
-    const a = (this.highlightedTab || this.el.querySelector(`#tab-${t.tabId}`)).querySelector(".tabs__tab-label");
-    this.indicatorEl.style.width = `${a.getBoundingClientRect().width / 16}rem`, this.indicatorEl.style.transform = `translate3d(${a.offsetLeft / 16}rem, 0, 0)`, this.indicatorEl.style.backgroundColor = Boolean(this.highlightedTab) ? "var(--s-border-default)" : "";
-  }
-  render() {
-    return s(n, null, s("div", { class: "tabs" }, s("div", { "aria-label": this.label, class: "tabs__tab-bar", onKeyDown: this.onKeyDown, role: "tablist" }, this.tabs.map((t) => {
-      const i = t.tabId === this.activeTab, a = l("tabs__tab", {
-        "tabs__tab--active": i
-      });
-      return s("button", {
-        "aria-controls": t.tabId,
-        "aria-selected": i ? "true" : "false",
-        class: a,
-        id: `tab-${t.tabId}`,
-        key: t.tabId,
-        onClick: () => this.activateTab(t.tabId),
-        onMouseEnter: (e) => this.onMouseEnter(e, t),
-        onMouseLeave: this.onMouseLeave,
-        role: "tab",
-        tabIndex: i ? 0 : -1,
-        type: "button"
-      }, s("span", { class: "tabs__tab-label" }, t.label));
-    }), s("span", { class: "tabs__indicator", ref: (t) => this.indicatorEl = t })), s("slot", null)));
-  }
-  get el() {
-    return b(this);
-  }
-};
-c.style = d;
-export {
-  c as flip_tabs
-};

package/dist/flip-text-input.entry.8deff49d.js

@@ -1,55 +0,0 @@
-import { r, c as h, h as t, H as c } from "./index.b70d4c92.js";
-import { c as d } from "./index-6d2e18c6.289636d4.js";
-import "react";
-import "react-dom";
-import "./_commonjsHelpers-44457d8d.ba94af77.js";
-const x = '.sc-flip-text-input-h{display:block;width:100%}.sc-flip-text-input-h *.sc-flip-text-input{box-sizing:border-box}.text-input.sc-flip-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)}.text-input--clearable.sc-flip-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--type-number.sc-flip-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-flip-text-input .text-input__input.sc-flip-text-input{width:100%}.text-input--disabled.sc-flip-text-input .text-input__character-counter.sc-flip-text-input{color:var(--s-text-disabled)}.text-input__input.sc-flip-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-flip-text-input:focus{outline:none}.text-input__input.sc-flip-text-input:disabled{color:var(--s-text-disabled);background-color:transparent}.text-input__input.sc-flip-text-input::-webkit-outer-spin-button,.text-input__input.sc-flip-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type="number"].sc-flip-text-input{-moz-appearance:textfield}input.text-input__input.sc-flip-text-input:not([type="password"]){width:0.25rem;min-width:0.25rem}.text-input__clear-button.sc-flip-text-input,.text-input__password-toggle.sc-flip-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-flip-text-input:focus,.text-input__password-toggle.sc-flip-text-input:focus{outline-color:var(--s-focus-default)}.text-input__stepper.sc-flip-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}.text-input__step-button.sc-flip-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-flip-text-input:focus{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-flip-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}.text-input__prefix.sc-flip-text-input{padding-right:var(--s-space-4);font-size:var(--s-font-size-base)}.text-input__suffix.sc-flip-text-input{padding-left:var(--s-space-4);font-size:var(--s-font-size-base)}', f = class {
-  constructor(s) {
-    r(this, s), this.valueChange = h(this, "valueChange", 7), this.autoComplete = "on", this.clearButtonLabel = "Clear input", this.rows = 1, this.passwordToggleLabel = "Toggle password display", this.type = "text", this.showPassword = !1, this.clear = () => {
-      this.inputEl.value = "", this.value = "", this.valueChange.emit(""), this.inputEl.focus();
-    }, this.onChange = (e) => {
-      const i = e.target;
-      this.value = i.value, this.valueChange.emit(i.value);
-    }, this.onFocus = (e) => {
-      this.handleAutoSelect(e);
-    }, this.onInput = (e) => {
-      this.onChange(e);
-    }, this.onKeyPress = (e) => {
-      this.type === "number" && ["+", "-", "e"].includes(e.key) && e.preventDefault();
-    }, this.decreaseValue = () => {
-      if (this.type !== "number")
-        return;
-      const e = this.step || 1, i = isNaN(this.inputEl.valueAsNumber) ? this.min !== void 0 ? this.min + 1 : 1 : this.inputEl.valueAsNumber;
-      this.value = String(Math.max(this.min || -1 / 0, i - e)), this.valueChange.emit(this.value);
-    }, this.increaseValue = () => {
-      if (this.type !== "number")
-        return;
-      const e = this.step || 1, i = isNaN(this.inputEl.valueAsNumber) ? this.min !== void 0 ? this.min - 1 : -1 : this.inputEl.valueAsNumber;
-      this.value = String(Math.min(this.max || 1 / 0, i + e)), this.valueChange.emit(this.value);
-    }, this.togglePassword = () => {
-      this.type === "password" && (this.showPassword = !this.showPassword);
-    };
-  }
-  componentDidRender() {
-    this.adjustInputSize();
-  }
-  adjustInputSize() {
-    this.rows > 1 && (this.inputEl.style.width = "", this.inputEl.style.height = "", this.inputEl.style.height = this.inputEl.scrollHeight / 16 + "rem"), this.rows === 1 && (this.inputEl.style.height = "", this.inputEl.style.width = "", this.type !== "password" && (this.inputEl.style.width = this.inputEl.scrollWidth / 16 + "rem"));
-  }
-  handleAutoSelect(s) {
-    !this.autoSelect || s.target.select();
-  }
-  render() {
-    var s;
-    const e = this.rows === 1 ? "input" : "textarea", i = this.invalid === !0 ? "true" : this.invalid === !1 ? "false" : void 0, n = this.type === "number" && !this.disabled, a = this.type === "password" && !this.disabled, l = this.clearable && !this.disabled && Boolean(this.value) && !a && !n && !this.showCharacterCounter, p = this.type === "password" && this.showPassword ? "text" : this.type, u = d("text-input", `text-input--type-${this.type}`, {
-      "text-input--clearable": this.clearable,
-      "text-input--disabled": this.disabled,
-      "text-input--show-password": this.type === "password" && this.showPassword
-    });
-    return t(c, null, t("div", { class: u }, this.prefixLabel && t("span", { class: "text-input__prefix" }, this.prefixLabel), t(e, { "aria-describedby": this.flipAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": i, 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, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, ref: (o) => this.inputEl = o, required: this.required, rows: this.rows > 1 ? this.rows : void 0, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : void 0, type: p, value: this.rows === 1 ? this.value : void 0 }, this.rows > 1 && this.value), this.suffixLabel && t("span", { class: "text-input__suffix" }, this.suffixLabel), l && t("button", { "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, type: "button" }, t("flip-icon-cancel", null)), a && t("button", { "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? t("flip-icon-visibility-off", null) : t("flip-icon-visibility", null)), n && t("span", { class: "text-input__stepper" }, t("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, t("flip-icon-expand-less", null)), t("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, t("flip-icon-expand-more", null))), this.showCharacterCounter && t("span", { class: "text-input__character-counter" }, ((s = this.value) === null || s === void 0 ? void 0 : s.length) || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")));
-  }
-};
-f.style = x;
-export {
-  f as flip_text_input
-};